/SKILL

design-start

사용자가 새 서비스/앱/프로젝트를 만들고 싶다고 하거나, 디자인 작업을 시작하려 할 때 사용하는 디자인 워크플로우 오케스트레이터. PRD 확인 → 디자인 리서치 → 무드보드 → 디자인 시스템 → 프리뷰 → 피드백 순서로 상용 수준의 디자인을 만들어낸다.

핵심 원칙

• 사람 = 판단, 선택, 피드백 (디자인 감각)
• AI = 수집, 분석, 저장, 생성, 수정 (실행)
• 매 세션마다 컨텍스트를 다시 설명하지 않아도 되는 영구적 구조
• 어떤 프로젝트에든 플러그인으로 적용 가능

---

전체 파이프라인

아이디어 구체화
  → [확인] PRD 확인 & 정리                       ← Step 0: PRD 확인
    → [자동] 디자인 레퍼런스 수집 & 분석           ← /design-research
      → [자동] 무드보드/디자인시스템 초안 생성      ← /moodboard + /design-system-gen
        → [사람] 방향 선택                         ← 사용자가 Option 선택
          → [자동] 서비스 느낌 프리뷰 생성          ← /design-preview
            → [사람] 피드백                        ← 사용자 피드백
              → [자동] 디자인 수정 반영             ← /design-feedback
                → 프론트 개발 진행

각 단계별 역할 분담

단계	주체	하는 일
아이디어 구체화	사람	무엇을 만들지 결정
PRD 확인	AI+사람	PRD 존재 확인 → 읽기/정리/작성
레퍼런스 수집	AI+사람	AI가 검색/분석, 사람이 스크린샷 수집
무드보드/디자인시스템	AI	3~4가지 방향 시안 생성
방향 선택	사람	시안 비교 후 하나 선택
프리뷰	AI	선택된 방향으로 핵심 화면 코드 생성
피드백	사람	"여기 간격 좀 더", "색 톤 낮춰줘"
수정 반영	AI	피드백을 토큰 레벨로 번역하여 적용
프론트 개발	AI+사람	확정된 디자인 시스템 기반 개발

---

사용 가능한 서브 커맨드

커맨드	설명	트리거
/design-research	PRD에서 디자인 레퍼런스 수집 & 분석	"디자인 리서치", "레퍼런스 수집", "경쟁사 분석"
/design-system-gen	레퍼런스 기반 DESIGN.md 생성	"디자인 시스템 만들어줘", "DESIGN.md 생성"
/moodboard	3~4가지 디자인 방향을 코드 시안으로 비교	"무드보드", "디자인 방향", "톤앤매너"
/design-preview	선택된 방향으로 핵심 화면 프리뷰 생성	"프리뷰", "느낌 보여줘", "화면 만들어줘"
/design-feedback	피드백 수렴 → 디자인 수정 반영	"피드백", "수정해줘", "이 부분 바꿔줘"
/save-reference	레퍼런스 이미지 저장 & 분석	"이거 저장", "레퍼런스 추가", "이 디자인 참고"

---

프로젝트 초기화 로직

디자인 워크플로우가 처음 실행되면, 프로젝트에 필요한 디렉토리와 템플릿 파일을 자동 생성한다.

초기화 시 확인할 것

1. docs/ 디렉토리 존재 여부 확인
2. 아래 구조가 없으면 자동 생성

생성할 프로젝트 구조

프로젝트/
├── docs/
│   ├── design-references.md       # 디자인 소스 & 레퍼런스 목록
│   ├── design-system.md           # DESIGN.md (디자인 토큰 & 규칙)
│   ├── references/
│   │   ├── screenshots/           # 스크린샷 아카이브
│   │   └── README.md              # 스크린샷 설명 & 사용법
│   └── knowledge-base/
│       ├── screen-inventory.md    # 생성된 모든 화면 목록
│       ├── component-graph.md     # 컴포넌트 계층 & 재사용 관계
│       ├── visual-language.md     # 디자인 시스템 실제 상태
│       ├── user-flows.md          # 유저 플로우 (화면 간 이동)
│       ├── token-audit.md         # 토큰 커버리지 추적
│       └── _sync-log.md           # 변경 이력 기록

초기화 절차

## Step 1: 디렉토리 구조 확인 & 생성

docs/ 디렉토리가 없으면:
1. 위의 전체 구조를 생성
2. 각 파일에 템플릿 내용을 채워넣기 (templates/ 폴더의 내용 참고)
3. CLAUDE.md에 디자인 워크플로우 섹션 추가 여부를 사용자에게 확인

docs/ 디렉토리가 이미 있으면:
1. 누락된 파일만 생성
2. 기존 파일은 건드리지 않음

## Step 2: 초기화 완료 → PRD 확인으로 이동

초기화가 끝나면 바로 Step 0(PRD 확인)으로 진행한다.

---

Step 0: PRD 확인

프로젝트 초기화가 끝나면, 디자인 리서치로 넘어가기 전에 반드시 PRD를 먼저 확인한다.

사용자에게 질문

