@su-record/vibe 2.8.47 → 2.8.49

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

@@ -11,8 +11,15 @@ tier: standard
 **Claude는 시맨틱 판단(태그 선택, 컴포넌트 분리, 인터랙션)만 담당한다.**
 
 ```
+⛔ 불변 규칙 — 복잡한 UI도 반드시 HTML로 구현한다:
+  "복잡하니까 이미지로 처리하자" → 이 사고방식 자체가 금지.
+  카드 그리드, 보상 목록, 교환소, 가격 표시 → 전부 HTML+CSS.
+  <img>는 순수 이미지 에셋(아이콘, 썸네일, 벡터 글자)에만 사용.
+  BG는 CSS background-image만 사용. <img> 태그 금지.
+
 ❌ 스크린샷을 보고 CSS 추정 (범용 LLM의 약점)
 ❌ Figma 레이어를 무분별하게 div soup로 변환
+❌ 복잡한 섹션을 screenshot으로 이미지화 (코드 생성 중 screenshot 호출 금지)
 ✅ Figma Auto Layout → CSS Flexbox 1:1 매핑 (기계적)
 ✅ Figma CSS 속성 → SCSS 직접 변환 (추정 없음)
 ✅ Claude → 시맨틱 태그 선택 + 컴포넌트 설계 + 인터랙션
@@ -55,11 +62,45 @@ component-index (/tmp/{feature}/component-index.json) 에서 매칭되는 컴포
 ### 1-1. 노드 → HTML 매핑 규칙 (기계적)
 
 ```
+⛔ 코드 작성 전: 이미지 vs HTML 판별 테이블을 먼저 작성한다 (BLOCKING).
+   섹션의 모든 1~2depth 노드를 순회하여 각각의 처리 방법을 결정.
+   판별 없이 코드를 작성하면 안 된다.
+
+   판별 규칙 (순서대로 적용, 하나라도 YES → HTML):
+   Q1. 이 노드의 자식 트리에 TEXT 노드가 있는가?
+       YES → HTML로 구현 (이미지에 텍스트를 넣지 않는다)
+       ※ "가격 1,000", "보상 교환하기", "이벤트 기간" 등이 있으면 무조건 HTML
+   Q2. 같은 부모 아래 동일 구조 INSTANCE가 2개 이상인가?
+       YES → HTML 반복 구조 (v-for/.map) — 내부 아이콘/썸네일만 <img>
+       ※ 카드 4개 그리드를 이미지 1장으로 렌더링하면 절대 안 됨
+   Q3. 클릭/인터랙션이 필요한가? (btn, CTA, link, tab)
+       YES → HTML <button>/<a>
+   Q4. 동적으로 변경되는 데이터인가? (가격, 수량, 기간, 상태)
+       YES → HTML 텍스트
+   모두 NO → 이미지 렌더링 가능 (벡터 글자, 래스터 에셋, 합성 BG 등)
+
 각 노드에 대해 아래 규칙을 순서대로 적용:
 
-1. 타입별 기본 매핑:
+1. 배경 레이어 (BG 프레임 — 가장 먼저 처리):
+   BG 프레임 (name에 "BG"/"bg" 또는 부모와 동일 크기)
+
+     ❌ 절대 금지 패턴 (이렇게 쓰면 안 됨):
+        <img src="hero-bg.webp" class="bg-img" />
+        <div class="bg"><img src="bg.webp" /></div>
+        position: absolute; inset: 0; → 이미지 배치
+
+     ✅ 유일하게 허용되는 패턴:
+        부모 요소의 SCSS에 background-image로 처리:
+          .heroSection {
+            background-image: url('/images/{feature}/hero-bg.webp');
+            background-size: cover;
+            background-position: center top;
+          }
+        HTML에는 BG 관련 요소를 아무것도 넣지 않음.
+
+2. 타입별 기본 매핑:
    TEXT 노드     → <span> (Claude가 <h1>~<h6>, <p>, <button> 등으로 승격)
