@su-record/vibe 2.8.34 → 2.8.36

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

@@ -1,46 +1,81 @@
 ---
 name: vibe.figma.convert
-description: 참조 코드(React+Tailwind) → 프로젝트 코드 + 외부 스타일 파일
+description: 스크린샷 + 재료함 → 프로젝트 코드 + 외부 스타일 파일
 triggers: []
 tier: standard
 ---
 
-# vibe.figma.convert — 코드 변환
+# vibe.figma.convert — 시각 기반 코드 생성
 
-`get_design_context` 참조 코드를 프로젝트 스택 코드로 변환.
-항상 외부 SCSS 파일에 스타일 작성.
+**스크린샷을 보고** 코드를 작성한다. Figma 데이터는 정확한 수치/에셋 재료로만 사용.
 
----
+```
+❌ Figma 트리를 HTML로 변환 (실패하는 방식)
+✅ 스크린샷을 보고 → 시맨틱 HTML 설계 → 재료함에서 정확한 값 가져다 적용
+```
 
-## 1. 외부 스타일 파일 생성
+---
 
-### 변환 예시
+## 1. 코드 생성 프로세스
 
 ```
-참조 코드 (React+Tailwind):
-  <div className="h-[1280px] relative w-[720px]">                    ← 섹션 컨테이너
-    <div className="absolute h-[1280px] overflow-clip w-[720px]">    ← BG 레이어
-      <img src={img21} className="absolute inset-0 object-cover size-full" />
-    </div>
-    <div className="absolute flex flex-col items-center top-[130px]"> ← Content
-      <div className="h-[174px] w-[620px]">                          ← Title 이미지
-        <img src={imgTitle} className="absolute inset-0 object-cover size-full" />
-      </div>
-      <p className="text-[24px] text-white leading-[1.4] text-center"> ← 텍스트
-        참여 대상 : PC 유저 (Steam, Kakao)
-      </p>
-    </div>
-  </div>
+입력:
+  - 섹션 스크린샷 (정답 사진)
+  - 재료함: 이미지 목록, 색상 팔레트, 폰트 목록, 텍스트 콘텐츠, CSS 수치
+
+출력:
+  - 컴포넌트 파일 (Vue SFC / React TSX)
+  - SCSS 파일 (layout/ + components/ + _tokens.scss)
+
+프로세스:
+  1. 스크린샷을 본다 → "무엇이 보이는가?" 판단
+     - 전면 배경 위 콘텐츠? → 히어로 패턴
+     - 카드 N개 반복? → 그리드 패턴
+     - 탭 + 내용? → 탭 패턴
+     - 리스트 + 버튼? → 인터랙티브 리스트 패턴
+
+  2. 시맨틱 HTML 구조를 설계한다 (Figma 레이어 구조 무시)
+     - 스크린샷에서 보이는 시각적 관계를 HTML로 표현
+     - <section>, <h2>, <ul>, <button> 등 의미에 맞게
+
+  3. 재료함에서 정확한 값을 가져온다
+     - 이미지: /tmp/{feature}/images/ 에서 해당 파일
+     - 색상: tree.json CSS의 정확한 hex/rgba
+     - 폰트: 정확한 font-family, size, weight
+     - 텍스트: TEXT 노드의 characters 값 그대로
+     - 간격: 정확한 padding, gap, margin 값
+
+  4. 코드를 작성한다
+     - 컴포넌트: 스크린샷처럼 보이도록
+     - SCSS: 재료함의 정확한 수치 (× scaleFactor)
+     - 추정 금지 — 값이 없으면 tree.json에서 다시 찾는다
 ```
 
