@su-record/vibe 2.8.9 → 2.8.11

package/commands/vibe.figma.md

@@ -12,6 +12,7 @@ Figma 디자인 + 스토리보드 → 프로덕션 코드. 인터랙티브 방
 ```
 /vibe.figma                  # 인터랙티브 모드 (URL 입력 프롬프트)
 /vibe.figma --new            # 새 피처 모드 (기존 디자인 시스템 무시)
+/vibe.figma --refine         # 보완 모드 (기존 코드 + Figma 재비교 → 수정)
 ```
 
 커맨드 실행 시 아래 순서로 사용자에게 질문:
@@ -44,6 +45,7 @@ Figma 디자인 + 스토리보드 → 프로덕션 코드. 인터랙티브 방
 |------|------|------|
 | **Project integration** | 기본값 | 기존 디자인 시스템/토큰 활용, 프로젝트 컨벤션 준수 |
 | **--new** | 플래그 지정 시 | 자체 완결 토큰 + 컴포넌트, 기존 디자인 시스템 무관 |
+| **--refine** | 플래그 지정 시 | 기존 생성 코드를 Figma 원본과 재비교하여 부족한 부분만 수정 |
 | **Responsive** | 디자인 URL 2개 이상 | 자동 감지, fluid clamp() + @media 생성 |
 
 ### 스토리보드에서 추출하는 정보
@@ -125,29 +127,30 @@ Codex 미설치 시 자동 스킵 — Claude만으로 순차 생성.
 
 ### 0-0. 사용자 입력 수집
 
-AskUserQuestion으로 하나씩 순서대로 질문.
-**각 질문 후 반드시 사용자 응답을 받은 다음에만 다음 Step으로 진행한다. 응답을 기다리지 않고 넘어가면 안 된다.**
+AskUserQuestion으로 하나씩 순서대로 **자유 텍스트 입력**을 받는다.
+**선택지(options)를 제공하지 않는다. 반드시 자유 입력(freeform text)만 받는다.**
+각 질문 후 반드시 사용자 응답을 받은 다음에만 다음 Step으로 진행.
 
 ```
 Step 1: 스토리보드 URL (선택)
-  → AskUserQuestion 호출:
-      question: "📋 스토리보드 Figma URL을 입력해주세요. (없으면 '없음'이라고 입력)"
-  → ⏸️ 사용자 응답 대기 (반드시 응답을 받은 후 진행)
-  → URL 입력됨: storyboardUrl 저장
-  → "없음" 또는 빈 응답: storyboardUrl = null
+  → AskUserQuestion 호출 (options 파라미터 사용 금지):
+      question: "📋 스토리보드 Figma URL을 입력해주세요. (없으면 '없음')"
+  → ⏸️ 사용자 응답 대기
+  → figma.com URL 포함: storyboardUrl 저장
+  → "없음" 또는 URL 미포함: storyboardUrl = null
 
 Step 2: 디자인 URL (필수)
-  → AskUserQuestion 호출:
+  → AskUserQuestion 호출 (options 파라미터 사용 금지):
       question: "🎨 디자인 Figma URL을 입력해주세요."
-  → ⏸️ 사용자 응답 대기 (반드시 응답을 받은 후 진행)
+  → ⏸️ 사용자 응답 대기
   → URL 저장: designUrls = [url]
 
 Step 3: 추가 디자인 URL (반응형)
-  → AskUserQuestion 호출:
-      question: "🎨 반응형용 추가 디자인 URL이 있나요? (없으면 '없음'이라고 입력)"
-  → ⏸️ 사용자 응답 대기 (반드시 응답을 받은 후 진행)
-  → URL 입력됨: designUrls에 추가 → responsive mode
-  → "없음" 또는 빈 응답: single mode
+  → AskUserQuestion 호출 (options 파라미터 사용 금지):
+      question: "🎨 추가 디자인 URL이 있으면 입력해주세요. (없으면 '없음')"
+  → ⏸️ 사용자 응답 대기
+  → figma.com URL 포함: designUrls에 추가 → responsive mode
+  → "없음" 또는 URL 미포함: single mode
 
 Step 4 (--new 미지정 시):
   프로젝트에 기존 디자인 시스템이 있는지 자동 감지
@@ -155,6 +158,7 @@ Step 4 (--new 미지정 시):
   → 없으면: 자동으로 --new mode
 
 ⚠️ 절대 Step 1~3을 한 번에 호출하지 않는다.
+⚠️ 절대 선택지(options/choices)를 제공하지 않는다. 순수 텍스트 입력만.
    Step 1 응답 → Step 2 호출 → Step 2 응답 → Step 3 호출 순서 엄수.
 ```
 
@@ -1729,6 +1733,63 @@ P1 불일치가 있으면:
 
 ---
 
+## Refine Mode (`--refine`)
+
+이전 `/vibe.figma` 실행으로 생성된 코드의 완성도가 부족할 때 사용.
+**새로 만들지 않고, 기존 코드를 Figma 원본과 재비교하여 수정만 한다.**
+
+### Refine 플로우
+
+```
+Step 1: URL 재입력
+  → 이전과 동일한 방식으로 스토리보드/디자인 URL 입력
+  → 또는 "이전과 동일" 입력 시 이전 URL 재사용
+
+Step 2: 기존 코드 스캔
+  → 프로젝트에서 이전에 생성된 파일 탐색 (pages/, components/ 내 피처 폴더)
+  → 생성된 컴포넌트 목록 파악
+
+Step 3: Figma 원본 재추출
+  → get_design_context + get_screenshot으로 최신 디자인 데이터 획득
+
+Step 4: Side-by-side 비교
+  → Figma 스크린샷 vs 기존 코드의 렌더링 결과
+  → Phase 9 검증 루프와 동일한 비교 항목:
+    레이아웃, 타이포, 색상, 이미지, 간격, 누락 요소
+
+Step 5: Diff 기반 수정
+  → 변경이 필요한 파일만 Edit
+  → 새 파일 생성 최소화
+  → 수정 사유를 주석으로 남기지 않음 (코드만 수정)
+
+Step 6: 재검증
+  → Phase 9 검증 루프 실행 (P1=0 될 때까지)
+```
+
+### Refine에서 수정하는 항목
+
+| 카테고리 | 수정 내용 |
+|----------|----------|
+| **누락 에셋** | 다운로드 안 된 이미지 재다운로드 + 경로 설정 |
+| **레이아웃 불일치** | flex/grid 방향, 정렬, 간격 보정 |
+| **타이포 불일치** | font-size, weight, line-height, letter-spacing 보정 |
+| **색상 불일치** | 배경, 텍스트, 보더 색상 보정 |
+| **누락 컴포넌트** | Figma에 있는데 코드에 없는 섹션 추가 |
+| **인터랙션 누락** | 호버/포커스/액티브 상태 추가 |
+| **반응형 누락** | 브레이크포인트 대응 미흡한 부분 보정 |
+| **이미지 경로** | 임시 URL → 로컬 경로 교체, 누락 이미지 다운로드 |
+
+### Refine에서 하지 않는 것
+
+```
+❌ 파일 구조 변경 (이미 생성된 폴더/파일 구조 유지)
+❌ 컴포넌트 분리/통합 (구조적 리팩토링은 수동으로)
+❌ 토큰 파일 재생성 (기존 토큰에 누락분만 추가)
+❌ 전체 재작성 (diff 기반 최소 수정만)
+```
+
+---
+
 ## Tool Usage Rules
 
 | Tool | When |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.9",
+  "version": "2.8.11",
   "description": "AI Coding Framework for Claude Code — 49 agents, 41+ tools, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",