@su-record/vibe 2.8.4 → 2.8.5
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 +52 -10
- package/package.json +1 -1
package/commands/vibe.figma.md
CHANGED
|
@@ -76,7 +76,7 @@ https://www.figma.com/design/:fileKey/:fileName?node-id=:nodeId
|
|
|
76
76
|
**Single URL:**
|
|
77
77
|
|
|
78
78
|
```
|
|
79
|
-
1. get_design_context(fileKey, nodeId) → 코드 + 스크린샷 + 메타데이터
|
|
79
|
+
1. get_design_context(fileKey, nodeId) → 코드 + 스크린샷 + 메타데이터 + 에셋 URL
|
|
80
80
|
2. get_metadata(fileKey, nodeId) → 레이어 구조 (XML)
|
|
81
81
|
3. get_screenshot(fileKey, nodeId) → 프레임 이미지
|
|
82
82
|
```
|
|
@@ -88,17 +88,59 @@ https://www.figma.com/design/:fileKey/:fileName?node-id=:nodeId
|
|
|
88
88
|
프레임 width로 mobile/tablet/desktop 자동 감지.
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
-
### 0-
|
|
91
|
+
### 0-2. Image Asset Extraction (필수)
|
|
92
|
+
|
|
93
|
+
`get_design_context` 응답에 포함된 이미지 에셋 URL을 **반드시 다운로드**하여 프로젝트에 저장해야 함.
|
|
94
|
+
MCP가 반환하는 URL은 **7일 후 만료**되므로 임시 URL을 코드에 직접 넣으면 안 됨.
|
|
95
|
+
|
|
96
|
+
**에셋 URL 감지:**
|
|
97
|
+
|
|
98
|
+
`get_design_context` 응답의 코드에 다음 패턴이 포함됨:
|
|
99
|
+
```
|
|
100
|
+
const image = 'https://www.figma.com/api/mcp/asset/...'
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
**다운로드 및 저장:**
|
|
104
|
+
|
|
105
|
+
```
|
|
106
|
+
1. 응답에서 모든 이미지 URL 추출 (https://www.figma.com/api/mcp/asset/...)
|
|
107
|
+
2. WebFetch로 각 URL 다운로드
|
|
108
|
+
3. 프로젝트의 에셋 디렉토리에 저장:
|
|
109
|
+
- Nuxt: public/images/{feature}/ 또는 assets/images/{feature}/
|
|
110
|
+
- Next.js: public/images/{feature}/
|
|
111
|
+
- React: public/images/{feature}/ 또는 src/assets/{feature}/
|
|
112
|
+
4. 파일명은 레이어 이름 기반 (kebab-case):
|
|
113
|
+
- "Hero Background" → hero-background.webp
|
|
114
|
+
- "Product Photo 1" → product-photo-1.webp
|
|
115
|
+
5. 생성된 코드에서 임시 URL을 로컬 경로로 교체:
|
|
116
|
+
- 'https://www.figma.com/api/mcp/asset/...' → '/images/{feature}/hero-background.webp'
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**SVG 처리:**
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
- 아이콘/로고 등 벡터 에셋은 SVG로 추출
|
|
123
|
+
- SVG는 인라인 컴포넌트로 변환하거나 파일로 저장
|
|
124
|
+
- 작은 아이콘 (< 1KB) → 인라인 SVG 컴포넌트
|
|
125
|
+
- 큰 SVG → 파일로 저장 후 <img> 또는 import
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
**에셋 미추출 시 경고:**
|
|
129
|
+
|
|
130
|
+
코드 생성 완료 후, MCP 임시 URL이 코드에 남아있으면 경고:
|
|
131
|
+
```
|
|
132
|
+
⚠️ 임시 Figma URL이 코드에 남아있습니다. 7일 후 만료됩니다:
|
|
133
|
+
- src/components/Hero.vue: line 12 (hero-bg)
|
|
134
|
+
→ WebFetch로 다운로드 후 로컬 경로로 교체하세요.
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### 0-3. Verify Extraction
|
|
92
138
|
|
|
93
139
|
```
|
|
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
|
|
140
|
+
1. 모든 MCP 호출 성공 확인
|
|
141
|
+
2. 이미지 에셋 다운로드 완료 확인
|
|
142
|
+
3. 임시 URL이 코드에 남아있지 않은지 확인
|
|
143
|
+
4. Responsive mode: 최소 2개 뷰포트 확인
|
|
102
144
|
```
|
|
103
145
|
|
|
104
146
|
---
|