@su-record/vibe 2.8.39 → 2.8.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.39",
+  "version": "2.8.41",
   "description": "AI Coding Framework for Claude Code — 56 agents, 45 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe.figma/SKILL.md

@@ -37,11 +37,43 @@ Figma 트리가 코드의 원천이다. 스크린샷은 검증용이다.
 ```
 /vibe.figma
   → Phase 0: Setup (스택 감지, 디렉토리 생성, 기존 자산 인덱싱)
-  → Phase 1: Storyboard (스토리보드 → 레이아웃 + 컴포넌트 + 기능 정의)
-  → Phase 2: 재료 확보 (디자인 URL → 트리 + 이미지 + 스크린샷)
+  → Phase 1: Storyboard (스토리보드 → 기능 스펙 문서 작성, 파일 생성 없음)
+  → Phase 2: 재료 확보 (디자인 URL → 트리 + 노드 렌더링 이미지 + 스크린샷)
   → Phase 3: 구조적 코드 생성 (트리 → HTML+SCSS 매핑 + 시맨틱 보강)
   → Phase 3.5: 컴파일 게이트 (tsc → build → dev 확인)
   → Phase 4: 시각 검증 루프 (렌더링 vs 스크린샷 비교 → 수정)
+  ─── 추가 브레이크포인트가 있으면 Phase 2~4 반복 ───
+  → Phase 5: 공통화 (브레이크포인트별 작업 병합 → 최종 프로젝트 구조)
+
+브레이크포인트별 작업 구조:
+  각 Figma URL의 ROOT name에서 폴더명 추출 (kebab-case):
+    "MO_Main ..."  → /tmp/{feature}/mo-main/
+    "PC_Main ..."  → /tmp/{feature}/pc-main/
+
+  /tmp/{feature}/
+  ├── mo-main/              ← 첫 번째 URL (모바일)
+  │   ├── tree.json
+  │   ├── bg/
+  │   ├── content/
+  │   └── sections/
+  ├── pc-main/              ← 두 번째 URL (데스크탑)
+  │   ├── tree.json
+  │   ├── bg/
+  │   ├── content/
+  │   └── sections/
+  └── final/                ← Phase 5 공통화 결과
+      ├── components/{feature}/
+      └── styles/{feature}/
+
+Phase 5 공통화:
+  1. 각 브레이크포인트의 컴포넌트 diff
+     → 구조 동일: 1개로 병합
+     → 구조 다름: props로 분기 또는 별도 유지
+  2. SCSS diff
+     → 같은 값: 기본 스타일
+     → 다른 값: @media 오버라이드
+  3. 토큰 diff → 합집합 정리
+  4. /tmp/ 임시 폴더 → 프로젝트 디렉토리에 최종 배치
 ```
 
 ---
@@ -186,7 +218,7 @@ URL에서 fileKey, nodeId 추출
 
 2단계: name 패턴으로 프레임 분류
   SPEC   — "기능 정의서", "정책" → depth 높여서 텍스트 추출
-  CONFIG — "해상도", "브라우저" → 스케일 팩터 계산
+  CONFIG — "해상도", "브라우저" → designWidth, minWidth, breakpoint 확보
   SHARED — "공통", "GNB", "Footer", "Popup" → 공통 컴포넌트 파악
   PAGE   — "화면설계", "메인 -" → 섹션 목록 + 인터랙션 스펙
 
@@ -369,15 +401,26 @@ Phase 2 완료 시 /tmp/{feature}/ 에 다음이 준비되어야 함:
   - 간격: padding, gap, margin 사용 빈도 높은 값
 ```
 
-### 스케일 팩터
+### 반응형 단위 (scaleFactor 사용하지 않음)
 
 ```