-   IMAGE fill    → <img src="다운로드된 경로" />
+   IMAGE fill    → <img src="다운로드된 경로" /> (판별 통과한 순수 에셋만)
    VECTOR/GROUP  → 크기가 작으면(≤64px) 아이콘 후보 → <img> (렌더링 이미지)
                    크기가 크면 장식 요소 → <div> + background
    FRAME/INSTANCE:
@@ -67,20 +108,21 @@ component-index (/tmp/{feature}/component-index.json) 에서 매칭되는 컴포
      Auto Layout 없음 → <div> + position:relative (자식은 absolute)
      children 없음    → 빈 div 또는 스킵
 
-2. 배경 레이어 판별:
-   BG 프레임 (name에 "BG"/"bg" 또는 부모와 동일 크기)
-     ❌ <img> 태그로 배경 처리 금지
-     ❌ position:absolute + inset:0 으로 이미지 배치 금지
-     ✅ 부모 요소에 CSS background-image로 처리:
-        background-image: url('/images/{feature}/{section}-bg.webp');
-        background-size: cover;
-        background-position: center top;
-     ✅ BG 프레임은 HTML에 아무것도 렌더링하지 않음 (CSS만)
-
 3. 반복 패턴 감지:
-   같은 부모 아래 동일 타입 + 유사 구조(children 수 동일) 노드 3개 이상
+   같은 부모 아래 동일 타입 + 유사 구조(children 수 동일) INSTANCE 2개 이상
      → v-for (Vue) 또는 .map() (React)
      → 첫 번째 노드를 기준으로 템플릿 생성
+     → 카드 내부의 이미지 에셋(아이콘, 썸네일)만 <img>
+     → 카드 레이아웃, 텍스트, 버튼, 가격은 HTML로 구현
+
+     ❌ 잘못된 예: <img src="exchange-section1.webp" /> (카드 4개가 한 이미지)
+     ✅ 올바른 예:
+        <div v-for="card in weeklyCards" :key="card.id" class="card">
+          <img :src="card.icon" :alt="card.name" class="card__icon" />
+          <span class="card__name">{{ card.name }}</span>
+          <span class="card__price">{{ card.price }}</span>
+          <button class="card__btn">보상 교환하기</button>
+        </div>
 
 4. 스킵 대상:
    크기 0px 노드
@@ -99,14 +141,29 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
   node.css.justifyContent  → justify-content
   node.css.alignItems      → align-items
   node.css.gap             → gap (→ vw 변환)
+  node.css.flexGrow        → flex-grow (값 그대로)
   node.css.padding         → padding (→ vw 변환)
   node.css.width           → width (→ vw 또는 % 변환)
   node.css.height          → height (→ vw 변환, 또는 auto)
   node.css.overflow        → overflow
   node.css.position        → position
+  node.css.top             → top (→ vw 변환, absolute 노드만)
+  node.css.left            → left (→ vw 변환, absolute 노드만)
+  node.css.transform       → transform (rotate — 값 그대로)
+
+  layoutSizing 처리 (node.layoutSizingH / node.layoutSizingV):
+    HUG → css에 width/height 없음 (auto). SCSS에서 생략하면 auto 동작.
+    FILL → 부모 flex-direction 확인 후 결정:
+      부모 row + 자식 FILL-H → flex: 1 0 0 (또는 width: 100%)
+      부모 column + 자식 FILL-V → flex: 1 0 0 (또는 height: 100%)
+      부모 row + 자식 FILL-V → align-self: stretch
+      부모 column + 자식 FILL-H → align-self: stretch
+    FIXED → css.width/height의 px 값을 vw로 변환 (기존 방식)
 
 비주얼 (components/ 파일):
   node.css.backgroundColor → background-color
+  node.css.backgroundImage → background-image (gradient — 값 그대로)
+  node.css.backgroundBlendMode → background-blend-mode (값 그대로)
   node.css.color           → color
   node.css.fontFamily      → font-family
   node.css.fontSize        → font-size (→ clamp 변환)
