@su-record/vibe 2.9.1 → 2.9.3

package/skills/vibe.figma/SKILL.md

@@ -1,59 +1,59 @@
 ---
 name: vibe.figma
-description: Figma design to code — 트리 기반 구조적 코드 생성
+description: Figma design to code — tree-based structural code generation
 triggers: []
 tier: standard
 ---
 
 # vibe.figma — Structural Code Generation
 
-## 핵심 원칙
+## Core Principles
 
 ```
-Figma 트리가 코드의 원천이다. 스크린샷은 검증용이다.
+The Figma tree is the source of truth for code. Screenshots are for verification only.
 
-✅ Figma Auto Layout → CSS Flexbox 1:1 기계적 매핑
-✅ Figma CSS 속성 → SCSS 직접 변환 (추정 없음)
-✅ Claude는 시맨틱 판단만: 태그 선택, 컴포넌트 분리, 인터랙션
-✅ 스크린샷은 생성이 아닌 검증에만 사용
+✅ Figma Auto Layout → CSS Flexbox 1:1 mechanical mapping
+✅ Figma CSS properties → SCSS direct conversion (no guessing)
+✅ Claude handles semantic decisions only: tag selection, component splitting, interactions
+✅ Screenshots are used for verification only, not generation
 ```
 
-## ⛔ 불변 규칙
+## Immutable Rules
 
 ```
-1. screenshot으로 콘텐츠를 이미지화 금지
-   ✅ BG 렌더링 (TEXT 자식 없는 배경), 벡터 글자 GROUP, 섹션 스크린샷(검증용)
-   ❌ TEXT 자식 프레임, INSTANCE 반복, 버튼/가격, 섹션 통째 렌더링
+1. Do NOT render content as images via screenshot
+   ✅ BG rendering (backgrounds with no TEXT children), vector-text GROUPs, section screenshots (verification only)
+   ❌ Frames with TEXT children, INSTANCE repetitions, buttons/prices, rendering entire sections
 
-2. BG는 CSS background-image만. <img> 태그 금지.
+2. BG must use CSS background-image only. <img> tag is forbidden.
 
-3. Phase 4 코드 생성 중 새 screenshot 호출 금지.
-   Phase 2 재료만 사용. 복잡해도 HTML+CSS로 구현.
+3. No new screenshot calls during Phase 4 code generation.
+   Use only Phase 2 materials. No matter how complex — implement with HTML+CSS.
 ```
 
-## 전체 플로우
+## Full Flow
 
 ```
-입력: 모든 URL을 한번에 받는다
-  Storyboard: figma.com/...?node-id=aaa (있으면)
+Input: receive all URLs at once
+  Storyboard: figma.com/...?node-id=aaa (if present)
   MO Design:  figma.com/...?node-id=xxx
-  PC Design:  figma.com/...?node-id=yyy (있으면)
+  PC Design:  figma.com/...?node-id=yyy (if present)
 
 → Phase 0: Setup
-→ Phase 1: 스토리보드 분석 → 기능 스펙 문서
-→ Phase 2: 재료 확보 (→ vibe.figma.extract)
-→ Phase 3: 리매핑 (MO↔PC 매칭 → remapped.json)
-→ Phase 4: 순차 코드 생성 (→ vibe.figma.convert)
-→ Phase 5: 컴파일 게이트
-→ Phase 6: 시각 검증 루프
-
-작업 디렉토리:
+→ Phase 1: Storyboard analysis → functional spec document
+→ Phase 2: Gather materials (→ vibe.figma.extract)
+→ Phase 3: Remapping (MO↔PC matching → remapped.json)
+→ Phase 4: Sequential code generation (→ vibe.figma.convert)
+→ Phase 5: Compile gate
+→ Phase 6: Visual verification loop
+
+Working directory:
   /tmp/{feature}/
   ├── mo-main/tree.json, bg/, content/, sections/
   ├── pc-main/tree.json, bg/, content/, sections/
-  └── remapped.json ← Phase 4의 유일한 입력
+  └── remapped.json ← sole input for Phase 4
 
-코드 출력: 프로젝트 디렉토리에 직접 배치
+Code output: placed directly in the project directory
   components/{feature}/, styles/{feature}/
 ```
 
