design-system

Files (1)

• SKILL.md

SKILL.md (first lines)

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` 작성:
```markdown
# {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 등)

From Hbin77/codex-kit, MIT.

More from Hbin77/codex-kit