con un clic
design-creative
창의적 프론트엔드 디자인 — 공식 frontend-design 미학 원칙으로 방향 수립 후 프로젝트 토큰으로 매핑
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Menú
창의적 프론트엔드 디자인 — 공식 frontend-design 미학 원칙으로 방향 수립 후 프로젝트 토큰으로 매핑
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
PDARR pre-spec. 코드베이스 영향 분석 + 실행 전략 추천. 코드 작성 없음.
단위·통합 레벨 QA 자동 실행. 변경 파일 대상.
claude-code-guide를 현재 프로젝트에 자동 설치. 프로젝트 분석 → 프로파일 추천 → 원라이너 실행. --profile solo|team|enterprise|review-only|auto 지원. 전역 설치 후 모든 프로젝트에서 /setup-wizard 호출 가능.
TDD Red 단계. 구현 전 테스트 케이스 작성. 실행 없음.
PRD를 기능 단위로 분해하고 우선순위·의존성·Goal 실행 순서를 정리. /prd 다음, /spec 이전 단계.
PRD(Product Requirements Document) 작성. 새로운 기능 요청에 대한 PRD를 docs/prd/에 생성하고 복잡도 1차 판단 수행. --vibe 옵션으로 바이브코더 인터뷰 가이드 모드 활성화.
| name | design-creative |
| description | 창의적 프론트엔드 디자인 — 공식 frontend-design 미학 원칙으로 방향 수립 후 프로젝트 토큰으로 매핑 |
새 프로젝트, 랜딩페이지, 프로토타입 등 기존 디자인 시스템에 얽매이지 않는 창의적 UI 설계가 필요할 때 사용한다.
/design 사용공식 frontend-design 원칙 적용:
Phase 2의 창의적 방향을 구조화된 토큰으로 전환:
/* 신규 프로젝트 토큰 제안 형식 */
:root {
/* Primary Palette */
--primary: #{선택한 주조색};
--primary-dark: #{어두운 변형};
--accent: #{액센트 색};
/* Typography */
--font-display: '{display 폰트}', serif;
--font-body: '{body 폰트}', sans-serif;
/* Spacing Scale */
--space-unit: 4px; /* 기본 단위 유지 */
}
기존 프로젝트 토큰이 있으면:
다음은 절대 사용하지 않는다: