@su-record/vibe 2.8.13 → 2.8.14
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/package.json
CHANGED
|
@@ -65,10 +65,7 @@ storyboardSpec = {
|
|
|
65
65
|
2. 디자인 시스템 감지 (--new 미지정 시)
|
|
66
66
|
3. 브레이크포인트 로드 (vibe-figma-rules Phase 3-3 참조, 스토리보드 우선)
|
|
67
67
|
4. 피처명 결정 (Figma 파일명에서 추출)
|
|
68
|
-
5. 파일
|
|
69
|
-
- 루트 페이지 파일 (빈 shell)
|
|
70
|
-
- 컴포넌트 디렉토리 (빈 폴더)
|
|
71
|
-
- 토큰 파일 (스토리보드 기반 초기값)
|
|
68
|
+
5. → 파일 생성은 vibe-figma-analyze 스킬에서 실행 (이 스킬은 추출까지만)
|
|
72
69
|
```
|
|
73
70
|
|
|
74
71
|
### 피처명 결정
|
|
@@ -10,6 +10,10 @@ triggers: []
|
|
|
10
10
|
스토리보드 URL 하나로 **실제 동작하는 레이아웃 코드**를 생성.
|
|
11
11
|
빈 shell이 아니라, 스토리보드에서 파악 가능한 모든 정보를 코드에 반영.
|
|
12
12
|
|
|
13
|
+
> **⛔ 실행 지시: 이 스킬은 분석만 하는 게 아님. 반드시 Write 도구로 파일을 생성해야 함.**
|
|
14
|
+
> Phase 1~4에서 분석 → Phase 5에서 **Write 도구로 실제 파일 생성** → Phase 6에서 인터랙션 테이블 출력.
|
|
15
|
+
> 분석 결과를 텍스트로 보여주기만 하면 안 됨. 파일이 디스크에 생성되어야 Step A 완료.
|
|
16
|
+
|
|
13
17
|
## 입력
|
|
14
18
|
|
|
15
19
|
- 스토리보드 URL의 get_metadata 결과 (전체 프레임 목록)
|
|
@@ -107,11 +111,24 @@ Error: 에러 페이지 구조
|
|
|
107
111
|
}
|
|
108
112
|
```
|
|
109
113
|
|
|
110
|
-
## Phase 5:
|
|
114
|
+
## Phase 5: 파일 생성 (Write 도구 사용 — 필수)
|
|
115
|
+
|
|
116
|
+
> **⛔ Write 도구로 아래 파일들을 실제로 생성한다. 코드를 보여주기만 하면 안 됨.**
|
|
111
117
|
|
|
112
|
-
스토리보드 분석 결과로 **실제 동작하는 레이아웃 코드**
|
|
118
|
+
스토리보드 분석 결과로 **실제 동작하는 레이아웃 코드** 파일을 Write.
|
|
113
119
|
스타일은 Step B에서 채우지만, **구조/로직/주석은 이 단계에서 완성**.
|
|
114
120
|
|
|
121
|
+
### 생성할 파일 목록
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
필수 생성 (Write 도구):
|
|
125
|
+
1. pages/{feature-name}.vue (또는 .tsx) ← 루트 페이지
|
|
126
|
+
2. components/{feature-name}/각섹션.vue ← 섹션별 컴포넌트 (Phase 4에서 파악한 수만큼)
|
|
127
|
+
3. components/{feature-name}/popups/각팝업.vue ← 팝업 컴포넌트
|
|
128
|
+
4. styles/{feature-name}/index.scss ← 스타일 진입점 (빈 import 목록)
|
|
129
|
+
5. styles/{feature-name}/_tokens.scss ← 빈 토큰 파일 (Step B에서 채움)
|
|
130
|
+
```
|
|
131
|
+
|
|
115
132
|
### 루트 페이지
|
|
116
133
|
|
|
117
134
|
```vue
|
|
@@ -5,7 +5,13 @@ triggers: []
|
|
|
5
5
|
tier: standard
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
# Skill: vibe-figma-consolidate — Step
|
|
8
|
+
# Skill: vibe-figma-consolidate — Step C: 최종 공통화 리팩토링
|
|
9
|
+
|
|
10
|
+
> **⛔ 실행 지시: Edit 도구로 기존 파일을 실제 수정한다.**
|
|
11
|
+
> - 토큰 통합: Edit으로 _tokens.scss 수정
|
|
12
|
+
> - 중복 제거: Edit으로 중복 스타일/코드 통합
|
|
13
|
+
> - variant 통합: Edit으로 유사 컴포넌트 합침
|
|
14
|
+
> 분석만 보여주고 끝내면 안 됨.
|
|
9
15
|
|
|
10
16
|
## D-1. 스타일 공통화
|
|
11
17
|
|
|
@@ -5,10 +5,17 @@ description: "디자인 URL → 프레임별 개별 추출 → 스타일/이미
|
|
|
5
5
|
triggers: []
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
# Design
|
|
8
|
+
# Design Frame (프레임별 정밀 추출 + 코드 반영)
|
|
9
9
|
|
|
10
|
-
디자인 URL 하나를 받아서
|
|
11
|
-
|
|
10
|
+
디자인 URL 하나를 받아서 **프레임별로 쪼개서 추출**하고, Step A에서 만든 컴포넌트에 스타일/이미지를 채움.
|
|
11
|
+
어떤 뷰포트든 동일한 프로세스. 두 번째 호출 시 반응형 레이어만 추가.
|
|
12
|
+
|
|
13
|
+
> **⛔ 실행 지시: 분석만 하지 말 것.**
|
|
14
|
+
> - 이미지: WebFetch로 다운로드 → Write 도구로 파일 저장
|
|
15
|
+
> - 스타일: Write 도구로 SCSS/CSS 파일 생성 (layout/ + components/)
|
|
16
|
+
> - 코드: Edit 도구로 Step A 컴포넌트의 template/style 채움
|
|
17
|
+
> - 토큰: Edit 도구로 _tokens.scss에 추출한 값 추가
|
|
18
|
+
> 모든 Phase가 끝나면 디스크에 실제 파일이 변경되어 있어야 함.
|
|
12
19
|
|
|
13
20
|
## 입력
|
|
14
21
|
|