@@ -62,154 +62,302 @@ Figma 트리가 코드의 원천이다. 스크린샷은 검증용이다.
 ## Phase 0: Setup
 
 ```
-1. 스택 감지: package.json → react/vue/svelte, next/nuxt, scss/tailwind
-2. 피처명: Figma 파일명 → kebab-case
-3. 디렉토리: components/{feature}/, public/images/{feature}/, styles/{feature}/
-4. 컴포넌트 인덱싱 → /tmp/{feature}/component-index.json
-   (50개 이하 스캔, props/slots/classes 추출, 2분 이내)
+1. Stack detection: package.json → react/vue/svelte, next/nuxt, scss/tailwind
+2. Feature name: Figma filename → kebab-case
+3. Directories: components/{feature}/, public/images/{feature}/, styles/{feature}/
+4. Component indexing → /tmp/{feature}/component-index.json
+   (scan up to 50 components, extract props/slots/classes, within 2 minutes)
 5. Hooks/Types/Constants → /tmp/{feature}/context-index.json
-6. 디자인 토큰 스캔 → /tmp/{feature}/project-tokens.json
+6. Design token scan → /tmp/{feature}/project-tokens.json
    (SCSS > CSS Variables > Tailwind > CSS-in-JS)
 ```
 
 ---
 
-## Phase 1: 스토리보드 분석
+## Phase 1: Storyboard Analysis
 
 ```
-사용자 입력: URL 또는 PDF/이미지를 줄바꿈으로 입력
+User input: enter URLs or PDF/images separated by newlines
 
-URL 분류 (자동):
-  fileKey 다름 → 스토리보드 vs 디자인
-  ROOT name에 "MO" → 모바일, "PC" → 데스크탑
+URL classification (automatic):
+  Different fileKey → storyboard vs design
+  ROOT name contains "MO" → mobile, "PC" → desktop
 
-스토리보드 분석:
-  depth=2로 프레임 수집 → name 패턴으로 분류
-  SPEC(기능정의서) → CONFIG(해상도) → PAGE(메인 섹션) → SHARED(공통)
-  PDF/이미지도 동일 구조 추출
+Storyboard analysis:
+  Collect frames at depth=3 → classify by name pattern
+  SPEC (functional definition) → CONFIG (resolution) → PAGE (main sections) → SHARED (common)
+  PDF/images follow the same structural extraction
 
-❌ Phase 1에서 코드 파일 생성 금지
+❌ No code file creation during Phase 1
 
-출력 (텍스트만):
-  1. 섹션 목록 테이블 (이름, Figma name, 높이, 설명)
-  2. 각 섹션 기능 정의 ([기능] + [인터랙션] + [상태])
-  3. 공통 컴포넌트 목록
-  4. TypeScript 인터페이스 초안
+Output (text only):
+  1. Section list table (name, Figma name, height, description)
+  2. Functional definition per section ([Function] + [Interaction] + [State])
+  3. Common component list
+  4. TypeScript interface draft
 ```
 
 ---
 
-## Phase 2: 재료 확보 ← Research (병렬)
+## Phase 2: Gather Materials ← Research (parallel)
 
-**→ vibe.figma.extract 스킬의 규칙을 따른다.**
-**코디네이터 패턴: MO/PC 추출을 워커로 병렬 실행.**
+**→ Follow the rules of the vibe.figma.extract skill.**
+**Coordinator pattern: run MO/PC extraction as parallel workers.**
 
 ```
-# [FIGMA_SCRIPT] = ~/.vibe/hooks/scripts/figma-extract.js
+# [FIGMA_SCRIPT] = {{VIBE_PATH}}/hooks/scripts/figma-extract.js
 
-MO/PC 동시 추출 (각각 독립 워커):
-  워커-MO: screenshot → tree → images → 에셋 렌더링 → sections/
-  워커-PC: screenshot → tree → images → 에셋 렌더링 → sections/
-  → 두 워커의 결과가 모두 도달한 후 Phase 3 진행
+Simultaneous MO/PC extraction (each as an independent worker):
+  Worker-MO: screenshot → tree → images → asset rendering → sections/
+  Worker-PC: screenshot → tree → images → asset rendering → sections/
+  → Proceed to Phase 3 only after both workers have completed
 
-단일 BP: 워커 1개로 순차 실행
+Single BP: run sequentially with 1 worker
 
-멀티 프레임 (같은 BP, 다른 페이지):
-  순차 추출 (500ms 간격), 부분 실패 허용
+Multi-frame (same BP, different pages):
+  Sequential extraction (500ms interval), partial failure allowed
 ```
 
 ---
 