+---
+
+## 2. 외부 SCSS 파일 구조
+
+### layout vs components 구분
+
 ```
-변환 → styles/{feature}/layout/_hero.scss:
+layout/  → position, display, flex/grid, width, height, padding, margin,
+           gap, overflow, z-index, background-image, inset
+components/ → font-size, font-weight, color, line-height, letter-spacing,
+              text-align, border, border-radius, box-shadow, opacity
+```
+
+### layout 예시 (스크린샷 기반으로 작성)
+
+```scss
+// 스크린샷에서 보이는 구조:
+// - 전면 배경 이미지 위에 중앙 정렬된 콘텐츠
+// 재료함에서 가져온 값: width=720, height=1280 (→ ×0.75)
 
 @use '../tokens' as t;
 
 .heroSection {
   position: relative;
-  height: 960px;              // 1280 × 0.75
+  height: 960px;              // 재료: 1280 × 0.75
   width: 100%;
   overflow: clip;
 }
@@ -58,129 +93,91 @@ tier: standard
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 98px;          // 130 × 0.75
+  padding-top: 98px;          // 재료: 130 × 0.75
 }
 ```
 
-```
-변환 → styles/{feature}/components/_hero.scss:
+### components 예시
+
+```scss
+// 스크린샷에서 보이는 요소:
+// - 큰 타이틀 이미지, 그 아래 흰색 텍스트
+// 재료함: fontSize=24, color=#ffffff, width=620, height=174
 
 @use '../tokens' as t;
 
 .heroTitle {
-  width: 465px;               // 620 × 0.75
-  height: 131px;              // 174 × 0.75
+  width: 465px;               // 재료: 620 × 0.75
+  height: 131px;              // 재료: 174 × 0.75
   img { width: 100%; height: 100%; object-fit: cover; }
 }
 
