design-system

name	design-system
description	Generate a MASTER design system using the ui-ux-pro-max skill

Generate a MASTER design system for the current project using the ui-ux-pro-max skill.

1. 요구사항 수집

사용자 입력(the task/scope the user described when invoking this skill (if none given, ask or infer from context))에서 추출 (빠진 정보는 합리적 기본값으로 제시 후 확인):

• 제품 유형 (예: Dating App, SaaS Dashboard, Beauty Service)
• 산업/도메인 (B2B, B2C, Luxury, Government)
• 타겟 사용자 (연령대, 문맥)
• 스타일 키워드 (미니멀, 플레이풀, 럭셔리)
• 스택 (Next.js, React Native, Flutter)
• 밀도/모드 (data-dense vs content, light vs dark)

2. 추론 규칙 조회

~/.codex/skills/ui-ux-pro-max/reasoning-rules.md를 로드. 제품 유형 행에서 추출: Recommended Pattern, Style Priority, Color Mood, Typography Mood, Key Effects, Anti-patterns, Severity.

3. 스타일 상세 조회

~/.codex/skills/ui-ux-pro-max/styles.md를 로드. 선택 스타일의 정확한 값 추출: 컬러 팔레트 구체 hex, 타이포그래피 페어링, 애니메이션 시간, 그림자 토큰.

4. MASTER 디자인 시스템 생성

프로젝트 루트에 design-system/MASTER.md 작성:

# {Project Name} — Design System MASTER

## 제품 컨텍스트
- Product Type / Industry / Target Users / Style Mood

## 추론 결과
- Recommended Pattern / Style Priority
- Anti-patterns (절대 하지 말 것): ...

## 디자인 토큰
### Colors (Light Mode)
--color-primary / primary-hover / secondary / accent
--color-neutral-{50..950}
--color-success / warning / error / info
--color-surface / surface-elevated
--color-text-primary / secondary / muted

### Colors (Dark Mode)
(탈포화 밝은 음, 역색 금지)

### Typography
--font-heading / body / mono
Scale: 12/14/16/18/20/24/30/36/48 · Weights: 400/500/600/700
Line heights: 1.2 (heading) / 1.5 (body) / 1.75 (long-form)

### Spacing (4pt): 0/1/2/3/4/6/8/12/16/24/32/48/64
### Radius: none/sm(4)/md(8)/lg(12)/xl(16)/2xl(24)/full
### Shadows: xs/sm/md/lg/xl (+inner for neumorphism)
### Animation
--duration-fast 150ms / base 200ms / slow 300ms / slower 400ms
--ease-out cubic-bezier(0.16,1,0.3,1) · --ease-in cubic-bezier(0.7,0,0.84,0) · --ease-spring cubic-bezier(0.34,1.56,0.64,1)
### Breakpoints: sm 375 / md 768 / lg 1024 / xl 1440

## 컴포넌트 가이드
(버튼/카드/입력/모달 등 스타일 적용 구체 지침)

## 접근성
- WCAG AA (4.5:1 min) 검증 페어 (primary on white: X.XX, text on surface: X.XX)
- Focus ring: 2–4px primary · Touch targets: ≥44pt

## 금기 (이 프로젝트에서 절대 하지 말 것)
- (추론 규칙의 anti-patterns + 스타일 간 금기 조합)

5. 사용자 승인

MASTER를 보여주고 확인 받는다. 수정 요청 반영.

6. 페이지별 Override (옵션)

특정 페이지가 다른 규칙 필요 시 design-system/pages/{page-name}.md에 override 내용만 명시.

7. 사용 가이드 출력

이후 UI 구현 시 design-system/MASTER.md를 먼저 로드하고, 페이지 override가 있으면 design-system/pages/{page}.md도 로드하세요.

규칙

• 디자인 토큰 구체 값 필수 (placeholder 금지)
• 컬러 페어 WCAG AA 검증값 포함
• Anti-patterns 반드시 명시
• 타겟 스택에 맞는 형식 (Tailwind config / CSS vars / Flutter ThemeData 등)