-## Phase 3: 리매핑 ← Synthesis (순차, 리더 필수)
+## Phase 3: Data Refinement ← Synthesis (independent per BP)
 
-**MO + PC 있을 때만 실행. 단일 BP면 스킵.**
-**코디네이터 패턴: 리더가 직접 MO↔PC 매칭. 워커 위임 금지.**
-**리더가 두 tree를 모두 이해한 상태에서 diff를 추출해야 품질 보장.**
+**Split and refine each BP's tree.json by section.**
+**MO↔PC matching (responsive) is NOT done at this stage.**
 
-### MO↔PC 반응형 매칭
+### BLOCKING Command — Writing custom refine scripts is strictly forbidden
 
+```bash
+# MO
+node {{VIBE_PATH}}/hooks/scripts/figma-refine.js \
+  /tmp/{feature}/mo-main/tree.json \
+  --out=/tmp/{feature}/mo-main/sections.json \
+  --design-width=720 \
+  --bp=mo
+
+# PC
+node {{VIBE_PATH}}/hooks/scripts/figma-refine.js \
+  /tmp/{feature}/pc-main/tree.json \
+  --out=/tmp/{feature}/pc-main/sections.json \
+  --design-width=2560 \
+  --bp=pc
 ```
-1. 섹션 매칭: 1depth name 기준 (완전일치 → prefix → 순서)
-2. 노드 매칭: 재귀적 name 매칭 → CSS diff 추출
-3. diff: 같은 값 유지, 다른 값만 @media 오버라이드
 
-출력 → /tmp/{feature}/remapped.json:
-  sections:
-    - name: Hero
-      mo: { nodeId, css, children }
-      pcDiff: { css: { 차이만 }, children }
-      images: { mo: 'bg/hero-bg.webp', pc: 'bg/hero-bg-pc.webp' }
+⛔ **Phase 4 is blocked until these commands are executed.**
+⛔ **Do NOT write custom refine scripts** (refine-sections.mjs, refine.js, etc. — all forbidden)
+⛔ **Do NOT parse tree.json directly with Python/Node to produce sections.json**
+✅ Use only the output of figma-refine.js. If the output is unsatisfactory, modify figma-refine.js.
+
+### Core Principles
+
+```
+⛔ Refine each BP independently. Do NOT mix MO and PC.
+⛔ The refined JSON is the sole input for Phase 4.
+⛔ The full subtree (recursive children) for each section must be included.
 ```
 
-### 멀티 프레임 (같은 BP, 다른 페이지)
+### Output
 
 ```
-공통 요소 식별 → 공유 컴포넌트 추출
-공통 토큰 합집합 → 공유 _tokens.scss
+/tmp/{feature}/
+  mo-main/
+    sections.json    ← MO refinement result
+  pc-main/
+    sections.json    ← PC refinement result
+
+sections.json structure:
+  {
+    meta: { feature, designWidth, bp (the corresponding BP) },
+    sections: [
+      {
+        name: "Hero",
+        nodeId, name, type, size, css,
+        text,          // TEXT nodes only
+        imageRef,      // image fill
+        fills,         // multiple fills (2 or more)
+        layoutSizingH, // HUG/FILL/FIXED
+        layoutSizingV,
+        children: [    // ⛔ full recursive subtree — down to leaf nodes
+          { nodeId, name, type, size, css, children: [...] }
+        ],
+        images: {
+          bg: "bg/hero-bg.webp",
+          content: ["content/hero-title.webp"]
+        }
+      }
+    ]
+  }
 ```
 
