@su-record/vibe 2.8.44 → 2.8.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.44",
+  "version": "2.8.45",
   "description": "AI Coding Framework for Claude Code — 56 agents, 45 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe.figma/SKILL.md

@@ -42,7 +42,7 @@ Figma 트리가 코드의 원천이다. 스크린샷은 검증용이다.
     PC Design: https://figma.com/...?node-id=yyy (있으면)
 
   → Phase 0: Setup (스택 감지, 디렉토리 생성, 기존 자산 인덱싱)
-  → Phase 1: Storyboard (스토리보드 → 기능 스펙 문서 작성, 파일 생성 없음)
+  → Phase 1: 디자인 리소스 (URL 입력 → 스토리보드 분석 → 기능 스펙 문서)
   → Phase 2: 재료 확보 (모든 BP의 트리 + 노드 렌더링 이미지 + 스크린샷)
   → Phase 3: 리매핑 (tree.json → remapped.json, BP 간 노드 매칭 + CSS diff)
   → Phase 4: 순차 코드 생성 (remapped.json → 섹션별 HTML+SCSS)
@@ -196,18 +196,44 @@ Figma 트리가 코드의 원천이다. 스크린샷은 검증용이다.
 
 ---
 
-## Phase 1: Storyboard
+## Phase 1: 디자인 리소스
 
 사용자에게 질문한다:
-- question: "스토리보드 Figma URL을 입력해주세요. (없으면 '없음')"
+- question: "스토리보드, 디자인 리소스를 줄바꿈으로 입력해주세요. (순서 무관)"
+- 예시:
+    https://figma.com/design/xxx/...?node-id=20-4964
+    https://figma.com/design/yyy/...?node-id=641-78147
+    https://figma.com/design/yyy/...?node-id=641-78200
+  또는:
+    docs/storyboard.pdf
+    https://figma.com/design/yyy/...?node-id=641-78147
 - options 제공 금지 — 자유 텍스트 입력만 허용
+- 디자인 URL 최소 1개 필수
 
-"없음" 응답 시 → 스토리보드 분석 스킵
+### 입력 분류 (자동)
+
+```
+각 줄을 파싱하여 분류:
+
+1. figma.com URL → Figma 리소스
+   → ROOT name으로 스토리보드/MO/PC 판별
+   → fileKey가 다르면 스토리보드 vs 디자인 구분
+   → ROOT name에 "MO" → 모바일, "PC" → 데스크탑
+
+2. .pdf 파일 경로 → PDF 스토리보드
+   → Read 도구로 페이지별 분석
+
+3. .png/.jpg/.webp 파일 경로 → 이미지 스토리보드
+   → Read 도구로 시각 분석
+```
 
 ### 1-1. 스토리보드 분석
 
 ```
-URL에서 fileKey, nodeId 추출
+입력 타입에 따라 분기:
+
+■ Figma URL인 경우:
+  URL에서 fileKey, nodeId 추출
 
 1단계 (BLOCKING): 루트 depth=2로 전체 프레임 + nodeId 수집
   # [FIGMA_SCRIPT] = ~/.vibe/hooks/scripts/figma-extract.js
@@ -229,9 +255,22 @@ URL에서 fileKey, nodeId 추출
          하위 케이스(3.1.1, 3.2.1 등)는 건너뜀
   4순위: SHARED (공통 요소, Popup) — 필요 시
 
-높이 1500px 이상 프레임:
-  → node "[FIGMA_SCRIPT]" screenshot으로 시각 파악
-  → 또는 depth 높여서 하위 분할 조회
+■ PDF 파일인 경우:
+  Read 도구로 페이지별 분석 (pages: "1-5" → "6-10" → ...)
+  각 페이지에서 추출:
+    - 섹션 목록 + 기능 정의
+    - 해상도/브레이크포인트 정보 (CONFIG)
+    - 인터랙션 흐름
+    - 상태 정의
+  → Figma 스토리보드와 동일한 기능 스펙 문서 생성
+
+■ 이미지 파일인 경우:
+  Read 도구로 시각 분석
+  → 와이어프레임/목업에서 섹션 구조 + 기능 추출
+
+■ 스토리보드 없음:
+  디자인 URL의 tree.json에서 섹션 목록만 추출
+  → 기능 정의는 디자인 name/구조에서 추정 (정확도 낮음)
 ```
 
 ### 1-2. 기능 스펙 문서 작성 (파일 생성 없음)
@@ -353,8 +392,8 @@ URL에서 fileKey, nodeId 추출
 부분 실패 처리:
   - 개별 URL 추출 실패 시 해당 frame만 건너뛰고 나머지 진행
   - 실패한 frame은 사용자에게 즉시 보고: "frame-{N} 추출 실패: {에러 사유}" (API 에러, 권한 부족, 잘못된 nodeId 등)
-  - 성공한 frame ≥ 2: Phase 2.5 계속 진행
-  - 정확히 1개만 성공: 단일 프레임 모드로 폴백 (Phase 2.5 스킵)
+  - 성공한 frame ≥ 2: Phase 3 계속 진행
+  - 정확히 1개만 성공: 단일 프레임 모드로 폴백 (Phase 3 스킵)
   - 0개 성공: 전체 실패 보고
 
 결과:
