사용자가 새 서비스/앱/프로젝트를 만들고 싶다고 하거나, 디자인 작업을 시작하려 할 때 사용하는 디자인 워크플로우 오케스트레이터. PRD 확인 → 디자인 리서치 → 무드보드 → 디자인 시스템 → 프리뷰 → 피드백 순서로 상용 수준의 디자인을 만들어낸다.
How this command is triggered — by the user, by Claude, or both
Slash command
/my-design-flow-skills:SKILLThe summary Claude sees in its command listing — used to decide when to auto-load this command
# design-start 사용자가 새 서비스/앱/프로젝트를 만들고 싶다고 하거나, 디자인 작업을 시작하려 할 때 사용하는 디자인 워크플로우 오케스트레이터. PRD 확인 → 디자인 리서치 → 무드보드 → 디자인 시스템 → 프리뷰 → 피드백 순서로 상용 수준의 디자인을 만들어낸다. ## 핵심 원칙 - **사람** = 판단, 선택, 피드백 (디자인 감각) - **AI** = 수집, 분석, 저장, 생성, 수정 (실행) - 매 세션마다 컨텍스트를 다시 설명하지 않아도 되는 영구적 구조 - 어떤 프로젝트에든 플러그인으로 적용 가능 --- ## 전체 파이프라인 ### 각 단계별 역할 분담 | 단계 | 주체 | 하는 일 | |------|------|---------| | 아이디어 구체화 | 사람 | 무엇을 만들지 결정 | | PRD 확인 | AI+사람 | PRD 존재 확인 → 읽기/정리/작성 | | 레퍼런스 수집 | AI+사람 | AI가 검색/분석, 사람이 스크린샷 수집 | | 무드보드/디자인시스템 | AI | 3~4가지 방향 시안 생성 | | 방향 선택 | 사람 | 시안 비교 후 하나 선택 | | 프리뷰 | AI | 선택된 방향으로 핵심 화면 코...
사용자가 새 서비스/앱/프로젝트를 만들고 싶다고 하거나, 디자인 작업을 시작하려 할 때 사용하는 디자인 워크플로우 오케스트레이터. PRD 확인 → 디자인 리서치 → 무드보드 → 디자인 시스템 → 프리뷰 → 피드백 순서로 상용 수준의 디자인을 만들어낸다.
아이디어 구체화
→ [확인] 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 | 레퍼런스 이미지 저장 & 분석 | "이거 저장", "레퍼런스 추가", "이 디자인 참고" |
디자인 워크플로우가 처음 실행되면, 프로젝트에 필요한 디렉토리와 템플릿 파일을 자동 생성한다.
docs/ 디렉토리 존재 여부 확인프로젝트/
├── 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 확인)으로 진행한다.
프로젝트 초기화가 끝나면, 디자인 리서치로 넘어가기 전에 반드시 PRD를 먼저 확인한다.
"기획 문서(PRD, 기획서, 요구사항 등)가 있으세요?
있다면 파일 경로를 알려주거나 여기에 붙여주세요.
(md, txt, pdf, 노션 링크, 아무 형태든 OK)
없다면 같이 만들어볼게요!"
| 사용자 응답 | AI 행동 |
|---|---|
| 파일 경로를 알려줌 | 해당 파일 읽기 → 내용 확인 → "PRD 확인했습니다. 디자인 리서치를 시작할까요?" |
| 텍스트를 붙여줌 | docs/prd.md로 정리하여 저장 → 사용자 확인 → "PRD 정리 완료! 디자인 리서치를 시작할까요?" |
| 없다고 함 | 대화형 PRD 작성 시작 (아래 절차) |
아래 항목을 하나씩 물어보며 PRD를 함께 작성한다:
작성 완료 후:
docs/prd.md에 저장Knowledge base는 프로젝트의 디자인 현황을 마크다운으로 유지하여, 새 세션에서도 Claude가 빠르게 파악할 수 있게 한다.
post-edit-design-sync.sh hook이 업데이트 필요 여부를 자동 감지docs/design-system.md — 현재 디자인 토큰 확인docs/knowledge-base/screen-inventory.md — 어떤 화면이 있는지docs/knowledge-base/component-graph.md — 컴포넌트 재사용 현황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가 준비됐어요! 디자인 리서치를 시작할까요?" |
| 디자인 리서치 완료 | "레퍼런스 수집이 완료됐어요. 무드보드를 만들까요?" |
| 무드보드 방향 선택 완료 | "방향이 정해졌어요! 디자인 시스템을 생성할까요?" |
| 디자인 시스템 생성 완료 | "디자인 시스템이 준비됐어요. 핵심 화면 프리뷰를 만들까요?" |
| 프리뷰 생성 완료 | "프리뷰가 완성됐어요. 피드백을 주시면 바로 반영할게요!" |
| 피드백 반영 완료 | "수정 완료! 추가 피드백이 있으신가요? 없으면 프론트 개발로 넘어갈까요?" |
npx claudepluginhub hye-on/ai-builder-marketplace --plugin my-design-flow-skills/SKILLResolves GitHub issue via isolated worktree, TDD workflow, and auto-closing PR creation.
/SKILLCreates conventional git commit from conversation intent using git-agent and pushes to remote. Accepts optional Claude model name for co-author.
/SKILLSurfaces current session task from state file, evaluates clarity (prompts for clarification if needed), assesses completion, and verifies if fully done.