----
+### Node Refinement Rules
 
-## Phase 4: 순차 코드 생성 ← Implement (영역별)
+```
+Refinement applied when converting tree.json → sections.json:
+  1. Nodes with size 0px → remove
+  2. VECTOR decorative lines (w/h ≤ 2px) → remove
+  3. isMask nodes → remove
+  4. BG frames → separate from children, move to images.bg
+  5. Vector-text GROUPs → separate from children, add to images.content
+  6. Design text (TEXT with multiple/gradient fills or effects) → add to images.content
+  7. Remaining nodes → keep in children (with CSS, recursive)
+```
 
-**→ vibe.figma.convert 스킬의 규칙을 따른다.**
-**코디네이터 패턴: 섹션 = 영역. 한 영역에 한 워커만. 충돌 방지.**
+### Multi-frame (same BP, different pages)
 
 ```
-⛔ 병렬 금지. 한 섹션씩 순차:
-  1. tree.json에서 섹션 노드 Read
-  2. 이미지 vs HTML 판별 테이블 작성 (BLOCKING)
-  3. 기계적 매핑 + Claude 시맨틱 보강
-  4. 브라우저 확인 → OK → 다음 섹션
+Identify common elements → extract shared components
+Union of common tokens → shared _tokens.scss
+```
+
+---
+
+## Phase 4: Per-BP Static Implementation ← Implement (sequential per BP)
 
-SCSS Setup (첫 섹션 전):
-  index.scss, _tokens.scss, _mixins.scss, _base.scss
-  토큰 매핑: project-tokens.json에서 기존 토큰 참조 → 매칭 안 되면 새 생성
+**→ Follow the rules of the vibe.figma.convert skill.**
+**⛔ Implement MO fully first → pass verification → then implement PC. No responsive conversion.**
+**⛔ CSS values must use Figma original px as-is. vw conversion, clamp, @media are forbidden.**
 
-컴포넌트 매칭 (각 섹션 전):
-  component-index.json과 대조 → 매칭되면 import, 안 되면 새 생성
+### BLOCKING Command — SCSS must only use script output
 
-멀티 프레임 시:
-  1단계: 공유 컴포넌트 먼저 → components/shared/
-  2단계: 프레임별 고유 섹션
+```bash
+# Step A: Auto-generate SCSS skeleton (run once per BP)
+node {{VIBE_PATH}}/hooks/scripts/figma-to-scss.js \
+  /tmp/{feature}/{bp}-main/sections.json \
+  --out=/path/to/project/assets/scss/{feature}/
+
+# Step B: Per-section validation (after writing each section's code)
+node {{VIBE_PATH}}/hooks/scripts/figma-validate.js \
+  /path/to/project/assets/scss/{feature}/ \
+  /tmp/{feature}/{bp}-main/sections.json \
+  --section={SectionName}
+```
+
+⛔ **Writing SCSS files directly without calling figma-to-scss.js invalidates Phase 4.**
+⛔ **Do NOT write custom SCSS generation scripts** (to-scss.mjs, generate-scss.js, etc. — all forbidden)
+⛔ **Do NOT proceed to the next section without a figma-validate.js PASS.**
+⛔ **Do NOT write CSS values directly inside scoped style blocks** — only @import of external SCSS files is allowed.
+✅ Use figma-to-scss.js output as-is. If unsatisfactory, modify figma-to-scss.js.
+
+```
+Phase 4A: MO Static Implementation
+  Input: /tmp/{feature}/mo-main/sections.json
+  ⛔ No parallelism. Process one section at a time:
+    1. Read the target section from sections.json
+    2. Write an image vs HTML classification table (BLOCKING)
+    3. figma-to-scss.js → auto-generate SCSS skeleton (px as-is) — Step A once
+    4. Claude: HTML structure + semantic tags + layout + interactions (Vue/React files only)
+       ⛔ No CSS written directly in <style> blocks — only @import or @use allowed
+    5. figma-validate.js → compare SCSS vs sections.json — Step B
+       ├─ PASS → next section
+       └─ FAIL → fix discrepancies → re-run step 5 (repeat until P1=0, no round cap)
+  → Phase 5 (MO compile) → Phase 6 (MO visual verification)
+
+Phase 4B: PC Static Implementation
+  Input: /tmp/{feature}/pc-main/sections.json
+  Same process as MO
+  → Phase 5 (PC compile) → Phase 6 (PC visual verification)
+
+Phase 4C: Responsive Integration (after both MO+PC pass verification)
+  → Separate flow to be established (TODO)
+
+Claude's role (restricted):
+  ✅ Image classification: BG / content / decoration / vector-text
+  ✅ HTML semantics: section/h1/p/button tag selection
+  ✅ Component splitting: v-for repetition, shared components
+  ✅ Interactions: @click, state variables, conditional rendering
+  ✅ Execute figma-to-scss.js / figma-validate.js commands
+  ❌ Do NOT modify SCSS CSS values (use figma-to-scss.js output as-is)
+  ❌ Do NOT write CSS directly in <style> blocks
+  ❌ Do NOT use vw conversion, clamp, @media, or create custom functions/mixins
+  ❌ Do NOT write custom refine/generate scripts (refine.mjs, to-scss.mjs, etc.)
+
+SCSS Setup (before the first section):
+  index.scss, _tokens.scss, _base.scss
+  Token mapping: reference existing tokens from project-tokens.json → create new ones if no match
+
+Component matching (before each section):
+  Compare against component-index.json → import if matched, create new if not
+
+Multi-frame:
+  Step 1: shared components first → components/shared/
+  Step 2: unique sections per frame
 ```
 
 ---
 
