SuperAPI AI 工具集

pixel-diff

设计与创作

查看项目

更新于 10-15 21:39

技能介绍

用途:对两张截图做像素级比对,输出差异可视化图,常用于比对 Figma 设计稿与网页截图、检测 CSS 变更造成的视觉回归、追踪前后版本的 UI 变化。

主要能力:生成差异叠加图,差异区域以半透明颜色标记;在 stdout 输出 JSON 统计数据,包含 total_pixels、diff_pixels、diff_percentage 以及 diff_regions(含 x、y、width、height、label)。

前置条件:安装 Pillow 和 numpy:pip install Pillow numpy

使用方式:python scripts/pixel-diff.py <image_a> <image_b> --output diff.png [--threshold 5] [--highlight-color red]

参数:image_a 必填,参考图(设计稿);image_b 必填,比对图(网页截图);--output 可选,差异图输出路径,默认 diff.png;--threshold 可选,像素差异容许值 0-100,默认 10,值越低越严格;--highlight-color 可选,差异标记颜色,默认 red。

限制与注意:两张图必须分辨率相同,不同时会自动 resize 较大的那张;threshold 10 适合一般比对,设为 5 可抓更细微差异;字体反锯齒差异通常在 threshold 10 以下会被过滤。其他平台支持、收费与效果信息暂未提供。