@su-record/vibe 2.8.21 → 2.8.22
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 +31 -64
- package/package.json +1 -1
package/commands/vibe.figma.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
|
-
description: Figma design to code —
|
|
2
|
+
description: Figma design to code — 스토리보드(기능) + 디자인(비주얼) → 프로덕션 코드
|
|
3
3
|
argument-hint: ""
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# /vibe.figma
|
|
7
7
|
|
|
8
|
-
Figma 디자인
|
|
8
|
+
Figma 디자인 → 프로덕션 코드. 스토리보드로 기능 구조를 잡고, 디자인 URL에서 이미지와 CSS를 추출.
|
|
9
9
|
|
|
10
10
|
## Usage
|
|
11
11
|
|
|
@@ -15,54 +15,34 @@ Figma 디자인 + 스토리보드 → 프로덕션 코드. **프레임별 점진
|
|
|
15
15
|
/vibe.figma --refine # 보완 모드 (기존 코드 + Figma 재비교 → 수정)
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## Flow
|
|
19
19
|
|
|
20
20
|
```
|
|
21
|
-
|
|
22
|
-
→
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
→
|
|
32
|
-
→
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
→
|
|
21
|
+
Phase 0: Setup
|
|
22
|
+
→ 스택 감지, 디렉토리 생성, 피처명 결정
|
|
23
|
+
|
|
24
|
+
Phase 1: 스토리보드 (선택)
|
|
25
|
+
→ "스토리보드 Figma URL을 입력해주세요. (없으면 '없음')"
|
|
26
|
+
→ 레이아웃 + 컴포넌트 구성 + 기능 요구사항 JSDoc 주석
|
|
27
|
+
|
|
28
|
+
Phase 2: 디자인 (핵심)
|
|
29
|
+
→ "베이스 디자인(모바일) Figma URL을 입력해주세요."
|
|
30
|
+
→ 섹션별: get_design_context → 이미지 다운로드 → CSS 스타일 작성 → template 리팩토링
|
|
31
|
+
→ "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
|
|
32
|
+
→ ... 반복 (반응형 추가)
|
|
33
|
+
→ "없음" → Phase 3
|
|
34
|
+
|
|
35
|
+
Phase 3: 검증
|
|
36
|
+
→ Grep 자동 체크 + 스크린샷 비교 + P1=0까지 수정
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
### URL 입력 규칙
|
|
40
40
|
|
|
41
41
|
```
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
Step A: "📋 스토리보드 Figma URL을 입력해주세요. (없으면 '없음')"
|
|
46
|
-
→ ⏸️ 응답 대기
|
|
47
|
-
|
|
48
|
-
Step B (반복):
|
|
49
|
-
"🎨 디자인 Figma URL을 입력해주세요."
|
|
50
|
-
→ ⏸️ 응답 대기 → 프레임별 추출 + 코드 반영 + 검증
|
|
51
|
-
→ 검증 완료 후:
|
|
52
|
-
"🎨 추가 디자인 URL이 있나요? (없으면 '없음')"
|
|
53
|
-
→ ⏸️ 응답 대기
|
|
54
|
-
→ URL 입력: 반응형 레이어 추가 → 검증 → 다시 "추가?" 질문
|
|
55
|
-
→ "없음": Step C로 진행
|
|
42
|
+
AskUserQuestion 사용 시 절대 선택지(options) 제공 금지. 자유 텍스트만.
|
|
43
|
+
각 질문의 응답을 받은 후에만 다음으로 진행.
|
|
56
44
|
```
|
|
57
45
|
|
|
58
|
-
### Mode
|
|
59
|
-
|
|
60
|
-
| Mode | 동작 |
|
|
61
|
-
|------|------|
|
|
62
|
-
| **기본** | 기존 디자인 시스템/토큰 활용 |
|
|
63
|
-
| **--new** | 자체 완결 토큰, 기존 시스템 무관 |
|
|
64
|
-
| **--refine** | 기존 코드를 Figma 재비교 → 수정만 |
|
|
65
|
-
|
|
66
46
|
## Context Reset
|
|
67
47
|
|
|
68
48
|
**이 커맨드 실행 시 이전 대화 무시.**
|
|
@@ -70,33 +50,20 @@ Step B (반복):
|
|
|
70
50
|
|
|
71
51
|
---
|
|
72
52
|
|
|
73
|
-
>
|
|
74
|
-
|
|
75
|
-
## Step A: 스토리보드 + Base 구조
|
|
76
|
-
|
|
77
|
-
1. Load skill `vibe-figma` — 스토리보드 URL 입력 + MCP 추출
|
|
78
|
-
2. Load skill `vibe-figma-analyze` — 세밀 분석 → 동작하는 레이아웃 코드 + 기능 주석
|
|
79
|
-
|
|
80
|
-
## Step B: 디자인 반영 (반복)
|
|
81
|
-
|
|
82
|
-
Load skill `vibe-figma-frame` — 디자인 URL → 프레임별 추출 → 코드 반영 → 검증 루프
|
|
53
|
+
> **Timer**: Call `getCurrentTime` tool at the START. Record as `{start_time}`.
|
|
83
54
|
|
|
84
|
-
|
|
85
|
-
- 추가 URL: 반응형 레이어 추가 (clamp + @media)
|
|
86
|
-
- URL이 더 없을 때까지 반복
|
|
55
|
+
## Phase 0~1: Setup + Storyboard
|
|
87
56
|
|
|
88
|
-
|
|
57
|
+
Load skill `vibe-figma` — Phase 0 Setup + Phase 1 Storyboard
|
|
89
58
|
|
|
90
|
-
|
|
59
|
+
## Phase 2: Design
|
|
91
60
|
|
|
92
|
-
|
|
61
|
+
Load skill `vibe-figma` — Phase 2 Design
|
|
93
62
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
| `vibe-figma-style` | 스타일 (토큰, SCSS, 클래스 네이밍) | Step B, C |
|
|
98
|
-
| `vibe-figma-codegen` | 코드 생성 (마크업, 이미지, 반응형, 검증) | Step B, C |
|
|
63
|
+
섹션별 처리 시 참조:
|
|
64
|
+
- Load skill `vibe-figma-extract` — 이미지 다운로드 + CSS 값 추출 방법
|
|
65
|
+
- Load skill `vibe-figma-convert` — 참조 코드 → 프로젝트 코드 + 외부 스타일 변환
|
|
99
66
|
|
|
100
|
-
##
|
|
67
|
+
## Phase 3: Verification
|
|
101
68
|
|
|
102
|
-
|
|
69
|
+
Load skill `vibe-figma` — Phase 3 Verification
|