name: visual-diff-scorer description: 使用像素差异和结构分析进行多维视觉评分，用于设计与实现对比 allowed-tools: Bash(*) Read Write Edit Glob Grep WebFetch metadata: author: babysitter-sdk version: “1.0.0” category: visual-testing

视觉差异评分器

您是 visual-diff-scorer - 一个专门的技能，用于使用像素差异和结构分析进行多维视觉评分，以比较设计稿与实现截图。

概述

此技能能够对设计稿与实现截图进行全面的视觉比较，在布局、排版、颜色、间距、组件和装饰元素等多个维度生成详细的评分。

前提条件

已安装 Node.js 18+
用于截图捕获的 Playwright 或 Puppeteer
用于像素级比较的 pixelmatch
图像处理库（sharp, jimp）

功能

1. 多维评分

在6个维度上对实现进行评分，权重可配置：

const defaultWeights = {
  layout: 25,      // 结构、定位、对齐
  typography: 20,  // 字体、大小、粗细、间距
  colors: 20,      // 颜色、渐变、不透明度
  spacing: 15,     // 边距、内边距、间隙
  components: 10,  // 按钮、输入框、卡片
  decorative: 10   // 图标、插图、效果
};

2. 像素差异分析

const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');

// 比较设计稿和实现
const mockImg = PNG.sync.read(fs.readFileSync(mockPath));
const implImg = PNG.sync.read(fs.readFileSync(implPath));
const diff = new PNG({ width, height });

const numDiffPixels = pixelmatch(
  mockImg.data,
  implImg.data,
  diff.data,
  width,
  height,
  { threshold: 0.1 }
);

const diffPercentage = (numDiffPixels / (width * height)) * 100;

3. 区域分析

分析特定区域以进行针对性评分：

const regions = [
  { name: 'header', bounds: { x: 0, y: 0, width: 1920, height: 80 } },
  { name: 'hero', bounds: { x: 0, y: 80, width: 1920, height: 500 } },
  { name: 'content', bounds: { x: 0, y: 580, width: 1920, height: 600 } }
];

for (const region of regions) {
  const regionDiff = analyzeRegion(mockImg, implImg, region.bounds);
  results.push({ region: region.name, score: regionDiff.score });
}

4. 颜色提取与比较

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

// 从设计稿提取调色板
const mockPalette = await Vibrant.from(mockPath).getPalette();

// 与实现颜色比较
const colorDelta = calculateColorDelta(mockPalette, implPalette);

5. 结构分析

// 分析DOM结构对齐
const mockStructure = await extractStructure(mockAnalysis);
const implStructure = await extractStructure(page);

const structuralScore = compareStructures(mockStructure, implStructure);

输入模式

{
  "type": "object",
  "required": ["mockPath", "screenshotPath"],
  "properties": {
    "mockPath": {
      "type": "string",
      "description": "设计稿图像路径"
    },
    "screenshotPath": {
      "type": "string",
      "description": "实现截图路径"
    },
    "scoringWeights": {
      "type": "object",
      "description": "评分维度的自定义权重"
    },
    "tolerances": {
      "type": "object",
      "description": "评分的容差阈值"
    },
    "regions": {
      "type": "array",
      "description": "要分析的特定区域"
    }
  }
}

输出模式

{
  "type": "object",
  "properties": {
    "overallScore": { "type": "number" },
    "breakdown": {
      "type": "object",
      "properties": {
        "layout": { "type": "number" },
        "typography": { "type": "number" },
        "colors": { "type": "number" },
        "spacing": { "type": "number" },
        "components": { "type": "number" },
        "decorative": { "type": "number" }
      }
    },
    "pixelDiff": {
      "type": "object",
      "properties": {
        "percentage": { "type": "number" },
        "diffImagePath": { "type": "string" }
      }
    },
    "differences": { "type": "array" },
    "feedback": { "type": "array" }
  }
}

流程集成

此技能与以下流程集成：

pixel-perfect-implementation.js - 主要收敛过程
design-qa.js - 设计QA验证
hifi-prototyping.js - 高保真原型验证

使用示例

/skill visual-diff-scorer \
  --mock designs/homepage-mock.png \
  --screenshot artifacts/screenshot.png \
  --weights '{"layout":30,"typography":25,"colors":20,"spacing":10,"components":10,"decorative":5}'

最佳实践

一致的捕获设置 - 相同的视口、设备比例、时间
隐藏动态内容 - 时间戳、动画、广告
使用适当的阈值 - 平衡精度与误报
基于区域的分析 - 关注关键区域
迭代优化 - 跟踪评分进展