5단계 파이프라인 전면 재작성 + Figma 추출 계획 업데이트

DA-12: 1단계 Kei 실장 — 꼭지 2~5개 추출 + 레이어/강조/배치/이미지/표/자세히보기 판단
DA-13: 2단계 디자인 팀장 — catalog 연동 + 블록 매핑 + 공간 배분 + 글자 수 가이드
DA-13b: 3단계 텍스트 편집자 — 글자 수 가이드 참고, 의미 우선 편집 + 자세히보기(요약+상세)
DA-14: 4단계 실무자(AI+코드) + 5단계 팀장 재검토 (균형 점검 → 2차 조정)

문서:
- CLAUDE.md: 5단계 프로세스 + 이미지/표/자세히보기 처리 원칙
- PLAN.md: DA-12~14 태스크 전면 재작성
- PROGRESS.md: 동기화
- FIGMA-COMPONENT-EXTRACTION-PLAN.md: 모드 독립 블록, 변환 규칙, image-block/details-block, MCP, 토큰 매핑

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/FIGMA-COMPONENT-EXTRACTION-PLAN.md

@@ -2,7 +2,20 @@
 
 ## 목적
 
-Figma 디자인(바론컨설턴트 홈페이지 기획팀 공유)에서 재사용 가능한 슬라이드 콘텐츠 블록을 추출하고, 디자인 팀장(Sonnet)이 선택할 수 있는 카탈로그로 체계화한다.
+Figma 디자인(바론컨설턴트 홈페이지 기획팀 공유)에서 재사용 가능한 **콘텐츠 블록**을 추출하고, 디자인 팀장(Sonnet)이 선택할 수 있는 카탈로그로 체계화한다.
+
+**핵심 원칙: 블록은 모드 독립적이다.**
+- 블록 자체는 "슬라이드 전용"이 아니라 **HTML/CSS 콘텐츠 블록**
+- 슬라이드 모드(100vh, overflow:hidden)와 웹/스크롤 모드(auto, overflow:visible)는 **컨테이너(base 템플릿)**가 결정
+- 블록은 높이를 고정하지 않음 → 어떤 컨테이너에도 들어갈 수 있음
+- 현재는 `slide-base.html`(슬라이드)에 집중하되, 향후 `page-base.html`(웹) 추가 가능
+
+```
+블록 (카드, 표, 인용 등) — 모드와 무관, 재사용 가능
+    ↓
+slide-base.html → height:100vh, overflow:hidden (슬라이드 모드)
+page-base.html  → height:auto, overflow:visible (웹/스크롤 모드, 향후)
+```
 
 ---
 
@@ -57,6 +70,8 @@ Figma 디자인(바론컨설턴트 홈페이지 기획팀 공유)에서 재사
 | **아이콘 리스트** | ❌ | ✅ (아이콘+제목+설명) | **신규** |
 | **Hero 섹션** | ❌ | ✅ (배경+원형이미지+텍스트) | **신규** |
 | **CTA 버튼 바** | ❌ | ✅ (자세히보기 버튼) | **필요 시** |
+| **이미지 블록** | ❌ | ✅ (도표, 참고자료) | **신규** (3변형: full/side/thumb) |
+| **자세히보기 블록** | ❌ | ✅ (상세 콘텐츠 접기/펼치기) | **신규** (`<details>/<summary>`) |
 
 ---
 
@@ -66,19 +81,41 @@ Figma 디자인(바론컨설턴트 홈페이지 기획팀 공유)에서 재사
 
 #### A-1: Figma 전체 섹션 이미지 렌더링
 - **작업:** 각 섹션/프레임을 이미지로 렌더링하여 시각적으로 패턴 식별
-- **방법:** Figma API `/v1/images/{file_key}?ids={node_ids}`
+- **방법:**
+  - **1차:** Framelink MCP `get_figma_data` — CSS-ready 데이터로 노드 구조 + 스타일 동시 추출
+  - **2차:** Figma 공식 MCP `get_screenshot` — 시각 참고용 스크린샷
+  - **fallback:** Figma REST API `/v1/images/{file_key}?ids={node_ids}` (MCP 미설치 시)
 - **산출물:** `docs/figma-screenshots/` 폴더에 PNG 저장
 - **완료 기준:** 모든 자세히보기 프레임(8개)의 스크린샷 확보
 
 #### A-2: Figma 노드 구조 심층 분석