@@ -368,10 +407,10 @@ URL에서 fileKey, nodeId 추출
   │   └── ...
   ├── frame-3/           ← 서브 페이지 2
   │   └── ...
-  └── shared/            ← 공통 분석 결과 (Phase 2.5에서 생성)
+  └── sections/          ← Phase 6 검증용 스크린샷
 ```
 
-### 2-2. 재료함 정리
+### 2-2. 추출 데이터 정리
 
 ```
 Phase 2 완료 시 /tmp/{feature}/ 에 다음이 준비되어야 함:
@@ -468,9 +507,8 @@ UI 요소 → vw 비례:
 
 ## Phase 4: 순차 코드 생성
 
-**Phase 1에서 만든 컴포넌트에 Phase 2의 재료로 디자인을 입힌다.**
-**스크린샷을 보면서 퍼즐을 맞추듯 조립한다.**
-**첫 섹션(Hero) 단독 완료 후 나머지 섹션 병렬 진행.**
+**remapped.json 기반으로 섹션별 순차 코드 생성.**
+**한 섹션 완료 → 브라우저 확인 → 다음 섹션. 병렬 금지.**
 
 **멀티 프레임 모드 시 조립 순서 변경:**
 ```
@@ -505,13 +543,13 @@ UI 요소 → vw 비례:
 ```
 Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
   styles/{feature}/index.scss      ← @import 진입점
-  styles/{feature}/_tokens.scss    ← 재료함에서 추출한 디자인 토큰
+  styles/{feature}/_tokens.scss    ← tree.json에서 추출한 디자인 토큰
   styles/{feature}/_mixins.scss    ← breakpoint mixin
   styles/{feature}/_base.scss      ← 루트 클래스
 
 토큰 매핑 (기존 토큰 우선 사용):
   1. /tmp/{feature}/project-tokens.json 을 Read로 로드
-  2. Figma 재료함의 각 값에 대해 project-tokens에서 동일 값 검색:
+  2. Figma tree.json의 각 값에 대해 project-tokens에서 동일 값 검색:
      - 색상: hex 정규화 후 완전 일치 (Figma RGBA 0-1 → hex, 3자리→6자리, 대소문자 무시)
        ※ alpha < 1: 8자리 hex (#RRGGBBAA) 또는 rgba() 함수로 변환
      - 간격: px 값 완전 일치 (rem→px: 1rem=16px)
@@ -690,7 +728,7 @@ URL 있으면:
 
 ## Phase 5: 컴파일 게이트
 
-**Phase 3 퍼즐 조립 완료 후, 브라우저 검증 전에 컴파일 성공을 보장한다.**
+**Phase 3 코드 생성 완료 후, 브라우저 검증 전에 컴파일 성공을 보장한다.**
 **컴파일 에러는 스킵 불가 — 반드시 수정 또는 사용자 보고.**
 **Phase 5 실패 시 Phase 4 진행 불가 (hard gate).**
 
@@ -860,7 +898,7 @@ import { getComputedStyles, compareStyles, diffsToIssues } from 'src/infra/lib/b
        'background-color', 'border-radius', 'gap',
      ])
 
-  2. Figma 재료함의 기대값과 비교:
+  2. Figma tree.json의 기대값과 비교:
      // tree.json에서 해당 노드의 CSS 수치 (vw/clamp 변환 후)
      const expected = { 'font-size': '16px', 'color': '#ffffff', 'width': '465px' }
      const diffs = compareStyles(expected, actual)
@@ -884,7 +922,7 @@ import { extractImages, extractTextContent } from 'src/infra/lib/browser'
 
 2. 텍스트 콘텐츠 확인:
    const texts = await extractTextContent(page)
-   → 재료함의 TEXT 노드 characters와 대조
+   → tree.json의 TEXT 노드 characters와 대조
    → 누락된 텍스트 = P1
 ```
 
@@ -896,9 +934,9 @@ import { extractImages, extractTextContent } from 'src/infra/lib/browser'
   2. P1 이슈 우선 수정:
      - 이미지 누락 → 이미지 경로 확인, static/ 에 파일 존재 확인
      - 레이아웃 다름 → 스크린샷 diff 이미지 + computed CSS로 원인 파악
-     - 텍스트 누락 → 재료함의 정확한 텍스트 삽입
-     - CSS 수치 틀림 → 재료함(tree.json)의 정확한 값으로 교체
-     ⚠️ 추정으로 수정하지 않는다. 반드시 재료함 참조.
+     - 텍스트 누락 → tree.json의 정확한 텍스트 삽입
+     - CSS 수치 틀림 → tree.json(tree.json)의 정확한 값으로 교체
+     ⚠️ 추정으로 수정하지 않는다. 반드시 tree.json 참조.
   3. 수정 후 컴파일 재검증:
      Bash: npx tsc --noEmit 2>&1 (또는 3.5-1에서 선택한 타입 체커)
      → 시각 수정이 타입 에러를 유발하면 즉시 타입 에러 수정 후 진행