@su-record/vibe 2.8.38 → 2.8.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.38",
+  "version": "2.8.40",
   "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   — "화면설계", "메인 -" → 섹션 목록 + 인터랙션 스펙
 
@@ -202,86 +234,56 @@ URL에서 fileKey, nodeId 추출
   → 또는 depth 높여서 하위 분할 조회
 ```
 
-### 1-2. 레이아웃 + 컴포넌트 구성 (코드 생성)
-
-```
-스토리보드에서 파악한 섹션 구조로 실제 파일을 생성한다.
-
-1. 루트 페이지 파일 생성 (Write):
-   pages/{feature}.vue (또는 app/{feature}/page.tsx)
-   → 모든 섹션 컴포넌트 import + 순서대로 배치
-   → 팝업/모달 조건부 렌더링
-
-2. 섹션 컴포넌트 파일 생성 (Write):
-   components/{feature}/HeroSection.vue
-   components/{feature}/DailyCheckInSection.vue
-   components/{feature}/PlayTimeMissionSection.vue
-   ...PAGE 프레임 수만큼
-
-   각 컴포넌트에 반드시 포함:
-
-   <template>:
-     - 섹션 제목 <h2> (스토리보드에서 추출한 실제 텍스트)
-     - 설명 텍스트 <p>
-     - 리스트 렌더링 (v-for + 목 데이터)
-     - 버튼/CTA (실제 라벨 + @click 핸들러)
-     - 조건부 렌더링 (상태에 따른 v-if)
-     → 빈 template 금지. 브라우저에서 텍스트가 보여야 함.
-
-   <script setup>:
-     - JSDoc 주석으로 기능 요구사항 작성:
-       /**
-        * 일일 출석 미션 섹션
-        *
-        * [기능 정의]
-        * - 매일 출석 시 스노우 토큰 즉시 지급
-        * - 누적 3/5/7일 달성 시 추가 보상
-        *
-        * [인터랙션]
-        * ① 출석하기 클릭 → API호출 → 토큰지급 표시
-        * ② 누적 보상 클릭 → 보상 수령
-        *
-        * [상태] default, checked, reward-claimed
-        */
-     - TypeScript 인터페이스
-     - 목 데이터 (빈 배열 금지, 3~7개 아이템)
-     - 목 데이터의 image 필드: 실제 다운로드할 이미지 경로 사용 금지
-       → Phase 1에서는 이미지 경로를 '' (빈 문자열) 또는 placeholder 텍스트로 설정
-       → Phase 2에서 실제 이미지 다운로드 후 경로를 업데이트
-       → ❌ '/images/{feature}/token-100.png' (존재하지 않는 파일 참조 금지)
-     - 이벤트 핸들러 stub (body는 // TODO:)
-
-   ❌ <client-only> 래핑 금지 — SSR hydration 실패 위험
-      (<client-only>는 window/document 직접 접근하는 컴포넌트에만 사용)
-   <style> 블록 없음 — 스타일은 Phase 3에서 외부 파일로.
-
-3. 공통 컴포넌트 (SHARED에서 파악):
-   → 프로젝트에 이미 있으면 import 재사용
-   → 없으면 새로 생성 (GNB, Footer, Popup)
-
-4. 스타일 디렉토리 구조 생성 (빈 파일):
-   styles/{feature}/index.scss
-   styles/{feature}/_tokens.scss
-   styles/{feature}/_mixins.scss
-   styles/{feature}/_base.scss
-   styles/{feature}/layout/
-   styles/{feature}/components/
+### 1-2. 기능 스펙 문서 작성 (파일 생성 없음)
+
+```
+❌ Phase 1에서 코드 파일을 생성하지 않는다.
+   → Phase 1 HTML 구조와 Phase 3 트리 매핑이 충돌하면 이중 작업
+   → Phase 3에서 tree.json 기반으로 코드를 생성
+
+✅ Phase 1의 출력물은 기능 스펙 문서 (텍스트):
+
+1. 섹션 목록:
+   | # | 섹션 이름 | Figma 프레임 name | 높이 | 설명 |
+   |---|----------|------------------|------|------|
+   | 1 | Hero | Hero | 1280px | 키비주얼 + 이벤트 정보 |
+   | 2 | DailyCheckIn | Daily | 3604px | 출석 미션 |
+   | 3 | PlayTime | Frame 633371 | 11363px | 플레이타임 미션 |
+
+2. 각 섹션의 기능 정의:
+   /**
+    * 일일 출석 미션 섹션
+    *
+    * [기능 정의]
+    * - 매일 출석 시 스노우 토큰 즉시 지급
+    * - 누적 3/5/7일 달성 시 추가 보상
+    *
+    * [인터랙션]
+    * ① 출석하기 클릭 → API호출 → 토큰지급 표시
+    * ② 누적 보상 클릭 → 보상 수령
+    *
+    * [상태] default, checked, reward-claimed
+    */
+
+3. 공통 컴포넌트 목록:
+   → 프로젝트에 이미 있는 컴포넌트 (GNB, Footer 등)
+   → 새로 만들 공통 컴포넌트
+
+4. TypeScript 인터페이스 초안:
+   interface RewardItem { id: string; name: string; tokenAmount: number; status: 'locked'|'available'|'claimed' }
 ```
 
 ### 1-3. 검증
 
 ```
 Phase 1 완료 조건:
-  □ 브라우저에서 열면 각 섹션의 텍스트/리스트/버튼이 보인다
-  □ 클릭하면 핸들러가 실행된다
-  □ 모든 컴포넌트에 [기능 정의] + [인터랙션] + [상태] JSDoc
-  □ 빈 배열 0개, 빈 template 0개, <style> 블록 0개
-  □ <client-only> 전체 래핑 0개
-  □ 목 데이터의 image 필드에 존재하지 않는 파일 경로 0개
-  □ 빌드 성공
+  □ 모든 섹션이 목록에 포함되어 있다
+  □ 각 섹션에 [기능 정의] + [인터랙션] + [상태] 가 정의되어 있다
+  □ TypeScript 인터페이스 초안이 작성되어 있다
+  □ 공통 컴포넌트가 식별되어 있다
+  □ 파일을 하나도 생성하지 않았다
 
-빈 화면 = Phase 1 미완성. Phase 2로 넘어가지 않는다.
-스타일/이미지는 없어도 됨 — Phase 3에서 채움.
+Phase 3에서 이 스펙 + tree.json을 합쳐서 코드를 생성한다.
 ```
 
 ---
@@ -399,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(단위 없을 때)
 ```
 
 ---
@@ -582,7 +595,7 @@ Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
       - 반복 패턴 (동일 구조 3+) → v-for
    c. CSS 직접 매핑:
       - node.css의 모든 속성을 SCSS에 1:1 매핑
-      - scaleFactor 적용 (px 값만)
+      - vw/clamp 반응형 단위 변환 (vibe.figma.convert 참조)
       - tree.json에 없는 CSS 값은 작성하지 않음
    d. Phase 1의 JSDoc, 인터페이스, 핸들러 보존
 
@@ -619,7 +632,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에서 다시 찾는다.
 ```
 
@@ -810,7 +823,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: 직접 (변환 안 함)
 }
 ```