菜单
Pixel-level image comparison between two screenshots. Generates a visual diff overlay highlighting differences. Use for comparing Figma designs against web implementations.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/mukiwu/muki-ai-plugins --skill pixel-diff命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when asked whether the project's lore is healthy or still helping, or when the 30-day heartbeat suggests a re-check — audits coverage, link health, freshness, entry quality, adoption, and language health, read-only, then hands fixes off to lore-maintain, lore-capture, and lore-ul.
Use when about to plan a feature, fix a bug, or touch unfamiliar code in a repo that has a docs/lore/ folder, before writing any implementation — surfaces the business rules, pitfalls, glossary terms, and API map relevant to the task, and flags entries that look stale.
Use when about to commit, open a PR, or claim a change is done in a repo that has docs/lore/ — maps the changed files to lore entries through their code: links and reports any business rule, pitfall, or glossary naming rule the change violates. Read-only for both code and lore.
基于 SOC 职业分类
正在显示 SKILL.md
| name | pixel-diff |
| description | Pixel-level image comparison between two screenshots. Generates a visual diff overlay highlighting differences. Use for comparing Figma designs against web implementations. |
兩張截圖的像素級比對，產出差異視覺化圖。
Pillow 和 numpy：pip install Pillow numpypython "${CLAUDE_PLUGIN_ROOT}/scripts/pixel-diff.py" <image_a> <image_b> --output diff.png \
[--threshold 10] [--pass-below 5] [--block-above 15] [--ignore-region x,y,w,h]
腳本在 plugin 目錄裡，不在使用者專案裡——路徑一定要用 ${CLAUDE_PLUGIN_ROOT}，寫相對路徑會找不到檔案。
| 參數 | 必填 | 說明 |
|---|---|---|
image_a | 是 | 參考圖（設計稿） |
image_b | 是 | 比對圖（網頁截圖） |
--output | 否 | 差異圖輸出路徑（預設 diff.png） |
--threshold | 否 | 每像素色差敏感度 0-100（預設 10，值越低越嚴格）。這是「色差多大才算不同」，不是整體容許比例 |
--pass-below | 否 | 整體差異低於此百分比判 PASS（預設 5） |
--block-above | 否 | 整體差異高於此百分比判 BLOCK（預設 15），之間為 WARNING |
--ignore-region | 否 | 忽略區域 x,y,w,h，可重複——遮掉時鐘、輪播等動態內容 |
--background | 否 | 透明圖層合成的背景色（預設 white） |
--highlight-color | 否 | 差異標記顏色（預設 red） |
{
"total_pixels": 2073600,
"diff_pixels": 12450,
"diff_percentage": 0.60,
"diff_regions": [
{"x": 100, "y": 200, "width": 300, "height": 50, "label": "region_1"}
]
}
--scale 跟網頁截圖的 device pixel ratio 要一致--threshold 是每像素色差的敏感度：預設 10 會濾掉字型反鋸齒、瀏覽器渲染那類細微色差；降到 5 會抓得更細，但假差異也會變多--background 改）