菜单
AI 기반 디자인 인텔리전스. 49개 산업별 추론 규칙, 40개 UI 스타일, 184개 UX 가이드라인, 색상 팔레트, 타이포그래피 규칙을 이용해 제품 유형에 맞는 전문가급 디자인 시스템을 생성한다.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Hbin77/claude-code-kit --skill ui-ux-pro-max命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | ui-ux-pro-max |
| description | AI 기반 디자인 인텔리전스. 49개 산업별 추론 규칙, 40개 UI 스타일, 184개 UX 가이드라인, 색상 팔레트, 타이포그래피 규칙을 이용해 제품 유형에 맞는 전문가급 디자인 시스템을 생성한다. |
Claude Code 내장 디자인 브레인. Python 스크립트 없이 지식 기반으로 동작한다.
이 스킬은 규모가 커서 3개 참조 파일로 분리했다. 목적별로 Read로 필요한 파일만 로드한다.
| 파일 | 용도 | 언제 읽는가 |
|---|---|---|
reasoning-rules.md | 49개 산업별 추론 규칙 (제품 유형 → 패턴·스타일·컬러·효과·안티패턴) | Step 2 "디자인 시스템 생성" |
styles.md | 40개 UI 스타일 상세 (글래스모피즘/브루탈리즘/클레이모피즘 등 + 컬러/효과/조합 가이드) | 스타일 선택·대체 시 |
ux-guidelines.md | 184개 UX 체크리스트 (§1–§10) + 전달 전 최종 검증 27개 (접근성·터치·성능·폼·네비게이션·차트) | Step 5 "전달 전 검증" |
요청에서 다음을 추출한다:
한 축이라도 불명확하면 묻기 전에 기본값을 제시하고 사용자 확인 받는다.
reasoning-rules.md를 참조하여 제품 유형에 맞는 설계를 도출한다:
출력물 (MASTER 설계 시스템):
product_type: <Dating App / SaaS Dashboard / Beauty Service / ...>
recommended_pattern: <Hero + Features + CTA / Data-Dense Dashboard / ...>
style_priority: <Primary Style + Secondary Style>
color_mood: <Navy + Trust Blue + Gold / Warm pastels + Pink / ...>
typography_mood: <Professional + Hierarchy / Friendly + Playful / ...>
key_effects:
- <animation timing>
- <hover/press behavior>
페이지별 override (선택): 페이지별 특수 요구(예: 체크아웃 페이지는 신뢰성 강조) 있으면 페이지 파일로 분기 작성.
styles.md에서 선택된 스타일의 정확한 값을 가져와 프로젝트 토큰으로 확정한다:
WCAG AA 최소 4.5:1 대비는 토큰 확정 시 검증한다.
Stitch MCP가 연결되어 있으면 Step 2·3에서 확정된 설계를 기반으로 구체적 프롬프트로 목업을 생성한다.
❌ Bad: "Modern SaaS dashboard" ✅ Good: "SaaS dashboard, Glassmorphism + Flat Design style, Trust Blue (#0066CC) primary + Neutral grey, Professional typography hierarchy, subtle 200ms hover transitions, 8pt spacing, sidebar navigation with data-dense KPI cards"
Stitch가 없으면 이 단계는 건너뛰고 바로 코드 구현으로 간다 (디자인 토큰이 이미 확정되었으므로 가능).
ux-guidelines.md의 체크리스트를 돌린다. CRITICAL 항목 (접근성·터치 타겟·명암비)은 반드시 통과.
검증 결과의 심각도는 아래 심각도 체계의 CRITICAL / WARNING / INFO 3단계로 보고한다.
| # | 카테고리 | 영향도 | 핵심 체크 |
|---|---|---|---|
| 1 | 접근성 | CRITICAL | 명암비 4.5:1, 포커스 링, ARIA 레이블, 키보드 네비 |
| 2 | 터치 & 상호작용 | CRITICAL | ≥44×44pt 타겟, 8pt 간격, 로딩 피드백, 호버만 의존 금지 |
| 3 | 성능 | HIGH | WebP/AVIF, 레이지 로딩, CLS < 0.1 |
| 4 | 스타일 선택 | HIGH | 제품 유형 매칭, 일관성, SVG 아이콘 (이모지 아이콘 금지) |
| 5 | 레이아웃 & 반응형 | HIGH | 모바일 퍼스트, 가로 스크롤 없음, 안전 영역 |
| 6 | 타이포그래피 & 컬러 | MEDIUM | 본문 ≥16px, 줄높이 1.5+, 시맨틱 토큰 (raw hex 금지) |
| 7 | 애니메이션 | MEDIUM | 150–300ms, 의미 있는 모션, transform/opacity만 |
| 8 | 폼 & 피드백 | MEDIUM | 가시 레이블, 필드 근처 오류, 인라인 검증 |
| 9 | 네비게이션 | HIGH | 하단 네비 ≤5, 예측 가능한 백, 딥 링킹 |
| 10 | 차트 & 데이터 | LOW | 범례, 툴팁, 접근 가능 색상 (색만으로 의미 전달 금지) |
검증·리뷰 결과는 CRITICAL / WARNING / INFO 3단계로만 보고한다. reasoning-rules.md가 방출하는 규칙 severity(HIGH / MEDIUM / LOW)는 아래 매핑으로 변환한다:
| reasoning-rules severity | 게이트 판정 | 의미 |
|---|---|---|
| HIGH | CRITICAL | 게이트 차단 — 미해결 시 머지 금지 |
| MEDIUM | WARNING | 수정 권장 — 사유 기록 후 조건부 통과 가능 |
| LOW | INFO | 참고 — 개선 여지 안내 |
위 "규칙 카테고리 우선순위" 표의 영향도(CRITICAL/HIGH/MEDIUM/LOW)는 카테고리별 중요도 척도이며, 개별 검증 결과 보고 시에는 이 3단계(CRITICAL/WARNING/INFO)로 환산해 표기한다. (카테고리 HIGH ⇒ CRITICAL, MEDIUM ⇒ WARNING, LOW ⇒ INFO)
이 스킬은 ~/.claude/rules/workflow.md의 Design Phase가 자동 활성화한다. 사용자가 UI/프론트엔드 작업을 요청하면:
design-system/MASTER.md 또는 프로젝트 토큰)/design-system — 제품 유형만 주면 MASTER 설계 시스템 자동 생성/design-audit — 현재 코드의 안티패턴·접근성 위반 스캔/design-setup — Stitch MCP 연결 가이드 (옵션)