# ui-ux-pro-max-skill 상세 분석 보고서

> 분석일: 2026-04-12
> GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
> 버전: v2.5.0 (skill.json 기준)
> 스타: 63,154+
> 라이선스: MIT
> 분석팀: dev2 (토르, 프레이야, 미미르, 헤임달)

---

## 1. 레포 전체 구조 분석

### 1.1 디렉토리 구조

```
ui-ux-pro-max-skill/
├── .claude/skills/           ← Claude Code 전용 스킬 (7개)
│   ├── ui-ux-pro-max/        ← 메인 UI/UX 인텔리전스 스킬
│   ├── design/               ← 디자인 통합 오케스트레이터
│   ├── design-system/        ← 토큰 아키텍처 + 슬라이드
│   ├── brand/                ← 브랜드 아이덴티티
│   ├── banner-design/        ← 배너/커버/헤더 디자인
│   ├── slides/               ← 프레젠테이션 라우터
│   └── ui-styling/           ← shadcn/ui + Tailwind
├── .claude-plugin/           ← Claude Marketplace 배포 설정
├── cli/                      ← npm CLI (`uipro-cli`)
│   ├── src/                  ← TypeScript 소스 (commander 기반)
│   ├── assets/               ← 배포용 데이터/스크립트/템플릿
│   └── package.json
├── src/ui-ux-pro-max/        ← 소스 오브 트루스 (원본 데이터)
│   ├── data/                 ← CSV 데이터 DB
│   ├── scripts/              ← Python BM25 검색 엔진
│   └── templates/            ← 플랫폼별 설정 JSON + 마크다운 템플릿
├── docs/                     ← 문서
├── preview/                  ← HTML 프리뷰
├── screenshots/              ← 스크린샷
├── CLAUDE.md                 ← 루트 설정
├── skill.json                ← 스킬 메타데이터
├── README.md                 ← 프로젝트 소개
└── LICENSE                   ← MIT
```

### 1.2 전체 파일 목록 및 역할 (비.git, 비폰트)

**루트 설정 (4개)**
- `CLAUDE.md` — 소스 오브 트루스/동기화/Git 규칙 정의
- `skill.json` — 스킬 메타데이터 (v2.5.0, 18개 플랫폼 지원)
- `.claude-plugin/plugin.json` — Claude Plugin 등록 설정
- `.claude-plugin/marketplace.json` — Claude Marketplace 배포 설정 (v2.2.1 — skill.json과 버전 불일치)

**메인 스킬 SKILL.md (7개)**
- `.claude/skills/ui-ux-pro-max/SKILL.md` — 메인: 180+ UI/UX 규칙, BM25 검색 명령, 디자인 시스템 생성
- `.claude/skills/design/SKILL.md` — 통합 오케스트레이터: 로고/CIP/슬라이드/배너/아이콘/소셜 사진
- `.claude/skills/design-system/SKILL.md` — 3단계 토큰 아키텍처 + 슬라이드 CSV 결정 시스템
- `.claude/skills/brand/SKILL.md` — 브랜드 가이드라인/보이스/에셋 관리
- `.claude/skills/banner-design/SKILL.md` — 배너 디자인 전용 (22개 스타일, 5단계 워크플로우)
- `.claude/skills/slides/SKILL.md` — 슬라이드 라우터 (create 서브커맨드)
- `.claude/skills/ui-styling/SKILL.md` — shadcn/ui + Tailwind CSS + Canvas 디자인

**Python 스크립트 (22개)**
- `src/ui-ux-pro-max/scripts/core.py` — BM25 검색 엔진 + 도메인 매핑
- `src/ui-ux-pro-max/scripts/search.py` — CLI 진입점 + 검색 옵션 파서
- `src/ui-ux-pro-max/scripts/design_system.py` — DesignSystemGenerator 클래스
- `src/ui-ux-pro-max/data/_sync_all.py` — colors.csv/ui-reasoning.csv 동기화 도구
- `.claude/skills/design/scripts/cip/core.py` — CIP BM25 검색
- `.claude/skills/design/scripts/cip/generate.py` — CIP 목업 Gemini 생성
- `.claude/skills/design/scripts/cip/render-html.py` — CIP HTML 렌더러
- `.claude/skills/design/scripts/cip/search.py` — CIP 검색 CLI
- `.claude/skills/design/scripts/icon/generate.py` — SVG 아이콘 Gemini 생성
- `.claude/skills/design/scripts/logo/core.py` — 로고 BM25 검색
- `.claude/skills/design/scripts/logo/generate.py` — 로고 Gemini 생성
- `.claude/skills/design/scripts/logo/search.py` — 로고 검색 CLI
- `.claude/skills/design-system/scripts/fetch-background.py` — Pexels/Unsplash 배경 fetch
- `.claude/skills/design-system/scripts/generate-slide.py` — 슬라이드 HTML 생성
- `.claude/skills/design-system/scripts/search-slides.py` — 슬라이드 BM25 검색 CLI
- `.claude/skills/design-system/scripts/slide_search_core.py` — 슬라이드 검색 코어
- `.claude/skills/design-system/scripts/slide-token-validator.py` — 슬라이드 토큰 하드코딩 탐지
- `.claude/skills/design-system/scripts/html-token-validator.py` — HTML 토큰 검증
- `.claude/skills/ui-styling/scripts/shadcn_add.py` — shadcn/ui 컴포넌트 설치 자동화
- `.claude/skills/ui-styling/scripts/tailwind_config_gen.py` — Tailwind 설정 생성기
- `.claude/skills/ui-styling/scripts/tests/test_shadcn_add.py` — 테스트
- `.claude/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py` — 테스트

