@su-record/vibe 2.8.33 → 2.8.34

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.34",
   "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,7 +225,8 @@ SCSS 파일 기본 내용 Write:
 
 ### 2-2. 섹션 루프
 
-**각 섹션을 순서대로, 한 섹션을 완전히 완료한 후 다음으로.**
+**섹션별로 a→f 순서는 지키되, 섹션 간 병렬 처리 허용.**
+**단, 첫 번째 섹션(Hero)은 단독 완료 후 나머지를 병렬로.**
 
 #### a. 노드 트리 + CSS 추출
 
@@ -314,7 +314,58 @@ scaleFactor 적용:
     → font-size, font-weight, color, line-height, letter-spacing, text-align,
       border, border-radius, box-shadow, opacity
   styles/{feature}/_tokens.scss
-    → 새로 발견된 색상/폰트/스페이싱 토큰 추가
+    → primitive/semantic 구조로 토큰 관리 (아래 참조)
+
+_tokens.scss 구조 (primitive/semantic 분리):
+  // ─── Primitive (Figma 원시 값) ────────────────
+  // Colors
+  $color-white: #ffffff;
+  $color-navy-dark: #0a1628;
+  $color-purple-500: #604fed;
+
+  // 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 weights
+  $font-weight-regular: 400;
+  $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: #00264a;
+  $color-bg-login: rgba(14, 35, 62, 0.8);
+
+  // Border
+  $color-border-primary: #203f6c;
+
+  // Breakpoint
+  $bp-desktop: 1024px;
+
+규칙:
+  - primitive: Figma에서 추출한 고유 값 (색상 hex, 폰트, 크기)
+  - semantic: primitive를 참조하여 용도별 이름 부여 ($color-text-primary: $color-white)
+  - 섹션 처리할 때마다 새 값 발견 시 적절한 카테고리에 추가
+  - 같은 값이 이미 있으면 기존 토큰 재사용 (중복 금지)
 
 BG 레이어 패턴 (트리에서 position:absolute + 이미지 fill):
   .{section}Bg   → position: absolute; inset: 0; z-index: 0;

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 변수 패턴 처리