@su-record/vibe 2.8.11 → 2.8.13

package/skills/vibe-figma-consolidate/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: vibe-figma-consolidate
+description: Step D — 모바일/PC 스타일 공통화, 컴포넌트 통합, 최종 검증
+triggers: []
+tier: standard
+---
+
+# Skill: vibe-figma-consolidate — Step D: 최종 공통화 리팩토링
+
+## D-1. 스타일 공통화
+
+```
+1. 모바일/PC에서 동일한 값 → 공통 토큰으로 추출
+2. 중복 CSS/SCSS 규칙 통합
+3. 컴포넌트 내 중복 로직 제거
+```
+
+### 공통화 우선순위
+
+| 유형 | 처리 방법 |
+|------|----------|
+| 색상 (모바일/PC 동일) | 공통 CSS custom property로 추출 |
+| 타이포그래피 (동일 scale) | 공통 토큰 유지 |
+| 간격 (다름) | clamp() fluid 토큰으로 변환 |
+| 레이아웃 방향 (다름) | @media 분기 유지 |
+| 컴포넌트 구조 (동일) | 하나의 컴포넌트로 통합 |
+
+## D-2. 컴포넌트 통합
+
+```
+1. 유사 컴포넌트 (80% rule) → variant prop으로 통합
+2. 중복 sub-component → 공유 컴포넌트로 추출
+3. Fragment/template 활용하여 불필요한 래퍼 제거
+```
+
+### 80% Rule 적용 기준
+
+```
+유사도 판단 기준:
+  - 레이아웃 구조 동일
+  - 색상/크기/텍스트만 다름
+  → 하나의 컴포넌트 + props로 변형
+
+  - 구조 자체가 다름 (요소 추가/제거, 레이아웃 방향 변경)
+  → 별도 컴포넌트 유지
+```
+
+| Stack | 변형 방법 |
+|-------|----------|
+| React | `variant` prop + 조건부 className / style |
+| Vue | `variant` prop + `<slot>` for 커스텀 영역 |
+| Svelte | `variant` prop + `<slot>` |
+| React Native | `variant` prop + StyleSheet 조건 선택 |
+
+### 통합 예시 (React)
+
+```tsx
+// 통합 전: 별도 컴포넌트 (구조 동일, 색상만 다름)
+<DefaultCard />
+<HighlightCard />
+<CompactCard />
+
+// 통합 후: 단일 컴포넌트 + variant
+interface CardProps {
+  variant: 'default' | 'highlight' | 'compact';
+  title: string;
+  children: React.ReactNode;
+}
+
+export function Card({ variant, title, children }: CardProps): JSX.Element {
+  return (
+    <article className={styles[variant]}>
+      <h3 className={styles.title}>{title}</h3>
+      {children}
+    </article>
+  );
+}
+```
+
+### 불필요한 래퍼 제거
+
+```tsx
+// WRONG: 스타일 없는 불필요한 div 래핑
+<div>
+  <ComponentA />
+  <ComponentB />
+</div>
+
+// CORRECT: Fragment
+<>
+  <ComponentA />
+  <ComponentB />
+</>
+```
+
+## D-3. 최종 검증 루프
+
+```
+🔄 양쪽 뷰포트 동시 검증:
+  - 모바일 Figma vs 코드 (mobile viewport)
+  - PC Figma vs 코드 (desktop viewport)
+  - 양쪽 모두 P1=0, Match Score 95%+
+  - 이미지 에셋 전부 정상 표시
+```
+
+### 검증 완료 조건
+
+```
+✅ Match Score 95% 이상 (모바일 + 데스크탑 각각)
+✅ P1 불일치 0건
+✅ 모든 이미지 에셋 표시 확인
+✅ 공통 토큰으로 중복 제거 완료
+```
+
+### Model Routing (Step D)
+
+| 작업 | 모델 |
+|------|------|
+| 공통화 리팩토링 + 최종 검증 | **Sonnet** |
+| Post — 코드 리뷰 | **gpt-5.3-codex** |
+
+### Post — 코드 리뷰 (Codex 설치 시)
+
+```
+/codex:review (gpt-5.3-codex)
+생성된 코드의 design fidelity + 코드 품질 크로스 검증
+
+Codex 미설치 시 자동 스킵.
+```
+
+Step D 완료 후 → vibe-figma-pipeline 실행.

package/skills/vibe-figma-frame/SKILL.md

