@su-record/vibe 2.8.10 → 2.8.11
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 +59 -0
- package/package.json +1 -1
package/commands/vibe.figma.md
CHANGED
|
@@ -12,6 +12,7 @@ Figma 디자인 + 스토리보드 → 프로덕션 코드. 인터랙티브 방
|
|
|
12
12
|
```
|
|
13
13
|
/vibe.figma # 인터랙티브 모드 (URL 입력 프롬프트)
|
|
14
14
|
/vibe.figma --new # 새 피처 모드 (기존 디자인 시스템 무시)
|
|
15
|
+
/vibe.figma --refine # 보완 모드 (기존 코드 + Figma 재비교 → 수정)
|
|
15
16
|
```
|
|
16
17
|
|
|
17
18
|
커맨드 실행 시 아래 순서로 사용자에게 질문:
|
|
@@ -44,6 +45,7 @@ Figma 디자인 + 스토리보드 → 프로덕션 코드. 인터랙티브 방
|
|
|
44
45
|
|------|------|------|
|
|
45
46
|
| **Project integration** | 기본값 | 기존 디자인 시스템/토큰 활용, 프로젝트 컨벤션 준수 |
|
|
46
47
|
| **--new** | 플래그 지정 시 | 자체 완결 토큰 + 컴포넌트, 기존 디자인 시스템 무관 |
|
|
48
|
+
| **--refine** | 플래그 지정 시 | 기존 생성 코드를 Figma 원본과 재비교하여 부족한 부분만 수정 |
|
|
47
49
|
| **Responsive** | 디자인 URL 2개 이상 | 자동 감지, fluid clamp() + @media 생성 |
|
|
48
50
|
|
|
49
51
|
### 스토리보드에서 추출하는 정보
|
|
@@ -1731,6 +1733,63 @@ P1 불일치가 있으면:
|
|
|
1731
1733
|
|
|
1732
1734
|
---
|
|
1733
1735
|
|
|
1736
|
+
## Refine Mode (`--refine`)
|
|
1737
|
+
|
|
1738
|
+
이전 `/vibe.figma` 실행으로 생성된 코드의 완성도가 부족할 때 사용.
|
|
1739
|
+
**새로 만들지 않고, 기존 코드를 Figma 원본과 재비교하여 수정만 한다.**
|
|
1740
|
+
|
|
1741
|
+
### Refine 플로우
|
|
1742
|
+
|
|
1743
|
+
```
|
|
1744
|
+
Step 1: URL 재입력
|
|
1745
|
+
→ 이전과 동일한 방식으로 스토리보드/디자인 URL 입력
|
|
1746
|
+
→ 또는 "이전과 동일" 입력 시 이전 URL 재사용
|
|
1747
|
+
|
|
1748
|
+
Step 2: 기존 코드 스캔
|
|
1749
|
+
→ 프로젝트에서 이전에 생성된 파일 탐색 (pages/, components/ 내 피처 폴더)
|
|
1750
|
+
→ 생성된 컴포넌트 목록 파악
|
|
1751
|
+
|
|
1752
|
+
Step 3: Figma 원본 재추출
|
|
1753
|
+
→ get_design_context + get_screenshot으로 최신 디자인 데이터 획득
|
|
1754
|
+
|
|
1755
|
+
Step 4: Side-by-side 비교
|
|
1756
|
+
→ Figma 스크린샷 vs 기존 코드의 렌더링 결과
|
|
1757
|
+
→ Phase 9 검증 루프와 동일한 비교 항목:
|
|
1758
|
+
레이아웃, 타이포, 색상, 이미지, 간격, 누락 요소
|
|
1759
|
+
|
|
1760
|
+
Step 5: Diff 기반 수정
|
|
1761
|
+
→ 변경이 필요한 파일만 Edit
|
|
1762
|
+
→ 새 파일 생성 최소화
|
|
1763
|
+
→ 수정 사유를 주석으로 남기지 않음 (코드만 수정)
|
|
1764
|
+
|
|
1765
|
+
Step 6: 재검증
|
|
1766
|
+
→ Phase 9 검증 루프 실행 (P1=0 될 때까지)
|
|
1767
|
+
```
|
|
1768
|
+
|
|
1769
|
+
### Refine에서 수정하는 항목
|
|
1770
|
+
|
|
1771
|
+
| 카테고리 | 수정 내용 |
|
|
1772
|
+
|----------|----------|
|
|
1773
|
+
| **누락 에셋** | 다운로드 안 된 이미지 재다운로드 + 경로 설정 |
|
|
1774
|
+
| **레이아웃 불일치** | flex/grid 방향, 정렬, 간격 보정 |
|
|
1775
|
+
| **타이포 불일치** | font-size, weight, line-height, letter-spacing 보정 |
|
|
1776
|
+
| **색상 불일치** | 배경, 텍스트, 보더 색상 보정 |
|
|
1777
|
+
| **누락 컴포넌트** | Figma에 있는데 코드에 없는 섹션 추가 |
|
|
1778
|
+
| **인터랙션 누락** | 호버/포커스/액티브 상태 추가 |
|
|
1779
|
+
| **반응형 누락** | 브레이크포인트 대응 미흡한 부분 보정 |
|
|
1780
|
+
| **이미지 경로** | 임시 URL → 로컬 경로 교체, 누락 이미지 다운로드 |
|
|
1781
|
+
|
|
1782
|
+
### Refine에서 하지 않는 것
|
|
1783
|
+
|
|
1784
|
+
```
|
|
1785
|
+
❌ 파일 구조 변경 (이미 생성된 폴더/파일 구조 유지)
|
|
1786
|
+
❌ 컴포넌트 분리/통합 (구조적 리팩토링은 수동으로)
|
|
1787
|
+
❌ 토큰 파일 재생성 (기존 토큰에 누락분만 추가)
|
|
1788
|
+
❌ 전체 재작성 (diff 기반 최소 수정만)
|
|
1789
|
+
```
|
|
1790
|
+
|
|
1791
|
+
---
|
|
1792
|
+
|
|
1734
1793
|
## Tool Usage Rules
|
|
1735
1794
|
|
|
1736
1795
|
| Tool | When |
|