メニュー
Pixel-level image comparison between two screenshots. Generates a visual diff overlay highlighting differences. Use for comparing Figma designs against web implementations.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when the conversation surfaces knowledge that code, types, tests, or git history can't reveal — the user explains a business rule or a spec, shares a gotcha, gives the why behind a decision, says "that's intentional, not a bug", or you hit a pitfall or dig up a non-obvious root cause while debugging. Record it into docs/lore/ before the session ends and it evaporates.
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.
Use when a project has no docs/lore/ yet and implicit knowledge starts coming up in conversation, or when the user asks to initialize, bootstrap, or set up project lore — scaffolds the docs/lore/ knowledge base.
Use when lore looks stale or noisy, when a lore-check report flags problems, or on a periodic sweep — finds stale, duplicate, or wrong entries, checks that code links and the README index still hold, and prunes obsolete content; marking over deleting, with confirmation for destructive actions.
| 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 改）