@su-record/vibe 2.8.33 → 2.8.35

package/hooks/scripts/figma-extract.js

@@ -191,14 +191,225 @@ async function cmdImages(token, fk, nid, outDir, depth) {
 
 async function cmdScreenshot(token, fk, nid, outPath) {
   if (!outPath) fail('--out required');
-  const data = await apiFetch(`/images/${fk}?ids=${nid}&format=png&scale=2`, token);
-  const url = data.images?.[nid];
-  if (!url) fail(`No image for ${nid}`);
   const dir = path.dirname(outPath);
   if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-  const buf = Buffer.from(await (await fetch(url)).arrayBuffer());
-  fs.writeFileSync(outPath, buf);
-  console.log(JSON.stringify({ path: outPath, size: buf.length }));
+  // scale=2 시도 → 400 에러 시 scale=1 폴백
+  for (const scale of [2, 1]) {
+    try {
+      const data = await apiFetch(`/images/${fk}?ids=${nid}&format=png&scale=${scale}`, token);
+      const url = data.images?.[nid];
+      if (!url) continue;
+      const buf = Buffer.from(await (await fetch(url)).arrayBuffer());
+      fs.writeFileSync(outPath, buf);
+      console.log(JSON.stringify({ path: outPath, size: buf.length, scale }));
+      return;
+    } catch (e) {
+      if (scale === 1) fail(`Screenshot failed: ${e.message}`);
+    }
+  }
+  fail('Screenshot failed at all scales');
+}
+
+// ─── Render: HTML + SCSS + Images + Screenshot ─────────────────────
+
+function kebab(str) {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_/\\:]+/g, '-')
+    .replace(/[^a-zA-Z0-9-]/g, '')  // 한글 제거 — 클래스명은 영문만
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .toLowerCase()
+    .slice(0, 30);  // 최대 30자
+}
+
+function nodeName(node, parentPrefix) {
+  let raw = node.name || '';
+  // TEXT 노드: 텍스트 대신 부모 컨텍스트 + 'text' 사용
+  if (node.type === 'TEXT') raw = raw.slice(0, 20) || 'text';
+  // 의미 없는 이름 정리
+  raw = raw.replace(/^(Frame|Group|Rectangle|Vector|Ellipse)\s*/i, '');
+  if (!raw || /^\d+$/.test(raw)) raw = node.type?.toLowerCase() || 'node';
+  const k = kebab(raw);
+  return parentPrefix ? `${parentPrefix}-${k}` : k;
+}
+
+/** 노드 트리 → HTML 문자열 생성 */
+function toHTML(node, prefix, imgMap, indent = 0) {
+  const pad = '  '.repeat(indent);
+  const cls = nodeName(node, prefix);
+  const lines = [];
+
+  // 이미지 노드
+  if (node.imageRef && imgMap[node.imageRef]) {
+    const isDecorative = node.name?.match(/^(BG|bg|배경|Shadow|Glow|Light|snow|눈|얼음|빙판|트리|Particle)/i);
+    const alt = isDecorative ? '' : (node.name || '');
+    const ariaHidden = isDecorative ? ' aria-hidden="true"' : '';
+    lines.push(`${pad}<img class="${cls}" src="${imgMap[node.imageRef]}" alt="${alt}"${ariaHidden} />`);
+    return lines.join('\n');
+  }
+
+  // 텍스트 노드
+  if (node.type === 'TEXT' && node.text) {
+    const tag = node.text.length > 100 ? 'p' : 'span';
+    lines.push(`${pad}<${tag} class="${cls}">${node.text}</${tag}>`);
+    return lines.join('\n');
+  }
+
+  // 컨테이너 노드
+  const tag = node.type === 'TEXT' ? 'p' : 'div';
+  if (!node.children?.length) {
+    lines.push(`${pad}<${tag} class="${cls}" />`);
+    return lines.join('\n');
+  }
+
+  lines.push(`${pad}<${tag} class="${cls}">`);
+  for (const child of node.children) {
+    lines.push(toHTML(child, cls, imgMap, indent + 1));
+  }
+  lines.push(`${pad}</${tag}>`);
+  return lines.join('\n');
+}
+
+/** 노드 트리 → SCSS 문자열 생성 */
+function toSCSS(node, prefix, indent = 0) {
+  const cls = nodeName(node, prefix);
+  const lines = [];
+  const css = node.css || {};
+  const props = Object.entries(css);
+
+  if (props.length) {
+    lines.push(`.${cls} {`);
+    for (const [k, v] of props) {
+      // camelCase → kebab-case
+      const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase();
+      lines.push(`  ${prop}: ${v};`);
+    }
+    lines.push('}');
+    lines.push('');
+  }
+
+  if (node.children?.length) {
+    for (const child of node.children) {
+      lines.push(toSCSS(child, cls));
+    }
+  }
+  return lines.join('\n');
+}
+
+/** imageRef → 이름 기반 매핑 (해시 아닌 노드 name 사용) */
+function buildImageNames(node, prefix, result = {}) {
+  if (node.imageRef) {
+    const name = nodeName(node, prefix);
+    result[node.imageRef] = name + '.png';
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      buildImageNames(child, nodeName(node, prefix) || prefix, result);
+    }
+  }
+  return result;
+}
+
+async function cmdRender(token, fk, nid, outDir, depth, scale) {
+  if (!outDir) fail('--out=<dir> required');
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+
+  const imgDir = path.join(outDir, 'images');
+  if (!fs.existsSync(imgDir)) fs.mkdirSync(imgDir, { recursive: true });
+
+  // 1. 트리 가져오기
+  const dp = depth ? `&depth=${depth}` : '';
+  const treeData = await apiFetch(`/files/${fk}/nodes?ids=${nid}${dp}`, token);
+  const nd = treeData.nodes?.[nid];
+  if (!nd?.document) fail(`Node ${nid} not found`);
+  const tree = walk(nd.document);
+
+  // 2. 이미지 이름 매핑 (노드 name 기반)
+  const sectionPrefix = kebab(tree.name);
+  const imageNames = buildImageNames(tree, sectionPrefix);
+  const refs = collectRefs(tree);
+
+  // 3. fill 이미지 다운로드 (이름 기반)
+  let imageMap = {};
+  if (refs.size) {
+    const allImg = await apiFetch(`/files/${fk}/images`, token);
+    const urls = allImg.meta?.images || {};
+    const dl = [];
+    for (const ref of refs) {
+      const url = urls[ref];
+      if (!url) continue;
+      const fileName = imageNames[ref] || ref.slice(0, 16) + '.png';
+      const filePath = path.join(imgDir, fileName);
+      const publicPath = `images/${fileName}`;
+      dl.push(fetch(url).then(r => r.arrayBuffer()).then(b => {
+        fs.writeFileSync(filePath, Buffer.from(b));
+        if (fs.statSync(filePath).size > 0) imageMap[ref] = publicPath;
+      }).catch(() => {}));
+    }
+    await Promise.all(dl);
+  }
+
+  // 4. 복합 BG 노드 → 스크린샷으로 렌더링
+  for (const child of tree.children || []) {
+    if (/^(BG|bg|배경)$/i.test(child.name) && child.children?.length > 3) {
+      const bgName = `${sectionPrefix}-bg-composite.png`;
+      const bgPath = path.join(imgDir, bgName);
+      try {
+        for (const s of [2, 1]) {
+          const sData = await apiFetch(`/images/${fk}?ids=${child.nodeId}&format=png&scale=${s}`, token);
+          const sUrl = sData.images?.[child.nodeId];
+          if (!sUrl) continue;
+          const buf = Buffer.from(await (await fetch(sUrl)).arrayBuffer());
+          fs.writeFileSync(bgPath, buf);
+          if (buf.length > 0) {
+            imageMap[`__bg_${child.nodeId}`] = `images/${bgName}`;
+            // BG 노드의 imageRef를 합성 이미지로 교체
+            child.imageRef = `__bg_${child.nodeId}`;
+            child.children = []; // 하위 제거 (합성됨)
+            break;
+          }
+        }
+      } catch { /* BG screenshot failed, keep original structure */ }
+    }
+  }
+
+  // 5. 스크린샷
+  const screenshotPath = path.join(outDir, `${sectionPrefix}-screenshot.png`);
+  try {
+    for (const s of [2, 1]) {
+      const sData = await apiFetch(`/images/${fk}?ids=${nid}&format=png&scale=${s}`, token);
+      const sUrl = sData.images?.[nid];
+      if (!sUrl) continue;
+      const buf = Buffer.from(await (await fetch(sUrl)).arrayBuffer());
+      fs.writeFileSync(screenshotPath, buf);
+      break;
+    }
+  } catch { /* screenshot failed */ }
+
+  // 6. HTML 생성
+  const html = toHTML(tree, '', imageMap);
+  fs.writeFileSync(path.join(outDir, `${sectionPrefix}.html`), html);
+
+  // 7. SCSS 생성
+  const scss = toSCSS(tree, '');
+  fs.writeFileSync(path.join(outDir, `${sectionPrefix}.scss`), scss);
+
+  // 8. 트리 JSON 저장
+  fs.writeFileSync(path.join(outDir, `${sectionPrefix}.json`), JSON.stringify(tree, null, 2));
+
+  // 출력 요약
+  console.log(JSON.stringify({
+    section: sectionPrefix,
+    files: {
+      html: `${sectionPrefix}.html`,
+      scss: `${sectionPrefix}.scss`,
+      json: `${sectionPrefix}.json`,
+      screenshot: `${sectionPrefix}-screenshot.png`,
+    },
+    images: imageMap,
+    imageCount: Object.keys(imageMap).length,
+  }, null, 2));
 }
 
 // ─── CLI ────────────────────────────────────────────────────────────