-- **작업:** 각 프레임의 depth=5 수준까지 노드 트리 분석
-- **방법:** Figma API `/v1/files/{key}/nodes?ids={ids}&depth=5`
+- **작업:** 각 프레임의 상세 스타일 + 레이아웃 정보 추출
+- **방법:**
+  - **1차:** Framelink MCP `get_figma_data` (nodeId 지정, depth 조절)
+    - 자동 CSS 변환: 색상→hex/rgba, 레이아웃→flex 용어, 그림자→box-shadow, 그라데이션→linear-gradient()
+    - 스타일 중복 제거 (글로벌 변수로 추출)
+    - 토큰 효율적 (raw API 대비 1/5 크기)
+  - **2차:** Figma 공식 MCP `get_variable_defs` — 디자인 토큰/변수 추출
+  - **fallback:** Figma REST API `/v1/files/{key}/nodes?ids={ids}&depth=5` (MCP 미설치 시)
 - **추출 정보:**
-  - TEXT 노드: 폰트, 크기, 색상, 내용
-  - FRAME/GROUP: 레이아웃 방식 (auto-layout, constraints)
-  - RECTANGLE: 배경색, 테두리, 둥근 모서리
-  - INSTANCE: 재사용 컴포넌트 식별
+  - TEXT 노드: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color, 텍스트 내용
+  - FRAME/GROUP: auto-layout (direction, gap, padding, alignItems, justifyContent), constraints
+  - RECTANGLE: fills (solid/gradient/image), strokes, cornerRadius, effects
+  - INSTANCE: componentId (재사용 컴포넌트 식별)
+- **Figma → CSS 매핑 (Framelink MCP가 자동 처리, REST API 시 수동):**
+  - `layoutMode: "VERTICAL"` → `flex-direction: column`
+  - `primaryAxisAlignItems: "CENTER"` → `justify-content: center`
+  - `itemSpacing: 20` → `gap: 20px`
+  - `paddingLeft/Right/Top/Bottom` → `padding`
+  - `fills[].color {r,g,b,a}` → `rgba()` 또는 `#hex`
+  - `fills[].type: "GRADIENT_LINEAR"` → `linear-gradient(...)`
+  - `cornerRadius` → `border-radius`
+  - `strokes + strokeWeight` → `border`
+  - `effects[].type: "DROP_SHADOW"` → `box-shadow`
+  - `fontSize` → `font-size` (px 단위)
+  - `lineHeightPercentFontSize: 170` → `line-height: 1.7`
 - **산출물:** `docs/figma-analysis/` 폴더에 구조 문서
+- **주의:** Figma API rate limit 심함 — depth 깊은 요청은 30분 차단 가능. 얕게 요청 후 필요한 노드만 상세 조회
 
 #### A-3: 디자인 패턴 분류 + 명명
 - **작업:** 추출된 시각 요소를 재사용 가능한 블록 단위로 분류
@@ -90,20 +127,50 @@ Figma 디자인(바론컨설턴트 홈페이지 기획팀 공유)에서 재사
 
 ### Phase B: HTML/CSS 컴포넌트 제작
 
-#### B-1: 신규 블록 템플릿 제작 (6~8종)
-- **파일:** `templates/blocks/{name}.html`
+#### B-1: 신규 블록 템플릿 제작 (8~10종)
+- **파일:** `templates/blocks/{name}/` 폴더별 정리 (변형별 파일 + preview.png)
 - **제작 순서 (우선순위):**