-스토리보드 CONFIG 또는 기본값에서:
-  모바일: scaleFactor = 480 / 720 = 0.667 (또는 targetMobile / designMobile)
-  PC:     scaleFactor = 1920 / 2560 = 0.75 (또는 targetPc / designPc)
+스토리보드 CONFIG에서 확보:
+  designWidth: 디자인 너비 (예: 모바일 720px, PC 2560px)
+  minWidth: 최소 지원 너비 (예: 340px)
+  breakpoint: PC/모바일 분계 (예: 1025px)
+
+UI 요소 → vw 비례:
+  vw값 = (Figma px / designWidth) × 100
+  예: gap: 24px → 24/720 × 100 = 3.33vw
+  예: width: 620px → 620/720 = 86.11% (부모 대비)
+
+폰트 → clamp(최소, vw, 최대):
+  최소값 = 역할별 가독성 기준 (h1:16px, 본문:12px, 캡션:10px)
+  vw값 = (Figma px / designWidth) × 100
+  최대값 = Figma 원본 px
+  예: 24px 본문 → clamp(12px, 3.33vw, 24px)
 
-적용 대상: font-size, padding, margin, gap, border-radius, width, height
-적용 안 함: color, opacity, font-weight, z-index, line-height(단위 없을 때)
+변환 안 함: color, opacity, font-weight, z-index, line-height(단위 없을 때)
 ```
 
 ---
@@ -533,7 +576,44 @@ Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
   ❌ 90% 유사한데 새로 만들기 금지
 ```
 
-### 3-1. 트리 기반 구조적 코드 생성
+### 3-1. 순차 블록 빌딩 (병렬 금지)
+
+```
+❌ 여러 섹션을 동시에 생성하지 않는다
+   → 병렬 생성 시 컨텍스트 분산 → 매핑 정확도 저하 → 품질 하락
+   → 앞 섹션 결과를 확인하지 않으면 실수가 누적됨
+
+✅ 한 섹션씩 순차적으로 블록을 쌓듯 만든다:
+
+  작업 폴더: ROOT name에서 추출 (Phase 2에서 결정)
+    "MO_Main ..." → /tmp/{feature}/mo-main/
+    코드 출력도 이 폴더 안에:
+      /tmp/{feature}/mo-main/components/{feature}/
+      /tmp/{feature}/mo-main/styles/{feature}/
+    Phase 5에서 최종 프로젝트 디렉토리에 배치
+
+  섹션 1 (Hero):
+    1. tree.json에서 Hero 노드 Read
+    2. 코드 생성 (컴포넌트 + SCSS)
+    3. 브라우저에서 확인 (dev 서버)
+    4. OK → 다음 섹션으로
+    NG → 수정 후 재확인
+
+  섹션 2 (KID):
+    1. tree.json에서 KID 노드 Read
+    2. 코드 생성
+    3. 브라우저에서 확인 (이전 섹션도 함께)
+    4. OK → 다음 섹션으로
+
+  섹션 3 (Daily) → ... 반복
+
+각 섹션 완료 시:
+  - 해당 섹션의 컴포넌트 + SCSS가 동작하는 상태
+  - pages/{feature}.vue에 해당 섹션이 추가된 상태
+  - 브라우저에서 이전 섹션 + 현재 섹션이 모두 보이는 상태
+```
+
+### 3-2. 트리 기반 구조적 코드 생성
 
 ```
 각 섹션에 대해 (vibe.figma.convert 참조):
@@ -543,18 +623,19 @@ Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
    → 스크린샷은 검증용으로만 참조
 
 2. 기계적 매핑 (추정 없음):
-   a. 이미지 복사: images/ → static/images/{feature}/
+   a. 이미지: 노드 렌더링된 이미지를 static/images/{feature}/에 배치
    b. 노드 → HTML 매핑:
+      - BG 프레임 → CSS background-image (img 태그 아님)
       - Auto Layout 있음 → <div> + flex (direction/gap/padding 직접)
       - Auto Layout 없음 → <div> + position:relative (자식 absolute)
       - TEXT 노드 → <span> (Claude가 h2/p/button으로 승격)
-      - imageRef 있음 → <img src="다운로드된 파일">
+      - 콘텐츠 이미지 → <img src="렌더링된 파일">
       - 반복 패턴 (동일 구조 3+) → v-for
    c. CSS 직접 매핑:
       - node.css의 모든 속성을 SCSS에 1:1 매핑
-      - scaleFactor 적용 (px 값만)
+      - vw/clamp 반응형 단위 변환 (vibe.figma.convert 참조)
       - tree.json에 없는 CSS 값은 작성하지 않음
-   d. Phase 1의 JSDoc, 인터페이스, 핸들러 보존
+   d. Phase 1의 JSDoc, 인터페이스, 핸들러 삽입
 
 3. Claude 시맨틱 보강:
    - div → section/h2/p/button 태그 승격
@@ -562,14 +643,14 @@ Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
    - 접근성 (alt, aria)
    - 인터랙션 (클릭, 상태)
 
-4. 자가 검증:
-   - template 클래스 ↔ SCSS 클래스 1:1 일치
-   - 모든 img src가 static/에 실제 존재
-   - Auto Layout 노드 → SCSS에 flex 속성 존재
-   - 스크린샷과 비교 (시각 확인)
+4. 브라우저 확인 (섹션별 게이트):
+   - dev 서버에서 현재까지 만든 섹션이 모두 보이는지 확인
+   - 이미지 로드, 레이아웃, 텍스트 확인
+   - OK → 다음 섹션 진행
+   - NG → 수정 후 재확인 (다음 섹션으로 넘어가지 않음)
 ```
 