@@ -221,5 +432,6 @@ switch (cmd) {
   case 'tree': await cmdTree(token, fk, nid, flags.depth ? +flags.depth : undefined); break;
   case 'images': await cmdImages(token, fk, nid, flags.out, flags.depth ? +flags.depth : 10); break;
   case 'screenshot': await cmdScreenshot(token, fk, nid, flags.out); break;
-  default: console.log('Usage: node figma-extract.js <tree|images|screenshot> <fileKey> <nodeId> [flags]');
+  case 'render': await cmdRender(token, fk, nid, flags.out, flags.depth ? +flags.depth : 10, flags.scale ? +flags.scale : 0.667); break;
+  default: console.log('Usage: node figma-extract.js <tree|images|screenshot|render> <fileKey> <nodeId> [flags]');
 }

package/package.json

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

package/skills/vibe.figma/SKILL.md

@@ -68,16 +68,15 @@ tier: standard
 
 ```
 URL에서 fileKey, nodeId 추출
-getTree(fileKey, nodeId, depth=2) → 프레임 목록
 
-Bash:
-  node -e "
-    import { getTree } from './dist/infra/lib/figma/index.js';
-    const tree = await getTree({ fileKey: '{fileKey}', nodeId: '{nodeId}', depth: 2 });
-    console.log(JSON.stringify(tree));
-  "
+1단계 (BLOCKING): 루트 depth=2로 전체 프레임 + nodeId 수집
+  # [FIGMA_SCRIPT] = ~/.vibe/hooks/scripts/figma-extract.js
+  node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=2
+
+  → 모든 자식 프레임의 name + nodeId + size 를 테이블로 출력
+  → nodeId가 빠진 프레임이 있으면 안 됨
 
-프레임 분류 (name 패턴 기반):
+2단계: name 패턴으로 프레임 분류
   SPEC   — "기능 정의서", "정책" → depth 높여서 텍스트 추출
   CONFIG — "해상도", "브라우저" → 스케일 팩터 계산
   SHARED — "공통", "GNB", "Footer", "Popup" → 공통 컴포넌트 파악
@@ -91,7 +90,7 @@ Bash:
   4순위: SHARED (공통 요소, Popup) — 필요 시
 
 높이 1500px 이상 프레임:
-  → getScreenshot으로 시각 파악
+  → node "[FIGMA_SCRIPT]" screenshot으로 시각 파악
   → 또는 depth 높여서 하위 분할 조회
 ```
 
