---

name: mock-spec-extractor description: 从设计稿图像中提取设计规范，包括颜色、字体、间距和组件细节 allowed-tools: Bash(*) Read Write Edit Glob Grep metadata: author: babysitter-sdk version: “1.0.0” category: design-analysis

mock-spec-extractor

你是 mock-spec-extractor - 一个专门用于从设计稿图像中提取全面设计规范的技能。

概述

此技能分析设计稿图像，提取结构化规范，包括颜色、字体、间距模式和组件细节，这些规范是像素级完美实现的唯一真实来源。

先决条件

• 已安装 Node.js 18+
• 图像处理库 (sharp, jimp)
• 颜色提取库 (node-vibrant, color-thief)
• 用于文本分析的OCR能力 (可选)

能力

1. 颜色板提取

const Vibrant = require('node-vibrant');

async function extractColors(mockPath) {
  const palette = await Vibrant.from(mockPath).getPalette();

  return {
    primary: palette.Vibrant?.hex,
    secondary: palette.Muted?.hex,
    accent: palette.DarkVibrant?.hex,
    background: palette.LightMuted?.hex,
    text: palette.DarkMuted?.hex,
    allColors: Object.entries(palette)
      .filter(([_, swatch]) => swatch)
      .map(([name, swatch]) => ({
        name,
        hex: swatch.hex,
        rgb: swatch.rgb,
        population: swatch.population
      }))
  };
}

2. 布局结构分析

async function analyzeLayout(mockPath) {
  const image = await sharp(mockPath).metadata();

  // 通过边缘检测识别主要区域
  const edges = await detectEdges(mockPath);

  // 识别网格模式
  const gridAnalysis = await detectGridPattern(edges);

  return {
    dimensions: { width: image.width, height: image.height },
    sections: identifySections(edges),
    grid: gridAnalysis,
    hierarchy: buildHierarchy(sections)
  };
}

3. 字体检测

async function detectTypography(mockPath, regions) {
  const textStyles = [];

  for (const region of regions) {
    // 提取文本区域
    const textAreas = await findTextAreas(mockPath, region);

    for (const area of textAreas) {
      textStyles.push({
        region: region.name,
        estimatedSize: estimateFontSize(area),
        estimatedWeight: estimateWeight(area),
        color: extractDominantColor(area),
        position: area.bounds
      });
    }
  }

  return deduplicateStyles(textStyles);
}

4. 间距模式识别

async function analyzeSpacing(mockPath, elements) {
  const spacingValues = [];

  // 分析元素之间的间隙
  for (let i = 0; i < elements.length - 1; i++) {
    const gap = calculateGap(elements[i], elements[i + 1]);
    spacingValues.push(gap);
  }

  // 识别间距比例
  const scale = identifySpacingScale(spacingValues);

  return {
    scale,
    patterns: groupByPattern(spacingValues),
    recommendations: suggestCSSVariables(scale)
  };
}

5. 组件检测

async function detectComponents(mockPath) {
  const components = [];

  // 检测按钮
  const buttons = await detectButtons(mockPath);
  components.push(...buttons.map(b => ({ type: 'button', ...b })));

  // 检测卡片
  const cards = await detectCards(mockPath);
  components.push(...cards.map(c => ({ type: 'card', ...c })));

  // 检测输入框
  const inputs = await detectInputs(mockPath);
  components.push(...inputs.map(i => ({ type: 'input', ...i })));

  return components;
}

输入模式

{
  "type": "object",
  "required": ["mockSource"],
  "properties": {
    "mockSource": {
      "type": "object",
      "properties": {
        "type": { "type": "string", "enum": ["image", "figma", "url"] },
        "path": { "type": "string" }
      }
    },
    "analysisDepth": {
      "type": "string",
      "enum": ["basic", "detailed", "comprehensive"],
      "default": "detailed"
    },
    "focusAreas": {
      "type": "array",
      "items": { "type": "string" }
    }
  }
}

输出模式

{
  "type": "object",
  "properties": {
    "success": { "type": "boolean" },
    "designSpec": {
      "type": "object",
      "properties": {
        "layout": { "type": "object" },
        "typography": { "type": "object" },
        "colorPalette": { "type": "object" },
        "spacing": { "type": "object" },
        "components": { "type": "array" },
        "decorativeElements": { "type": "array" }
      }
    },
    "cssVariables": { "type": "object" },
    "implementationNotes": { "type": "array" }
  }
}

流程集成

此技能与以下集成：

• pixel-perfect-implementation.js - 为收敛提供设计稿分析
• design-system.js - 提取设计令牌
• component-library.js - 识别组件模式

使用示例

/skill mock-spec-extractor \
  --mock designs/dashboard-mock.png \
  --depth comprehensive \
  --focus "header,sidebar,cards"

最佳实践

1. 高分辨率设计稿 - 使用2倍分辨率以获得更好的分析效果
2. 干净背景 - 纯色背景提高检测精度
3. 一致的命名 - 为区域命名保持一致以便追踪
4. 验证提取结果 - 审查并优化提取的规范
5. 基于反馈迭代 - 使用评分反馈来改进提取过程