**JavaScript 스크립트 (7개)**
- `.claude/skills/design-system/scripts/embed-tokens.cjs` — 디자인 토큰 HTML 삽입
- `.claude/skills/design-system/scripts/generate-tokens.cjs` — JSON → CSS 변수 생성
- `.claude/skills/design-system/scripts/validate-tokens.cjs` — 소스코드 하드코딩 탐지
- `.claude/skills/brand/scripts/inject-brand-context.cjs` — 브랜드 컨텍스트 프롬프트 주입
- `.claude/skills/brand/scripts/sync-brand-to-tokens.cjs` — brand-guidelines → tokens 동기화
- `.claude/skills/brand/scripts/validate-asset.cjs` — 에셋 네이밍/사이즈/포맷 검증
- `.claude/skills/brand/scripts/extract-colors.cjs` — 이미지 색상 추출/팔레트 비교

**TypeScript CLI (11개)**
- `cli/src/index.ts` — CLI 진입점 (commander 기반, 4개 명령)
- `cli/src/types/index.ts` — 타입 정의 (AIType 19종, PlatformConfig 등)
- `cli/src/commands/init.ts` — 설치 명령 (GitHub/번들/템플릿 3중 폴백)
- `cli/src/commands/uninstall.ts` — 제거 명령
- `cli/src/commands/update.ts` — 업데이트 명령 (init 재호출)
- `cli/src/commands/versions.ts` — GitHub 릴리스 목록
- `cli/src/utils/detect.ts` — AI 어시스턴트 자동 감지
- `cli/src/utils/extract.ts` — ZIP 추출/폴더 복사
- `cli/src/utils/github.ts` — GitHub Releases API 클라이언트
- `cli/src/utils/logger.ts` — chalk 기반 컬러 로깅
- `cli/src/utils/template.ts` — 플랫폼 설정 → SKILL.md 렌더링

**CSV 데이터 (40개+)**
- 도메인 CSV 11개: styles(85행), colors(161행), products(162행), typography(74행), landing(35행), charts(26행), ux-guidelines(99행), icons(105행), react-performance(45행), app-interface(30행), google-fonts(1,924행)
- 스택 CSV 16개: angular, astro, flutter, html-tailwind, jetpack-compose, laravel, nextjs, nuxtjs, nuxt-ui, react, react-native, shadcn, svelte, swiftui, threejs, vue
- 슬라이드 CSV 8개: slide-strategies(15행), slide-layouts(25행), slide-layout-logic, slide-typography, slide-color-logic, slide-backgrounds, slide-copy(25행), slide-charts(25행)
- 로고/CIP 데이터: logo/styles(55행), logo/colors(30행), logo/industries(25행), cip/styles(20행), cip/industries(20행), cip/deliverables(50행), cip/mockup-contexts, icon/styles(15행)
- 추론 CSV 2개: ui-reasoning(161행), draft(1,778행), design(1,775행)

**References 문서 (36개)**
- design/references/ — 17개 (banner, CIP 4개, design-routing, icon, logo 4개, slides 6개, social-photos)
- design-system/references/ — 7개 (component-specs, component-tokens, primitive-tokens, semantic-tokens, states-and-variants, tailwind-integration, token-architecture)
- brand/references/ — 11개 (approval-checklist, asset-organization, brand-guideline-template, color-palette-management, consistency-checklist, logo-usage-rules, messaging-framework, typography-specifications, update, visual-identity, voice-framework)
- ui-styling/references/ — 7개 (canvas-design-system, shadcn-accessibility, shadcn-components, shadcn-theming, tailwind-customization, tailwind-responsive, tailwind-utilities)
- slides/references/ — 5개 (copywriting-formulas, create, html-template, layout-patterns, slide-strategies)
- banner-design/references/ — 1개 (banner-sizes-and-styles)

**템플릿 (22개)**
- 플랫폼 JSON 18개: agent, augment, claude, codebuddy, codex, continue, copilot, cursor, droid, gemini, kilocode, kiro, opencode, qoder, roocode, trae, warp, windsurf
- 기본 템플릿 2개: skill-content.md, quick-reference.md
- 디자인 토큰 스타터: design-tokens-starter.json
- 브랜드 가이드라인 스타터: brand-guidelines-starter.md

---

### 1.3 SKILL.md 전문 분석

#### ui-ux-pro-max/SKILL.md (메인 스킬)

**트리거 조건 (Must Use 7가지):**
1. 새 페이지 설계 (랜딩, 대시보드, 어드민, SaaS, 모바일 앱)
2. UI 컴포넌트 생성/리팩토링 (버튼, 모달, 폼, 테이블, 차트)
3. 색상/타이포/간격/레이아웃 시스템 선택
4. UI 코드 리뷰 (UX, 접근성, 시각적 일관성)
5. 내비게이션, 애니메이션, 반응형 구현
6. 제품 수준 디자인 결정
7. 인터페이스 품질/명확성/사용성 개선

**10개 우선순위 카테고리 + 전체 규칙 수:**
| # | 카테고리 | 우선순위 | 규칙 수 |
|---|---------|---------|--------|
| 1 | Accessibility | CRITICAL | 14개 |
| 2 | Touch & Interaction | CRITICAL | 17개 |
| 3 | Performance | HIGH | 18개 |
| 4 | Style Selection | HIGH | 13개 |
| 5 | Layout & Responsive | HIGH | 16개 |
| 6 | Typography & Color | MEDIUM | 15개 |
| 7 | Animation | MEDIUM | 24개 |
| 8 | Forms & Feedback | MEDIUM | 29개 |
| 9 | Navigation Patterns | HIGH | 25개 |
| 10 | Charts & Data | LOW | 29개 |
| **합계** | | | **200개** |

**핵심 규칙 하이라이트:**
- 터치 타겟: iOS 44×44pt / Android 48×48dp
- 이미지: WebP/AVIF, font-display:swap, lazy-loading
- 브레이크포인트: 375/768/1024/1440
- 최소 폰트: 16px, 줄길이 모바일 35-60자/데스크탑 60-75자
- 애니메이션: 150-300ms, transform/opacity만, reduced-motion 대응
- 차트: 5카테고리 초과 시 파이차트 금지, 터치타겟 ≥44pt
- 접근성: WCAG AA 4.5:1 / AAA 7:1, 키보드 네비게이션 필수

