design-token

design-token

목적

2-step 디자인 파이프라인: Phase A (레퍼런스 수집 → DESIGN_BRIEF.md 생성) → Phase B (토큰/DESIGN.md 생성).

Parse --step from $ARGUMENTS:

• --step brief → Run Phase A only (design-reference 로직)
• --step token → Run Phase B only (기존 design-token 로직)
• --step all or no flag → Run Phase A then Phase B

---

Phase A — 레퍼런스 수집 (--step brief)

100개 큐레이션 레퍼런스 기반으로 타겟에 맞는 디자인 방향성을 DESIGN_BRIEF.md로 문서화한다. AI가 디자인을 생성하지 않는다. AI는 레퍼런스 필터링과 패턴 추출을 구조화한다.

게이트 체크 (Phase A 실행 전)

이전 discover 단계 타겟 프로파일을 확인한다. 없으면:

"타겟 프로파일이 없습니다. discover 단계를 먼저 완료하거나 타겟(카테고리/대상/톤)을 직접 입력하시겠습니까? (입력: t)"

실행 흐름 (Phase A)

A1 — 타겟 읽기 discover 단계 결과에서 카테고리·대상·톤을 추출한다. 없으면 사용자에게 직접 입력 요청.

A2 — ASCII 미리보기 출력

레퍼런스 목록을 보여주기 전에 반드시 아래 형식으로 출력:

┌─── design-reference 실행 ────────────────────────┐
│  타겟: [카테고리] / [대상] / [톤]                │
│                                                  │
│  [한국] (번호) 사이트명 — 핵심 특징              │
│         ...                                      │
│  [글로벌] (번호) 사이트명 — 핵심 특징            │
│           ...                                    │
│                                                  │
│  번호로 5-7개 선택 / 전체 분석 (a) / 직접 입력 (m)│
└──────────────────────────────────────────────────┘

A3 — 레퍼런스 필터링 references/site-list-kr.md와 references/site-list-global.md에서 타겟 카테고리 일치 항목을 우선 추출한다. 카테고리 일치 < 6개이면 유사 카테고리로 보완. 타겟 사용자가 자주 쓰는 다른 카테고리 1-2개 추가 권고 (이유: 사용자의 디자인 기대값은 주로 쓰는 모든 앱에서 형성됨).

A4 — 패턴 추출 선택된 5-7개에서 references/design-wisdom.md 원칙 적용:

• 레이아웃 패턴
• 컬러 방향성 (헥스코드 + WCAG 대비비 포함 필수)
• 타이포그래피 (스케일 비율 + 기본 px 포함 필수)
• 인터랙션 패턴

패턴마다 design-wisdom.md do/don't 원칙(원칙 3) 적용: ❌/✅ 1쌍 포함. 랜딩/전환 페이지는 LIFT 모델(프레임워크 10) 4개 요소도 체크.

A5 — DESIGN_BRIEF.md 생성

아래 구조로 생성. 추상적 표현 금지 — 모든 결론에 수치 또는 레퍼런스 근거.

# DESIGN_BRIEF.md

## 타겟 프로파일
- 카테고리:
- 대상:
- 톤:

## 선택된 레퍼런스
| 사이트 | 카테고리 | 적용할 패턴 | 선택 이유 |

## 추출된 디자인 방향성

### 레이아웃
[설명 + ❌/✅ do/don't 1쌍]

### 컬러
[헥스코드 + WCAG 대비비 + ❌/✅ 1쌍]

### 타이포그래피
[스케일 비율 + 기본 px + ❌/✅ 1쌍]

### 인터랙션
[ms + easing + ❌/✅ 1쌍]

## 디자인 방향성 결론
[2-3줄. 구체적 수치와 레퍼런스 사이트로 뒷받침]