"기획 문서(PRD, 기획서, 요구사항 등)가 있으세요?
있다면 파일 경로를 알려주거나 여기에 붙여주세요.
(md, txt, pdf, 노션 링크, 아무 형태든 OK)
없다면 같이 만들어볼게요!"

분기 처리

사용자 응답	AI 행동
파일 경로를 알려줌	해당 파일 읽기 → 내용 확인 → "PRD 확인했습니다. 디자인 리서치를 시작할까요?"
텍스트를 붙여줌	docs/prd.md로 정리하여 저장 → 사용자 확인 → "PRD 정리 완료! 디자인 리서치를 시작할까요?"
없다고 함	대화형 PRD 작성 시작 (아래 절차)

PRD가 없을 때: 대화형 작성

아래 항목을 하나씩 물어보며 PRD를 함께 작성한다:

1. 서비스 목적 — "어떤 문제를 해결하는 서비스인가요?"
2. 타겟 사용자 — "주요 사용자는 누구인가요?"
3. 핵심 기능 — "반드시 있어야 할 기능 3~5가지는?"
4. 경쟁사/레퍼런스 — "참고하는 서비스가 있나요?"
5. 톤앤매너 힌트 — "원하는 느낌이 있나요? (모던, 미니멀, 활기찬 등)"

작성 완료 후:

1. docs/prd.md에 저장
2. 사용자에게 내용 확인 요청
3. 확인되면 → "PRD가 준비됐어요! 디자인 리서치를 시작할까요?"

---

Knowledge Base 활용

Knowledge base는 프로젝트의 디자인 현황을 마크다운으로 유지하여, 새 세션에서도 Claude가 빠르게 파악할 수 있게 한다.

핵심 원칙: 코드가 source of truth

• knowledge-base는 코드를 설명하는 것이지, 코드를 대체하는 게 아니다
• 코드가 변하면 knowledge-base도 업데이트되어야 한다
• post-edit-design-sync.sh hook이 업데이트 필요 여부를 자동 감지

세션 시작 시 읽는 순서

1. docs/design-system.md — 현재 디자인 토큰 확인
2. docs/knowledge-base/screen-inventory.md — 어떤 화면이 있는지
3. docs/knowledge-base/component-graph.md — 컴포넌트 재사용 현황
4. docs/knowledge-base/_sync-log.md — 최근 변경 사항

각 파일의 역할

파일	역할	업데이트 시점
screen-inventory.md	모든 화면 목록 + 상태	새 화면 생성/수정 시
component-graph.md	컴포넌트 계층 & 재사용	새 컴포넌트 생성 시
visual-language.md	디자인 시스템 실제 상태	토큰 변경 시
user-flows.md	화면 간 이동 흐름	새 플로우 추가 시
token-audit.md	토큰 커버리지 (하드코딩 추적)	hook 감지 시
_sync-log.md	모든 변경 이력	매 변경 시 자동

---

권장 워크플로우 순서

새 프로젝트 시작 시

1. /design-start             → 프로젝트 초기화 + PRD 확인
2. /design-research          → PRD 기반 레퍼런스 수집
3. /moodboard                → 3~4가지 방향 시안 생성 & 선택
4. /design-system-gen        → 선택된 방향으로 디자인 시스템 확정
5. /design-preview           → 핵심 화면 프리뷰
6. /design-feedback          → 피드백 → 수정 반복
7. 프론트 개발 진행

진행 중인 프로젝트에 추가 시

1. /design-start             → 기존 구조 확인 & 누락분 생성
2. /save-reference           → 새 레퍼런스 추가
3. /design-preview           → 새 화면 프리뷰
4. /design-feedback          → 피드백 반영

---

단계 전환 가이드

각 단계가 완료되면, AI가 자동으로 다음 단계를 제안하여 흐름이 끊기지 않게 한다.

완료된 단계	다음 제안 메시지
프로젝트 초기화	→ Step 0 PRD 확인으로 자동 진행
PRD 확인 완료	"PRD가 준비됐어요! 디자인 리서치를 시작할까요?"
디자인 리서치 완료	"레퍼런스 수집이 완료됐어요. 무드보드를 만들까요?"
무드보드 방향 선택 완료	"방향이 정해졌어요! 디자인 시스템을 생성할까요?"
디자인 시스템 생성 완료	"디자인 시스템이 준비됐어요. 핵심 화면 프리뷰를 만들까요?"
프리뷰 생성 완료	"프리뷰가 완성됐어요. 피드백을 주시면 바로 반영할게요!"
피드백 반영 완료	"수정 완료! 추가 피드백이 있으신가요? 없으면 프론트 개발로 넘어갈까요?"

---

주의사항

• 한 플로우를 완전히 끝내고 다음으로 (한꺼번에 다 만들기 금지)
• 색상 하드코딩 금지 — CSS 변수 또는 Tailwind 토큰만 사용 (hook으로 강제)
• 새 컴포넌트 만들기 전 기존 컴포넌트 확인 (hook으로 강제)
• 모든 화면은 4가지 상태 고려: 로딩, 에러, 빈 상태, 성공
• 다크모드는 처음부터 고려
• shadcn/ui 기본 테마를 그대로 쓰지 않음 — 반드시 커스텀 테마 적용