@su-record/vibe 2.9.1 → 2.9.2

package/skills/vibe.figma.convert/SKILL.md

@@ -36,6 +36,18 @@ component-index.json에서 매칭되는 컴포넌트가 있으면:
   Q4. 동적 데이터인가? (가격, 수량, 기간) → HTML 텍스트
   모두 NO → 이미지 렌더링 가능
 
+⛔ 디자인 텍스트 판별 (Q1 예외 — 이미지로 처리해야 하는 텍스트):
+  다음 조건 중 하나라도 충족 → 이미지 렌더링 (HTML 텍스트 금지):
+  D1. TEXT 노드의 fills가 2개 이상 (그래디언트 + 솔리드 중첩)
+  D2. TEXT 노드에 effects가 있음 (DROP_SHADOW, stroke 등)
+  D3. TEXT 노드의 fills에 GRADIENT 타입이 있음
+  D4. 부모 GROUP/FRAME 아래 VECTOR 3개 이상 (벡터 글자)
+  D5. TEXT 노드의 fontFamily가 프로젝트 웹폰트에 없음
+
+  → content/{section}-{name}.webp 로 노드 렌더링
+  → <img src="..." alt="텍스트 내용"> 으로 HTML 배치
+  → CSS text로 구현 시도 금지 (시각 품질 보장 불가)
+
 BG 프레임:
   ❌ <img> 태그 금지
   ✅ 부모 SCSS에 background-image만:
@@ -61,8 +73,11 @@ INSTANCE 반복 2+ → v-for / .map()
 ## 3. CSS 속성 직접 매핑
 
 ```
-tree.json의 css 객체를 SCSS로 직접 변환. 추정하지 않는다.
-CSS 매핑표는 → vibe.figma.extract 참조.
+⛔ 불변 규칙: tree.json에 없는 CSS 속성을 만들지 않는다.
+⛔ 커스텀 함수/믹스인 생성 금지: wp-fluid(), wp-bg-layer 등 자체 추상화 금지.
+⛔ aspect-ratio, container query 등 tree.json에 없는 CSS 속성 사용 금지.
+✅ tree.json의 css 객체 → SCSS에 1:1 직접 매핑만 허용.
+✅ 유일한 변환: px → vw (공식대로 기계적으로).
 
 레이아웃 (layout/ 파일):
   display, flex-direction, justify-content, align-items, gap,
@@ -76,14 +91,26 @@ CSS 매핑표는 → vibe.figma.extract 참조.
   opacity, mix-blend-mode, filter, backdrop-filter
 
 값이 없으면 → 해당 속성 생략 (추정 금지)
+
+❌ 금지 패턴:
+  aspect-ratio: 720 / 1280;          → ❌ (tree.json엔 width+height)
+  @function wp-fluid(...) { ... }    → ❌ (자체 함수)
+  @include wp-bg-layer;              → ❌ (자체 믹스인)
+  clamp(12px, 2.5vw, 18px);          → ❌ (tree.json에 없는 값 추정)
+
+✅ 올바른 패턴:
+  width: 100vw; height: 177.78vw;    → ✅ (720px/720×100, 1280px/720×100)
+  background-image: url('hero-bg.webp'); background-size: cover;  → ✅
+  font-size: 5.56vw;                 → ✅ (40px/720×100)
 ```
 
 ### 반응형 단위 변환
 
 ```
-vw 변환:
+vw 변환 (기계적 공식만 사용):
   width, height, padding, gap, border-radius, box-shadow, top, left, border-width
   vw값 = (Figma px / designWidth) × 100
+  ⛔ clamp, min(), max() 등은 font-size에만 허용
 
 폰트 → clamp(최소, vw, 최대):
   | 역할 | 최소 | 판단 기준 |
@@ -93,6 +120,7 @@ vw 변환:
   | 본문 | 12px | 긴 텍스트 |
   | 캡션 | 10px | 작은 fontSize |
   | 버튼 | 12px | name에 "btn" |
+  최대값 = Figma 원본 px 그대로
 
 변환하지 않는 속성:
   color, opacity, font-weight, font-family, z-index, text-align,
@@ -182,7 +210,15 @@ diff 처리:
 ## 7. 자가 검증
 
 ```