@@ -226,129 +225,58 @@ SCSS 파일 기본 내용 Write:
 
 ### 2-2. 섹션 루프
 
-**각 섹션을 순서대로, 한 섹션을 완전히 완료한 후 다음으로.**
+**섹션별로 a→d 순서는 지키되, 섹션 간 병렬 처리 허용.**
+**단, 첫 번째 섹션(Hero)은 단독 완료 후 나머지를 병렬로.**
 
-#### a. 노드 트리 + CSS 추출
+#### a. render 실행 (BLOCKING)
 
 ```
-Figma REST API로 노드 트리와 CSS 속성을 직접 추출한다.
-MCP 플러그인(get_design_context/get_metadata)은 사용하지 않는다.
-
-Bash:
-  # [FIGMA_SCRIPT] = ~/.vibe/hooks/scripts/figma-extract.js
-node "[FIGMA_SCRIPT]" tree {fileKey} {섹션.nodeId} --depth=10
-
-반환 (JSON):
-  {
-    nodeId, name, type, size: {width, height},
-    css: { display, flexDirection, gap, fontSize, color, ... },
-    text: "텍스트 내용" (TEXT 노드),
-    imageRef: "abc123" (이미지 fill),
-    children: [...]
-  }
-
-CSS는 Figma 노드 속성에서 직접 추출 — Tailwind 역변환 불필요:
-  fills → background-color     effects → box-shadow, filter
-  strokes → border             style → font-family, font-size, color
-  layoutMode → display:flex     itemSpacing → gap
-  padding* → padding            cornerRadius → border-radius
-
-인스턴스 내부 자식도 depth로 전부 조회 가능 (MCP 한계 해결).
-```
+# [FIGMA_SCRIPT] = ~/.vibe/hooks/scripts/figma-extract.js
+node "[FIGMA_SCRIPT]" render {fileKey} {섹션.nodeId} --out=/tmp/{feature}-{section}/ --depth=10
 