-### 3-2. 코드 작성 규칙
+### 3-3. 코드 작성 규칙
 
 ```
 컴포넌트 (Vue 예시):
@@ -589,7 +670,7 @@ Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
 SCSS (vibe.figma.convert 참조):
   layout/ → position, display, flex, width, height, padding, gap
   components/ → font, color, border, shadow, opacity
-  모든 수치는 재료함의 정확한 값 × scaleFactor.
+  모든 수치는 tree.json의 정확한 값 → vw/clamp 변환 (vibe.figma.convert 참조).
   추정 금지 — 값이 없으면 tree.json에서 다시 찾는다.
 ```
 
@@ -780,7 +861,7 @@ import { getComputedStyles, compareStyles, diffsToIssues } from 'src/infra/lib/b
      ])
 
   2. Figma 재료함의 기대값과 비교:
-     // tree.json에서 해당 노드의 CSS 수치 (scaleFactor 적용 후)
+     // tree.json에서 해당 노드의 CSS 수치 (vw/clamp 변환 후)
      const expected = { 'font-size': '16px', 'color': '#ffffff', 'width': '465px' }
      const diffs = compareStyles(expected, actual)
 

package/skills/vibe.figma/templates/figma-handoff.md

@@ -9,14 +9,15 @@
 
 ## Design Specs
 
-### Viewport / Scale
+### Viewport / Responsive
 
-| Breakpoint | Design Width | Target Width | Scale Factor |
-|-----------|-------------|-------------|-------------|
-| Mobile (base) | {{DESIGN_MOBILE_PX}}px | {{TARGET_MOBILE_PX}}px | {{SCALE_MOBILE}} |
-| Desktop | {{DESIGN_PC_PX}}px | {{TARGET_PC_PX}}px | {{SCALE_PC}} |
+| Breakpoint | Design Width | Min Width | CSS 단위 |
+|-----------|-------------|-----------|---------|
+| Mobile (base) | {{DESIGN_MOBILE_PX}}px | {{MIN_WIDTH}}px | vw + clamp |
+| Desktop | {{DESIGN_PC_PX}}px | — | vw + clamp |
 
 Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
+ROOT folder: `{{MO_FOLDER}}/`, `{{PC_FOLDER}}/`
 
 ### Color Tokens
 
@@ -26,15 +27,15 @@ Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
 
 ### Typography Tokens
 
-| Token | Figma px | Scaled px | Weight | Role |
-|-------|---------|----------|--------|------|
-| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{WEIGHT}} | {{ROLE}} |
+| Token | Figma px | vw | clamp 최소 | Role |
+|-------|---------|-----|----------|------|
+| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{VW}}vw | {{MIN_PX}}px | {{ROLE}} |
 
 ### Spacing Tokens
 
-| Token | Figma px | Scaled px | Usage |
-|-------|---------|----------|-------|
-| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{USAGE}} |
+| Token | Figma px | vw | Usage |
+|-------|---------|-----|-------|
+| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{VW}}vw | {{USAGE}} |
 
 ---
 
@@ -44,38 +45,40 @@ Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
 |---|-------------|---------------|-----------|----------------|
 | 1 | {{SECTION_NAME}} | `components/{{FEATURE_KEY}}/{{ComponentName}}.vue` | {{NODE_COUNT}} | {{HEIGHT}}px |
 
