mcpField
I
image-compare

image-compare

github.com/pascalorg测试与质量10093 次安装7 周前更新
代码仓库

关于 image-compare

image-compare 逐像素比较两张图像并报告差异，适合检查界面实现或视觉回归。它提供不匹配统计数据，并生成以红色标出差异的图像。

主要功能

  1. 01逐像素比较图像
  2. 02调整输入图像至匹配尺寸
  3. 03可配置比较阈值
  4. 04报告差异数量和百分比
  5. 05生成红色差异标记图

适用场景

  1. 01将 UI 截图与设计稿比较
  2. 02检查不同版本间的视觉回归
  3. 03验证页面是否符合 Figma 导出图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pascalorg/skills --skill image-compare

安装后在 Claude Code 中输入/image-compare确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

scripts/
image-compare.js
image-compare.sh
package-lock.json
package.json

详细介绍

图像对比

逐像素对比两张图像。返回差异像素数和不匹配百分比，并生成一张用红色标出差异的差异图像。

适用场景

  • 将实现效果的截图与原始设计进行对比
  • 发现同一页面两个版本之间的视觉回归
  • 验证 UI 是否与 Figma 导出图一致

工作原理

  1. 加载两张图像并调整尺寸，使其尺寸一致（采用两者中较小的尺寸）
  2. 使用 pixelmatch 对比每个像素，并标记超出可配置阈值的差异
  3. 返回不匹配统计信息，并写入一张用红色显示差异的图像

用法

bash <skill-path>/scripts/image-compare.sh <image1> <image2> [diff-output.png] [threshold]

参数：

  • image1 — 第一张图像的路径（必填）
  • image2 — 第二张图像的路径（必填）
  • diff-output.png — 差异图像的写入路径（可选，默认为 ./diff.png）
  • threshold — 像素匹配阈值，范围为 0–1；数值越低，匹配要求越严格（可选，默认为 0.1）

示例：

# Compare a design against implementation
bash <skill-path>/scripts/image-compare.sh design.png screenshot.png

# Compare with custom threshold and output path
bash <skill-path>/scripts/image-compare.sh before.png after.png ./changes.png 0.05

输出

{
  "totalPixels": 921600,
  "differentPixels": 4523,
  "mismatchPercentage": 0.49,
  "dimensions": { "width": 1280, "height": 720 },
  "diffImage": "./diff.png",
  "threshold": 0.1
}
字段类型描述
totalPixelsNumber对比的像素总数
differentPixelsNumber存在差异的像素数
mismatchPercentageNumber存在差异的像素百分比
dimensionsObject对比时使用的宽度和高度
diffImageString生成的差异图像的路径
thresholdNumber使用的灵敏度阈值

向用户呈现结果

完成对比后，呈现摘要：

Comparison: design.png vs screenshot.png

Mismatch: 0.49% (4,523 pixels out of 921,600)
Diff image saved to: ./diff.png

The images are nearly identical. Differences are highlighted in red in the diff image.

百分比的含义：

  • < 0.1% — 基本一致
  • 0.1% - 1% — 细微差异，可能由抗锯齿或子像素渲染导致
  • 1% - 5% — 差异明显，值得检查
  • > 5% — 视觉变化显著

故障排除

图像尺寸不同 — 脚本会自动将两张图像调整为较小图像的尺寸。为获得最佳效果，请使用尺寸相同的图像。

误报过多 — 提高阈值（例如 0.2）。不同浏览器之间常见抗锯齿差异。

评论

支持 Markdown