Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
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-reviewerCompares two screenshots to decide which is less wrong against a visual target, not against a baseline. Provides side-by-side inspection, crop/zoom, metrics, heatmaps, and edge diffing for UI, game, document, or chart visual validation.
Detects 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.