-## Phase 5: 컴파일 게이트
+## Phase 5: Compile Gate
 
 ```
-최대 3라운드 자동 반복.
+No round cap. Loop until compile succeeds (or stuck → ask user).
 
-0. 베이스라인 캡처 (Phase 4 전): tsc + build 기존 에러 기록
-   → Phase 5에서는 새 에러만 수정 대상
+0. Capture baseline (before Phase 4): record existing tsc + build errors
+   → Phase 5 only fixes NEW errors
 
 1. TypeScript: vue-tsc/svelte-check/tsc --noEmit
-2. Build: npm run build (120초 타임아웃)
-3. Dev 서버: npm run dev → 포트 감지 → 폴링
-
-에러 시: 파싱 → 자동 수정 → 재체크
-3라운드 실패: 에러 목록을 사용자에게 보고 (Phase 6 진행 불가)
-완료 시: dev 서버 PID 보존 → Phase 6에서 사용
+2. Build: npm run build (120s timeout)
+3. Dev server: npm run dev → detect port → polling
+
+On error: parse → auto-fix → re-check
+Termination conditions:
+  ✅ Success: all checks pass → enter Phase 6
+  ⚠️ Stuck: same errors as previous round → ask user
+      1. Provide direct fix instructions → retry next round
+      2. "proceed" — record remaining errors as TODO, proceed to Phase 6
+      3. "abort" — halt workflow
+  ultrawork mode: on stuck, record TODO without prompting and proceed to Phase 6
+
+On completion: preserve dev server PID → used in Phase 6
+
+⛔ After Phase 5 passes (or user proceeds), must enter Phase 6. Do NOT output a "completion summary".
+⛔ Do NOT declare work complete without Phase 6.
 ```
 
 ---
 
-## Phase 6: 시각 검증 루프 ← Verify (병렬)
+## Phase 6: Visual Verification Loop ← Verify (parallel) MANDATORY
 