-  1. `section-title.html` — 공통 헤더 (모든 슬라이드에서 사용)
-  2. `example-card.html` — 사례 카드 (출처+불릿, 정책 문서 인용)
-  3. `image-gallery.html` — 이미지 갤러리 (2~4장, 근거 자료)
-  4. `timeline.html` — 타임라인 (세로/가로, 연혁/로드맵)
-  5. `big-number.html` — 핵심 지표 (큰 숫자 + 보조 텍스트)
-  6. `icon-list.html` — 아이콘 리스트 (아이콘+제목+설명, 기능 나열)
+  1. `section-title/default.html` — 공통 헤더 (모든 슬라이드에서 사용)
+  2. `example-card/2col.html` — 사례 카드 (출처+불릿, 정책 문서 인용)
+  3. `image-block/full.html`, `side.html`, `thumb.html` — 이미지 블록 3변형
+     - full: 전체 너비 (핵심 도표, 가로형)
+     - side: 텍스트 옆 (보조 이미지, 세로형)
+     - thumb: 썸네일 (참고 문서 표지)
+     - CSS: `object-fit: contain` (비율 유지, 잘리지 않음)
+     - 원본 이미지 그대로 사용, 크기만 조절 (crop 안 함)
+  4. `image-gallery/2col.html`, `3col.html`, `2x2.html` — 이미지 갤러리
+  5. `timeline/vertical.html`, `horizontal.html` — 타임라인 (연혁/로드맵)
+  6. `big-number/3col.html`, `4col.html` — 핵심 지표 (큰 숫자 + 보조 텍스트)
+  7. `icon-list/vertical.html`, `grid.html` — 아이콘 리스트 (기능 나열)
+  8. `details-block/default.html` — 자세히보기 (`<details>/<summary>`)
+     - 슬라이드 표면: 요약만 표시
+     - 펼치면: 전체 상세 내용
+     - 인쇄 시: `beforeprint` 이벤트로 자동 펼침
 - **규칙:**
   - 디자인 토큰(`var(--color-*)`) 사용 (하드코딩 색상 금지)
   - Jinja2 슬롯 (`{{ variable }}`) 형식
   - `<style>` 태그를 블록 HTML 안에 포함 (자체 완결)
   - Figma 원본과 시각적으로 유사하되 1:1 복제 아님 (디자인 토큰 기준)
