메뉴
AI 기반 디자인 인텔리전스. 49개 산업별 추론 규칙, 40개 UI 스타일, 184개 UX 가이드라인, 색상 팔레트, 타이포그래피 규칙을 이용해 제품 유형에 맞는 전문가급 디자인 시스템을 생성한다.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/Hbin77/claude-code-kit --skill ui-ux-pro-max명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
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 연결 가이드 (옵션)