-**코디네이터 패턴: 독립 섹션별 검증을 워커로 병렬 실행 가능.**
+**⛔ Phase 6 is mandatory, not optional. Enter automatically upon Phase 5 completion.**
+**⛔ If Phase 6 is skipped, the entire task is considered "incomplete".**
+**Coordinator pattern: independent per-section verification can be run as parallel workers.**
 
 ```
-최대 3라운드. P1=0 될 때까지.
-인프라: src/infra/lib/browser/ (Puppeteer + CDP)
+No round cap. Loop until P1=0 (or stuck → ask user).
+Infrastructure: src/infra/lib/browser/ (Puppeteer + CDP)
 
-1. 렌더링 스크린샷 캡처 → Figma 스크린샷과 pixelmatch 비교
+1. Capture rendered screenshot → pixelmatch comparison against Figma screenshot
    diffRatio > 0.1 → P1
-2. CSS 수치 비교: computed CSS vs tree.json 기대값
+2. CSS value comparison: computed CSS vs tree.json expected values
    delta > 4px → P1, ≤ 4px → P2
-3. 이미지·텍스트 누락 체크
-4. P1 우선 수정 (tree.json 참조, 추정 금지) → 컴파일 재검증 → 리로드
-
-반응형: MO 검증 후 viewport 변경 → PC 스크린샷과 동일 루프
-종료: 브라우저 + dev 서버 정리
+3. Check for missing images and text
+4. Fix P1 issues first (refer to tree.json, no guessing) → revalidate compile → reload
+
+Narrowing scope (noise reduction):
+  Round 1: P1+P2+P3 all
+  Round 2: P1+P2
+  Round 3+: P1 only (continue until P1=0)
+
+Termination conditions:
+  ✅ Success: P1 = 0 AND no new findings → complete
+  ⚠️ Stuck: same findings as previous round → ask user
+      1. Provide direct resolution → retry next round
+      2. "proceed" — record remaining issues as TODO, complete
+      3. "abort" — halt workflow
+  ultrawork mode: on stuck, record TODO without prompting and complete
+
+Responsive: after MO verification, change viewport → same loop against PC screenshots
+Cleanup: shut down browser + dev server
+
+⛔ "Completion summary" output is only allowed after Phase 6 is complete (or user proceeds).
 ```
+
+---
+
+## Error Recovery
+
+| Failure | Recovery |
+|---------|----------|
+| figma-extract.js script error | Check Node.js version (>=18 required). Verify Figma API token in config. Retry once. |
+| figma-to-scss.js parse failure | Validate input tree.json structure. If malformed, re-run extract phase. |
+| figma-validate.js comparison failure | Skip automated validation, present screenshot side-by-side for manual review |
+| Puppeteer/CDP not available | Skip visual verification phase, rely on manual browser check |
+| Figma API rate limit (429) | Wait 60s and retry. If persistent, reduce node scope. |

package/skills/vibe.figma/templates/component-spec.md