-**Generation:** tree.json → HTML+SCSS 구조적 매핑 (external SCSS)
+**Generation:** tree.json → HTML+SCSS 구조적 매핑 (vw/clamp 반응형)
 
 ---
 
 ## Asset Manifest
 
-| Variable | Local Path | Type | Alt Text |
-|----------|-----------|------|----------|
-| `{{IMG_VAR}}` | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.webp` | {{bg\|content\|decorative}} | {{ALT}} |
+| Image | Local Path | Type | Render Method |
+|-------|-----------|------|--------------|
+| {{NAME}} | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.png` | {{bg\|content\|vector-text}} | {{frame-render\|node-render\|group-render}} |
 
-Total assets: {{ASSET_COUNT}}
+Total assets: {{ASSET_COUNT}} (BG 렌더링 {{BG_COUNT}}장 + 콘텐츠 {{CONTENT_COUNT}}장)
 
 ---
 
 ## File Structure
 
 ```
-components/{{FEATURE_KEY}}/
-  {{ComponentName}}.vue
-
-public/images/{{FEATURE_KEY}}/
-  {{FILE_NAME}}.webp
-
-styles/{{FEATURE_KEY}}/
-  index.scss
-  _tokens.scss
-  _mixins.scss
-  _base.scss
-  layout/
-    _{{section}}.scss
-  components/
-    _{{section}}.scss
+/tmp/{{FEATURE_KEY}}/
+  {{MO_FOLDER}}/                ← 모바일 작업
+    tree.json
+    bg/
+    content/
+    sections/
+  {{PC_FOLDER}}/                ← 데스크탑 작업
+    ...
+  final/                        ← Phase 5 공통화 결과
+    components/{{FEATURE_KEY}}/
+    styles/{{FEATURE_KEY}}/
+      index.scss
+      _tokens.scss
+      _mixins.scss
+      _base.scss
+      layout/
+      components/
 ```
 
 ---
@@ -84,8 +87,9 @@ styles/{{FEATURE_KEY}}/
 
 - [ ] No `figma.com/api` URLs in any generated file
 - [ ] No `placeholder` or empty `src=""` in components
-- [ ] No `<style>` blocks in components (normal mode)
-- [ ] All assets downloaded and non-zero bytes
+- [ ] No `<style>` blocks in components
+- [ ] All images are node-rendered (no imageRef direct download)
+- [ ] No image file > 5MB (텍스처 fill 의심)
 - [ ] Build passes without errors
 - [ ] Screenshot comparison: P1 issues = 0
 

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

@@ -44,7 +44,8 @@ component-index (/tmp/{feature}/component-index.json) 에서 매칭되는 컴포
   - tree.json (노드 트리 + CSS 속성 — 코드 생성의 PRIMARY 소스)
   - /tmp/{feature}/images/ (다운로드된 이미지 에셋)
   - 섹션 스크린샷 (검증용 — 생성에 사용하지 않음)
-  - scaleFactor (모바일: 480/720=0.667, PC: 1920/2560=0.75)
+  - designWidth (스토리보드 CONFIG: 모바일 720px, PC 2560px)
+  - minWidth (최소 지원: 340px)
 
 출력:
   - 컴포넌트 파일 (Vue SFC / React TSX)
@@ -92,10 +93,10 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
   node.css.flexDirection   → flex-direction
   node.css.justifyContent  → justify-content
   node.css.alignItems      → align-items
-  node.css.gap             → gap (× scaleFactor)
-  node.css.padding         → padding (× scaleFactor)
-  node.css.width           → width (× scaleFactor)
-  node.css.height          → height (× scaleFactor)
+  node.css.gap             → gap (→ vw 변환)
+  node.css.padding         → padding (→ vw 변환)
+  node.css.width           → width (→ vw 또는 % 변환)
+  node.css.height          → height (→ vw 변환, 또는 auto)
   node.css.overflow        → overflow
   node.css.position        → position
 
@@ -103,24 +104,52 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
   node.css.backgroundColor → background-color
   node.css.color           → color
   node.css.fontFamily      → font-family
-  node.css.fontSize        → font-size (× scaleFactor)
+  node.css.fontSize        → font-size (→ clamp 변환)
   node.css.fontWeight      → font-weight
   node.css.lineHeight      → line-height
