@su-record/vibe 2.8.36 → 2.8.38

package/skills/vibe.figma.convert/rubrics/conversion-rules.md

@@ -1,83 +1,74 @@
-# React+Tailwind → Project Stack Conversion Rules
-
-## Mode Selection (Do This First)
-
-Classify each section before writing any code. Literal mode if ANY of:
-- 15+ asset URLs in the section
-- Fractional coordinates (`left-[117.13px]`)
-- `mix-blend-*` on any layer
-- `rotate-[Ndeg]` or `-scale-y-100`
-- `mask-image` usage
-- `blur-[Npx]` filter
-- BG cropped from 2560px+ source
-
-Normal mode only when ALL of:
-- Flex/grid layout, no absolute coordinates (or integer-only)
-- Fewer than 10 asset URLs
-- No blend/rotate/mask/blur
-
-## Normal Mode Rules
-
-- Extract CSS values from Tailwind classes — never estimate
-- Apply `scaleFactor` to all `px` values; never to colors, opacity, z-index, line-height (unitless)
-- Put layout properties in `layout/_section.scss`, visual/text properties in `components/_section.scss`
-- No `<style>` block in the component file
-- No inline `style=""` attribute in the template
-
-## Literal Mode Rules
-
-- Preserve the full HTML nesting structure 1:1
-- Keep all absolute coordinates, fractional px values (rounded after scaling)
-- Keep all `mix-blend-mode`, `rotate`, `mask-image`, `blur` values unchanged
-- Put all styles in `<style scoped>` inside the component
-- Do not create external SCSS files for literal sections
-
-## Tailwind Class Gotchas
-
-| Tailwind | Correct CSS | Common Mistake |
-|----------|------------|----------------|
-| `size-full` | `width: 100%; height: 100%` | Only setting `width: 100%` |
-| `inset-0` | `inset: 0` (shorthand) | Expanding to 4 properties |
-| `inset-[-18.13%]` | `inset: -18.13%` | Scaling the % value |
-| `overflow-clip` | `overflow: clip` | Using `overflow: hidden` |
-| `leading-[1.4]` | `line-height: 1.4` | Applying scaleFactor |
-| `max-w-none` | `max-width: none` | Omitting entirely |
-| `object-cover` on `<img>` | `object-fit: cover` + parent `overflow: hidden` | Forgetting parent clip |
-| `pointer-events-none` | `pointer-events: none` | Omitting for decorative layers |
-| `text-white` | `color: #FFFFFF` | Using `color: white` |
-| `font-black` | `font-weight: 900` | Using `font-weight: bold` |
-
-## Scale Application
-
-Apply `× scaleFactor` to:
-- `px` sizes: font-size, padding, margin, gap, border-radius, width, height, top, left, bottom, right
-- `px` in box-shadow, blur filter, letter-spacing
-
-Do NOT scale:
-- Color values
-- Opacity values
-- `%` values
-- Unitless line-height
-- z-index
-- `mix-blend-mode` values
-- `rotate` degree values
-
-## Sprite / Overflow Image Pattern
-
-When `left` is a large negative %, it is a sprite crop — do NOT scale:
-```css
-/* Correct */
-left: -129.09%;
-width: 229.09%;
-
-/* Wrong — do not scale % values */
-left: -86.09%; /* -129.09 × 0.667 — incorrect */
+# Tree → Code Conversion Rules
+
+## Core Principle
+
+모든 CSS 값은 tree.json에서 직접 매핑한다. 추정하지 않는다.
+
+## Node → HTML Mapping (Do This First)
+
+각 노드를 순서대로 분류:
+
+| 노드 조건 | HTML 매핑 |
+|-----------|----------|
+| FRAME + Auto Layout | `<div>` + flex (direction/gap/padding 직접) |
+| FRAME + no Auto Layout | `<div>` + position:relative (자식 absolute) |
+| TEXT | `<span>` → Claude가 `<h2>/<p>/<button>` 승격 |
+| RECTANGLE/VECTOR + imageRef | `<img src="다운로드된 파일">` |
+| VECTOR/GROUP ≤ 64px | 아이콘 → `<img>` (렌더링 이미지) |
+| INSTANCE 반복 3+ | v-for (Vue) 또는 .map() (React) |
+| 크기 0px | 스킵 |
+| VECTOR 장식선 (w/h ≤ 2px) | 스킵 |
+
+## 배경 레이어 판별
+
+부모와 동일 크기(±5%) + imageRef + 형제 중 첫 위치:
+  → `position: absolute; inset: 0; z-index: 0; object-fit: cover`
+  → 부모에 `position: relative; overflow: hidden` 추가
+
+## CSS 직접 매핑 규칙
+
+tree.json의 css 객체를 SCSS에 1:1 매핑한다:
+
+### layout/ 파일에 넣는 속성
+```
+display, flex-direction, justify-content, align-items,
+gap, padding, width, height, position, overflow, z-index, inset
 ```
 
-## Class Naming (Literal Mode)
+### components/ 파일에 넣는 속성
+```
+background-color, color, font-family, font-size, font-weight,
+line-height, letter-spacing, text-align, border, border-radius,
+box-shadow, opacity, mix-blend-mode, filter, backdrop-filter
+```
+
+## Scale Factor 적용
+
+**적용 (px 값):**
+  font-size, padding, margin, gap, width, height, border-radius,
+  border-width, box-shadow px, filter px, letter-spacing
+
+**미적용:**
+  color, opacity, font-weight, font-family, z-index,
+  line-height(단위 없을 때), text-align, mix-blend-mode,
+  rotate, % 값
+
+## 장식 레이어 최적화
+
+BG 그룹 내 장식 요소가 10개 이상:
+  → 배경 이미지 1장 + 핵심 장식 2~3개만 유지
+  → 나머지 생략 (Phase 4 스크린샷 검증에서 확인)
+
+## Class Naming
+
+BEM 패턴: `.sectionName__childName`
+  - 부모: `.heroSection`
+  - 자식: `.heroSection__bg`, `.heroSection__title`, `.heroSection__shareBtn`
+  - template에서 사용한 모든 클래스가 SCSS에 정의되어야 함
+
+## 자가 검증 (코드 작성 후)
 
-Source priority: `data-name` attribute → `data-node-id`
-- `data-name="BG"` → `.bg`
-- `data-name="Light"` → `.light`
-- No `data-name` → `.node-{nodeId}` (replace `:` with `-`)
-- Conflicts: append parent name prefix (`.heroLight`, `.kidLight`)
+- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
+- [ ] 모든 img src가 static/에 실제 존재
+- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
+- [ ] tree.json에 없는 CSS 값이 SCSS에 없음

package/skills/vibe.figma.convert/templates/component.md

@@ -1,152 +1,144 @@
-# Component Output Template
+# Component Output Template — Tree-Based Generation
 
-Use this template when generating a section component from Figma reference code.
+tree.json 노드를 기반으로 컴포넌트를 생성할 때 이 템플릿을 따른다.
 
 ---
 
-## Normal Mode (External SCSS)
+## Vue / Nuxt (External SCSS)
 
 ```vue