@@ -0,0 +1,168 @@
+# component-spec.json 템플릿
+
+architect 에이전트가 sections.json을 분석하여 생성하는 설계서.
+builder 에이전트는 이 설계서대로만 구현한다.
+
+## 생성 규칙
+
+```
+입력: /tmp/{feature}/{bp}-main/sections.json
+출력: /tmp/{feature}/{bp}-main/component-spec.json
+
+⛔ CSS 값을 결정하지 않는다 (figma-to-scss.js가 담당)
+⛔ SCSS 파일을 생성하지 않는다
+✅ HTML 구조, 태그 선택, 컴포넌트 분리, 이미지 분류만 결정
+```
+
+## 구조
+
+```json
+{
+  "meta": {
+    "feature": "winter-pcbang",
+    "bp": "mo",
+    "designWidth": 720,
+    "stack": "nuxt2-vue2-scss"
+  },
+
+  "components": [
+    {
+      "name": "KidSection",
+      "sectionName": "KID",
+      "file": "components/{feature}/KidSection.vue",
+      "scssFile": "_kid.scss",
+      "tag": "section",
+      "id": "kid",
+
+      "bg": {
+        "image": "bg/kid-bg.webp",
+        "method": "css-background"
+      },
+
+      "elements": [
+        {
+          "class": "btn-login",
+          "tag": "button",
+          "role": "interactive",
+          "event": { "type": "click", "action": "emit('login')" },
+          "children": [
+            {
+              "class": "btn-login-btn-login",
+              "tag": "div",
+              "role": "layout"
+            },
+            {
+              "class": "btn-login-btn-login-krafton-id",
+              "tag": "img",
+              "role": "content-image",
+              "src": "content/kid-krafton-id.webp",
+              "alt": "KRAFTON ID 로그인"
+            }
+          ]
+        },
+        {
+          "class": "krafton-id",
+          "tag": "p",
+          "role": "text",
+          "text": "KRAFTON ID로 로그인하고 이벤트에 참여하세요!..."
+        },
+        {
+          "class": "steam-account",
+          "tag": "div",
+          "role": "layout",
+          "children": [
+            {
+              "class": "steam-account-frame-27161",
+              "tag": "a",
+              "role": "link",
+              "href": "#",
+              "children": [
+                {
+                  "class": "steam-account-frame-27161-krafton-id-steam",
+                  "tag": "span",
+                  "role": "text",
+                  "text": "KRAFTON ID Steam 연동 안내"
+                }
+              ]
+            },
+            {
+              "class": "steam-account-kakao-games-krafton-id",
+              "tag": "p",
+              "role": "text",
+              "text": "Kakao games는 게임 내에서만..."
+            }
+          ]
+        }
+      ],
+
+      "imageClassification": [
+        {
+          "node": "BG",
+          "decision": "bg",
+          "reason": "name='BG', 합성 배경, TEXT 자식 없음"
+        },
+        {
+          "node": "KRAFTON ID 로그인",
+          "decision": "content-image",
+          "reason": "RENDERED_IMAGE (디자인 텍스트, outline 효과)"
+        },
+        {
+          "node": "볼트_2",
+          "decision": "skip",
+          "reason": "5x5 장식 볼트, 동일 imageRef 4개 → CSS로 대체 가능"
+        }
+      ]
+    }
+  ],
+
+  "shared": [],
+
+  "tokens": {
+    "note": "figma-to-scss.js가 _tokens.scss 자동 생성. architect는 참조만."
+  }
+}
+```
+
+## 판단 기준
+
+### tag 선택
+| sections.json 조건 | tag |
+|---|---|
+| 섹션 루트 | `section` |
+| type=TEXT + 제목 역할 (name에 title/heading) | `h2`~`h6` |
+| type=TEXT + 설명 | `p` |
+| type=TEXT + 라벨 | `span` / `strong` |
+| name에 btn/button/CTA | `button` |
+| name에 link/연동/안내 + href 가능 | `a` |
+| type=RENDERED_IMAGE | `img` |
+| imageRef 있음 + 콘텐츠 이미지 | `img` |
+| INSTANCE 반복 2+ | 부모에 v-for 표시 |
+| 나머지 FRAME/GROUP | `div` |
+
+### role 종류
+| role | 의미 |
+|---|---|
+| `bg` | 배경 (CSS background-image) |
+| `layout` | 레이아웃 컨테이너 |
+| `text` | 텍스트 콘텐츠 |
+| `content-image` | 콘텐츠 이미지 (img 태그) |
+| `interactive` | 클릭/인터랙션 가능 |
+| `link` | 네비게이션 링크 |
+| `decoration` | 장식 (aria-hidden) |
+| `list` | 반복 구조 (v-for) |
+| `skip` | 무시 (너무 작거나 불필요) |
+
+### 이미지 분류 (imageClassification)
+⛔ 모든 이미지 관련 노드에 대해 반드시 분류 기록.
+| decision | 조건 |
+|---|---|
+| `bg` | isBGFrame, TEXT 자식 없음 |
+| `content-image` | RENDERED_IMAGE, 벡터 글자, 디자인 텍스트 |
+| `asset` | imageRef 있는 아이콘/썸네일 |
+| `skip` | 너무 작은 장식 (≤5px), CSS로 대체 가능 |
+| `html` | TEXT 자식 포함, 인터랙티브, 동적 데이터 |
+
+### 공유 컴포넌트 (shared)
+- 동일 구조 INSTANCE가 2+ 섹션에서 사용 → shared
+- 3+ 사용 시 필수 분리
+- Props/Slots 인터페이스 정의 필수