-  node.css.letterSpacing   → letter-spacing (× scaleFactor)
+  node.css.letterSpacing   → letter-spacing (→ vw 변환)
   node.css.textAlign       → text-align
-  node.css.borderRadius    → border-radius (× scaleFactor)
-  node.css.border          → border (width만 × scaleFactor)
-  node.css.boxShadow       → box-shadow (px값만 × scaleFactor)
+  node.css.borderRadius    → border-radius (→ vw 변환)
+  node.css.border          → border (width → vw 변환)
+  node.css.boxShadow       → box-shadow (px → vw 변환)
   node.css.opacity         → opacity
   node.css.mixBlendMode    → mix-blend-mode
-  node.css.filter          → filter (px값만 × scaleFactor)
-  node.css.backdropFilter  → backdrop-filter (px값만 × scaleFactor)
-
-scaleFactor 적용:
-  ✅ 적용: width, height, padding, gap, margin, font-size, letter-spacing,
-           border-radius, border-width, box-shadow px, filter px
-  ❌ 미적용: color, opacity, font-weight, font-family, z-index,
-            line-height(단위 없을 때), text-align, mix-blend-mode
+  node.css.filter          → filter (px → vw 변환)
+  node.css.backdropFilter  → backdrop-filter (px → vw 변환)
+
+반응형 단위 변환 (scaleFactor 사용하지 않음):
+  스토리보드 CONFIG에서 확보:
+    designWidth: 디자인 너비 (예: 720px 모바일, 2560px PC)
+    minWidth: 최소 지원 너비 (예: 340px)
+    breakpoint: PC/모바일 분계 (예: 1025px)
+
+  UI 요소 (width, height, padding, gap, border-radius, shadow 등):
+    → vw 비례: vw값 = (Figma px / designWidth) × 100
+    → 예: gap: 24px / 720 × 100 = 3.33vw
+    → width: 부모 대비 %도 가능 (620/720 = 86%)
+
+  폰트 (font-size):
+    → clamp(최소, vw, 최대): 가독성 최소값 보장
+    → vw값 = (Figma px / designWidth) × 100
+    → 최소값 = 역할(role)에 따라 결정 (Claude 시맨틱 판단)
+    → 최대값 = Figma 원본 px
+
+    | 역할 | 최소 | 판단 기준 |
+    |------|------|----------|
+    | h1~h2 제목 | 16px | name에 "title", 가장 큰 fontSize |
+    | h3~h4 소제목 | 14px | 중간 크기 fontSize |
+    | 본문 p | 12px | TEXT 노드, 긴 텍스트 |
+    | 캡션/라벨 | 10px | 작은 fontSize, 짧은 텍스트 |
+    | 버튼 | 12px | name에 "btn" |
+
+    예시:
+      디자인 24px, 본문 → font-size: clamp(12px, 3.33vw, 24px);
+      디자인 48px, 제목 → font-size: clamp(16px, 6.67vw, 48px);
+      디자인 16px, 캡션 → font-size: clamp(10px, 2.22vw, 16px);
+
+  변환하지 않는 속성:
+    color, opacity, font-weight, font-family, z-index,
+    line-height(단위 없을 때), text-align, mix-blend-mode
 
 값이 없으면:
   → 해당 속성 생략 (추정 금지)
@@ -173,21 +202,21 @@ components/ → font-size, font-weight, color, line-height, letter-spacing,
               background-color, background-image, mix-blend-mode, filter
 ```
 
-### layout 예시 (트리 기반 — 추정 없음)
+### layout 예시 (트리 기반 — vw 반응형)
 
 ```scss
 // tree.json 데이터:
 // Hero: { width:720, height:1280 }
 // Title: { display:flex, flexDirection:column, alignItems:center, gap:24px, width:620, height:230 }
 // Period: { display:flex, flexDirection:column, gap:10px, padding:"22px 14px", width:600, height:220 }
-// scaleFactor = 0.667
+// designWidth = 720px → vw = (px / 720) × 100
 
 @use '../tokens' as t;
 
 .heroSection {
   position: relative;
   width: 100%;
-  height: 854px;              // 1280 × 0.667
+  height: 177.78vw;           // 1280 / 720 × 100
   overflow: hidden;           // tree: overflow:hidden
 }
 