+  - **높이를 고정하지 않음** (auto 또는 비율 사용) — 모드 독립적
+  - 각 블록에 사람용 주석 포함 (용도, 적합/부적합, Figma 원본 위치)
+
+#### B-1a: Figma 웹 → 블록 변환 규칙
+Figma는 웹사이트 디자인(920px 너비, 세로 스크롤)이므로, 블록으로 변환할 때 아래 규칙을 적용한다:
+
+| Figma 원본 | 블록 변환 | 이유 |
+|------------|----------|------|
+| 높이: 고정 px (예: 200px) | `height: auto` 또는 비율(%) | 720px 안에 들어가야 하고, 웹 모드에서도 동작해야 함 |
+| 너비: 고정 px (예: 920px) | `fr` 또는 `%` (grid 컬럼에 맞춤) | 컨테이너 너비에 적응해야 함 |
+| 색상: Figma 값 (예: #1565c0) | `var(--color-accent)` 등 디자인 토큰 | 토큰 체계 통일. 필요 시 `tokens.css`에 토큰 추가 |
+| 폰트: Figma 값 (예: Noto Sans CJK KR 24px) | `var(--font-subtitle)` 등 디자인 토큰 | Pretendard 기준. 크기 비율만 참고 |
+| 간격: Figma 값 (예: padding 20px, gap 80px) | `var(--spacing-inner)`, `var(--spacing-block)` 등 | 토큰 체계. 비율 참고 |
+| 그라데이션 배경 | **제거** | CLAUDE.md 디자인 규칙: 그라데이션 금지 |
+| 호버/클릭 효과 | **제거** | CLAUDE.md 디자인 규칙: 호버 금지 |
+| 애니메이션/트랜지션 | **제거** | CLAUDE.md 디자인 규칙: 애니메이션 금지 |
+| 원형 이미지 마스크 | **제거** (필요 시 별도 변형으로) | 장식 요소는 기본에서 제외 |
+| 텍스트 위치 | `{{ variable }}` Jinja2 슬롯으로 표시 | 교체 가능한 부분 |
+
+**원칙:** Figma에서 가져오는 것은 **정보 구조(카드 배치, 타임라인 흐름, 비교 레이아웃)**이지, 장식 요소가 아니다.
 
 #### B-2: 기존 블록 변형 추가
 - **대상:**
@@ -268,10 +335,29 @@ layouts:
 | 리스크 | 설명 | 대응 |
 |--------|------|------|
 | **색상 불일치** | Figma는 파란 그라데이션 배경 사용, 디자인 토큰은 `#2563eb` 단색 | Figma 색상을 참고하되 토큰 체계 우선. 필요 시 토큰 추가 (`--color-accent-light` 등) |
-| **폰트 불일치** | Figma는 특정 폰트(웹폰트 아닐 수 있음), 토큰은 Pretendard | Pretendard 유지. Figma 폰트 크기 비율만 참고 |
-| **여백 불일치** | Figma 920px 프레임 vs 슬라이드 1280px | 비율 기반으로 변환 (920:1280 = 0.72배) |
+| **폰트 불일치** | Figma는 Noto Sans CJK KR 사용, 토큰은 Pretendard Variable | Pretendard 유지. Figma 폰트 크기 비율만 참고 |
+| **여백 불일치** | Figma 920px 프레임 vs 슬라이드 1280px | 비율 기반으로 변환. 고정 px 대신 토큰 사용 |
+| **웹 vs 슬라이드** | Figma는 웹사이트(세로 스크롤, 920x1231~2208px), 슬라이드는 고정(1280x720px) | 높이 고정하지 않음(auto). 컨테이너가 모드를 결정 |
 
-**원칙:** Figma 디자인을 1:1 복제하지 않는다. 패턴(구조)만 추출하고, 스타일은 디자인 토큰으로 통일한다.
+**원칙:** Figma 디자인을 1:1 복제하지 않는다. 패턴(정보 구조)만 추출하고, 스타일은 디자인 토큰으로 통일한다.
+
+**디자인 토큰 매핑 테이블 (Figma 추출 시 작성):**
+Figma에서 추출한 색상/폰트/간격을 기존 `tokens.css`와 매핑하고, 누락된 토큰이 있으면 추가한다.
+
+| Figma 속성 | 추출값 (예시) | 기존 토큰 매핑 | 신규 토큰 필요? |
+|------------|-------------|--------------|--------------|
+| 배경색 (SOLID fill) | `#f8fafc` | `--color-bg-subtle` | - |
+| 포인트 색상 | `#1565c0` | `--color-accent` (현재 `#2563eb`) | 검토 필요 |
+| 텍스트 색상 | `#1e293b` | `--color-primary` | - |
+| 보조 텍스트 | `#64748b` | `--color-neutral` | - |
+| 경고/강조 | `#dc2626` | `--color-danger` | - |
+| 본문 폰트 크기 | `16px` | `--font-body` (현재 `0.95rem ≈ 15.2px`) | 비율 확인 |
+| 제목 폰트 크기 | `24px` | `--font-subtitle` (현재 `1.25rem = 20px`) | 비율 확인 |
+| 블록 간 간격 | `20px` | `--spacing-block` | - |
+| 내부 패딩 | `16px` | `--spacing-inner` | - |
+| 카드 상단 액센트 | `3px solid` | `--accent-border` | - |
+
+이 매핑 테이블은 Phase A-2에서 실제 Figma 값을 추출한 후 정확한 값으로 채운다. 기존 토큰과 차이가 크면 토큰을 추가하되, 기존 토큰의 값을 변경하지 않는다 (기존 7개 블록이 깨질 수 있음).
 
 ### 2. 블록 개수 증가 → 디자인 팀장 혼란
 
@@ -296,10 +382,37 @@ layouts:
 
 | 리스크 | 설명 | 대응 |
 |--------|------|------|
-| **CSS 미제공** | Figma API는 CSS를 직접 제공하지 않음. 스타일 속성(fill, fontSize 등)만 제공 | 스타일 속성에서 CSS 수동 변환. 복잡한 것은 스크린샷 보고 직접 작성 |
-| **이미지 에셋** | 벡터(VECTOR, ELLIPSE)는 PNG로 렌더링 가능하나 CSS 재현 필요 | 단순 도형은 CSS로 재현, 복잡한 것은 PNG export 후 img 태그 |
+| **CSS 미제공** | Figma REST API는 CSS를 직접 제공하지 않음. 스타일 속성만 제공 | **Framelink MCP 사용 시 자동 CSS 변환.** REST API만 사용 시 수동 변환 필요 |
+| **이미지 에셋** | 벡터(VECTOR, ELLIPSE)는 PNG로 렌더링 가능하나 CSS 재현 필요 | **Framelink MCP `download_figma_images`로 일괄 export.** 단순 도형은 CSS, 복잡한 것은 PNG |
 | **INSTANCE 참조** | Figma 컴포넌트(Instance)의 master 확인 필요 | `GET /v1/files/{key}/components`로 마스터 컴포넌트 조회 |
-| **Rate Limit** | Figma API rate limit 존재 | 한 번에 대량 호출 자제, 결과 캐싱 |
+| **Rate Limit** | REST API depth 깊은 요청 시 30분 차단 가능 | **Framelink MCP가 토큰 효율적 (raw API 대비 1/5).** 얕게 요청 후 필요한 노드만 상세 조회. 결과 캐싱 |
+| **디자인 토큰 접근** | REST API로는 Figma 변수/토큰 추출 불가 (별도 scope 필요) | **Figma 공식 MCP `get_variable_defs` 사용.** 또는 노드 속성에서 수동 추출 |
+| **의미적 HTML 추론 불가** | "버튼"은 FRAME+TEXT, "카드"는 FRAME+FRAME — 태그 구분 없음 | 노드 이름(naming convention)으로 추론. 예: `section_title`, `example-card` |
+
+#### MCP 도구 설정
+
+**Framelink MCP (권장, CSS-ready 추출):**
+```json
+// Claude Code MCP 설정
+{
+  "mcpServers": {
+    "Framelink MCP for Figma": {
+      "command": "cmd",
+      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
+    }
+  }
+}
+```
+- `get_figma_data`: 노드 스타일을 CSS-ready YAML로 변환 (색상→hex, 레이아웃→flex, 그림자→box-shadow)
+- `download_figma_images`: 이미지 일괄 다운로드 (크롭, 중복 제거 자동)
+
+**Figma 공식 MCP (디자인 토큰 + 스크린샷):**
+```
+claude mcp add --transport http figma https://mcp.figma.com/mcp
+```
+- `get_variable_defs`: 디자인 토큰(색상, 간격, 타이포) 추출
+- `get_screenshot`: 시각 참고용 스크린샷
+- 주의: Free/Starter 플랜 = 월 6회 호출 제한
 
 ### 5. Starlight(.astro) 연결 시 충돌
 
@@ -354,23 +467,69 @@ A-2 (노드 구조 분석) ──┘
 ```
 docs/
 ├── figma-screenshots/           # A-1: 각 프레임 PNG
-├── figma-analysis/              # A-2: 노드 구조 문서
+├── figma-analysis/              # A-2: 노드 구조 문서 + 디자인 토큰 매핑 테이블
 └── FIGMA-COMPONENT-EXTRACTION-PLAN.md  # 이 파일
 
 templates/
-├── catalog.yaml                 # C-1: 블록 카탈로그 (AI용 + 사람용)
+├── catalog.yaml                 # C-1: 블록 카탈로그 (AI용 메뉴판 + 사람용 참고)
 ├── blocks/
-│   ├── (기존 7개)
-│   ├── section-title.html       # B-1: 신규
-│   ├── example-card.html        # B-1: 신규
-│   ├── image-gallery.html       # B-1: 신규
-│   ├── timeline.html            # B-1: 신규
-│   ├── big-number.html          # B-1: 신규
-│   ├── icon-list.html           # B-1: 신규
-│   ├── quote-block-decorated.html  # B-2: 변형
-│   ├── card-grid-icon.html      # B-2: 변형
-│   └── comparison-visual.html   # B-2: 변형
-└── slide-base.html              # B-3: 업데이트
+│   ├── comparison/              # 기존 (폴더 구조로 재편)
+│   │   ├── default.html
+│   │   └── preview.png
+│   ├── card-grid/               # 기존
+│   │   ├── default.html
+│   │   ├── icon.html            # B-2: 변형
+│   │   └── preview.png
+│   ├── relationship/            # 기존
+│   ├── process/                 # 기존
+│   ├── quote-block/             # 기존
+│   │   ├── default.html
+│   │   ├── decorated.html       # B-2: 변형
+│   │   └── preview.png
+│   ├── conclusion-bar/          # 기존
+│   ├── comparison-table/        # 기존
+│   ├── section-title/           # B-1: 신규
+│   │   ├── default.html
+│   │   └── preview.png
+│   ├── example-card/            # B-1: 신규
+│   │   ├── single.html
+│   │   ├── 2col.html
+│   │   ├── 3col.html
+│   │   └── preview.png
+│   ├── image-block/             # B-1: 신규 (3변형)
+│   │   ├── full.html            # 전체 너비 (핵심 도표)
+│   │   ├── side.html            # 텍스트 옆 (보조 이미지)
+│   │   ├── thumb.html           # 썸네일 (참고 문서)
+│   │   └── preview.png
+│   ├── image-gallery/           # B-1: 신규
+│   │   ├── 2col.html
+│   │   ├── 3col.html
+│   │   ├── 2x2.html
+│   │   └── preview.png
+│   ├── timeline/                # B-1: 신규
+│   │   ├── vertical.html
+│   │   ├── horizontal.html
+│   │   └── preview.png
+│   ├── big-number/              # B-1: 신규
+│   │   ├── 3col.html
+│   │   ├── 4col.html
+│   │   └── preview.png
+│   ├── icon-list/               # B-1: 신규
+│   │   ├── vertical.html
+│   │   ├── grid.html
+│   │   └── preview.png
+│   └── details-block/           # B-1: 신규
+│       ├── default.html
+│       └── preview.png
+├── slide-base.html              # B-3: 업데이트 (슬라이드 모드)
+└── page-base.html               # 향후: 웹/스크롤 모드
+
+samples/                         # 완성 슬라이드 레시피
+├── dx-bim-comparison/
+│   ├── slide.html               # 완성 HTML
+│   ├── preview.png              # 스크린샷
+│   └── meta.yaml                # 사용된 블록 조합 + Figma 원본 참조
+└── ...
 
 src/
 ├── design_director.py           # C-2: catalog.yaml 연동
@@ -379,10 +538,45 @@ src/
 
 ---
 
+## PROGRESS.md 연동
+
+이 계획의 태스크들은 PROGRESS.md에 아래와 같이 등록한다:
+
+### Phase F (Figma 컴포넌트 추출) — PROGRESS.md 등록 항목
+
+| 태스크 | 상태 | 의존성 | 메모 |
+|--------|------|--------|------|
+| F-A1: Figma 스크린샷 확보 | todo | MCP 설치 후 | Framelink MCP 또는 REST API |
+| F-A2: 노드 구조 심층 분석 | todo | F-A1 | CSS-ready 데이터 + 토큰 매핑 테이블 |
+| F-A3: 패턴 분류 + 명명 | todo | F-A1, F-A2 | 블록 후보 목록 확정 |
+| F-B1: 신규 블록 템플릿 제작 (8~10종) | todo | F-A3 | 폴더 구조, 변환 규칙 적용 |
+| F-B1a: Figma 웹→블록 변환 규칙 검증 | todo | F-B1 | 토큰 매핑, 높이 auto 확인 |
+| F-B2: 기존 블록 변형 추가 | todo | F-B1 | CSS만 변형, 슬롯 유지 |
+| F-B3: slide-base.html 업데이트 | todo | F-B1 | 기존 7개 블록 깨지지 않는지 검증 |
+| F-C1: catalog.yaml 생성 | todo | F-B1 | when/not_for/slots/char_limits |
+| F-C2: 팀장 프롬프트 연결 | todo | F-C1 | catalog.yaml → 시스템 프롬프트 |
+| F-C3: renderer.py 업데이트 | todo | F-C1 | 신규 블록 로드 + BLOCK_SLOTS 동기화 |
+| F-T1: 기존 테스트 재실행 | todo | F-B3, F-C3 | DA-16 기존 케이스 전체 통과 확인 |
+
+**사전 세팅 (Figma 작업 시작 전 필요):**
+
+| 세팅 | 상태 | 설명 |
+|------|------|------|
+| Framelink MCP 설치 | todo | `npx figma-developer-mcp --figma-api-key=...` |
+| Figma 공식 MCP 설치 | todo | `claude mcp add --transport http figma https://mcp.figma.com/mcp` |
+| 기존 블록 폴더 구조 재편 | todo | 플랫 파일 → 블록별 폴더 (`templates/blocks/{name}/`) |
+| preview.png 생성 방법 확보 | todo | HTML을 브라우저로 열어 스크린샷 (수동 또는 Playwright) |
+
+---
+
 ## 금지 사항
 
-1. Figma 디자인을 1:1 복제하지 않는다 (패턴만 추출, 스타일은 토큰 기준)
+1. Figma 디자인을 1:1 복제하지 않는다 (정보 구조만 추출, 장식은 제거, 스타일은 토큰 기준)
 2. 기존 7개 블록 템플릿을 수정하지 않는다 (신규/변형은 별도 파일)
 3. 한 번에 모든 블록을 만들지 않는다 (A-3 분류 결과를 보고 우선순위 재조정)
 4. catalog.yaml 없이 블록을 추가하지 않는다 (카탈로그 미등록 = 디자인 팀장이 모름)
 5. Kei Persona Agent 코드를 수정하지 않는다
+6. 블록의 높이를 고정 px로 하드코딩하지 않는다 (모드 독립적이어야 함)
+7. 기존 `tokens.css`의 값을 변경하지 않는다 (신규 토큰 추가는 가능, 기존 값 변경은 7개 블록 깨짐 위험)
+8. 이미지를 crop하지 않는다 (원본 그대로, 크기만 조절)
+9. 그라데이션, 호버, 애니메이션 등 Figma 장식 요소를 가져오지 않는다