**4단계 워크플로우:**
1. **요구사항 분석**: 제품 유형/타겟/스타일/스택 추출
2. **디자인 시스템 생성 (필수)**: `search.py --design-system` → 5개 도메인 병렬 검색 → 완전한 디자인 시스템 출력
3. **상세 검색 보완**: 도메인별 `--domain` 플래그로 추가 검색
4. **스택 가이드라인**: `--stack` 플래그로 기술 스택별 구현 가이드

**Design System Persist (Master + Overrides 패턴):**
- `--persist -p "ProjectName"` → `design-system/MASTER.md` 생성
- `--persist --page "dashboard"` → `design-system/pages/dashboard.md` 오버라이드 생성
- 계층적 검색: 페이지 오버라이드 → MASTER 폴백

#### design/SKILL.md (통합 오케스트레이터)

**8개 서브스킬 라우팅:**
| 태스크 | 서브스킬 | 유형 |
|-------|---------|------|
| 브랜드 아이덴티티 | `brand` | 외부 스킬 |
| 토큰/CSS vars | `design-system` | 외부 스킬 |
| shadcn/Tailwind | `ui-styling` | 외부 스킬 |
| 로고 생성 | Logo | 내장 |
| CIP 목업 | CIP | 내장 |
| 프레젠테이션 | Slides | 내장 |
| 배너/커버 | Banner | 내장 |
| SVG 아이콘 | Icon | 내장 |
| 소셜 이미지 | Social Photos | 내장 |

**로고 디자인 시스템:** 55+ 스타일, 30개 컬러팔레트, 25개 업종 가이드, BM25 검색, Gemini AI 생성
**CIP:** 50+ 납품물, 20개 스타일, 20개 업종, HTML 프레젠테이션 렌더링
**아이콘:** 15개 스타일, 12개 카테고리, Gemini 3.1 Pro SVG XML 생성
**소셜 사진 7단계:** Orchestrate → Analyze → Ideate → Design → Export → Verify → Report

**AI 모델 사용:**
- Logo/CIP: `gemini-2.5-flash-image` (기본) / `gemini-3-pro-image-preview` (Pro)
- Icon: `gemini-3.1-pro-preview` (텍스트 전용 SVG XML)

#### design-system/SKILL.md

**3단계 토큰 아키텍처:**
```
Primitive (원시값 #2563EB)
  → Semantic (목적 별칭 --color-primary)
    → Component (컴포넌트 전용 --button-bg)
```

**슬라이드 Decision System (8개 CSV):**
- slide-strategies.csv: 15개 덱 구조 + 감정 아크
- slide-layouts.csv: 25개 레이아웃 패턴
- slide-layout-logic.csv: 목표 → 레이아웃 자동 결정
- slide-typography.csv: 콘텐츠 유형 → 타입 스케일
- slide-color-logic.csv: 감정 → 색상 처리
- slide-backgrounds.csv: 슬라이드 유형 → Pexels/Unsplash 카테고리
- slide-copy.csv: 25개 카피라이팅 포뮬러 (PAS, AIDA, FAB)
- slide-charts.csv: 25개 Chart.js 차트 설정

**Duarte Sparkline 패턴 브레이킹:**
- "What Is"(좌절) ↔ "What Could Be"(희망) 교차
- 1/3, 2/3 위치에서 패턴 브레이크

#### brand/SKILL.md

**핵심 기능:**
- 브랜드 가이드라인 생성/관리 (`brand-guideline-template.md`)
- 브랜드 → 디자인 토큰 자동 동기화 (`sync-brand-to-tokens.cjs`)
- 브랜드 컨텍스트 프롬프트 주입 (`inject-brand-context.cjs`)
- 에셋 검증/색상 추출

**References 11개:** voice-framework, visual-identity, messaging-framework, consistency-checklist, brand-guideline-template, asset-organization, color-palette-management, typography-specifications, logo-usage-rules, approval-checklist, update

#### banner-design/SKILL.md

**5단계 워크플로우:**
1. AskUserQuestion 요구사항 수집 (6항목)
2. ui-ux-pro-max 활성화 + Pinterest 리서치 + 스타일 선택
3. 각 옵션(기본 3개): HTML/CSS 배너 + AI 비주얼 생성 + 합성
4. chrome-devtools로 정확한 px PNG 내보내기
5. 옵션 나란히 제시 → 피드백 반복

**22개 아트 디렉션 스타일** (Top 10: Minimalist, Bold Typography, Gradient, Photo-Based, Geometric, Retro/Vintage, Glassmorphism, Neon/Cyberpunk, Editorial, 3D/Sculptural)

**디자인 규칙:** Safe zone 70-80%, CTA 1개 우하단, 텍스트 20% 미만(Meta), 인쇄 300DPI/CMYK

#### ui-styling/SKILL.md

**3계층 코어 스택:**
1. Component: shadcn/ui (Radix UI 기반)
2. Styling: Tailwind CSS (유틸리티-퍼스트)
3. Visual Design: Canvas (미술관 수준)

**References 7개:** shadcn-components, shadcn-theming, shadcn-accessibility, tailwind-utilities, tailwind-responsive, tailwind-customization, canvas-design-system

**자동화 스크립트:** shadcn_add.py (컴포넌트 설치), tailwind_config_gen.py (테마 생성)

---

## 2. 코드 단위 분석

### 2.1 BM25 검색 엔진 (`core.py`)

**핵심 클래스: `BM25`**
- 파라미터: `k1=1.5`, `b=0.75`
- `fit(documents)`: TF 계산 → IDF 계산 → avg_dl 저장
- `score(query)`: 각 문서에 대해 BM25 스코어 계산
- `top_n(query, n)`: 상위 N개 결과 반환

**도메인 매핑 (`DOMAIN_CONFIG`):**
| 도메인 | CSV 파일 | 검색 컬럼 |
|-------|---------|----------|
| product | products.csv | Product Type, Description |
| style | styles.csv | Style Name, Description, Key Features |
| color | colors.csv | Product Type, Notes |
| typography | typography.csv | Category, Font Pairing |
| chart | charts.csv | Chart Type, Description |
| landing | landing.csv | Page Type, Description |
| ux | ux-guidelines.csv | Category, Guidelines |
| react | react-performance.csv | Topic, Description |
| web | app-interface.csv | Platform, Component |
| prompt | draft.csv | 전체 컬럼 |
| google-fonts | google-fonts.csv | Font Name, Keywords |
| icons | icons.csv | Icon Set, Style |