-#### b. 이미지 다운로드 (BLOCKING)
+한 번 호출로 아래 파일이 생성됨:
+  /tmp/{feature}-{section}/
+  ├── {section}.html          ← HTML 구조 (class명 포함)
+  ├── {section}.scss          ← 전체 SCSS (모든 CSS 속성)
+  ├── {section}.json          ← 원본 트리 JSON
+  ├── {section}-screenshot.png ← 섹션 스크린샷 (시각 기준점)
+  └── images/
+      ├── {section}-bg-composite.png  ← 복합 BG 합성 이미지
+      ├── {section}-title.png         ← 이름 있는 이미지
+      └── ...
 
+이미지는 노드 name 기반 파일명 (해시 아님).
+복합 BG(3개+ 하위 레이어)는 자동으로 합성 스크린샷 생성.
+인스턴스 내부 자식도 depth로 전부 조회.
 ```
-트리에서 imageRef가 있는 노드를 수집 → Figma API로 다운로드.
 
-Bash:
-  node "[FIGMA_SCRIPT]" images {fileKey} {섹션.nodeId} --out=images/{feature}/ --depth=10
+#### b. 생성물 적용
 
-검증: result.total = refs.size (누락 0)
-전부 완료해야 c 단계로 진행.
 ```
+render 출력물을 프로젝트에 적용:
 