@@ -115,20 +172,35 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
   node.css.letterSpacing   → letter-spacing (→ vw 변환)
   node.css.textAlign       → text-align
   node.css.borderRadius    → border-radius (→ vw 변환)
-  node.css.border          → border (width → vw 변환)
+  node.css.border          → border (width → vw 변환, strokeAlign=INSIDE)
+  node.css.outline         → outline (width → vw 변환, strokeAlign=OUTSIDE)
+  node.css.boxSizing       → box-sizing (INSIDE stroke → border-box)
   node.css.boxShadow       → box-shadow (px → vw 변환)
   node.css.opacity         → opacity
   node.css.mixBlendMode    → mix-blend-mode
-  node.css.filter          → filter (px → vw 변환)
+  node.css.filter          → filter (blur px → vw 변환, grayscale/saturate → 값 그대로)
   node.css.backdropFilter  → backdrop-filter (px → vw 변환)
 
+  이미지 처리 (node.imageScaleMode):
+    FILL  → background-size: cover
+    FIT   → background-size: contain
+    CROP  → background-size: cover; background-position: center
+    TILE  → background-size: auto; background-repeat: repeat
+
+  다중 fill (node.fills 배열, 2개 이상일 때):
+    예: [IMAGE(grayscale) + GRADIENT_LINEAR] → 겹침 배경
+    CSS: background: url('img.webp'), linear-gradient(...);
+         background-blend-mode: multiply;
+         filter: grayscale(100%);
+    converter는 fills 배열 순서대로 CSS background 레이어링
+
 반응형 단위 변환 (scaleFactor 사용하지 않음):
   스토리보드 CONFIG에서 확보:
     designWidth: 디자인 너비 (예: 720px 모바일, 2560px PC)
     minWidth: 최소 지원 너비 (예: 340px)
     breakpoint: PC/모바일 분계 (예: 1025px)
 
-  UI 요소 (width, height, padding, gap, border-radius, shadow 등):
+  UI 요소 (width, height, padding, gap, border-radius, shadow, top, left 등):
     → vw 비례: vw값 = (Figma px / designWidth) × 100
     → 예: gap: 24px / 720 × 100 = 3.33vw
     → width: 부모 대비 %도 가능 (620/720 = 86%)
@@ -154,7 +226,9 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
 
   변환하지 않는 속성:
     color, opacity, font-weight, font-family, z-index,
-    line-height(단위 없을 때), text-align, mix-blend-mode
+    line-height(단위 없을 때), text-align, mix-blend-mode,
+    transform(rotate), background-blend-mode, flex-grow,
+    box-sizing, grayscale/saturate(filter 내)
 
 값이 없으면:
   → 해당 속성 생략 (추정 금지)