**스택 매핑 (`STACK_CONFIG`):**
16개 스택 (angular, astro, flutter, html-tailwind, jetpack-compose, laravel, nextjs, nuxtjs, nuxt-ui, react, react-native, shadcn, svelte, swiftui, threejs, vue) → 각 `stacks/{name}.csv`

**특징:**
- Zero-dependency: csv, re, json, pathlib, math, collections 표준 라이브러리만 사용
- 런타임 인덱스 재구성 (매 쿼리마다 BM25.fit() 호출, 캐싱 없음)
- detect_domain(): 키워드 기반 자동 도메인 감지 (20개+ 키워드 규칙)

### 2.2 Design System Generator (`design_system.py`)

**핵심 클래스: `DesignSystemGenerator`**

**`generate(query, project_name)` 파이프라인:**
1. `search(query, 'product', 1)` → 제품 카테고리 결정
2. `_find_reasoning_rule(product_type)` → ui-reasoning.csv 3단계 매칭 (exact → partial → keyword)
3. `_multi_domain_search(query, style_priority)` → 5개 도메인 병렬 검색 (product×1, style×3, color×2, landing×2, typography×2)
4. `_select_best_match(results, priority_keywords)` → 3단계 선택 (exact style name → scored keyword → first)
5. recommendation dict 구성 (product, style, colors, landing, typography, ui_reasoning)

**출력 형식 3가지:**
- `format_ascii_box()`: 터미널용 ASCII 박스
- `format_markdown()`: 문서용 Markdown
- `persist_design_system()`: `MASTER.md` + `pages/{page}.md` 파일 생성

**`_generate_intelligent_overrides()`:** 페이지별 오버라이드 생성 시 style/ux/landing 동적 재검색

### 2.3 색상 유도 시스템 (`_sync_all.py`)

**WCAG 순수 Python 구현:**
- `lum(hex)` — sRGB linearization + WCAG 상대 휘도 공식 (0.2126R + 0.7152G + 0.0722B)
- `on_color(bg)` — `lum(bg) < 0.4`이면 #FFFFFF, 아니면 #0F172A
- `derive_row(pt, pri, sec, acc, bg)` — 4색 입력 → 16개 시맨틱 토큰 자동 생성

**85개 신규 제품 타입** (`NEW_COLORS` dict): Todo/Task, Utility/Productivity, Games, Creator Tools, Personal Life, Health, Social, Education, Transport, Safety/Lifestyle 카테고리

### 2.4 CLI 설치 시스템 (TypeScript)

**3중 폴백 설치:**
1. GitHub Releases ZIP → installFromZip()
2. 번들 assets → copyFolders()
3. 템플릿 생성 → generatePlatformFiles()

**18개 AI 플랫폼 지원:**
claude, cursor, windsurf, copilot, kiro, roocode, kilocode, codex, qoder, gemini, trae, opencode, continue, codebuddy, droid, warp, augment, antigravity

**플랫폼별 차이:**
- Claude만 quickReference: true (180+ 규칙 완전 삽입)
- Copilot만 PROMPT.md (나머지 SKILL.md)
- Kiro만 steering/ 경로 (나머지 skills/)
- augment/warp: frontmatter 없음

---

## 3. 워크플로우 분석

### 3.1 메인 사용자 워크플로우

```
사용자 UI 관련 요청
        ↓
[자동 트리거: SKILL.md 읽힘]
        ↓
시나리오 판단:
  ├─ 새 프로젝트/페이지 → Step 1 (요구사항 분석) → Step 2 (디자인 시스템 생성)
  ├─ 새 컴포넌트 → Step 3 (상세 검색)
  ├─ 스타일/색상/폰트 → Step 2 (디자인 시스템)
  ├─ UI 리뷰 → Quick Reference 체크리스트 (§1-§10)
  ├─ 버그 수정 → Quick Reference 관련 섹션
  ├─ 차트/데이터 → Step 3 (chart 도메인)
  └─ 스택 가이드 → Step 4 (--stack 플래그)
        ↓
search.py 실행 → BM25 검색 → CSV 데이터 매칭
        ↓
디자인 시스템/가이드라인/추천 결과 출력
        ↓
Pre-Delivery Checklist 검증
        ↓
코드 구현 납품
```

### 3.2 Design System 생성 프로세스

```
python3 search.py "fintech app dark mode" --design-system -p "FinApp"
        ↓
1. products.csv 검색 → 제품 카테고리: "Fintech/Crypto"
        ↓
2. ui-reasoning.csv 3단계 매칭:
   exact "Fintech/Crypto" → style_priority, color_mood, typography_mood,
   key_effects, anti_patterns, decision_rules (JSON)
        ↓
3. 5개 도메인 병렬 검색:
   product(1결과) + style(3결과) + color(2결과) + landing(2결과) + typography(2결과)
        ↓
4. _select_best_match(): style_priority 키워드 매칭
        ↓
5. 완전한 디자인 시스템 출력:
   - Pattern: 추천 패턴
   - Style: 이름, 유형, 주요 색상, 효과
   - Colors: 17개 시맨틱 토큰
   - Landing: 패턴, 섹션 순서, CTA 배치
   - Typography: heading_font, body_font, google_fonts_url
   - UI Reasoning: 안티패턴, 결정 규칙
```

### 3.3 슬라이드 생성 Decision Flow