-#### c. 클래스 매핑 테이블 생성
+1. 이미지 복사:
+   /tmp/{feature}-{section}/images/* → static/images/{feature}/
 
-```
-SCSS 작성 전에 반드시 매핑 테이블을 먼저 출력한다.
-이 테이블 없이 SCSS를 작성하지 않는다.
-
-1. Phase 1 컴포넌트의 클래스 목록을 Read로 수집
-2. 트리의 name + css 속성을 분석
-3. 매핑 테이블 출력:
-
-  ┌─────────────────────┬──────────────────┬────────────────────────────────────┐
-  │ Phase 1 클래스       │ 트리 노드 name   │ 추출된 CSS 값                      │
-  ├─────────────────────┼──────────────────┼────────────────────────────────────┤
-  │ .kidSection         │ KID (root)       │ flex, column, gap:32px, pad:48px   │
-  │ .kidBg              │ BG               │ absolute, 720x800                  │
-  │ .kidLoginBtn        │ Btn_Login        │ flex, border, shadow, 640x148      │
-  │ .kidLoginBtnText    │ (TEXT 노드)       │ fontSize:36px, color:#fff, w:700   │
-  │ .kidDivider         │ Divider          │ 640x1                              │
-  │ .kidSteamLink       │ steam_account    │ fontSize:24px, w:600               │
-  │ .kidSteamNote       │ (하위 TEXT)       │ fontSize:20px, color:#dadce3       │
-  └─────────────────────┴──────────────────┴────────────────────────────────────┘
-
-매핑 기준:
-  name 일치 → 직접 매핑
-  name 없음 → 트리 위치/text 내용으로 판단
-  Phase 1에 없는 요소 → 클래스 신규 추가 (template에도 반영)
-  트리에 없는 클래스 → 스타일 없이 유지
-```
+2. SCSS 적용:
+   {section}.scss를 읽고 scaleFactor 적용하여 프로젝트 SCSS에 Write:
+     styles/{feature}/layout/_{section}.scss ← position, display, flex, width, height
+     styles/{feature}/components/_{section}.scss ← font, color, border, shadow
+     styles/{feature}/_tokens.scss ← 새 값 추가 (primitive/semantic, vibe.figma.convert 참조)
+   index.scss에 새 섹션 @import 추가.
 
-#### d. SCSS 작성
+3. template 업데이트:
+   {section}.html을 읽고 Phase 1 컴포넌트에 반영:
+     - HTML 구조를 프로젝트 스택으로 변환 (class 유지)
+     - 이미지 경로를 static/images/{feature}/ 로 교체
+     - Phase 1 기능 요소(v-for, @click, v-if, $emit) 재배치
+     - script(JSDoc, 인터페이스, 핸들러) 보존
 
-```
-매핑 테이블의 각 행에 대해, 트리의 css 속성을 SCSS로 작성.
-CSS 값은 트리에서 이미 추출되어 있으므로 변환 불필요 — 그대로 사용.
-
-scaleFactor 적용:
-  px 값 → × scaleFactor (font-size, padding, margin, gap, width, height, border-radius)
-  적용 안 함 → color, opacity, font-weight, z-index, line-height(단위 없음), % 값
-
-출력 파일:
-  styles/{feature}/layout/_{section}.scss
-    → position, display, flex, width, height, padding, overflow, z-index, background-image
-  styles/{feature}/components/_{section}.scss
-    → font-size, font-weight, color, line-height, letter-spacing, text-align,
-      border, border-radius, box-shadow, opacity
-  styles/{feature}/_tokens.scss
-    → 새로 발견된 색상/폰트/스페이싱 토큰 추가
-
-BG 레이어 패턴 (트리에서 position:absolute + 이미지 fill):
-  .{section}Bg   → position: absolute; inset: 0; z-index: 0;
-  .{section}Content → position: relative; z-index: 1;
-
-index.scss에 새 섹션 @import 추가.
+4. 스크린샷 참조:
+   {section}-screenshot.png과 비교하면서 작업
 ```
 
-#### e. template 업데이트
-
-```
-Phase 1 컴포넌트의 template을 트리 구조 기반으로 리팩토링.
-script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
-
-1. 트리의 HTML 구조를 프로젝트 스택으로 변환:
-   FRAME → <div>, TEXT → <p>/<span>, VECTOR/RECTANGLE with imageRef → <img>
-
-2. 이미지 경로를 imageMap으로 교체:
-   imageRef "abc123" → src="/images/{feature}/abc123.png"
-
-3. BG 레이어 구조 적용:
-   .{section}Bg div (배경) + .{section}Content div (콘텐츠)
-
-4. Phase 1 기능 요소 재배치:
-   v-for, @click, v-if, $emit 등을 새 구조의 적절한 위치에 배치
-
-5. 접근성:
-   장식 이미지 (BG 내) → alt="" aria-hidden="true"
-   콘텐츠 이미지 → alt="설명적 텍스트"
-
-컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 SCSS.
-```
-
-#### f. 섹션 검증
+#### c. 섹션 검증
 
 ```
 Grep 체크:
@@ -356,8 +284,11 @@ Grep 체크:
   □ "<style" in 컴포넌트 파일 → 0건
 
 Read 체크:
-  □ 외부 SCSS 파일에 font-size, color 존재 (브라우저 기본 스타일 방지)
-  □ 이미지 파일 수 = imageRef 수 (누락 0)
+  □ 외부 SCSS 파일에 font-size, color 존재
+  □ 이미지 파일 존재 + 0byte 없음
+
+스크린샷 비교:
+  □ {section}-screenshot.png vs dev 서버 → 주요 차이 없음
 
 실패 → 수정 → 재검증
 ```

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

@@ -74,8 +74,8 @@ tier: standard
 }
 
 .heroParticipation {
-  font-size: t.$text-sub;     // 24px × 0.75 = 18px
-  color: t.$color-white;
+  font-size: t.$font-size-md;      // 24px × 0.667 = 16px
+  color: t.$color-text-primary;    // semantic → $color-white
   line-height: 1.4;
   text-align: center;
   white-space: nowrap;
@@ -91,35 +91,58 @@ components/ → font-size, font-weight, color, line-height, letter-spacing,
               text-align, border, border-radius, box-shadow, opacity
 ```
 
-### _tokens.scss 업데이트
+### _tokens.scss 구조 (primitive/semantic 분리)
 
 ```
-섹션을 처리할 때마다 새로운 고유값을 토큰에 추가:
-
+// ─── Primitive (Figma 원시 값) ────────────────
 // Colors
-$color-white: #FFFFFF;
-$color-bg-dark: #0A1628;
-$color-heading: #1B3A1D;
-$color-text-body: #333333;
-$color-period-label: #003879;
-$color-grayscale-950: #171716;
-
-// Typography (Figma px × scaleFactor)
-$text-hero: 36px;            // 48 × 0.75
-$text-sub: 18px;             // 24 × 0.75
-$text-body: 16px;            // 21 × 0.75
-$text-period: 21px;          // 28 × 0.75
+$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;
 
-// Spacing
-$space-section: 98px;        // 130 × 0.75
-$space-content: 18px;        // 24 × 0.75
-
-// Breakpoints
-$bp-pc: 1024px;
+// 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 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 변수 패턴 처리