-<!-- components/{{FEATURE_KEY}}/{{ComponentName}}.vue -->
+<!--
+  tree.json 구조:
+  {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
+  ├── BG (FRAME — 배경 레이어)
+  │   └── imageRef → {{BG_IMAGE}}
+  ├── {{CHILD_1}} (FRAME — flex-column, gap:{{GAP}}px)
+  │   ├── TEXT "{{TEXT_1}}"
+  │   └── TEXT "{{TEXT_2}}"
+  └── {{CHILD_2}} (FRAME — flex-row, gap:{{GAP_2}}px)
+      └── INSTANCE × {{REPEAT_COUNT}} (반복 패턴)
+-->
 <template>
   <section class="{{sectionName}}">
-    <!-- BG Layer (if section has background image) -->
-    <div class="{{sectionName}}Bg">
-      <img src="/images/{{FEATURE_KEY}}/{{bg-file}}.webp" alt="" aria-hidden="true" />
+    <!-- BG: 부모와 동일 크기 + imageRef → 배경 레이어 -->
+    <div class="{{sectionName}}__bg">
+      <img src="/images/{{FEATURE_KEY}}/{{bg-file}}.png" alt="" aria-hidden="true" />
     </div>
 
-    <!-- Content Layer -->
-    <div class="{{sectionName}}Content">
-      <!-- Title image (if present) -->
-      <div class="{{sectionName}}Title">
-        <img src="/images/{{FEATURE_KEY}}/{{title-file}}.webp" alt="{{TITLE_ALT_TEXT}}" />
-      </div>
-
-      <!-- Repeating items (from storyboard mock data) -->
-      <ul class="{{sectionName}}List">
-        <li
-          v-for="item in items"
-          :key="item.id"
-          class="{{sectionName}}Item"
-        >
-          <img :src="item.image" :alt="item.label" />
-          <p class="{{sectionName}}ItemLabel">{{ item.label }}</p>
-        </li>
-      </ul>
-
-      <!-- CTA Button -->
-      <button class="{{sectionName}}Btn" @click="handleAction">
-        {{BUTTON_LABEL}}
-      </button>
+    <!-- {{CHILD_1}}: tree flex-column, gap:{{GAP}}px → 직접 매핑 -->
+    <div class="{{sectionName}}__{{child1Name}}">
+      <!-- TEXT 노드 → Claude가 시맨틱 태그 판단 -->
+      <h2 class="{{sectionName}}__title">{{TEXT_1}}</h2>
+      <p class="{{sectionName}}__desc">{{TEXT_2}}</p>
     </div>
+
+    <!-- {{CHILD_2}}: INSTANCE 반복 → v-for -->
+    <ul class="{{sectionName}}__list">
+      <li
+        v-for="item in items"
+        :key="item.id"
+        class="{{sectionName}}__item"
+      >
+        <img :src="item.image" :alt="item.name" class="{{sectionName}}__itemImg" />
+        <span class="{{sectionName}}__itemLabel">{{ item.name }}</span>
+      </li>
+    </ul>
   </section>
 </template>
 
 <script setup lang="ts">
 /**
  * {{SECTION_DISPLAY_NAME}}
+ * tree.json: {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
  *
  * [기능 정의]
  * - {{FEATURE_REQUIREMENT_1}}
- * - {{FEATURE_REQUIREMENT_2}}
  *
  * [인터랙션]
  * ① {{INTERACTION_1}}
- * ② {{INTERACTION_2}}
  *
  * [상태] {{STATE_LIST}}
  */
 
 interface {{ItemType}} {
-  id: number
-  label: string
+  id: string
+  name: string
   image: string
 }
 
-const items: {{ItemType}}[] = [
-  { id: 1, label: '{{MOCK_LABEL_1}}', image: '/images/{{FEATURE_KEY}}/{{mock-img-1}}.webp' },
-  { id: 2, label: '{{MOCK_LABEL_2}}', image: '/images/{{FEATURE_KEY}}/{{mock-img-2}}.webp' },
-  { id: 3, label: '{{MOCK_LABEL_3}}', image: '/images/{{FEATURE_KEY}}/{{mock-img-3}}.webp' },
-]
-
-const emit = defineEmits<{
-  action: []
+defineProps<{
+  items: {{ItemType}}[]
 }>()
-
-function handleAction(): void {
-  // TODO: {{ACTION_DESCRIPTION}}
-  emit('action')
-}
 </script>
 <!-- styles: styles/{{FEATURE_KEY}}/layout/_{{section}}.scss + components/_{{section}}.scss -->
 ```
 
 ---
 
-## Literal Mode (Scoped CSS)
-
-```vue
-<!-- components/{{FEATURE_KEY}}/{{ComponentName}}.vue -->
-<template>
-  <section class="{{sectionName}}">
-    <!-- 1:1 structure from reference code — preserve all nesting -->
-    <div class="bg">
-      <img src="/images/{{FEATURE_KEY}}/{{bg-file}}.webp" alt="" aria-hidden="true" />
-    </div>
-    <div class="titleArea">
-      <img src="/images/{{FEATURE_KEY}}/{{title-file}}.webp" alt="{{TITLE_ALT_TEXT}}" />
-    </div>
-    <!-- Re-insert Phase 1 functional elements at appropriate positions -->
-    <button class="ctaBtn" @click="handleAction">{{BUTTON_LABEL}}</button>
-  </section>
-</template>
+## SCSS Layout (tree.json 직접 매핑)
 
-<script setup lang="ts">
-/**
- * {{SECTION_DISPLAY_NAME}}
- * [기능 정의] {{FEATURE_REQUIREMENT_1}}
- * [인터랙션] ① {{INTERACTION_1}}
- * [상태] {{STATE_LIST}}
- */
+```scss
+// tree.json 데이터:
+// {{SECTION_NAME}}: { width:{{WIDTH}}, height:{{HEIGHT}}, overflow:hidden }
+// {{CHILD_1}}: { display:flex, flexDirection:column, gap:{{GAP}}px, padding:"{{PADDING}}" }
+// scaleFactor = {{SCALE_FACTOR}}
 
-function handleAction(): void {
-  // TODO: {{ACTION_DESCRIPTION}}
-}
-</script>
-
-<style scoped>
 .{{sectionName}} {
   position: relative;
   width: 100%;
-  height: {{SECTION_HEIGHT_SCALED}}px; /* {{SECTION_HEIGHT_ORIGINAL}} × {{SCALE_FACTOR}} */
-  overflow: hidden;
+  height: {{HEIGHT_SCALED}}px;           // tree: {{HEIGHT}} × {{SCALE_FACTOR}}
+  overflow: hidden;                       // tree: overflow:hidden
 }
 
-.bg {
+.{{sectionName}}__bg {
   position: absolute;
   inset: 0;
+  z-index: 0;
+  img { width: 100%; height: 100%; object-fit: cover; }
 }
 
-.bg img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.{{sectionName}}__{{child1Name}} {
+  display: flex;                          // tree: display:flex
+  flex-direction: column;                 // tree: flexDirection:column
+  gap: {{GAP_SCALED}}px;                  // tree: {{GAP}} × {{SCALE_FACTOR}}
+  padding: {{PADDING_SCALED}};            // tree: "{{PADDING}}" × {{SCALE_FACTOR}}
 }
+```
 
-.titleArea {
-  position: absolute;
-  top: {{TITLE_TOP_SCALED}}px;    /* {{TITLE_TOP_ORIGINAL}} × {{SCALE_FACTOR}} */
-  left: 50%;
-  transform: translateX(-50%);
-  width: {{TITLE_WIDTH_SCALED}}px;
-  height: {{TITLE_HEIGHT_SCALED}}px;
-}
+---
+
+## SCSS Components (tree.json 직접 매핑)
+
+```scss
+// tree.json 데이터:
+// TEXT "{{TEXT_1}}": { fontSize:{{FONT_SIZE}}px, fontWeight:{{FONT_WEIGHT}}, color:{{COLOR}} }
 
-/* {{RESPONSIVE_BREAKPOINT}} */
-@media (min-width: {{BP_PC}}px) {
-  .{{sectionName}} {
-    height: {{SECTION_HEIGHT_PC_SCALED}}px;
-  }
+.{{sectionName}}__title {
+  font-size: {{FONT_SIZE_SCALED}}px;      // tree: {{FONT_SIZE}} × {{SCALE_FACTOR}}
+  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (scaleFactor 미적용)
+  color: {{COLOR}};                       // tree: 직접 (scaleFactor 미적용)
 }
-</style>
 ```
+
+---
+
+## React / Next.js 변환
+
+| Vue | React |
+|-----|-------|
+| `class="..."` | `className={styles.xxx}` (CSS Module) |
+| `v-for="i in items" :key="i.id"` | `{items.map(i => <X key={i.id} />)}` |
+| `v-if="condition"` | `{condition && <X />}` |
+| `@click="handler"` | `onClick={handler}` |
+| `<img src="/images/..."` | `<Image src="/images/..."` |
+
+---
+
+## 검증 체크리스트
+
+- [ ] tree.json에 없는 CSS 값이 SCSS에 없음
+- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
+- [ ] 모든 img src가 static/에 실제 존재
+- [ ] TEXT 노드의 characters가 template에 그대로 삽입됨
+- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
+- [ ] 빌드 성공

package/skills/vibe.figma.extract/SKILL.md

@@ -1,49 +1,28 @@
 ---
 name: vibe.figma.extract
-description: Figma REST API로 재료 확보 — 스크린샷, 이미지, CSS, 트리, 텍스트
+description: Figma REST API로 코드 생성 데이터 확보 — 트리(primary), 이미지, 스크린샷(검증용)
 triggers: []
 tier: standard
 ---
 
-# vibe.figma.extract — 재료 확보
+# vibe.figma.extract — 코드 생성 데이터 확보
 
-Figma REST API(`src/infra/lib/figma/`)를 사용하여 **퍼즐 조립에 필요한 모든 재료**를 추출.
-추출한 데이터는 코드 변환용이 아닌 **재료함(material inventory)**으로 사용된다.
-
----
-
-## 1. 스크린샷 — 정답 사진
+Figma REST API(`src/infra/lib/figma/`)를 사용하여 **구조적 코드 생성에 필요한 모든 데이터**를 추출.
 
 ```
-가장 먼저 확보. 이것이 "만들어야 할 결과물"의 기준.
-
-전체 스크린샷:
-  node "[FIGMA_SCRIPT]" screenshot {fileKey} {nodeId} --out=/tmp/{feature}/full-screenshot.png
-
-섹션별 스크린샷 (1depth 자식 프레임 각각):
-  node "[FIGMA_SCRIPT]" screenshot {fileKey} {child.nodeId} --out=/tmp/{feature}/sections/{name}.png
+추출 우선순위:
+  1순위: 노드 트리 + CSS (코드 생성의 PRIMARY 소스)
+  2순위: 이미지 에셋 (fill 이미지 + 아이템 노드 렌더링)
+  3순위: 스크린샷 (Phase 4 시각 검증용 — 코드 생성에 사용하지 않음)
 ```
 
 ---
 
-## 2. 이미지 에셋 — 시각 재료
+## 1. 노드 트리 + CSS — 코드 생성의 원천
 
 ```
-트리에서 imageRef 수집 → Figma API로 다운로드:
+가장 먼저 확보. 이것이 HTML + SCSS 코드의 직접적 소스.
 
-Bash:
-  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --out=/tmp/{feature}/images/ --depth=10
-
-반환: { total: N, images: { "imageRef": "/path/to/file.png", ... } }
-
-검증: total = refs.size (누락 0), 0byte 파일 없음
-```
-
----
-
-## 3. 노드 트리 + CSS — 수치 재료
-
-```
 Bash:
   node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
 
@@ -59,22 +38,35 @@ Bash:
     children: [...]
   }
 
-⚠️ 주의: 이 트리는 HTML 구조로 변환하지 않는다.
-용도는 오직:
-  - 정확한 CSS 수치 참조 (색상, 크기, 간격)
-  - 텍스트 콘텐츠 추출
-  - 이미지 참조 매핑
-  - 디자인 토큰 추출
+→ /tmp/{feature}/tree.json 에 저장
+
+트리 데이터의 용도 (vibe.figma.convert에서 직접 매핑):
+  - Auto Layout → CSS Flexbox (direction, gap, padding, align 1:1)
+  - absoluteBoundingBox → width, height (× scaleFactor)
+  - fills/strokes/effects → background, border, shadow 등
+  - TEXT 노드 → 텍스트 콘텐츠 + 타이포그래피 CSS
+  - imageRef → 이미지 에셋 매핑
+  - name/type → 시맨틱 태그 판단 힌트 (Claude 사용)
 ```
 
-### Figma 속성 → CSS 변환표
+### Figma 속성 → CSS 직접 매핑표
 
-도구가 자동으로 변환하는 속성 (재료로 활용):
+트리 추출 도구가 자동 변환하는 속성. **이 값들이 SCSS에 직접 매핑된다:**
 
-| Figma 속성 | CSS | 스케일 적용 |
-|-----------|-----|-----------|
+| Figma 속성 | CSS | scaleFactor 적용 |
+|-----------|-----|-----------------|
+| `layoutMode=VERTICAL` | `display:flex; flex-direction:column` | ❌ |
+| `layoutMode=HORIZONTAL` | `display:flex; flex-direction:row` | ❌ |
+| `primaryAxisAlignItems` | `justify-content` | ❌ |
+| `counterAxisAlignItems` | `align-items` | ❌ |
+| `itemSpacing` | `gap` | ✅ |
+| `padding*` | `padding` | ✅ |
+| `absoluteBoundingBox.width/height` | `width/height` | ✅ |
+| `layoutPositioning=ABSOLUTE` | `position: absolute` | ❌ |
+| `clipsContent` | `overflow: hidden` | ❌ |
 | `fills[].color` | `background-color` | ❌ |
 | `fills[].type=IMAGE` | `imageRef` (다운로드 대상) | — |
+| `fills[].color` (TEXT) | `color` | ❌ |
 | `strokes[].color` + `strokeWeight` | `border` | ✅ (width만) |
 | `effects[].DROP_SHADOW` | `box-shadow` | ✅ (px만) |
 | `effects[].LAYER_BLUR` | `filter: blur()` | ✅ |
@@ -88,64 +80,129 @@ Bash:
 | `style.lineHeightPx` | `line-height` | ❌ |
 | `style.letterSpacing` | `letter-spacing` | ✅ |
 | `style.textAlignHorizontal` | `text-align` | ❌ |
-| `fills[].color` (TEXT) | `color` | ❌ |
 | `characters` | 텍스트 내용 | — |
-| `absoluteBoundingBox.width/height` | `width/height` | ✅ |
-| `layoutMode=VERTICAL` | `display:flex; flex-direction:column` | ❌ |
-| `layoutMode=HORIZONTAL` | `display:flex; flex-direction:row` | ❌ |
-| `primaryAxisAlignItems` | `justify-content` | ❌ |
-| `counterAxisAlignItems` | `align-items` | ❌ |
-| `itemSpacing` | `gap` | ✅ |
-| `padding*` | `padding` | ✅ |
-| `clipsContent` | `overflow: hidden` | ❌ |
-| `layoutPositioning=ABSOLUTE` | `position: absolute` | ❌ |
 
 ---
 
-## 4. 재료함 정리 (material-inventory)
+## 2. 이미지 에셋
+
+### 2-1. Fill 이미지 다운로드
 
 ```
-추출 완료 후 재료를 카테고리별로 정리:
+트리에서 imageRef 수집 → Figma API로 다운로드:
 
-이미지 목록:
-  파일명 | 크기 | 용도 추정
-  hero-bg.png | 720×1280 | 배경 (큰 사이즈, BG 레이어)
-  title.png | 620×174 | 타이틀 이미지
-  btn-share.png | 48×48 | 아이콘 (작은 사이즈)
+Bash:
+  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --out=/tmp/{feature}/images/ --depth=10
+
+반환: { total: N, images: { "imageRef": "/path/to/file.png", ... } }
+
+검증: total = refs.size (누락 0), 0byte 파일 없음
+```
+
+### 2-2. 아이템/아이콘 노드 렌더링
+
+```
+fill 이미지가 없지만 시각적으로 의미 있는 노드를 PNG로 렌더링:
+
+대상 식별 (tree.json에서):
+  - INSTANCE/COMPONENT 타입 중 크기 50~300px
+  - name에 "item", "icon", "reward", "token", "coin", "badge" 포함
+  - VECTOR/GROUP 중 크기 ≤ 64px (아이콘 후보)
+
+렌더링:
+  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --render --nodeIds={id1},{id2},... --out=/tmp/{feature}/images/
+
+→ 벡터/인스턴스 에셋도 PNG로 확보
+→ Phase 3에서 목 데이터의 image 경로에 연결 가능
+```
+
+---
+
+## 3. 스크린샷 — 검증 참조용
+
+```
+코드 생성에는 사용하지 않는다. Phase 4 시각 검증에서만 사용.
+
+전체 스크린샷:
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {nodeId} --out=/tmp/{feature}/full-screenshot.png
+
+섹션별 스크린샷 (1depth 자식 프레임 각각):
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {child.nodeId} --out=/tmp/{feature}/sections/{name}.png
 
-색상 팔레트 (tree.json에서 고유값 추출):
-  #0a1628, #00264a, #ffffff, #dadce3, #003879, #419bd3, ...
+용도:
+  ✅ Phase 4에서 렌더링 결과와 pixelmatch 비교
+  ✅ 시각 diff > 임계값 → 수정 판단 참고
+  ❌ Phase 3 코드 생성의 입력으로 사용하지 않음
+```
+
+---
+
+## 4. 추출 데이터 정리
+
+```
+추출 완료 후 /tmp/{feature}/ 구조:
+
+/tmp/{feature}/
+├── tree.json                    ← 코드 생성의 PRIMARY 소스
+├── images/                      ← 이미지 에셋 (fill + 노드 렌더링)
+│   ├── {imageRef}.png           ← fill 이미지
+│   ├── {nodeId}.png             ← 렌더링된 아이템/아이콘
+│   └── ...
+├── full-screenshot.png          ← Phase 4 검증용
+└── sections/                    ← Phase 4 섹션별 검증용
+    ├── hero.png
+    └── ...
 
-폰트 목록:
+이미지 목록:
+  파일명 | 크기 | 용도 (트리 기반 판별)
+  {ref}.png | 720×1280 | 배경 (부모와 동일 크기 + z-index 낮음)
+  {ref}.png | 620×174 | 콘텐츠 이미지 (독립적 크기)
+  {ref}.png | 48×48 | 아이콘 (≤64px)
+  {nodeId}.png | 200×200 | 렌더링된 아이템 (INSTANCE)
+
+색상 팔레트 (tree.json의 backgroundColor/color 고유값):
+  #0a1628, #00264a, #ffffff, ...
+
+  토큰 매핑 테이블 (project-tokens.json 존재 시):
+    | Figma 값 | 기존 토큰 | 상태 |
+    |----------|-----------|------|
+    | #0a1628 | $color-navy | ✅ 재사용 |
+    | #ffd700 | — | 🆕 생성 |
+
+폰트 목록 (tree.json의 fontFamily/fontSize/fontWeight):
   Pretendard: 400/500/700, 16px~48px
-  Roboto Condensed: 700, 24px~36px
 
-텍스트 콘텐츠 (모든 TEXT 노드):
+텍스트 콘텐츠 (모든 TEXT 노드의 characters):
   "겨울 이벤트", "12.1 ~ 12.31", "참여 대상 : PC 유저", ...
 
-간격 패턴 (빈도 높은 값):
+간격 패턴 (tree.json의 gap/padding 빈도 분석):
   gap: 8px, 16px, 24px, 32px
   padding: 16px, 24px, 32px
 ```
 
 ---
 
-## 5. 노드 참조 (보조)
+## 5. 노드 참조 (시맨틱 판단 힌트)
 
 ```
-트리의 name/type은 재료 분류에만 사용:
-
-name 패턴 → 용도 힌트:
-  "BG" → 배경 이미지 (스크린샷에서 확인)
-  "Title", "Txt_*" → 텍스트 영역
-  "Btn_*", "CTA" → 버튼/인터랙티브
-  "Icon_*" → 아이콘
-  "Step1", "Item_*" → 반복 요소
-
-type → 재료 종류:
-  TEXT → 텍스트 콘텐츠 제공
-  RECTANGLE/VECTOR + imageRef → 다운로드 대상 이미지
-  INSTANCE → 반복 사용 가능성 (컴포넌트 후보)
-
-⚠️ 이 정보로 HTML을 생성하지 않는다. 스크린샷을 보고 판단한다.
+트리의 name/type은 Claude의 시맨틱 판단에 힌트로 사용:
+
+name 패턴 → HTML 태그 힌트:
+  "BG" → 배경 레이어 (position:absolute + z-index:0)
+  "Title", "Txt_*" → 제목/텍스트 (<h2>, <p>)
+  "Btn_*", "CTA" → 버튼 (<button>)
+  "Icon_*" → 아이콘 (<img>)
+  "Step1", "Item_*" → 반복 요소 (v-for 후보)
+  "Period", "Info" → 정보 영역 (<div>)
+
+type → 코드 매핑 기준:
+  TEXT → <span> (Claude가 h2/p/button으로 승격)
+  RECTANGLE/VECTOR + imageRef → <img src="다운로드된 파일">
+  FRAME + Auto Layout → <div> + CSS flex
+  FRAME + no Auto Layout → <div> + position:relative
+  INSTANCE 반복 → 컴포넌트 후보 (v-for)
+  GROUP → 논리적 래퍼 (보통 <div>)
+
+이 정보는 트리→HTML 매핑의 보조 힌트이다.
+레이아웃과 스타일은 tree.json의 css 객체에서 직접 매핑한다.
 ```