@su-record/vibe 2.8.4 → 2.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/commands/vibe.figma.md +90 -13
- package/package.json +1 -1
package/commands/vibe.figma.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Figma design to code — extract + generate in one step
|
|
3
|
-
argument-hint: "figma-url" ["figma-url-2"] [--new]
|
|
3
|
+
argument-hint: "figma-url" ["figma-url-2"] [--new]
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# /vibe.figma
|
|
@@ -13,7 +13,6 @@ Extract Figma design data and generate production-ready component code, tailored
|
|
|
13
13
|
/vibe.figma "url" # Single design → project integrated (default)
|
|
14
14
|
/vibe.figma "mobile-url" "desktop-url" # Responsive — auto-detect viewport from frame width
|
|
15
15
|
/vibe.figma "url" --new # New feature — self-contained tokens, no existing design system dependency
|
|
16
|
-
/vibe.figma "url" --component LoginForm # Name the root component
|
|
17
16
|
/vibe.figma --local # Skip extraction, use existing figma-output/
|
|
18
17
|
```
|
|
19
18
|
|
|
@@ -58,6 +57,42 @@ When multiple URLs are provided:
|
|
|
58
57
|
|
|
59
58
|
> **⏱️ Timer**: Call `getCurrentTime` tool at the START. Record the result as `{start_time}`.
|
|
60
59
|
|
|
60
|
+
## Model Routing
|
|
61
|
+
|
|
62
|
+
| Phase | Claude | GPT (Codex) | 이유 |
|
|
63
|
+
|-------|--------|-------------|------|
|
|
64
|
+
| Phase 0 (추출) | **Haiku** | — | MCP 호출 + 데이터 수집 |
|
|
65
|
+
| Phase 1-2 (분석) | **Sonnet** | — | 이미지 비교 + 구조 파악 |
|
|
66
|
+
| Phase 3 (감지) | **Haiku** | — | 파일 읽기 + 패턴 매칭 |
|
|
67
|
+
| Phase 4-5 (토큰/마크업) | **Sonnet** | — | 토큰 매핑 + 시맨틱 판단 |
|
|
68
|
+
| Phase 6 (코드 생성) | **Sonnet** | **gpt-5.3-codex-spark** (병렬) | 섹션별 컴포넌트 병렬 생성 |
|
|
69
|
+
| Phase 7-8 (매핑/리포트) | **Sonnet** | — | 토큰 매핑 + 보고서 |
|
|
70
|
+
| Post (코드 리뷰) | — | **gpt-5.3-codex** | 생성 코드 품질 검증 |
|
|
71
|
+
|
|
72
|
+
### GPT 모델 선택 기준
|
|
73
|
+
|
|
74
|
+
| 모델 | config key | 용도 |
|
|
75
|
+
|------|-----------|------|
|
|
76
|
+
| `gpt-5.4` | `models.gpt` | 아키텍처 판단, 복잡한 추론 |
|
|
77
|
+
| `gpt-5.3-codex` | `models.gptCodex` | 코드 리뷰, 분석 (정확도 우선) |
|
|
78
|
+
| `gpt-5.3-codex-spark` | `models.gptCodexSpark` | 코드 생성 (속도 우선) |
|
|
79
|
+
|
|
80
|
+
`~/.vibe/config.json`의 `models` 에서 오버라이드 가능.
|
|
81
|
+
|
|
82
|
+
### Codex 병렬 활용 (codex-plugin-cc 설치 시)
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
Phase 6 — 컴포넌트 생성:
|
|
86
|
+
섹션 3개 이상 → /codex:rescue --background (gpt-5.3-codex-spark)
|
|
87
|
+
각 섹션 컴포넌트를 Codex에 병렬 위임, Claude는 루트 페이지 + 토큰 담당
|
|
88
|
+
|
|
89
|
+
Post — 코드 리뷰:
|
|
90
|
+
/codex:review (gpt-5.3-codex)
|
|
91
|
+
생성된 코드의 design fidelity + 코드 품질 크로스 검증
|
|
92
|
+
|
|
93
|
+
Codex 미설치 시 자동 스킵 — Claude만으로 순차 생성.
|
|
94
|
+
```
|
|
95
|
+
|
|
61
96
|
## Phase 0: Figma Data Extraction
|
|
62
97
|
|
|
63
98
|
**Skip this phase if `--local` flag is provided and `figma-output/` already exists.**
|
|
@@ -76,7 +111,7 @@ https://www.figma.com/design/:fileKey/:fileName?node-id=:nodeId
|
|
|
76
111
|
**Single URL:**
|
|
77
112
|
|
|
78
113
|
```
|
|
79
|
-
1. get_design_context(fileKey, nodeId) → 코드 + 스크린샷 + 메타데이터
|
|
114
|
+
1. get_design_context(fileKey, nodeId) → 코드 + 스크린샷 + 메타데이터 + 에셋 URL
|
|
80
115
|
2. get_metadata(fileKey, nodeId) → 레이어 구조 (XML)
|
|
81
116
|
3. get_screenshot(fileKey, nodeId) → 프레임 이미지
|
|
82
117
|
```
|
|
@@ -88,17 +123,59 @@ https://www.figma.com/design/:fileKey/:fileName?node-id=:nodeId
|
|
|
88
123
|
프레임 width로 mobile/tablet/desktop 자동 감지.
|
|
89
124
|
```
|
|
90
125
|
|
|
91
|
-
### 0-
|
|
126
|
+
### 0-2. Image Asset Extraction (필수)
|
|
127
|
+
|
|
128
|
+
`get_design_context` 응답에 포함된 이미지 에셋 URL을 **반드시 다운로드**하여 프로젝트에 저장해야 함.
|
|
129
|
+
MCP가 반환하는 URL은 **7일 후 만료**되므로 임시 URL을 코드에 직접 넣으면 안 됨.
|
|
130
|
+
|
|
131
|
+
**에셋 URL 감지:**
|
|
132
|
+
|
|
133
|
+
`get_design_context` 응답의 코드에 다음 패턴이 포함됨:
|
|
134
|
+
```
|
|
135
|
+
const image = 'https://www.figma.com/api/mcp/asset/...'
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
**다운로드 및 저장:**
|
|
139
|
+
|
|
140
|
+
```
|
|
141
|
+
1. 응답에서 모든 이미지 URL 추출 (https://www.figma.com/api/mcp/asset/...)
|
|
142
|
+
2. WebFetch로 각 URL 다운로드
|
|
143
|
+
3. 프로젝트의 에셋 디렉토리에 저장:
|
|
144
|
+
- Nuxt: public/images/{feature}/ 또는 assets/images/{feature}/
|
|
145
|
+
- Next.js: public/images/{feature}/
|
|
146
|
+
- React: public/images/{feature}/ 또는 src/assets/{feature}/
|
|
147
|
+
4. 파일명은 레이어 이름 기반 (kebab-case):
|
|
148
|
+
- "Hero Background" → hero-background.webp
|
|
149
|
+
- "Product Photo 1" → product-photo-1.webp
|
|
150
|
+
5. 생성된 코드에서 임시 URL을 로컬 경로로 교체:
|
|
151
|
+
- 'https://www.figma.com/api/mcp/asset/...' → '/images/{feature}/hero-background.webp'
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
**SVG 처리:**
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
- 아이콘/로고 등 벡터 에셋은 SVG로 추출
|
|
158
|
+
- SVG는 인라인 컴포넌트로 변환하거나 파일로 저장
|
|
159
|
+
- 작은 아이콘 (< 1KB) → 인라인 SVG 컴포넌트
|
|
160
|
+
- 큰 SVG → 파일로 저장 후 <img> 또는 import
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
**에셋 미추출 시 경고:**
|
|
164
|
+
|
|
165
|
+
코드 생성 완료 후, MCP 임시 URL이 코드에 남아있으면 경고:
|
|
166
|
+
```
|
|
167
|
+
⚠️ 임시 Figma URL이 코드에 남아있습니다. 7일 후 만료됩니다:
|
|
168
|
+
- src/components/Hero.vue: line 12 (hero-bg)
|
|
169
|
+
→ WebFetch로 다운로드 후 로컬 경로로 교체하세요.
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### 0-3. Verify Extraction
|
|
92
173
|
|
|
93
174
|
```
|
|
94
|
-
1.
|
|
95
|
-
2.
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
3. If single mode:
|
|
99
|
-
- Check figma-output/layers.json exists → if not, report error and stop
|
|
100
|
-
- Check figma-output/frame.png exists → optional (only with node-id)
|
|
101
|
-
4. Validate all layers JSON files have children array → warn if empty
|
|
175
|
+
1. 모든 MCP 호출 성공 확인
|
|
176
|
+
2. 이미지 에셋 다운로드 완료 확인
|
|
177
|
+
3. 임시 URL이 코드에 남아있지 않은지 확인
|
|
178
|
+
4. Responsive mode: 최소 2개 뷰포트 확인
|
|
102
179
|
```
|
|
103
180
|
|
|
104
181
|
---
|
|
@@ -361,7 +438,7 @@ default (no flag):
|
|
|
361
438
|
|
|
362
439
|
**Step 2: 피처명 기반 폴더 생성**
|
|
363
440
|
|
|
364
|
-
|
|
441
|
+
Figma 파일명에서 피처명 자동 추출 → kebab-case 변환.
|
|
365
442
|
|
|
366
443
|
```
|
|
367
444
|
예: Figma 파일명 "PUBG 9주년 이벤트" → pubg-anniversary
|