```
/slides:create "investor pitch 10 slides"
        ↓
1. slide-strategies.csv → "investor pitch" 전략 + 감정 비트
        ↓
2. 각 슬라이드별 (1-10):
   a. slide-layout-logic.csv → 레이아웃 + break_pattern 플래그
   b. slide-typography.csv → 타입 스케일
   c. slide-color-logic.csv → 감정 → 색상 처리
   d. slide-backgrounds.csv → 이미지 카테고리
   e. slide-copy.csv → 카피라이팅 포뮬러
   f. slide-charts.csv → Chart.js 설정 (데이터 슬라이드)
        ↓
3. Duarte Sparkline 패턴 브레이크 (1/3, 2/3 위치)
        ↓
4. design-tokens.css 참조 HTML 생성
        ↓
5. slide-token-validator.py 검증 (하드코딩 hex 탐지)
        ↓
완성된 HTML 프레젠테이션 (Chart.js + 키보드 내비게이션)
```

### 3.4 배너 디자인 워크플로우

```
배너 요청 → 요구사항 수집 (6항목) → ui-ux-pro-max 활성화
→ Pinterest 리서치 (Chrome 자동) → 2-3개 아트 디렉션 스타일 선택
→ 각 옵션: HTML/CSS + Gemini AI 비주얼 + 텍스트 오버레이 합성
→ chrome-devtools PNG 내보내기 → 옵션 제시 → 피드백 반복
```

### 3.5 품질 검증 체계

**Pre-Delivery Checklist (27개 항목):**
- Visual Quality (5): 구현 품질, 간격 일관성, 타이포 위계, 색상 대비, 아이콘 일관성
- Interaction (6): 터치 타겟, 로딩 상태, 에러 처리, 포커스 상태, 비활성 상태, 반응형
- Light/Dark Mode (5): 서피스 가독성, 텍스트 대비, 경계선 가시성, 상태 대비, 토큰 기반 테마
- Layout (6): safe-area, 시스템바 클리어런스, 컨텐츠 폭, 8dp 리듬, 가독 폭, 섹션 간격
- Accessibility (5): VoiceOver 순서, Dynamic Type, reduced-motion, color-not-only, aria

---

## 4. 우리 시스템과 차이점 분석

### 4.1 기능별 비교

| 기능 영역 | 우리 스킬 | 이 레포 | 우위 |
|----------|---------|--------|------|
| UI/UX 규칙 DB | frontend-design (텍스트 내장) | ui-ux-pro-max (CSV+BM25 검색) | **이 레포** (검색 가능) |
| 스타일 DB | 명시적 수치 없음 | 85행 CSV, 67 스타일 | **이 레포** |
| 컬러 팔레트 | 텍스트 가이드라인 | 161행 CSV | **이 레포** |
| 폰트 페어링 | 텍스트 예시 | 74행 + 1,924 Google Fonts | **이 레포** |
| 검색 엔진 | 없음 | BM25 + regex 하이브리드 | **이 레포** |
| 디자인 시스템 자동생성 | 없음 | --design-system 원커맨드 | **이 레포** |
| 스택 가이드 | React/Next.js 텍스트 | 16개 스택 CSV | **이 레포** |
| 한국어 특화 | Pretendard, word-break, AI 클리셰 금지 | 없음 | **우리** |
| Creative Variance Engine | Vibe/Layout Archetype, 반복 방지 | 없음 | **우리** |
| Supanova 디자인 엔진 | framer-motion 이징, GPU 안전 | 없음 | **우리** |
| HTML→React 변환 | Tailwind CDN→JIT 매핑 | 없음 | **우리** |
| CRO/전환율 최적화 | page-cro (7개 프레임워크) | 없음 | **우리** |
| 사이트 아키텍처 | site-architecture | 없음 | **우리** |
| 이미지 생성 파이프라인 | satori(0.32초/장)+gemini+hybrid | 외부 스킬 의존 | **우리** (self-contained) |
| 슬라이드 생성 | 없음 | 8개 CSV + Decision System | **이 레포** |
| 브랜드 관리 | 없음 | brand 스킬 (11개 참조문서) | **이 레포** |
| 로고/CIP/아이콘 | 없음 | design 스킬 (Gemini AI) | **이 레포** |
| shadcn/ui 통합 | 없음 | ui-styling (3개 참조문서) | **이 레포** |
| 토큰 아키텍처 | flat 구조 | 3단계 (Primitive→Semantic→Component) | **이 레포** |
| 플랫폼 지원 | Claude Code 전용 | 18개 AI 어시스턴트 | **이 레포** |

### 4.2 우리에게 없는 기능 전수 리스트

1. **CSV DB + BM25 검색 엔진** — 키워드 검색으로 즉시 결과 반환
2. **디자인 시스템 자동 생성** — 원커맨드로 완전한 디자인 시스템 출력
3. **Design System Persist** — MASTER.md + 페이지별 오버라이드 파일 시스템
4. **161개 산업별 추론 규칙** — ui-reasoning.csv (style_priority, color_mood, anti_patterns, decision_rules JSON)
5. **16개 스택 전용 가이드** — React, Next.js, Vue, Svelte, Astro, SwiftUI, Flutter, React Native, Angular 등
6. **brand 스킬 전체** — 가이드라인 관리, 토큰 자동 싱크, 브랜드 컨텍스트 주입
7. **slides 스킬 전체** — 8개 Decision CSV, Duarte Sparkline, Chart.js 통합
8. **3단계 토큰 아키텍처** — Primitive → Semantic → Component + 다크모드 오버라이드
9. **토큰 생성/검증 스크립트** — generate-tokens.cjs, validate-tokens.cjs
10. **shadcn/ui 통합 가이드** — 컴포넌트 카탈로그, 테마, 접근성
11. **shadcn_add.py / tailwind_config_gen.py** — 자동화 스크립트
12. **로고 디자인 시스템** — 55+ 스타일, Gemini AI 생성, BM25 검색
13. **CIP (Corporate Identity Program)** — 50+ 납품물 목업 자동 생성
14. **SVG 아이콘 생성** — Gemini 3.1 Pro, 15개 스타일, 멀티사이즈
15. **소셜 사진 디자인** — 7단계 워크플로우, 8개 플랫폼 규격
16. **배너 디자인 전용** — 22개 스타일, Pinterest 리서치, 플랫폼 규격 DB
17. **카피라이팅 포뮬러 25개** — PAS, AIDA, FAB 등 슬라이드/배너용
18. **슬라이드 배경 자동 선택** — Pexels/Unsplash API 연동
19. **색상 자동 유도 시스템** — WCAG 휘도 계산으로 4색 → 16개 토큰 자동 생성
20. **1,924개 Google Fonts 검색 DB** — 15개 컬럼 (Popularity Rank, Variable Axes 등)
21. **멀티플랫폼 CLI** — 18개 AI 어시스턴트 자동 감지/설치