@@ -0,0 +1,165 @@
+---
+name: vibe-figma-frame
+tier: standard
+description: "디자인 URL → 프레임별 개별 추출 → 스타일/이미지/코드 반영 → 검증 루프. Step B/C 공통."
+triggers: []
+---
+
+# Design Apply (섹션별 정밀 추출 + 코드 반영)
+
+디자인 URL 하나를 받아서 **섹션별로 쪼개서 추출**하고, Step A에서 만든 컴포넌트에 스타일/이미지를 채움.
+모바일이든 PC든 동일한 프로세스. 두 번째 호출 시 반응형 레이어만 추가.
+
+## 입력
+
+- 디자인 Figma URL (전체 페이지)
+- Step A에서 생성된 컴포넌트 파일들
+- 호출 횟수 (첫 번째 = base, 두 번째 이후 = responsive 추가)
+
+## Phase 1: 디자인 URL 입력
+
+AskUserQuestion (options 사용 금지, 자유 텍스트만):
+
+```
+첫 번째 호출:
+  question: "🎨 디자인 Figma URL을 입력해주세요."
+  → ⏸️ 응답 대기 (응답 전 다음 진행 금지)
+  → URL 저장 → Phase 2~5 실행
+
+검증 완료 후:
+  question: "🎨 추가 디자인 URL이 있나요? (없으면 '없음')"
+  → ⏸️ 응답 대기
+  → URL 입력 → responsive 모드로 Phase 2~5 재실행
+  → "없음" → Step C(공통화)로 진행
+
+모바일/PC 순서를 강제하지 않음. 어떤 뷰포트든 먼저 입력 가능.
+첫 번째 URL = base 스타일, 추가 URL = 반응형 레이어 추가.
+```
+
+## Phase 2: 전체 → 섹션 프레임 매핑
+
+```
+1. get_metadata(fileKey, nodeId) → 전체 페이지 하위 프레임 목록
+
+2. 프레임 이름으로 Step A 컴포넌트와 매핑:
+   | 디자인 프레임 이름 | Step A 컴포넌트 |
+   |------------------|----------------|
+   | "키 비주얼" / "Hero" / "KV" | HeroSection.vue |
+   | "출석" / "Check" / "Mission 01" | DailyCheckInSection.vue |
+   | "플레이타임" / "Mission 02" | PlayTimeMissionSection.vue |
+   | "교환" / "Exchange" / "Shop" | TokenExchangeSection.vue |
+   | "응모" / "Raffle" / "Prize" | TokenRaffleSection.vue |
+   | "유의사항" / "Caution" / "Notice" | CautionSection.vue |
+   | "GNB" / "Header" / "Nav" | GnbHeader.vue |
+   | "Footer" | EventFooter.vue |
+
+   매핑 방법:
+   - 프레임 이름 키워드 매칭
+   - 매칭 안 되면 순서(위→아래)로 Step A 섹션과 1:1 대응
+   - 그래도 안 되면 get_screenshot으로 비주얼 비교
+
+3. 매핑 결과 출력:
+   "디자인 프레임 N개 → 컴포넌트 N개 매핑 완료"
+   매핑 안 된 프레임이 있으면 사용자에게 확인
+```
+
+## Phase 3: 섹션별 개별 추출
+
+**각 매핑된 섹션에 대해 순서대로:**
+
+```
+for each (designFrame, component) in mappings:
+
+  1. get_design_context(fileKey, designFrame.nodeId)
+     → 해당 섹션 전용 코드 + 스크린샷 + 에셋 URL
+
+  2. 이미지 에셋 다운로드 (BLOCKING):
+     → 응답에서 figma.com/api/mcp/asset/ URL 전부 추출
+     → WebFetch로 다운로드 → static/images/{feature}/ 저장
+     → URL→로컬경로 매핑 테이블에 추가
+
+  3. 스크린샷 분석:
+     → 레이아웃 (flex/grid 방향, 정렬)
+     → 색상 (배경, 텍스트, 보더)
+     → 타이포 (크기, 굵기, 줄간격)
+     → 간격 (padding, gap, margin)
+     → 배경 이미지 구조 (Multi-Layer: Bg/Overlay/Content)
+
+  4. component 파일에 반영:
+     → <template> 안의 placeholder를 실제 마크업으로 교체
+     → <style> 블록에 추출한 스타일 작성
+     → 이미지 경로를 로컬 경로로 교체
+     → Step A의 기능 주석과 핸들러는 보존
+```
+
+## Phase 4: 뷰포트 모드에 따른 스타일 적용
+
+### 첫 번째 URL (base)
+
+```
+- 모든 스타일을 base로 작성 (반응형 미고려)
+- 토큰 파일에 추출한 값 저장
+- 이미지 다운로드 + 로컬 경로 매핑
+```
+
+### 추가 URL (responsive)
+
+```
+기존 코드를 수정하지 않고 반응형 레이어만 추가:
+
+1. 프레임 width 비교 → 어떤 뷰포트인지 자동 판별
+   (base보다 크면 desktop 방향, 작으면 mobile 방향)
+
+2. 값이 다른 속성 → clamp() fluid 토큰으로 변환
+   - SCSS: figma-fluid($min, $max) 함수 사용
+   - CSS: clamp(min, preferred, max)
+
+3. 레이아웃 구조가 다른 부분 → @media (min-width: {breakpoint}px)
+   - flex-direction 변경
+   - grid-template-columns 변경
+   - display toggle (baseOnly/responsiveOnly)
+
+4. 뷰포트별 배경 이미지 → @media 분기
+   .heroBg { background-image: url(base.webp); }
+   @media (min-width: {breakpoint}px) { .heroBg { background-image: url(alt.webp); } }
+
+5. 추가 이미지 에셋 다운로드 (base와 동일하면 스킵)
+
+6. 기존 base 코드/주석/핸들러는 절대 삭제하지 않음
+```
+
+## Phase 5: 검증 루프
+
+```
+🔄 Figma 원본 스크린샷 vs 생성된 코드 비교:
+
+  1. get_screenshot으로 Figma 원본 획득 (이미 Phase 3에서 있음)
+  2. 생성된 코드의 렌더링 결과와 비교
+  3. 비교 항목:
+     - 레이아웃 (배치, 정렬, 간격)
+     - 타이포 (크기, 굵기, 색상)
+     - 색상 (배경, 텍스트, 보더)
+     - 이미지 (배경/에셋 표시 여부)
+     - 누락 요소
+
+  4. Diff Report:
+     | 섹션 | 항목 | Figma | 코드 | 심각도 |
+     |------|------|-------|------|--------|
+     | Hero | 배경 이미지 | 있음 | 누락 | P1 |
+     | 출석 | font-size | 24px | 20px | P2 |
+
+  5. P1 불일치 → 수정 → 재비교 (횟수 제한 없음)
+     동일 항목 3회 연속 미해결 → 해당 항목만 사용자 확인 후 계속
+
+  6. 완료 조건:
+     ✅ P1 = 0
+     ✅ 모든 이미지 에셋 표시
+     ✅ (두 번째 호출 시) 이전 뷰포트도 깨지지 않았는지 재확인
+```
+
+## 참조 스킬
+
+코드 생성 시 다음 스킬의 규칙을 적용:
+- `vibe-figma-rules` — 분석/감지 (Phase 1-3)
+- `vibe-figma-style` — 토큰/스타일 (Phase 4, 클래스 네이밍, SCSS)
+- `vibe-figma-codegen` — 마크업/코드 생성 (Phase 5-6, 이미지 패턴, 반응형)

