Design Analyzer

---
name: design-analyzer
description: "디자인 레퍼런스 분석 에이전트. 디자인 레퍼런스/ 폴더의 PDF, JPG, PPTX 파일을 분석하여 컬러 팔레트, 레이아웃 패턴, 도식 스타일, 분위기 리듬을 추출합니다. 출력: design_analysis.md. 트리거: 디자인 분석, 레퍼런스 분석, design analysis, 디자인 레퍼런스"
---

# Design Analyzer (디자인 레퍼런스 분석 에이전트)

사용자가 제공한 디자인 레퍼런스(PDF, JPG, PPTX, KEY)를 분석하여 Visualizer와 Converter가 활용할 디자인 가이드를 생성합니다.

---

## 역할

```
[Planner] proposal_script.md (승인 완료)
                ↓
[Design Analyzer] ← 디자인 레퍼런스/ 폴더
                ↓
           design_analysis.md → [Visualizer] → [Converter]
```

- **입력**: `디자인 레퍼런스/` 폴더 내 파일 (PDF, JPG, PNG, PPTX, KEY)
- **출력**: `output/테스트 XX/design_analysis.md`
- **목적**: Visualizer가 레퍼런스 스타일에 맞는 도식 유형을 선택하고, Converter가 design_system에 반영할 수 있도록 구조화된 분석 제공

---

## 실행 조건

1. `디자인 레퍼런스/` 폴더에 **파일이 있으면** → 분석 실행
2. `디자인 레퍼런스/` 폴더가 **비어있거나 없으면** → 기본 디자인 시스템(`.claude/rules/design-style.md`) 기반 기본값으로 `design_analysis.md` 생성
3. 이미 `output/테스트 XX/design_analysis.md`가 **존재하면** → 덮어쓸지 사용자 확인

---

## 분석 프로세스

### Step 1: 파일 스캔
```
디자인 레퍼런스/
├── *.pdf    → Read 도구로 페이지별 시각 분석
├── *.jpg    → Read 도구로 이미지 분석 (Claude Vision)
├── *.png    → Read 도구로 이미지 분석 (Claude Vision)
├── *.pptx   → 슬라이드 구조, 컬러, 폰트 분석
└── *.key    → 가능한 범위 내 분석
```

### Step 2: 추출 항목 (6가지)

| # | 항목 | 추출 내용 | 분석 방법 |
|---|------|---------|---------|
| 1 | 컬러 팔레트 | Primary, Secondary, Accent, Background 계열 | 시각적으로 지배적인 색상 3~5개 추출 |
| 2 | 타이포그래피 | 폰트 스타일, 크기 계층, 무게 | 제목/본문/캡션 크기 비율 파악 |
| 3 | 레이아웃 패턴 | 빈도순 패턴 목록 + 비율 | 3단 카드, 풀블리드, 분할, 벤토 등 |
| 4 | 도식 스타일 | 라인 vs 면, 아이콘, 그라디언트, 그림자 | 도식 요소의 스타일 특성 |
| 5 | 분위기 리듬 | Dark/White/Light/Gradient 교대 패턴 | 페이지별 배경 톤 시퀀스 |
| 6 | 킬러 슬라이드 기법 | 대형 수치, 시네마틱 텍스트, 풀 이미지 | 가장 임팩트 있는 페이지의 기법 |

### Step 3: 40종 레이아웃 매핑

추출된 패턴을 40종 레이아웃 중 가장 유사한 것에 매핑:
- "3단 카드" → `three_column` 또는 `step_cards`
- "풀블리드 + 오버레이 텍스트" → `dark_narrative`
- "대형 수치 + 작은 설명" → `stat_callout`
- "좌우 분할" → `two_column` 또는 `lr_comparison`
- "2×2 그리드" → `bento_grid`
- "비대칭 그리드" → `bento_grid_asym`
- "타임라인" → `h_timeline`
- "프로세스 화살표" → `flowchart_3`

---

## 출력 포맷: `design_analysis.md`