-.heroParticipation {
-  font-size: t.$font-size-md;      // 24px × 0.667 = 16px
-  color: t.$color-text-primary;    // semantic → $color-white
+.heroText {
+  font-size: t.$font-size-md;      // 재료: 24px × 0.667 = 16px
+  color: t.$color-text-primary;    // 재료: #ffffff
   line-height: 1.4;
   text-align: center;
-  white-space: nowrap;
 }
 ```
 
-### layout vs components 구분
-
-```
-layout/  → position, display, flex/grid, width, height, padding, margin,
-           gap, overflow, z-index, background-image, inset
-components/ → font-size, font-weight, color, line-height, letter-spacing,
-              text-align, border, border-radius, box-shadow, opacity
-```
-
 ### _tokens.scss 구조 (primitive/semantic 분리)
 
-```
-// ─── Primitive (Figma 원시 값) ────────────────
-// Colors
+```scss
+// ─── Primitive (재료함의 원시 값) ────────────────
 $color-white: #ffffff;
 $color-black: #000000;
 $color-navy-dark: #0a1628;
 $color-navy-medium: #00264a;
 
-// Font families
 $font-pretendard: 'Pretendard', sans-serif;
-$font-roboto-condensed: 'Roboto Condensed', sans-serif;
 
-// Font sizes (scaled)
-$font-size-xs: 11px;   // 16 × 0.667
-$font-size-sm: 13px;   // 20 × 0.667
-$font-size-md: 16px;   // 24 × 0.667
-$font-size-lg: 19px;   // 28 × 0.667
+$font-size-xs: 11px;   // 재료: 16 × 0.667
+$font-size-sm: 13px;   // 재료: 20 × 0.667
+$font-size-md: 16px;   // 재료: 24 × 0.667
+$font-size-lg: 19px;   // 재료: 28 × 0.667
 
-// Font weights
 $font-weight-regular: 400;
 $font-weight-medium: 500;
 $font-weight-bold: 700;
 
-// Spacing (scaled)
 $space-xs: 5px;
 $space-sm: 11px;
 $space-md: 16px;
 $space-lg: 21px;
 
 // ─── Semantic (용도별) ────────────────────────
-// Text
 $color-text-primary: $color-white;
 $color-text-secondary: #dadce3;
-$color-text-label: #003879;
-$color-text-link: #419bd3;
-
-// Background
 $color-bg-primary: $color-navy-dark;
 $color-bg-section: $color-navy-medium;
-
-// Border
 $color-border-primary: #203f6c;
-
-// Breakpoint
 $bp-desktop: 1024px;
 
-규칙:
-  - primitive: 고유 값 (hex, 폰트명, px)
-  - semantic: primitive 참조로 용도별 이름 ($color-text-primary: $color-white)
-  - 같은 값 중복 금지 — 기존 토큰 재사용
-```
-
-### CSS 변수 패턴 처리
-
-```
-참조 코드에 Figma 디자인 토큰이 CSS 변수로 포함될 수 있음:
-  font-[family-name:var(--font/family/pretendard,...)]
-  text-[length:var(--font/size/heading/24,24px)]
-  text-[color:var(--color/grayscale/950,#171716)]
-
-→ var() 안의 fallback 값(24px, #171716)을 사용.
-→ CSS 변수명은 프로젝트 토큰 네이밍에 참고.
+// 규칙:
+//   - primitive: 재료함의 고유 값 (hex, 폰트명, px)
+//   - semantic: primitive 참조로 용도별 이름
+//   - 같은 값 중복 금지 — 기존 토큰 재사용
 ```
 
 ---
 
-## 2. 컴포넌트 파일 변환
+## 3. 컴포넌트 작성
 
-### Vue / Nuxt
+### Vue / Nuxt 예시
 
 ```vue
+<!-- 스크린샷 기반: 전면 배경 + 중앙 타이틀 + 기간 정보 + 공유 버튼 -->
 <template>
   <section class="heroSection">
-    <!-- BG Layer -->
     <div class="heroBg">
       <img src="/images/{feature}/bg.webp" alt="" aria-hidden="true" />
     </div>
 
-    <!-- Content Layer -->
     <div class="heroContent">
       <div class="heroTitle">
         <img src="/images/{feature}/title.webp" alt="추운 겨울, 따뜻한 보상이 펑펑" />
       </div>
-      <div class="heroSubTitle">
-        <img src="/images/{feature}/sub-title.webp" alt="겨울을 녹일 보상, 지금 PC방에서 획득하세요!" />
-      </div>
 
-      <!-- Period Info (참조 코드 data-name="Period") -->
       <div class="heroPeriod">
         <p class="heroPeriodTarget">참여 대상 : PC 유저 (Steam, Kakao)</p>
         <div class="heroPeriodDetails">
@@ -188,15 +185,10 @@ $bp-desktop: 1024px;
             <p class="heroPeriodLabel">이벤트 기간</p>
             <p class="heroPeriodValue">{{ eventPeriod }}</p>
           </div>
-          <div class="heroPeriodItem">
-            <p class="heroPeriodLabel">교환/응모 종료일</p>
-            <p class="heroPeriodValue">{{ exchangeDeadline }}</p>
-          </div>
         </div>
       </div>
     </div>
 
-    <!-- Share Button (참조 코드 data-name="BTN_Share") -->
     <button class="heroShareBtn" @click="handleShare">
       <img src="/images/{feature}/share.webp" alt="공유하기" />
     </button>
@@ -204,21 +196,11 @@ $bp-desktop: 1024px;
 </template>
 
 <script setup lang="ts">
-/**
- * Hero 섹션 — 키비주얼 + 이벤트 기간 정보
- *
- * [인터랙션] 공유 버튼 클릭 → 공유하기 팝업
- * [상태] 로그인 전/후
- */
-
 defineProps<{
   eventPeriod: string
-  exchangeDeadline: string
 }>()
 
-const emit = defineEmits<{
-  share: []
-}>()
+const emit = defineEmits<{ share: [] }>()
 
 function handleShare(): void {
   emit('share')
@@ -227,93 +209,62 @@ function handleShare(): void {
 <!-- 스타일: styles/{feature}/layout/_hero.scss + components/_hero.scss -->
 ```
 
-### JSX 변환 규칙 (React+Tailwind → Vue/Nuxt)
-
-| React JSX | Vue SFC |
-|-----------|---------|
-| `className="..."` | `class="..."` |
-| `{condition && <X/>}` | `<X v-if="condition" />` |
-| `{items.map(i => <X key={i.id}/>)}` | `<X v-for="i in items" :key="i.id" />` |
-| `onClick={handler}` | `@click="handler"` |
-| `src={변수}` | `src="/images/{feature}/파일.webp"` (imageMap으로 교체) |
-| `style={{ maskImage: ... }}` | `:style="{ maskImage: ... }"` |
-| `<img alt="" />` (장식) | `<img alt="" aria-hidden="true" />` |
+### 스택별 변환 규칙
 
-### JSX 변환 규칙 (React+Tailwind → React/Next.js)
-
-| React+Tailwind | React/Next.js + SCSS |
-|----------------|---------------------|
-| `className="text-[48px] font-black"` | `className={styles.heroTitle}` |
-| `<img src={변수}` | `<Image src="/images/{feature}/파일.webp"` |
-| Tailwind 클래스 | CSS Module 또는 외부 SCSS 클래스 |
+| Vue/Nuxt | React/Next.js |
+|----------|---------------|
+| `class="..."` | `className={styles.xxx}` (CSS Module) |
+| `v-if="condition"` | `{condition && <X/>}` |
+| `v-for="i in items" :key="i.id"` | `{items.map(i => <X key={i.id}/>)}` |
+| `@click="handler"` | `onClick={handler}` |
+| `<img src="/images/..."` | `<Image src="/images/..."` |
 
 ---
 
-## 3. 이미지 배치 패턴
-
-### 배경 이미지 (참조 코드에서 absolute + inset-0 + object-cover)
+## 4. 이미지 배치 패턴 (스크린샷에서 판단)
 
 ```
-참조 코드에 이 패턴이 있으면 → 배경 이미지:
-  <div className="absolute ...">
-    <img src={imgXxx} className="absolute inset-0 object-cover size-full" />
-  </div>
-
-→ Multi-Layer 변환:
-  .{section}Bg → position: absolute; inset: 0; z-index: 0;
-  .{section}Content → position: relative; z-index: 10;
-```
+스크린샷에서 판단하는 패턴:
 
-### 콘텐츠 이미지 (참조 코드에서 독립적 img)
+배경 이미지 (화면 전체를 덮는 큰 이미지):
+  → absolute + inset-0 + object-cover
+  → .{section}Bg (z-index: 0) + .{section}Content (z-index: 10)
 
-```
-→ <img src="/images/{feature}/파일.webp" alt="설명" width={스케일적용} height={스케일적용} />
-```
-
-### 장식 이미지 (참조 코드에서 mix-blend, opacity, blur)
+콘텐츠 이미지 (독립적 요소):
+  → <img src="..." alt="설명" /> + 고정 width/height
 
-```
-→ <img ... alt="" aria-hidden="true" /> (접근성: 장식은 비표시)
-→ CSS: mix-blend-mode, opacity, filter: blur() 등 참조 코드 값 그대로
+장식 이미지 (분위기용, 반투명, 블러):
+  → <img ... alt="" aria-hidden="true" />
+  → mix-blend-mode, opacity 등 재료함 값 적용
 ```
 
 ---
 
-## 4. 반응형 추가 (데스크탑 URL)
+## 5. 반응형 추가 (데스크탑 URL)
 
 ```
-같은 섹션에 대해 데스크탑 참조 코드 추출 후:
+두 번째 URL의 재료를 확보한 후:
+
+기존 모바일 코드 유지 + @media 오버라이드만 추가.
 
 같은 값 → 유지
-다른 px 값:
-  @include pc {
-    .heroSection { height: 1440px; }  // 데스크탑 스케일
-  }
-  또는 clamp(모바일, calc, 데스크탑) 사용
-
-다른 배경 이미지:
-  .heroBg img { content: url('/images/{feature}/hero-mobile.webp'); }
-  @include pc {
-    .heroBg img { content: url('/images/{feature}/hero-pc.webp'); }
-  }
-
-다른 레이아웃:
-  .heroContent { flex-direction: column; }
-  @include pc { .heroContent { flex-direction: row; } }
-
-기존 모바일 코드 삭제 금지. @media 또는 mixin으로 추가만.
+다른 px 값 → @include pc { ... } 오버라이드
+다른 레이아웃 → @include pc { flex-direction: row; }
+다른 배경 이미지 → @include pc { content: url(...) }
+
+기존 코드 삭제 금지.
 ```
 
 ---
 
-## 5. Semantic HTML 최소 규칙
+## 6. Semantic HTML 규칙
 
 ```
 - 섹션 래퍼: <section>
 - 제목: <h1>~<h6> (순차, 건너뛰기 금지)
 - 텍스트: <p>
-- 버튼: <button> (@click 있으면)
-- 링크: <a> (href 있으면)
+- 버튼: <button>
+- 링크: <a>
 - 리스트: <ul>/<ol> + <li> (반복 패턴)
 - 장식 이미지: alt="" + aria-hidden="true"
 - 콘텐츠 이미지: alt="설명적 텍스트"

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

@@ -1,22 +1,51 @@
 ---
 name: vibe.figma.extract
-description: Figma REST API로 노드 트리, CSS, 이미지 추출
+description: Figma REST API로 재료 확보 — 스크린샷, 이미지, CSS, 트리, 텍스트
 triggers: []
 tier: standard
 ---
 
-# vibe.figma.extract — 데이터 추출
+# vibe.figma.extract — 재료 확보
 
-Figma REST API(`src/infra/lib/figma/`)를 사용하여 노드 트리, CSS, 이미지를 추출.
+Figma REST API(`src/infra/lib/figma/`)를 사용하여 **퍼즐 조립에 필요한 모든 재료**를 추출.
+추출한 데이터는 코드 변환용이 아닌 **재료함(material inventory)**으로 사용된다.
 
 ---
 
-## 1. 노드 트리 + CSS 추출
+## 1. 스크린샷 — 정답 사진
 
 ```
+가장 먼저 확보. 이것이 "만들어야 할 결과물"의 기준.
+
+전체 스크린샷:
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {nodeId} --out=/tmp/{feature}/full-screenshot.png
+
+섹션별 스크린샷 (1depth 자식 프레임 각각):
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {child.nodeId} --out=/tmp/{feature}/sections/{name}.png
+```
+
+---
+
+## 2. 이미지 에셋 — 시각 재료
+
+```
+트리에서 imageRef 수집 → Figma API로 다운로드:
+
 Bash:
-  # [FIGMA_SCRIPT] = ~/.vibe/hooks/scripts/figma-extract.js
-node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
+  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --out=/tmp/{feature}/images/ --depth=10
+
+반환: { total: N, images: { "imageRef": "/path/to/file.png", ... } }
+
+검증: total = refs.size (누락 0), 0byte 파일 없음
+```
+
+---
+
+## 3. 노드 트리 + CSS — 수치 재료
+
+```
+Bash:
+  node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
 
 반환 (FigmaNode JSON):
   {
@@ -29,11 +58,18 @@ node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
     imageRef: "abc123" (이미지 fill이 있는 노드만),
     children: [...]
   }
+
+⚠️ 주의: 이 트리는 HTML 구조로 변환하지 않는다.
+용도는 오직:
+  - 정확한 CSS 수치 참조 (색상, 크기, 간격)
+  - 텍스트 콘텐츠 추출
+  - 이미지 참조 매핑
+  - 디자인 토큰 추출
 ```
 
 ### Figma 속성 → CSS 변환표
 
-도구가 자동으로 변환하는 속성:
+도구가 자동으로 변환하는 속성 (재료로 활용):
 
 | Figma 속성 | CSS | 스케일 적용 |
 |-----------|-----|-----------|
@@ -49,7 +85,7 @@ node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
 | `style.fontFamily` | `font-family` | ❌ |
 | `style.fontSize` | `font-size` | ✅ |
 | `style.fontWeight` | `font-weight` | ❌ |
-| `style.lineHeightPx` | `line-height` | ❌ (px이지만 상대값으로 취급) |
+| `style.lineHeightPx` | `line-height` | ❌ |
 | `style.letterSpacing` | `letter-spacing` | ✅ |
 | `style.textAlignHorizontal` | `text-align` | ❌ |
 | `fills[].color` (TEXT) | `color` | ❌ |
@@ -66,47 +102,50 @@ node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
 
 ---
 
-## 2. 이미지 다운로드
+## 4. 재료함 정리 (material-inventory)
 
 ```
-트리에서 imageRef 수집 → Figma API로 다운로드:
+추출 완료 후 재료를 카테고리별로 정리:
 
-Bash:
-  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --out={outDir} --depth=10
+이미지 목록:
+  파일명 | 크기 | 용도 추정
+  hero-bg.png | 720×1280 | 배경 (큰 사이즈, BG 레이어)
+  title.png | 620×174 | 타이틀 이미지
+  btn-share.png | 48×48 | 아이콘 (작은 사이즈)
 
-반환: { total: N, images: { "imageRef": "/path/to/file.png", ... } }
+색상 팔레트 (tree.json에서 고유값 추출):
+  #0a1628, #00264a, #ffffff, #dadce3, #003879, #419bd3, ...
 
-파일명: imageRef 앞 16자 + .png
-검증: total = refs.size (누락 0), 0byte 파일 없음
+폰트 목록:
+  Pretendard: 400/500/700, 16px~48px
+  Roboto Condensed: 700, 24px~36px
+
+텍스트 콘텐츠 (모든 TEXT 노드):
+  "겨울 이벤트", "12.1 ~ 12.31", "참여 대상 : PC 유저", ...
+
+간격 패턴 (빈도 높은 값):
+  gap: 8px, 16px, 24px, 32px
+  padding: 16px, 24px, 32px
 ```
 
 ---
 
-## 3. 스크린샷
-
-```
-Bash:
-  node "[FIGMA_SCRIPT]" screenshot {fileKey} {nodeId} --out={path}
+## 5. 노드 참조 (보조)
 
-시각 검증용. 노드를 PNG로 렌더링하여 저장.
 ```
+트리의 name/type은 재료 분류에만 사용:
 
----
+name 패턴 → 용도 힌트:
+  "BG" → 배경 이미지 (스크린샷에서 확인)
+  "Title", "Txt_*" → 텍스트 영역
+  "Btn_*", "CTA" → 버튼/인터랙티브
+  "Icon_*" → 아이콘
+  "Step1", "Item_*" → 반복 요소
 
-## 4. 노드 구조 참조
+type → 재료 종류:
+  TEXT → 텍스트 콘텐츠 제공
+  RECTANGLE/VECTOR + imageRef → 다운로드 대상 이미지
+  INSTANCE → 반복 사용 가능성 (컴포넌트 후보)
 
-```
-트리의 name 속성으로 레이어 용도 파악:
-  name="BG" → 배경 레이어 (position:absolute, imageRef 포함)
-  name="Contents" → 콘텐츠 영역
-  name="Title" → 제목
-  name="Step1", "Step2" → 하위 섹션
-  name="Btn_Login" → 버튼
-
-type으로 노드 종류 구분:
-  FRAME → 컨테이너 (div)
-  TEXT → 텍스트 (p/span)
-  INSTANCE → 컴포넌트 인스턴스 (자식 있음)
-  RECTANGLE/VECTOR with imageRef → 이미지 (img)
-  GROUP → 그룹 (div)
+⚠️ 이 정보로 HTML을 생성하지 않는다. 스크린샷을 보고 판단한다.
 ```