| name | design-creative |
| description | 창의적 프론트엔드 디자인 — 공식 frontend-design 미학 원칙으로 방향 수립 후 프로젝트 토큰으로 매핑 |
/design-creative
새 프로젝트, 랜딩페이지, 프로토타입 등 기존 디자인 시스템에 얽매이지 않는 창의적 UI 설계가 필요할 때 사용한다.
사용 시점
- 신규 프로젝트 첫 UI 설계
- 랜딩페이지, 마케팅 페이지
- 프로토타입/PoC UI
- 리브랜딩, 대규모 디자인 리뉴얼
- 사용자가 "새로운 느낌", "creative", "bold" 등 요청
사용하지 않을 때
- 기존 디자인 시스템이 있는 프로젝트의 일반 UI 수정 →
/design 사용
- 버그 수정, 컴포넌트 미세 조정 → designer 에이전트 직접 활용
실행 절차
Phase 1: 컨텍스트 파악
- 목적: 이 인터페이스가 해결하는 문제는?
- 대상: 누가 사용하는가?
- 제약: 프레임워크, 성능, 접근성 요구사항
- 차별점: 사용자가 기억할 한 가지는?
Phase 2: 미학 방향 수립 (Creative)
공식 frontend-design 원칙 적용:
- 톤 선택: brutally minimal / maximalist / retro-futuristic / organic / luxury / playful / editorial / brutalist / art deco / soft-pastel / industrial 중 택 1
- 타이포그래피: 맥락에 맞는 개성 있는 폰트 페어링 (display + body)
- 색상: 강한 주조색 + 날카로운 액센트. 소극적 팔레트 금지
- 모션: 고효과 순간 집중 — 페이지 로드 staggered reveal, scroll-triggered, hover surprise
- 공간: 비대칭, 겹침, 대각선, 그리드 파괴, 의도적 여백
- 시각적 깊이: 그라디언트 메시, 노이즈 텍스처, 레이어 투명도, 커스텀 커서
Phase 3: 토큰 브릿지
Phase 2의 창의적 방향을 구조화된 토큰으로 전환:
:root {
--primary: #{선택한 주조색};
--primary-dark: #{어두운 변형};
--accent: #{액센트 색};
--font-display: '{display 폰트}', serif;
--font-body: '{body 폰트}', sans-serif;
--space-unit: 4px;
}
기존 프로젝트 토큰이 있으면:
- 기존 토큰과 충돌 여부 확인
- 확장이 필요하면 Design System Extension Spec 작성
- 기존 토큰명 유지, 값만 변경 제안
Phase 4: 구현 산출물
- Design Direction Document: 미학 방향 + 레퍼런스 + 톤 설명
- Token Spec: CSS 변수 정의서 (신규 또는 확장)
- Component Spec: 핵심 컴포넌트 3~5개의 상세 스펙
- Motion Spec: 애니메이션/트랜지션 정의 (CSS-only 우선, 필요 시 Motion 라이브러리)
Phase 5: 검증
AI Slop 회피 목록
다음은 절대 사용하지 않는다:
- Inter, Roboto, Arial, system-ui를 유일한 폰트로
- 흰 배경 위 보라색 그라디언트
- 모든 프로젝트에 동일한 카드-그리드 레이아웃
- Space Grotesk 반복 사용
- 의미 없는 장식적 블롭/원 배경
- 기본 Tailwind 색상만으로 구성된 팔레트
참조
- 공식 frontend-design 플러그인: anthropics/claude-code plugins/frontend-design
- 기존 designer 에이전트: prompts/designer.md
- 디자인 모드 규칙: .claude/rules/design-mode.md