$design
제품, UI/UX, 프런트엔드, 디자인 시스템 결정을 위한 canonical DESIGN.md 워크플로우
$design는 v0.17에 추가된 공식 디자인 워크플로우입니다. 구현 전에 repo-local DESIGN.md를 만들거나 갱신해서 제품, UI/UX, 프런트엔드, 디자인 시스템 결정의 durable source of truth를 남깁니다.
언제 쓰나
- UI/프런트엔드 구현 전에 디자인 방향이 필요할 때
- 저장소에 오래 유지되는 design brief나 design-system contract가 없을 때
- 기존 화면, 컴포넌트, asset, screenshot을 재사용 가능한 guidance로 정리해야 할 때
- 제품/디자인 맥락이 비어 있어 질문하거나, 명시적으로 가정하거나, open question으로 남겨야 할 때
$ralph,$team, 구현 작업 전에 기능의 design contract가 필요할 때
호출
$design "create a design contract for the dashboard refresh"동작 방식
DESIGN.md, 문서, route, layout, component, theme file, token, asset, screenshot, mockup, Storybook, visual-regression artifact를 먼저 확인합니다.- 사용자, job, 제품 목표, brand constraint, 주요 flow, 접근성 목표, device support, 구현 제약처럼 디자인 결정에 필요한 누락 맥락만 짧게 질문합니다.
- repo root의
DESIGN.md를 만들거나 갱신하고, 필수 섹션을 채웁니다. - 이후 UI/UX/프런트엔드 구현과 review는
DESIGN.md를 계약처럼 참조합니다.
필수 DESIGN.md 섹션
- Source of truth
- Brand
- Product goals
- Personas and jobs
- Information architecture
- Design principles
- Visual language
- Components
- Accessibility
- Responsive behavior
- Interaction states
- Content voice
- Implementation constraints
- Open questions
$design vs $frontend-ui-ux
$design가 canonical workflow입니다. $frontend-ui-ux는 기존 프롬프트 호환을 위한 shortcut으로 남아 있지만, 저장소에 남아야 하는 제품, UI/UX, 프런트엔드, 디자인 시스템 결정은 새 작업에서 $design로 시작하세요.
$design vs $visual-ralph
$design는 durable design source of truth를 세우는 역할입니다. $visual-ralph는 승인된 generated image나 static mockup, screenshot, live URL을 실제로 구현하고 시각적으로 반복해 맞춰야 할 때만 씁니다. 둘 다 필요하다면 순서가 있습니다. 먼저 $design로 design contract를 잡고, 그렇게 승인된 visual reference를 $visual-ralph에 넘깁니다.
완료 체크리스트
- 기존 design doc, asset, component, screenshot, theme file을 확인했거나 없다고 기록했습니다.
- 누락된 product/design context가 답변, 가정, 또는 open question으로 남았습니다.
- repo root에
DESIGN.md가 있고 필수 섹션이 포함되어 있습니다. - 이후 UI/UX/프런트엔드 작업이 암묵적 취향 대신
DESIGN.md를 인용합니다. $visual-ralphhandoff가 있다면DESIGN.mdgovernance와 분리해 명확히 적었습니다.