### 4.3 우리가 이미 더 나은 것

1. **한국어/한국 시장 특화** — Pretendard 필수, word-break:keep-all, AI 클리셰 금지, 유기적 숫자
2. **Creative Variance Engine** — Vibe/Layout Archetype 강제 선택, 반복 출력 방지
3. **Supanova 디자인 엔진** — framer-motion 이징 상수, fadeInUp/ctaMotion 패턴, GPU 안전 가이드
4. **HTML→React/Next.js 변환 규칙** — Tailwind CDN→JIT, 인라인 스크립트→tailwind.config.ts
5. **이미지 생성 self-contained** — satori 0.32초/장, Gemini API 직접 호출, Fallback GPT
6. **CRO 전환율 최적화** — page-cro 7개 프레임워크 (보험 도메인 특화)
7. **사이트 아키텍처** — IA/사이트맵/내부 링크 전략
8. **canvas-design 철학적 접근** — 아트 무브먼트 매니페스토 → 시각 표현 메타레이어
9. **출력 완성도 보장** — `[PAUSED -- X of Y sections complete]` 토큰 한도 대응

---

## 5. 도입 여부 평가

### 5.1 판정: **전체 도입 불가, 부분 흡수 권장**

**전체 도입 불가 사유:**
- ui-ux-pro-max SKILL.md §1-§10 내용이 우리 frontend-design과 ~85% 중복 (이미 흡수된 상태)
- 한국어 특화/CRO/사이트아키텍처 미커버 — 우리 핵심 차별점 부재
- design 스킬의 외부 의존성 (ai-artist, ai-multimodal, chrome-devtools 등 미설치 시 미작동)
- 전체 도입 시 중복 콘텐츠 80%+ 토큰 낭비

### 5.2 부분 흡수 항목 (우선순위순)

**흡수 1: CSV DB + BM25 검색 엔진 (★ 최고 ROI)**
- 대상: `src/ui-ux-pro-max/data/` 전체 CSV + `scripts/core.py, search.py, design_system.py`
- 방법: workspace/tools/ui-ux-search/ 폴더에 배치, frontend-design에 검색 명령 추가
- 한국화: Pretendard 등 승인 폰트를 typography.csv에 추가
- 공수: 2~3시간
- 충돌: 없음 (순수 보완)

**흡수 2: slides 스킬**
- 대상: 슬라이드 CSV 8개 + 검색/생성/검증 스크립트 + references 5개
- 방법: skills/slides/ 스킬 신규 생성, 디자인 토큰을 우리 브랜드로 교체
- 한국화: 존댓말 일관성, Pretendard 필수 추가
- 공수: 4~6시간
- 충돌: 없음

**흡수 3: brand 스킬 (경량)**
- 대상: inject-brand-context.cjs, sync-brand-to-tokens.cjs, extract-colors.cjs, 핵심 references 6개
- 방법: InsuRo/InsuWiki 브랜드 기준으로 brand-guidelines.md 작성
- 공수: 3~4시간
- 충돌: 없음

**흡수 4: design-system 토큰 아키텍처**
- 대상: 3단계 구조 개념, generate-tokens.cjs, validate-tokens.cjs, states-and-variants.md
- 방법: 기존 flat 구조 → 3단계 점진적 마이그레이션
- 공수: 2~3시간
- 충돌: 기존 design-tokens.json 마이그레이션 필요 (파괴적 변경 가능)

**흡수 5: banner-design 규격/스타일**
- 대상: banner-sizes-and-styles.md (22개 스타일 + 전 플랫폼 규격)
- 방법: hybrid-image SKILL.md에 플랫폼별 사이즈 테이블 + 스타일 분류 추가
- 공수: 1시간
- 충돌: 없음

**흡수 6: ui-styling shadcn/ui 가이드**
- 대상: shadcn-components.md, shadcn-theming.md, shadcn-accessibility.md, 자동화 스크립트
- 방법: frontend-design에 섹션 추가 또는 별도 스킬 분리
- 공수: 1~2시간
- 충돌: 없음

### 5.3 흡수 불필요 항목

| 항목 | 사유 |
|------|------|
| design 스킬 로고/CIP/아이콘 | 보험 서비스 개발에서 수요 없음 + 외부 스킬 의존성 과다 |
| ui-ux-pro-max SKILL.md 본문 | frontend-design에 ~85% 이미 포함 |
| validate-asset.cjs | 우리 QC 체계와 중복 |
| fetch-background.py | Gemini 직접 생성이 일관성 있음 |
| Pinterest 리서치 워크플로우 | Chrome 자동화 복잡성 증가 |
| 멀티플랫폼 CLI | 우리는 Claude Code 전용 |

### 5.4 총 예상 공수

| 항목 | 공수 | 우선순위 |
|------|------|---------|
| CSV DB + BM25 검색 | 2~3시간 | ★ P1 |
| slides 스킬 | 4~6시간 | P2 |
| brand 스킬 | 3~4시간 | P2 |
| design-system 토큰 | 2~3시간 | P3 |
| banner-design 규격 | 1시간 | P3 |
| ui-styling shadcn | 1~2시간 | P3 |
| **합계** | **13~19시간** | |

---

## 6. 전체 항목 리스트

### 6.1 기능/컴포넌트 전수 리스트