package/skills/vibe-figma-pipeline/SKILL.md

@@ -0,0 +1,52 @@
+---
+name: vibe-figma-pipeline
+description: Figma to Code 완료 후 Design Quality Pipeline 안내
+triggers: []
+tier: standard
+---
+
+# Skill: vibe-figma-pipeline — Design Quality Pipeline
+
+코드 생성 완료 후, 다음 파이프라인을 사용자에게 제시한다.
+
+## Pre-requisite check
+
+If `.claude/vibe/design-context.json` does NOT exist:
+```
+⚠️ 디자인 컨텍스트가 없습니다. /design-teach 를 먼저 실행하면
+   브랜드, 접근성, 타겟 디바이스에 맞춘 더 정확한 코드를 생성할 수 있습니다.
+```
+
+## Quick (default recommendation)
+
+```
+/design-normalize → /design-audit
+```
+
+- Normalize: 하드코딩 값 → MASTER.md 토큰으로 치환
+- Audit: A11Y + 성능 + 반응형 + AI Slop 검출
+
+## Thorough (recommended for production)
+
+```
+/design-normalize → /design-audit → /design-critique → /design-polish
+```
+
+- + Critique: Nielsen 10 휴리스틱 + 5 페르소나 분석
+- + Polish: 인터랙션 상태 보완 (hover/focus/loading/error)
+
+## Output format
+
+```
+## 🎨 Design Quality Pipeline
+
+생성된 파일: {file list}
+
+추천 다음 단계:
+  1. /design-normalize  — 토큰 정렬 (하드코딩 제거)
+  2. /design-audit      — 기술 품질 검사
+  3. /design-critique    — UX 휴리스틱 리뷰
+  4. /design-polish      — 최종 인터랙션 보완
+
+💡 /design-teach 가 아직 설정되지 않았다면 먼저 실행하세요.
+```