+⛔ 하나라도 실패 → 해당 섹션 코드 재작성 (다음 섹션 진행 금지)
+
 1. 클래스명: template 모든 class가 SCSS에 정의 → OK
 2. 이미지 경로: src가 실제 파일 존재 → OK
 3. 트리 매핑: Auto Layout 노드 → SCSS에 flex 있음 → OK
+4. ⛔ 추상화 금지: SCSS에 @function, @mixin 자체 정의가 없음 → OK
+   (프로젝트 기존 토큰 @use는 허용, 새 함수/믹스인 생성은 금지)
+5. ⛔ 속성 매핑: SCSS의 모든 속성이 tree.json css 객체에 근거 → OK
+   (aspect-ratio, container, custom property 등 tree.json에 없는 속성 → FAIL)
+6. ⛔ 이미지 파일명: kebab-case 네이밍 → OK
+   (해시 파일명 68ad470b.webp 등 → FAIL)
 ```

package/skills/vibe.figma.convert/rubrics/conversion-rules.md

@@ -89,6 +89,12 @@ box-shadow, opacity, mix-blend-mode, filter, backdrop-filter
 
 스토리보드 CONFIG에서 designWidth, minWidth 확보.
 
+⛔ **커스텀 함수 생성 금지:**
+  ❌ @function wp-fluid(...) { ... }
+  ❌ @mixin wp-bg-layer { ... }
+  ❌ 자체 추상화 (aspect-ratio, clamp 남용)
+  ✅ vw 변환은 인라인 계산값을 직접 기입
+
 **UI 요소 → vw 비례:**
   vw값 = (Figma px / designWidth) × 100
   적용: width, height, padding, gap, margin, border-radius,
@@ -120,9 +126,15 @@ BEM 패턴: `.sectionName__childName`
 
 ## 자가 검증 (코드 작성 후)
 
+⛔ 하나라도 실패 → 코드 재작성 (다음 섹션 진행 금지)
+
 - [ ] ⛔ BG 프레임이 <img> 태그로 처리되지 않았는가? (CSS background-image만 허용)
 - [ ] ⛔ TEXT 자식이 있는 프레임이 통째 이미지로 처리되지 않았는가?
 - [ ] ⛔ INSTANCE 반복 패턴(카드/아이템)이 이미지 1장으로 처리되지 않았는가?
+- [ ] ⛔ SCSS에 @function 또는 @mixin 자체 정의가 없는가? (기존 토큰 @use만 허용)
+- [ ] ⛔ aspect-ratio 등 tree.json에 없는 CSS 속성이 없는가?
+- [ ] ⛔ 이미지 파일명이 kebab-case인가? (해시 파일명 금지)
+- [ ] ⛔ 디자인 텍스트(그래디언트/스트로크 효과)가 이미지로 처리되었는가?
 - [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
 - [ ] 모든 img src가 static/에 실제 존재
 - [ ] Auto Layout 노드 → SCSS에 flex 속성 존재

package/skills/vibe.figma.extract/SKILL.md

@@ -22,7 +22,7 @@ Figma REST API(`src/infra/lib/figma/`)를 사용하여 **구조적 코드 생성
 
 ```
 Bash:
-  node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
+  node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId}
 
 반환 (FigmaNode JSON):
   {
@@ -134,6 +134,14 @@ BG 프레임 판별 기준:
   - 아이콘 (VECTOR/GROUP 크기 ≤ 64px)
   - 아이템/보상 썸네일 (name에 "item", "reward", "token", "coin")
   - 벡터 글자 GROUP (부모 아래 VECTOR 3개 이상, 각 <60px)
+  - ⛔ 디자인 텍스트 (다음 중 하나):
+    · TEXT 노드 fills 2개 이상 (그래디언트+솔리드 중첩)
+    · TEXT 노드에 effects 있음 (DROP_SHADOW, stroke)
+    · TEXT 노드 fills에 GRADIENT 타입 포함
+    · 프로젝트 웹폰트에 없는 fontFamily
+    → 반드시 렌더링 대상에 포함
+  - 장식 패널 (목재 간판, 금속 플레이트 등 텍스처 배경)
+    → BG 프레임과 동일하게 렌더링
 
 렌더링:
   node "[FIGMA_SCRIPT]" screenshot {fileKey} {node.nodeId} --out=/tmp/{feature}/content/{name}.webp
@@ -173,7 +181,27 @@ BG 프레임 판별 기준:
   | 분류 | 처리 |
   |------|------|
   | BG 프레임 | 프레임 렌더링 → bg/ |
+  | 디자인 텍스트 | 노드 렌더링 → content/ |
   | 벡터 글자 | GROUP 렌더링 → content/ |
   | 콘텐츠 | 노드 렌더링 → content/ |
+  | 장식 패널 | 프레임 렌더링 → content/ |
   | 장식 | BG 렌더링에 포함 |
 ```
+
+---
+
+## 5. 추출 완료 검증 (Phase 3 진입 전 필수)
+
+```
+⛔ 하나라도 누락 → 재추출 (Phase 3 진행 금지)
+
+1. tree.json 존재 + 루트 노드 children > 0
+2. 각 섹션별 BG → bg/ 에 파일 존재
+3. 디자인 텍스트 체크:
+   tree.json 순회 → fills 2개 이상 또는 effects 있는 TEXT 노드 목록 생성
+   → 해당 노드 전부 content/ 에 렌더링 파일 존재
+4. 벡터 글자 체크:
+   GROUP 아래 VECTOR 3개 이상 → content/ 에 렌더링 파일 존재
+5. 섹션별 검증용 스크린샷 → sections/ 에 파일 존재
+6. 파일명 규칙: 모두 kebab-case (해시 파일명 없음)
+```

package/skills/vibe.figma.extract/rubrics/image-rules.md

@@ -82,17 +82,29 @@ BG 프레임 = 다음 중 하나:
    - 웹폰트 없는 장식 타이틀 ("MISSION 01" 등)
    - VECTOR 타입으로 분해된 글자 → GROUP 렌더링
 
-2. 합성 배경 (BG 프레임):
+2. ⛔ 디자인 텍스트 (NEW — 그래디언트/스트로크/다중 효과 텍스트):
+   - TEXT 노드의 fills 2개 이상 (그래디언트+솔리드 중첩)
+   - TEXT 노드에 effects 있음 (DROP_SHADOW, stroke)
+   - TEXT 노드의 fills에 GRADIENT 타입 포함
+   - → 해당 TEXT 노드(또는 감싸는 GROUP)를 통째 렌더링
+   - → content/{section}-title.webp 등으로 저장
+   - ❌ CSS text-shadow/gradient로 근사치 구현 금지
+
+3. 합성 배경 (BG 프레임):
    - 눈, 나무, 파티클 등 장식 레이어 합성물
    - 텍스트 미포함 확인 필수
 
-3. 래스터 이미지 에셋:
+4. 래스터 이미지 에셋:
    - 게임 아이템 썸네일, 코인 아이콘 등
    - imageRef가 있는 개별 RECTANGLE/노드
 
-4. 복잡한 벡터 그래픽:
+5. 복잡한 벡터 그래픽:
    - CSS로 재현 불가능한 일러스트/아이콘
    - VECTOR/GROUP 조합의 복잡한 그래픽
+
+6. 장식 패널 배경 (목재 간판, 금속 플레이트 등):
+   - CSS로 재현 불가능한 텍스처/질감 배경
+   - → BG 프레임과 동일하게 렌더링 → background-image로 적용
 ```
 
 ## Format