@@ -195,30 +224,32 @@ components/ → font-size, font-weight, color, line-height, letter-spacing,
   display: flex;              // tree: display:flex
   flex-direction: column;     // tree: flexDirection:column
   align-items: center;        // tree: alignItems:center
-  gap: 16px;                  // tree: 24 × 0.667
-  width: 414px;               // tree: 620 × 0.667
+  gap: 3.33vw;                // tree: 24 / 720 × 100
+  width: 86.11%;              // tree: 620 / 720 (부모 대비 %)
 }
 
 .heroPeriod {
   display: flex;              // tree: display:flex
   flex-direction: column;     // tree: flexDirection:column
-  gap: 7px;                   // tree: 10 × 0.667
-  padding: 15px 9px;          // tree: "22px 14px" × 0.667
-  width: 400px;               // tree: 600 × 0.667
+  gap: 1.39vw;                // tree: 10 / 720 × 100
+  padding: 3.06vw 1.94vw;    // tree: "22px 14px" / 720 × 100
+  width: 83.33%;              // tree: 600 / 720
 }
 ```
 
-### components 예시 (트리 기반)
+### components 예시 (트리 기반 — clamp 폰트)
 
 ```scss
 // tree.json 데이터:
 // TEXT "참여 대상": { fontSize:24px, fontWeight:600, color:#ffffff, fontFamily:Pretendard }
 // BTN_Share: { borderRadius:500px, backgroundColor:rgba(13,40,61,0.5), border:"1px solid #ffffff" }