package/skills/vibe-figma-rules/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: vibe-figma-rules
+description: Figma to Code 분석 및 감지 규칙 — Model Routing, 디자인 분석, 레이어 추출, 스택 감지
+triggers: []
+tier: standard
+---
+
+# Skill: vibe-figma-rules — 분석 및 감지 규칙
+
+항상 이 skill을 참조하여 코드를 생성한다.
+
+---
+
+## Model Routing
+
+| Step | Claude | GPT (Codex) | 이유 |
+|------|--------|-------------|------|
+| Step A (스토리보드 + 구조) | **Haiku → Sonnet** | — | MCP 추출 → 구조 설계 |
+| Step B (모바일 추출) | **Haiku** | — | MCP + 이미지 다운로드 |
+| Step B (모바일 코드 생성) | **Sonnet** | **gpt-5.3-codex-spark** (병렬) | 섹션별 컴포넌트 생성 |
+| Step B (모바일 검증) | **Sonnet** | — | 이미지 비교 + auto-fix |
+| Step C (PC 추출) | **Haiku** | — | MCP + 이미지 다운로드 |
+| Step C (PC 반응형 반영) | **Sonnet** | — | 기존 코드에 반응형 레이어 추가 |
+| Step C (PC 검증) | **Sonnet** | — | 양쪽 뷰포트 비교 |
+| Step D (공통화) | **Sonnet** | — | 리팩토링 + 최종 검증 |
+| Post (코드 리뷰) | — | **gpt-5.3-codex** | 전체 코드 품질 검증 |
+
+### GPT 모델 선택 기준
+
+| 모델 | config key | 용도 |
+|------|-----------|------|
+| `gpt-5.4` | `models.gpt` | 아키텍처 판단, 복잡한 추론 |
+| `gpt-5.3-codex` | `models.gptCodex` | 코드 리뷰, 분석 (정확도 우선) |
+| `gpt-5.3-codex-spark` | `models.gptCodexSpark` | 코드 생성 (속도 우선) |
+
+`~/.vibe/config.json`의 `models` 에서 오버라이드 가능.
+
+---
+
+## Phase 1: Design Analysis (Image-First)
+
+### Single mode
+
+Read `figma-output/frame.png` and analyze:
+
+| Aspect | What to Extract |
+|--------|-----------------|
+| Layout | Flex/Grid direction, alignment, wrapping |
+| Components | Visual boundaries (cards, buttons, inputs, modals) |
+| Spacing | Padding, margins, gaps between elements |
+| Typography | Font sizes, weights, line heights, hierarchy |
+| Colors | Background, text, border, accent colors |
+| States | Hover/active/disabled indicators if visible |
+| Responsive hints | Breakpoint indicators, fluid vs fixed widths |
+
+### Responsive mode
+
+Read **ALL** frame images and analyze **side-by-side**:
+
+| Aspect | What to Compare |
+|--------|-----------------|
+| Layout shift | Which elements reflow? (e.g., horizontal → vertical stack) |
+| Visibility | Which elements hide/show per viewport? |
+| Typography scale | Font size ratio between viewports |
+| Spacing scale | Padding/gap ratio between viewports |
+| Component shape | Does the component change form? (e.g., drawer → sidebar) |
+| Navigation | Does nav change? (e.g., hamburger ↔ full nav bar) |
+
+Build a **viewport diff table**:
+
+```
+| Element        | Mobile (375px)         | Desktop (1440px)       | Strategy          |
+|---------------|------------------------|------------------------|-------------------|
+| Nav           | hamburger + drawer     | horizontal bar         | component swap    |
+| Hero title    | 24px                   | 48px                   | fluid: clamp()    |
+| Card grid     | 1 column               | 3 columns              | grid auto-fit     |
+| Sidebar       | hidden                 | visible                | display toggle    |
+| Body text     | 14px                   | 16px                   | fluid: clamp()    |
+| Padding       | 16px                   | 48px                   | fluid: clamp()    |
+```
+
+---
+
+## Phase 2: Layer Data Extraction
+
+### Single mode
+
+Read `figma-output/layers.json` and extract:
+
+1. **Component hierarchy** — Map nested layers to component tree
+2. **Design tokens** — Colors (fill, stroke), font properties, spacing values, border radius, shadows
+3. **Auto-layout** — Direction, gap, padding (maps directly to flex/grid)
+4. **Constraints** — Fixed vs fluid sizing
+5. **Component instances** — Identify reusable patterns
+6. **Image fills** — Identify layers with `type: "IMAGE"` fills (see Phase 2-A)
+
+### Responsive mode
+
+Read **ALL** `layers.{N}.json` files and extract **per-viewport**:
+
+1. **Per-viewport tokens** — Record exact values for each viewport:
+   ```
+   { "mobile": { "h1": 24, "body": 14, "padding": 16 },
+     "desktop": { "h1": 48, "body": 16, "padding": 48 } }
+   ```
+2. **Layout differences** — Auto-layout direction changes (e.g., HORIZONTAL → VERTICAL)
+3. **Visibility map** — Which layers exist in one viewport but not the other
+4. **Shared tokens** — Values identical across all viewports (colors, border-radius, shadows are usually shared)
+
+### Phase 2-A: Image Fill Classification
+
+Figma에서 이미지는 레이어의 `fills` 배열에 `type: "IMAGE"`로 들어옴. 이를 **용도별로 분류**해야 코드에서 올바른 패턴을 생성할 수 있음.
+
+#### 감지 방법
+
+`layers.json`에서 아래 패턴을 탐색:
+
+```
+fills: [{ type: "IMAGE", scaleMode: "FILL" | "FIT" | "CROP" | "TILE", imageRef: "..." }]
+```
+
+#### 분류 기준
+
+| 판별 조건 | 분류 | 코드 패턴 |
+|----------|------|----------|
+| 레이어가 프레임/섹션의 **직계 배경**이고, 위에 텍스트/UI 요소가 겹침 | **Background Image** | `background-image` + `background-size` |
+| 레이어가 독립적이고, 위에 겹치는 요소 없음 | **Content Image** | `<img>` 또는 `<picture>` |
+| 레이어 이름에 `icon`, `logo`, `avatar` 포함 | **Inline Asset** | `<img>` (작은 크기) |
+| 레이어가 반복 패턴(`scaleMode: "TILE"`) | **Pattern/Texture** | `background-image` + `background-repeat` |
+| 레이어가 전체 프레임을 덮고 opacity < 1 또는 blendMode 적용 | **Overlay Image** | `background-image` + overlay `::before`/`::after` |
+
+#### 이미지-텍스트 겹침 판별 (Background vs Content)
+
+```
+frame의 fills에 IMAGE가 있고, children에 TEXT 레이어가 있으면:
+  → Background Image (텍스트 아래 깔리는 배경)
+
+독립 레이어의 fills에 IMAGE가 있고, 형제 레이어와 겹치지 않으면:
+  → Content Image
+```
+
+#### 이미지 소스 추출
+
+- `imageRef` 값으로 Figma API의 이미지 렌더링 사용 (`/images/{fileKey}`)
+- 추출된 이미지는 `figma-output/assets/` 디렉토리에 저장
+- 파일명은 레이어 이름 기반: `hero-bg.png`, `product-photo.jpg`
+
+### Responsive Scaling Calculation
+
+Per-viewport 토큰 쌍에서 clamp() 값을 계산. 공식은 **Phase 4-3** 참조.
+
+핵심: Figma 디자인이 2x 스케일(2560px/720px)이므로, 반드시 타겟 해상도(1920px/480px)로 환산 후 clamp를 계산해야 함.
+
+**Correction rule**: When image and JSON disagree, **image wins**. The image shows designer intent; JSON may have structural artifacts.
+
+---
+
+## Phase 3: Project Stack Detection + Mode Resolution
+
+### 3-1. Detect Stack
+
+1. Read `.claude/vibe/config.json` → check `stacks` field
+2. If no config, detect from project files:
+   - `package.json` → React, Vue, Svelte, Angular, etc.
+   - `tailwind.config.*` → Tailwind CSS
+   - `next.config.*` → Next.js
+   - `nuxt.config.*` → Nuxt
+   - `*.module.css` → CSS Modules pattern
+   - `*.scss` / `sass` in deps → SCSS
+   - `styled-components` / `@emotion` in deps → CSS-in-JS
+
+### 3-2. Load Design Context (Design Skill Integration)
+
+Read these files **in order** — later sources override earlier ones:
+
+1. **`.claude/vibe/design-context.json`** — brand personality, aesthetic direction, constraints
+   - `aesthetic.style` → guides visual weight (minimal vs bold)
+   - `aesthetic.colorMood` → warm/cool/vibrant tone for token selection
+   - `brand.personality` → preserve brand-expressive elements
+   - `constraints.accessibility` → AA or AAA level (affects contrast, focus, ARIA depth)
+   - `constraints.devices` → responsive breakpoints priority
+2. **`.claude/vibe/design-system/{project}/MASTER.md`** — authoritative token definitions
+   - If MASTER.md exists: **map Figma tokens to MASTER.md tokens first**, only create new tokens for values with no match
+   - If no MASTER.md: generate `figma-tokens.css` as standalone token source
+
+**Decision rule**: When Figma token ≈ existing MASTER.md token (within 10% color distance or ±2px spacing), **use the existing token** — do not duplicate.
+
+### 3-3. Load Breakpoints
+
+Breakpoints are loaded from multiple sources in priority order:
+
+#### Source Priority
+
+| Priority | Source | How |
+|----------|--------|-----|
+| 1 | **Storyboard** | Phase 0-1에서 추출한 `storyboardSpec.breakpoints` |
+| 2 | **`~/.vibe/config.json`** | `figma.breakpoints` — user-customized via `vibe figma breakpoints --set` |
+| 3 | **Project CSS/Tailwind** | Grep `tailwind.config.*` → `theme.screens`, or `@media.*min-width` patterns in codebase |
+| 4 | **Defaults** | Built-in values (breakpoint: 1024px, etc.) |
+
+#### Default Breakpoints (built-in)
+
+Based on game industry responsive storyboard standards:
+
+```
+breakpoint:     1024px    ← PC↔Mobile boundary (@media min-width)
+pcTarget:       1920px    ← PC main target resolution
+mobilePortrait:  480px    ← Mobile portrait max width
+mobileMinimum:   360px    ← Mobile minimum supported width
+designPc:       2560px    ← Figma PC artboard width (design is 2x scale)
+designMobile:    720px    ← Figma Mobile artboard width (design is 2x scale)
+```
+
+#### How to use in code generation
+
+```
+@media breakpoint:
+  - Single breakpoint model: @media (min-width: {breakpoint}px)
+  - Mobile-first: styles below breakpoint = mobile, above = PC
+
+clamp() range:
+  - minVw = mobileMinimum (360px) — smallest supported viewport
+  - maxVw = pcTarget (1920px) — largest target viewport
+  - Values scale linearly between these bounds
+
+Design scale factor:
+  - PC design at {designPc}px targets {pcTarget}px → scale = pcTarget/designPc
+  - Mobile design at {designMobile}px targets {mobilePortrait}px → scale = mobilePortrait/designMobile
+  - Apply scale to convert Figma pixel values to target pixel values
+```
+
+#### User customization
+
+Users can override any value via CLI:
+
+```bash
+vibe figma breakpoints                          # Show current values
+vibe figma breakpoints --set breakpoint=768     # Change PC↔Mobile boundary
+vibe figma breakpoints --set mobileMinimum=320  # Change mobile minimum
+```
+
+Stored in `~/.vibe/config.json` → `figma.breakpoints`. Partial overrides merge with defaults.
+
+### 3-4. Resolve Generation Mode
+
+**Both modes use the project's existing directory structure.** Never create `figma-output/generated/`.
+
+```
+if --new flag:
+  → detect project's page/component/style directories (same as default)
+  → generate self-contained token file (no MASTER.md dependency)
+  → components are self-contained (own tokens, no external design system imports)
+  → placed in project's standard directories with feature-named subfolder
+
+default (no flag):
+  → scan existing component directories, theme files, token definitions
+  → map output to project's conventions (file location, naming, imports)
+  → add only NEW tokens that don't exist yet
+```