Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub mukiwu/muki-ai-plugins --plugin figma-visual-reviewerHow 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
兩張截圖的像素級比對，產出差異視覺化圖。
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.
Performs visual regression testing by capturing and comparing Playwright screenshots before/after changes across desktop, tablet, and mobile viewports to detect layout shifts, color changes, and UI bugs.
Share bugs, ideas, or general feedback.
兩張截圖的像素級比對，產出差異視覺化圖。
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"}
]
}