メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Hbin77/codex-kit --skill design-systemコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| 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.
사용자 입력(the task/scope the user described when invoking this skill (if none given, ask or infer from context))에서 추출 (빠진 정보는 합리적 기본값으로 제시 후 확인):
~/.codex/skills/ui-ux-pro-max/reasoning-rules.md를 로드. 제품 유형 행에서 추출:
Recommended Pattern, Style Priority, Color Mood, Typography Mood, Key Effects, Anti-patterns, Severity.
~/.codex/skills/ui-ux-pro-max/styles.md를 로드. 선택 스타일의 정확한 값 추출:
컬러 팔레트 구체 hex, 타이포그래피 페어링, 애니메이션 시간, 그림자 토큰.
프로젝트 루트에 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 + 스타일 간 금기 조합)
MASTER를 보여주고 확인 받는다. 수정 요청 반영.
특정 페이지가 다른 규칙 필요 시 design-system/pages/{page-name}.md에 override 내용만 명시.
이후 UI 구현 시
design-system/MASTER.md를 먼저 로드하고, 페이지 override가 있으면design-system/pages/{page}.md도 로드하세요.