| # | 기능/항목 | 위치 | 우리 해당 여부 |
|---|---------|------|--------------|
| 1 | BM25 검색 엔진 (Python) | core.py | 없음 |
| 2 | 자동 도메인 감지 (detect_domain) | core.py | 없음 |
| 3 | 12개 검색 도메인 | core.py DOMAIN_CONFIG | 없음 |
| 4 | 16개 스택 가이드 CSV | data/stacks/ | React/Next.js만 텍스트 |
| 5 | 디자인 시스템 자동 생성기 | design_system.py | 없음 |
| 6 | Design System Persist (MASTER+Overrides) | design_system.py | 없음 |
| 7 | 161 산업별 추론 규칙 | ui-reasoning.csv | 없음 |
| 8 | WCAG 색상 자동 유도 | _sync_all.py derive_row() | 없음 |
| 9 | 85개 신규 제품 타입 색상 정의 | _sync_all.py NEW_COLORS | 없음 |
| 10 | 67 UI 스타일 DB | styles.csv (85행) | 없음 (텍스트 기술만) |
| 11 | 161 컬러 팔레트 DB | colors.csv | 없음 (텍스트 기술만) |
| 12 | 74 폰트 페어링 DB | typography.csv | 없음 (텍스트 기술만) |
| 13 | 1,924 Google Fonts DB | google-fonts.csv | 없음 |
| 14 | 162 제품 유형 DB | products.csv | 없음 |
| 15 | 99 UX 가이드라인 DB | ux-guidelines.csv | frontend-design 내 텍스트 |
| 16 | 26 차트 유형 DB | charts.csv | frontend-design 내 텍스트 |
| 17 | 35 랜딩 패턴 DB | landing.csv | 없음 |
| 18 | 105 아이콘 검색 DB | icons.csv | 없음 |
| 19 | 45 React 퍼포먼스 DB | react-performance.csv | 없음 |
| 20 | 30 앱 인터페이스 DB | app-interface.csv | 없음 |
| 21 | 1,775행 디자인 원시 DB | design.csv | 없음 |
| 22 | 1,778행 드래프트 DB | draft.csv | 없음 |
| 23 | §1 접근성 규칙 14개 | SKILL.md | frontend-design 포함 |
| 24 | §2 터치/인터랙션 규칙 17개 | SKILL.md | frontend-design 포함 |
| 25 | §3 퍼포먼스 규칙 18개 | SKILL.md | frontend-design 포함 |
| 26 | §4 스타일 선택 규칙 13개 | SKILL.md | frontend-design 포함 |
| 27 | §5 레이아웃/반응형 규칙 16개 | SKILL.md | frontend-design 포함 |
| 28 | §6 타이포/색상 규칙 15개 | SKILL.md | frontend-design 포함 |
| 29 | §7 애니메이션 규칙 24개 | SKILL.md | frontend-design 포함 |
| 30 | §8 폼/피드백 규칙 29개 | SKILL.md | frontend-design 포함 |
| 31 | §9 내비게이션 규칙 25개 | SKILL.md | frontend-design 포함 |
| 32 | §10 차트/데이터 규칙 29개 | SKILL.md | frontend-design 포함 |
| 33 | Icons & Visual Elements 규칙 10개 | SKILL.md Common Rules | frontend-design 포함 |
| 34 | Interaction App 규칙 7개 | SKILL.md Common Rules | frontend-design 포함 |
| 35 | Light/Dark Mode 규칙 7개 | SKILL.md Common Rules | frontend-design 포함 |
| 36 | Layout & Spacing 규칙 8개 | SKILL.md Common Rules | frontend-design 포함 |
| 37 | Pre-Delivery Checklist 27항목 | SKILL.md | frontend-design 포함 |
| 38 | design 스킬 로고 서브스킬 | design/SKILL.md | 없음 |
| 39 | design 스킬 CIP 서브스킬 | design/SKILL.md | 없음 |
| 40 | design 스킬 아이콘 서브스킬 | design/SKILL.md | 없음 |
| 41 | design 스킬 소셜 포토 서브스킬 | design/SKILL.md | 없음 |
| 42 | design 스킬 배너 서브스킬 | design/SKILL.md | hybrid-image 부분 |
| 43 | design 스킬 슬라이드 서브스킬 | design/SKILL.md | 없음 |
| 44 | 8개 서브스킬 라우팅 시스템 | design/SKILL.md | 없음 |
| 45 | 3단계 토큰 아키텍처 | design-system/SKILL.md | flat 구조만 |
| 46 | 토큰 JSON→CSS 생성 스크립트 | generate-tokens.cjs | 없음 |
| 47 | 토큰 하드코딩 검증 스크립트 | validate-tokens.cjs | 없음 |
| 48 | 토큰 HTML 삽입 스크립트 | embed-tokens.cjs | 없음 |
| 49 | 컴포넌트 상태 스펙 | states-and-variants.md | 없음 |
| 50 | Tailwind 토큰 통합 가이드 | tailwind-integration.md | 없음 |
| 51 | design-tokens-starter.json | templates/ | 없음 |
| 52 | 슬라이드 전략 CSV (15개 덱 구조) | slide-strategies.csv | 없음 |
| 53 | 슬라이드 레이아웃 CSV (25개 패턴) | slide-layouts.csv | 없음 |
| 54 | 슬라이드 레이아웃 로직 CSV | slide-layout-logic.csv | 없음 |
| 55 | 슬라이드 타이포그래피 CSV | slide-typography.csv | 없음 |
| 56 | 슬라이드 색상 로직 CSV | slide-color-logic.csv | 없음 |
| 57 | 슬라이드 배경 CSV | slide-backgrounds.csv | 없음 |
| 58 | 슬라이드 카피 CSV (25개 포뮬러) | slide-copy.csv | 없음 |
| 59 | 슬라이드 차트 CSV (25개 Chart.js) | slide-charts.csv | 없음 |
| 60 | Duarte Sparkline 패턴 브레이킹 | design-system SKILL.md | 없음 |
| 61 | 슬라이드 BM25 검색 CLI | search-slides.py | 없음 |
| 62 | 슬라이드 토큰 검증기 | slide-token-validator.py | 없음 |
| 63 | 슬라이드 배경 fetch | fetch-background.py | 없음 |
| 64 | 슬라이드 HTML 생성 | generate-slide.py | 없음 |
| 65 | brand 가이드라인 관리 | brand/SKILL.md | 없음 |
| 66 | 브랜드→토큰 자동 싱크 | sync-brand-to-tokens.cjs | 없음 |
| 67 | 브랜드 컨텍스트 프롬프트 주입 | inject-brand-context.cjs | 없음 |
| 68 | 에셋 검증 스크립트 | validate-asset.cjs | QC 체계로 대체 |
| 69 | 색상 추출/비교 스크립트 | extract-colors.cjs | 없음 |
| 70 | 보이스 프레임워크 참조 | voice-framework.md | 없음 |
| 71 | 비주얼 아이덴티티 참조 | visual-identity.md | 없음 |
| 72 | 메시징 프레임워크 참조 | messaging-framework.md | 없음 |
| 73 | 일관성 체크리스트 참조 | consistency-checklist.md | 없음 |
| 74 | 에셋 조직 참조 | asset-organization.md | 없음 |
| 75 | 색상 팔레트 관리 참조 | color-palette-management.md | 없음 |
| 76 | 타이포그래피 스펙 참조 | typography-specifications.md | 없음 |
| 77 | 로고 사용 규칙 참조 | logo-usage-rules.md | 없음 |
| 78 | 승인 체크리스트 참조 | approval-checklist.md | 없음 |
| 79 | 브랜드 가이드라인 스타터 | brand-guidelines-starter.md | 없음 |
| 80 | 22개 배너 아트 디렉션 스타일 | banner-sizes-and-styles.md | 없음 |
| 81 | 배너 플랫폼별 규격 DB | banner-sizes-and-styles.md | 없음 |
| 82 | Pinterest 리서치 워크플로우 | banner-design/SKILL.md | 없음 |
| 83 | AI 모델 선택 로직 (Flash/Pro) | banner-design/SKILL.md | 부분 |
| 84 | shadcn/ui 컴포넌트 카탈로그 | shadcn-components.md | 없음 |
| 85 | shadcn 테마/다크모드 가이드 | shadcn-theming.md | 없음 |
| 86 | shadcn 접근성 패턴 | shadcn-accessibility.md | 없음 |
| 87 | Tailwind 유틸리티 참조 | tailwind-utilities.md | 없음 |
| 88 | Tailwind 반응형 참조 | tailwind-responsive.md | 없음 |
| 89 | Tailwind 커스터마이징 참조 | tailwind-customization.md | 없음 |
| 90 | Canvas 디자인 시스템 참조 | canvas-design-system.md | canvas-design이 더 심층 |
| 91 | shadcn_add.py 자동화 | scripts/ | 없음 |
| 92 | tailwind_config_gen.py 자동화 | scripts/ | 없음 |
| 93 | 로고 55+ 스타일 DB | logo/styles.csv | 없음 |
| 94 | 로고 30개 컬러팔레트 DB | logo/colors.csv | 없음 |
| 95 | 로고 25개 업종 가이드 | logo/industries.csv | 없음 |
| 96 | 로고 AI 생성기 | logo/generate.py | 없음 |
| 97 | CIP 50+ 납품물 DB | cip/deliverables.csv | 없음 |
| 98 | CIP 20개 스타일 DB | cip/styles.csv | 없음 |
| 99 | CIP 20개 업종 DB | cip/industries.csv | 없음 |
| 100 | CIP 목업 자동 생성 | cip/generate.py | 없음 |
| 101 | CIP HTML 렌더러 | cip/render-html.py | 없음 |
| 102 | SVG 아이콘 15개 스타일 DB | icon/styles.csv | 없음 |
| 103 | SVG 아이콘 AI 생성기 | icon/generate.py | 없음 |
| 104 | 소셜 사진 7단계 워크플로우 | design/SKILL.md | 없음 |
| 105 | 18개 AI 플랫폼 CLI | cli/ | Claude 전용 |
| 106 | 플랫폼 자동 감지 | detect.ts | 불필요 |
| 107 | GitHub Releases 3중 폴백 설치 | init.ts | 불필요 |
| 108 | 플랫폼별 SKILL.md 렌더링 | template.ts | 불필요 |
| 109 | CIP 프롬프트 엔지니어링 | cip-prompt-engineering.md | 없음 |
| 110 | 로고 프롬프트 엔지니어링 | logo-prompt-engineering.md | 없음 |
| 111 | 로고 색상 심리학 | logo-color-psychology.md | 없음 |
| 112 | 슬라이드 카피라이팅 포뮬러 | copywriting-formulas.md | 없음 |
| 113 | 슬라이드 HTML 템플릿 | html-template.md | 없음 |
| 114 | 슬라이드 레이아웃 패턴 | layout-patterns.md | 없음 |
| 115 | 슬라이드 전략 참조 | slide-strategies.md | 없음 |