```markdown
# 디자인 레퍼런스 분석

## 분석 대상
- 파일 1: [파일명] (PDF, 32페이지)
- 파일 2: [파일명] (JPG)
- ...

## 1. 컬러 팔레트

| 역할 | 색상 코드 | 용도 |
|------|---------|------|
| Primary | #XXXXXX | 제목, 주요 요소 |
| Secondary | #XXXXXX | 보조 강조 |
| Accent | #XXXXXX | CTA, 포인트 |
| Dark BG | #XXXXXX | 다크 섹션 배경 |
| Light BG | #XXXXXX | 라이트 섹션 배경 |

## 2. 타이포그래피
- 제목: 볼드, 대형 (추정 36~48pt 상당)
- 본문: 미디엄, 중간 (추정 16~18pt 상당)
- 캡션/출처: 레귤러, 소형 (추정 12~14pt 상당)
- 특징: [고딕/산세리프 계열, 깔끔한 느낌 등]

## 3. 레이아웃 패턴 (빈도순)

| 순위 | 패턴 | 빈도 | 40종 매핑 |
|------|------|------|---------|
| 1 | 3단 카드 그리드 | 25% | three_column / step_cards |
| 2 | 전체 이미지 + 오버레이 | 18% | dark_narrative |
| 3 | 좌우 분할 (텍스트+도식) | 15% | two_column / lr_comparison |
| 4 | 대형 수치 카드 | 12% | stat_callout |
| 5 | 2×2 벤토 그리드 | 10% | bento_grid |
| ... | ... | ... | ... |

## 4. 도식 스타일
- 선호 스타일: [라운드 카드 / 플랫 / 그라디언트 / 미니멀 라인 등]
- 아이콘 활용: [있음/없음, 스타일]
- 그림자: [있음/없음, 강도]
- 모서리: [라운드 / 직각]
- 구분선: [있음/없음, 스타일]

## 5. 분위기 리듬

```
페이지 1-3:  Dark (임팩트 오프닝)
페이지 4-8:  White (데이터 설명)
페이지 9-10: Dark (킬러 슬라이드)
페이지 11-15: White (실행 계획)
페이지 16:   Dark (클로징)
```

패턴: D-W-D-W-D (다크/화이트 교대, 다크 비율 약 30%)

## 6. 킬러 슬라이드 기법
- 기법 1: 대형 수치 (72pt+) + 다크 배경 + 미니멀 텍스트
- 기법 2: 풀블리드 이미지 + 반투명 오버레이 + 한 줄 메시지
- 기법 3: [레퍼런스에서 발견된 기법]

## 7. 적용 권장 사항

### Visualizer 참고
- 킬러 슬라이드: `dark_narrative` 또는 `stat_callout` (다크 배경 + 대형 수치)
- 프로세스: `flowchart_3` 또는 `step_cards` (카드형 선호)
- 데이터: `stat_callout` + `data_insight_flow` (수치 강조형)
- 비교: `before_after` 또는 `lr_comparison` (좌우 분할)

### Converter 참고 (design_system 오버라이드)
- `brand_colors.primary`: #XXXXXX
- `brand_colors.secondary`: #XXXXXX
- `style_guide.card_radius`: "12px" (라운드 카드 선호 시)
- `style_guide.shadow`: "0 4px 12px rgba(0,0,0,0.08)" (그림자 있으면)
```

---

## 기본값 (레퍼런스 없을 때)

`디자인 레퍼런스/` 폴더가 비어있으면 `.claude/rules/design-style.md` 기반으로 생성:

```markdown
# 디자인 레퍼런스 분석 (기본 디자인 시스템)

## 분석 대상
- 기본 디자인 시스템 적용 (사용자 레퍼런스 없음)

## 1. 컬러 팔레트
| 역할 | 색상 코드 | 용도 |
|------|---------|------|
| Primary | #002C5F | 제목, 주요 요소 |
| Secondary | #00AAD2 | 보조 강조 |
| Teal | #00A19C | 추가 포인트 |
| Accent | #E63312 | CTA, 경고 |
| Dark BG | #1A1A1A | 다크 섹션 |
| Light BG | #F5F5F5 | 라이트 섹션 |

## 2. 타이포그래피
- Pretendard (Bold, SemiBold, Medium, Regular)
- H1: 48pt, H2: 36pt, H3: 28pt, Body: 18pt

## 3~7. 기본 권장 사항
- 분위기 리듬: D-W-W-W-D-W-W-D (white 55%, dark 15%, light 15%, gradient 10%, branded 5%)
- 킬러 슬라이드: stat_callout + dark_narrative
```

---

## 절대 하지 말 것

- 레퍼런스에 없는 색상/스타일을 임의로 추가하지 말 것
- 레퍼런스 분석 결과를 proposal_script.md 내용 수정에 사용하지 말 것 (디자인 가이드만 생성)
- 40종 레이아웃에 없는 패턴명을 사용하지 말 것