Stats
Actions
Tags
Compares screenshots pixel-by-pixel, generating visual diff overlays with highlights and JSON stats on differences. Use for Figma designs vs web implementations and CSS visual regressions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-visual-reviewer:pixel-diffThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
兩張截圖的像素級比對，產出差異視覺化圖。
兩張截圖的像素級比對，產出差異視覺化圖。
Pillow 和 numpy：pip install Pillow numpypython 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） |
{
"total_pixels": 2073600,
"diff_pixels": 12450,
"diff_percentage": 0.60,
"diff_regions": [
{"x": 100, "y": 200, "width": 300, "height": 50, "label": "region_1"}
]
}
npx claudepluginhub mukiwu/muki-ai-plugins --plugin figma-visual-reviewerDetects UI visual regressions via screenshot comparisons using Playwright, Cypress, Percy. Generates diffs, handles responsive breakpoints, and integrates with CI.
Detects visual and UI regressions via screenshot comparison and pixel-diff analysis using Playwright or Puppeteer. Captures cross-browser/viewport screenshots, categorizes layout shifts and color changes, generates diff reports for CI/CD PR checks.
Use when a backpressured loop has a front-end/UI change and needs to compare the rendered result against its design reference (a Figma frame or images on a Linear ticket) — catching layout, spacing, contrast, and visual-consistency defects automated tests and happy-path clicking miss.