---

## 발견 이슈 및 해결

### 자체 해결 (0건)
(분석 전용 작업으로 코드 수정 없음)

### 범위 외 미해결 (3건)
1. **marketplace.json 버전 불일치** — v2.2.1 vs skill.json v2.5.0. 범위 외 사유: 외부 레포 이슈
2. **CLI 번들 데이터 outdated** — cli/assets/scripts/core.py의 STACK_CONFIG가 react-native 단일 항목만 포함. 범위 외 사유: 외부 레포 이슈
3. **BM25 클래스 4곳 중복** — core.py가 design/cip/, design/logo/, design-system/, ui-ux-pro-max/에 독립 복사. 범위 외 사유: 외부 레포 아키텍처

---

## 모델 사용 기록

- 팀원: 토르 / 작업: SKILL.md 7개 + 설정파일 전문 분석 / 사용 모델: sonnet / 정당성: -
- 팀원: 프레이야 / 작업: Python/TS/JS 코드 전수 분석 + 데이터 플로우 / 사용 모델: sonnet / 정당성: -
- 팀원: 미미르 / 작업: References 36개 + CSV 40개 + 템플릿 22개 전수 분석 / 사용 모델: sonnet / 정당성: -
- 팀원: 헤임달 / 작업: 우리 스킬 7개 vs 이 레포 비교분석 + 도입 판정 / 사용 모델: sonnet / 정당성: -