skills.rest
mukiwu
mukiwuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixel-diff

Compare two images to produce a pixel-level visual diff and JSON report.

58|5|Updated Mar 23, 2026
Search Tags:#figma#screenshot#visual-regression#pixel-diff#pillow#visual-diff#image-comparison
One-click install
npx skills add https://github.com/mukiwu/muki-ai-plugins --skill pixel-diff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixel-diff
Source: https://github.com/mukiwu/muki-ai-plugins/tree/main/plugins/figma-visual-reviewer/skills/pixel-diff
Command: npx skills add https://github.com/mukiwu/muki-ai-plugins --skill pixel-diff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Detects fine-grained visual differences between a reference design image and an implementation screenshot so designers and QA can catch regressions or unintended UI changes before release.

Core Features & Use Cases

  • Pixel-accurate image comparison that generates a visual overlay marking changed pixels.
  • Automatic handling of resolution mismatches by resizing, configurable pixel-difference threshold, and selectable highlight color.
  • Outputs a diff image and a JSON summary with total pixels, diff pixel count, percentage, and diff regions for reporting and triage.
  • Use cases include comparing Figma exports to live pages, verifying CSS changes, and tracking UI variations across versions.

Quick Start

Run the pixel-diff script with the design image as image_a and the implementation screenshot as image_b to produce diff.png and a JSON summary.

Frequently Asked Questions about pixel-diff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare a Figma export to a browser screenshot for visual differences?▼

Visual regression testing detects pixel-level changes between a reference design and an implementation screenshot. It outputs a diff image highlighting changed pixels and a JSON report with diff pixel count and percentage for QA triage.

How do I handle image comparison when the design and screenshot have different resolutions?▼

When performing image comparison with mismatched resolutions, the visual diff process automatically resizes the inputs. This ensures accurate pixel comparison without manual scaling before generating the diff overlay.

Can I adjust the sensitivity threshold for pixel differences during image comparison?▼

Yes, you can configure a pixel-difference threshold during image comparison. This allows you to ignore minor color variations and only highlight significant layout or style changes in the resulting diff image.

What details are included in the JSON report from a visual diff?▼

The JSON report from a visual diff includes total pixels, diff pixel count, percentage of changed pixels, and diff regions. This data provides a quantitative summary for tracking UI variations across versions.

Do I need specific libraries to run a pixel diff between two images?▼

Running a pixel diff between two images requires Pillow and numpy for image processing. These libraries handle the image manipulation and array computations needed to produce the visual diff overlay.

Related Skills

Explore More Design & Creative Skills→
Eva813Eva813
2

figma-export

Export Figma frames as PNG images via a Python script.

Community
Intermediate
pacphipacphi
6

visual-testing-advanced

Compare screenshots across devices with AI-assisted diff analysis.

Community
Advanced
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced
EvolutionAPIEvolutionAPI
520

dev-visual-verdict

Compare before and after screenshots to detect visual regressions in UI components.

Official
Intermediate