+// designWidth = 720px, minWidth = 340px
 
 @use '../tokens' as t;
 
 .heroTarget {
-  font-size: 16px;            // tree: 24 × 0.667
+  // 본문 역할 → 최소 12px
+  font-size: clamp(12px, 3.33vw, 24px);  // tree: 24 / 720 × 100 = 3.33vw
   font-weight: 600;           // tree: fontWeight:600
   color: #ffffff;             // tree: color:#ffffff
   font-family: t.$font-pretendard;
@@ -226,11 +257,11 @@ components/ → font-size, font-weight, color, line-height, letter-spacing,
 }
 
 .heroShareBtn {
-  border-radius: 500px;       // tree: borderRadius:500px (비율이므로 scaleFactor 미적용)
+  border-radius: 69.44vw;     // tree: 500 / 720 × 100 (원형 유지)
   background-color: rgba(13, 40, 61, 0.5);  // tree 그대로
-  border: 1px solid #ffffff;  // tree 그대로
-  width: 48px;                // tree: 72 × 0.667
-  height: 48px;               // tree: 72 × 0.667
+  border: 0.14vw solid #ffffff; // tree: 1 / 720 × 100
+  width: 10vw;                // tree: 72 / 720 × 100
+  height: 10vw;               // 정사각형 유지
   display: flex;              // tree: display:flex
   justify-content: center;    // tree: justifyContent:center
   align-items: center;        // tree: alignItems:center
@@ -382,7 +413,7 @@ function handleShare(): void {
 
 콘텐츠 이미지:
   조건: imageRef 있음 + 독립적 크기 + TEXT 형제 없음
-  매핑: width/height tree 값 × scaleFactor
+  매핑: width/height → vw 변환
   태그: <img alt="가장 가까운 TEXT 노드의 characters" />
 
 장식 이미지:
@@ -392,7 +423,7 @@ function handleShare(): void {
 
 아이콘:
   조건: VECTOR/GROUP + 크기 ≤ 64px
-  매핑: width/height × scaleFactor
+  매핑: width/height → vw 변환
   태그: <img alt="기능 설명" /> 또는 인라인 SVG
 ```
 

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

@@ -42,13 +42,22 @@ line-height, letter-spacing, text-align, border, border-radius,
 box-shadow, opacity, mix-blend-mode, filter, backdrop-filter
 ```
 
-## Scale Factor 적용
+## 반응형 단위 변환 (scaleFactor 사용하지 않음)
 
-**적용 (px 값):**
-  font-size, padding, margin, gap, width, height, border-radius,
-  border-width, box-shadow px, filter px, letter-spacing
+스토리보드 CONFIG에서 designWidth, minWidth 확보.
 
-**미적용:**
+**UI 요소 → vw 비례:**
+  vw값 = (Figma px / designWidth) × 100
+  적용: width, height, padding, gap, margin, border-radius,
+        border-width, box-shadow px, filter px, letter-spacing
+
+**폰트 → clamp(최소, vw, 최대):**
+  vw값 = (Figma px / designWidth) × 100
+  최소값 = 역할에 따라 결정:
+    h1~h2: 16px, h3~h4: 14px, 본문: 12px, 캡션: 10px, 버튼: 12px
+  최대값 = Figma 원본 px
+
+**변환하지 않는 속성:**
   color, opacity, font-weight, font-family, z-index,
   line-height(단위 없을 때), text-align, mix-blend-mode,
   rotate, % 값

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

@@ -75,48 +75,46 @@ defineProps<{
 
 ---
 
-## SCSS Layout (tree.json 직접 매핑)
+## SCSS Layout (tree.json → vw 반응형)
 
 ```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}}
+// designWidth = {{DESIGN_WIDTH}}px → vw = (px / designWidth) × 100
 
 .{{sectionName}} {
   position: relative;
   width: 100%;
-  height: {{HEIGHT_SCALED}}px;           // tree: {{HEIGHT}} × {{SCALE_FACTOR}}
+  height: {{HEIGHT_VW}}vw;               // tree: {{HEIGHT}} / {{DESIGN_WIDTH}} × 100
   overflow: hidden;                       // tree: overflow:hidden
-}
-
-.{{sectionName}}__bg {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  img { width: 100%; height: 100%; object-fit: cover; }
+  background-image: url('/images/{{FEATURE_KEY}}/{{section}}-bg.png');
+  background-size: cover;
+  background-position: center top;
 }
 
 .{{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}}
+  gap: {{GAP_VW}}vw;                      // tree: {{GAP}} / {{DESIGN_WIDTH}} × 100
+  padding: {{PADDING_VW}};               // tree: "{{PADDING}}" / {{DESIGN_WIDTH}} × 100
 }
 ```
 
 ---
 
-## SCSS Components (tree.json 직접 매핑)
+## SCSS Components (tree.json → clamp 폰트)
 
 ```scss
 // tree.json 데이터:
 // TEXT "{{TEXT_1}}": { fontSize:{{FONT_SIZE}}px, fontWeight:{{FONT_WEIGHT}}, color:{{COLOR}} }
+// designWidth = {{DESIGN_WIDTH}}px
 
 .{{sectionName}}__title {
-  font-size: {{FONT_SIZE_SCALED}}px;      // tree: {{FONT_SIZE}} × {{SCALE_FACTOR}}
-  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (scaleFactor 미적용)
-  color: {{COLOR}};                       // tree: 직접 (scaleFactor 미적용)
+  // 역할: 제목 → 최소 16px
+  font-size: clamp(16px, {{FONT_SIZE_VW}}vw, {{FONT_SIZE}}px); // tree: {{FONT_SIZE}} / {{DESIGN_WIDTH}} × 100
+  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (변환 안 함)
+  color: {{COLOR}};                       // tree: 직접 (변환 안 함)
 }
 ```
 

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

@@ -42,7 +42,7 @@ Bash:
 
 트리 데이터의 용도 (vibe.figma.convert에서 직접 매핑):
   - Auto Layout → CSS Flexbox (direction, gap, padding, align 1:1)
-  - absoluteBoundingBox → width, height (× scaleFactor)
+  - absoluteBoundingBox → width, height (→ vw 변환)
   - fills/strokes/effects → background, border, shadow 등
   - TEXT 노드 → 텍스트 콘텐츠 + 타이포그래피 CSS
   - imageRef → 이미지 에셋 매핑
@@ -53,7 +53,7 @@ Bash:
 
 트리 추출 도구가 자동 변환하는 속성. **이 값들이 SCSS에 직접 매핑된다:**
 
-| Figma 속성 | CSS | scaleFactor 적용 |
+| Figma 속성 | CSS | vw 변환 |
 |-----------|-----|-----------------|
 | `layoutMode=VERTICAL` | `display:flex; flex-direction:column` | ❌ |
 | `layoutMode=HORIZONTAL` | `display:flex; flex-direction:row` | ❌ |