@@ -434,7 +508,15 @@ function handleShare(): void {
   조건: BG 프레임 (name에 BG/bg 또는 부모와 크기 동일)
   ❌ <img> 태그 금지
   ✅ CSS background-image로만 처리:
-     부모 { background-image: url('...'); background-size: cover; }
+     부모 { background-image: url('...'); }
+     imageScaleMode에 따라:
+       FILL → background-size: cover (기본)
+       FIT  → background-size: contain
+       CROP → background-size: cover; background-position: center
+       TILE → background-size: auto; background-repeat: repeat
+     다중 fill (node.fills 배열):
+       background: url('img.webp'), linear-gradient(...);
+       background-blend-mode: multiply;
 
 콘텐츠 이미지:
   조건: imageRef 있음 + 독립적 크기 + TEXT 형제 없음
@@ -454,21 +536,58 @@ function handleShare(): void {
 
 ---
 
-## 5. 반응형 추가 (데스크탑 URL)
+## 5. 반응형 추가 (MO↔PC 매칭)
 
 ```
-두 번째 URL의 tree.json을 확보한 후:
+remapped.json의 pcDiff를 사용하여 @media 오버라이드 추가.
+MO 기본 코드 삭제 금지. PC는 항상 @media 블록 안에만 작성.
+
+SCSS 구조:
+  .heroSection {
+    // MO 기본 (vw = px / 720 × 100)
+    width: 100%;
+    height: 177.78vw;
+    background-image: url('/images/{feature}/hero-bg.webp');
+
+    @media (min-width: #{$bp-desktop}) {
+      // PC 오버라이드 (vw = px / 2560 × 100, 또는 고정 px)
+      height: 32.66vw;  // 836 / 2560 × 100
+      background-image: url('/images/{feature}/hero-bg-pc.webp');
+    }
+  }
+
+CSS diff 처리 규칙:
+
+  같은 값 → MO만 유지 (PC에 쓰지 않음)
+
+  다른 px 값:
+    → @media { 속성: PC값/pcDesignWidth × 100 vw; }
+    → 예: MO gap:24px → 3.33vw, PC gap:60px → @media { gap: 2.34vw; }
+
+  다른 레이아웃:
+    → @media { flex-direction: row; }
+    → @media { justify-content: space-between; }
+
+  다른 이미지:
+    → @media { background-image: url('/images/{feature}/pc-xxx.webp'); }
+
+  layoutSizing diff:
+    MO: HUG → PC: FIXED → @media { width: Xvw; }
+    MO: FILL → PC: FIXED → @media { width: Xvw; flex: initial; }
+    MO: FIXED → PC: FILL → @media { flex: 1 0 0; width: auto; }
+
+  MO에만 있는 속성 → MO 기본값 유지
+  PC에만 있는 속성 → @media에서 추가
+  PC에서 사라진 속성 → @media { display: none; } 또는 생략
 
-모바일 tree vs 데스크탑 tree 비교:
-  동일한 name의 노드를 매칭
-  CSS 속성 차이만 @media 오버라이드로 추가
+  absolute 위치 diff:
+    → @media { top: PC값/pcDesignWidth × 100 vw; left: ...; }
 
-같은 값 → 유지
-다른 px 값 → @include pc { width: {desktop값 × pcScaleFactor}px; }
-다른 레이아웃 → @include pc { flex-direction: row; }
-다른 이미지 → @include pc { content: url(/images/{feature}/desktop-xxx.webp); }
+  rotation diff:
+    → @media { transform: rotate(PC각도deg); }
 
 기존 모바일 코드 삭제 금지.
+PC 오버라이드는 항상 @media 블록 안에만.
 ```
 
 ---

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

@@ -53,6 +53,19 @@ Q4. 이 노드의 콘텐츠가 동적 데이터인가? (가격, 수량, 기간,
 
 위 체크에서 하나라도 YES → HTML로 구현
 모두 NO → 이미지(벡터 글자, BG, 래스터, 복잡 그래픽)로 렌더링
+
+실제 테스트에서 발생한 잘못된 패턴:
+
+  ❌ <img src="hero-bg.webp" class="bg-img" />           → BG를 img 태그로
+  ❌ <img src="exchange-section1.webp" />                 → 카드 4개를 이미지 1장으로
+  ❌ <img src="daily-step2-list.webp" />                  → 보상 목록을 통째 이미지로
+  ❌ <img src="hero-period-bg-mo.webp" class="period-bg"> → Period BG를 img로
+
+  ✅ .heroSection { background-image: url('hero-bg.webp'); background-size: cover; }
+  ✅ <div v-for="card in cards" :key="card.id">
+       <img :src="card.icon" /> <span>{{ card.price }}</span>
+       <button>보상 교환하기</button>
+     </div>
 ```
 
 ## CSS 직접 매핑 규칙
@@ -107,6 +120,9 @@ BEM 패턴: `.sectionName__childName`
 
 ## 자가 검증 (코드 작성 후)
 
+- [ ] ⛔ BG 프레임이 <img> 태그로 처리되지 않았는가? (CSS background-image만 허용)
+- [ ] ⛔ TEXT 자식이 있는 프레임이 통째 이미지로 처리되지 않았는가?
+- [ ] ⛔ INSTANCE 반복 패턴(카드/아이템)이 이미지 1장으로 처리되지 않았는가?
 - [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
 - [ ] 모든 img src가 static/에 실제 존재
 - [ ] Auto Layout 노드 → SCSS에 flex 속성 존재

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

@@ -9,6 +9,18 @@ tier: standard
 
 Figma REST API(`src/infra/lib/figma/`)를 사용하여 **구조적 코드 생성에 필요한 모든 데이터**를 추출.
 
+```
+⛔ 불변 규칙 — screenshot 명령의 허용 범위:
+  ✅ BG 프레임 렌더링 (TEXT 자식이 없는 순수 배경만)
+  ✅ 벡터 글자 GROUP (웹폰트 없는 장식 타이틀)
+  ✅ 개별 아이콘/썸네일 (50~300px 독립 에셋)
+  ✅ 섹션별 전체 스크린샷 → sections/ (Phase 6 검증용)
+  ❌ TEXT 자식이 있는 프레임 (가격, 수량, 설명 등)
+  ❌ INSTANCE 반복 패턴 프레임 (카드 그리드, 보상 목록)
+  ❌ 버튼/인터랙티브 요소가 있는 프레임
+  ❌ "섹션 콘텐츠"를 통째로 렌더링
+```
+
 ```
 추출 우선순위:
   1순위: 노드 트리 + CSS (코드 생성의 PRIMARY 소스)
@@ -53,27 +65,53 @@ Bash:
 
 트리 추출 도구가 자동 변환하는 속성. **이 값들이 SCSS에 직접 매핑된다:**
 
+**레이아웃:**
+
 | Figma 속성 | CSS | vw 변환 |
-|-----------|-----|-----------------|
+|-----------|-----|---------|
 | `layoutMode=VERTICAL` | `display:flex; flex-direction:column` | ❌ |
 | `layoutMode=HORIZONTAL` | `display:flex; flex-direction:row` | ❌ |
 | `primaryAxisAlignItems` | `justify-content` | ❌ |
 | `counterAxisAlignItems` | `align-items` | ❌ |
 | `itemSpacing` | `gap` | ✅ |
+| `layoutGrow=1` | `flex-grow: 1` | ❌ |
 | `padding*` | `padding` | ✅ |
 | `absoluteBoundingBox.width/height` | `width/height` | ✅ |
-| `layoutPositioning=ABSOLUTE` | `position: absolute` | ❌ |
+| `layoutPositioning=ABSOLUTE` | `position: absolute` + `top/left` (부모 상대 좌표) | ✅ |
+| `layoutSizingHorizontal=HUG` | width 삭제 (auto) | — |
+| `layoutSizingHorizontal=FILL` | 메타데이터 `layoutSizingH` (converter가 flex:1/100% 결정) | — |
+| `layoutSizingVertical=HUG` | height 삭제 (auto) | — |
+| `layoutSizingVertical=FILL` | 메타데이터 `layoutSizingV` (converter가 결정) | — |
 | `clipsContent` | `overflow: hidden` | ❌ |
-| `fills[].color` | `background-color` | ❌ |
-| `fills[].type=IMAGE` | `imageRef` (다운로드 대상) | — |
+
+**비주얼:**
+
+| Figma 속성 | CSS | vw 변환 |
+|-----------|-----|---------|
+| `fills[].SOLID` | `background-color` | ❌ |
+| `fills[].IMAGE` | `imageRef` + `imageScaleMode` (FILL/FIT/CROP/TILE) | — |
+| `fills[].GRADIENT_LINEAR` | `background-image: linear-gradient(...)` | ❌ |
+| `fills[].GRADIENT_RADIAL` | `background-image: radial-gradient(...)` | ❌ |
+| `fills[] (2개 이상)` | `fills` 배열 (type, color, imageRef, gradient, blendMode, filters) | — |
+| `fills[].blendMode` | `background-blend-mode` | ❌ |
+| `fills[].filters.saturation` | `filter: grayscale(X%)` / `saturate(X%)` | ❌ |
 | `fills[].color` (TEXT) | `color` | ❌ |
-| `strokes[].color` + `strokeWeight` | `border` | ✅ (width만) |
+| `strokes[] + strokeAlign=INSIDE` | `border` + `box-sizing: border-box` | ✅ (width만) |
+| `strokes[] + strokeAlign=OUTSIDE` | `outline` | ✅ (width만) |
+| `strokes[] + strokeAlign=CENTER` | `border` | ✅ (width만) |
 | `effects[].DROP_SHADOW` | `box-shadow` | ✅ (px만) |
-| `effects[].LAYER_BLUR` | `filter: blur()` | ✅ |
+| `effects[].INNER_SHADOW` | `box-shadow` (inset) | ✅ (px만) |
+| `effects[].LAYER_BLUR` | `filter: blur()` (누적) | ✅ |
 | `effects[].BACKGROUND_BLUR` | `backdrop-filter: blur()` | ✅ |
 | `cornerRadius` | `border-radius` | ✅ |
 | `opacity` | `opacity` | ❌ |
-| `blendMode` | `mix-blend-mode` | ❌ |
+| `rotation` | `transform: rotate(Xdeg)` | ❌ |
+| `blendMode` (노드 레벨) | `mix-blend-mode` | ❌ |
+
+**텍스트:**
+
+| Figma 속성 | CSS | vw 변환 |
+|-----------|-----|---------|
 | `style.fontFamily` | `font-family` | ❌ |
 | `style.fontSize` | `font-size` | ✅ |
 | `style.fontWeight` | `font-weight` | ❌ |
@@ -82,6 +120,17 @@ Bash:
 | `style.textAlignHorizontal` | `text-align` | ❌ |
 | `characters` | 텍스트 내용 | — |
 
+### FigmaNode 메타데이터 필드 (css 외)
+
+converter가 의사결정에 사용하는 추가 필드:
+
+| 필드 | 타입 | 용도 |
+|------|------|------|
+| `layoutSizingH` | `'FIXED'\|'HUG'\|'FILL'` | 부모 context로 width 결정 |
+| `layoutSizingV` | `'FIXED'\|'HUG'\|'FILL'` | 부모 context로 height 결정 |
+| `imageScaleMode` | `'FILL'\|'FIT'\|'CROP'\|'TILE'` | background-size 결정 |
+| `fills` | `array` | 다중 fill 레이어 상세 (2개 이상일 때만) |
+
 ---
 
 ## 2. 이미지 에셋 — 노드 렌더링 기반 (imageRef 개별 다운로드 금지)

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

@@ -4,7 +4,15 @@
 
 ```
 ❌ imageRef 개별 다운로드 금지 (텍스처 fill 공유 문제)
+❌ 섹션/그룹을 통째 이미지로 렌더링 금지 (내부 TEXT/INSTANCE 포함 시)
 ✅ 모든 이미지는 Figma screenshot API로 노드 렌더링
+✅ 렌더링 전 반드시 2-1.5 판별 규칙 확인 → HTML 대상은 렌더링하지 않음
+
+실제 테스트에서 발생한 잘못된 렌더링:
+  ❌ exchange-section1.webp (카드 4개 그리드를 이미지 1장으로)
+  ❌ daily-step2-list.webp (보상 목록을 텍스트 포함하여 통째로)
+  ❌ prize-section1.webp (응모 아이템을 텍스트 포함하여 통째로)
+  ✅ 올바른 접근: 카드 내부의 아이콘/썸네일만 개별 렌더링
 ```
 
 ## Render Methods