skills.rest
Eva813
Eva813COMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixel-diff

Compare two screenshots at the pixel level and generate a diff image with JSON statistics.

2|1|Updated Jan 3, 2026
Search Tags:#figma#screenshot#numpy#visual-regression#pixel-diff#pillow#image-comparison
One-click install
npx skills add https://github.com/Eva813/skills-base --skill pixel-diff-eva813
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixel-diff
Source: https://github.com/Eva813/skills-base/tree/main/.agents/skills/figma-visual-reviewer/skills/pixel-diff
Command: npx skills add https://github.com/Eva813/skills-base --skill pixel-diff-eva813

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, numpy, and includes scripts (resource) components.

What problem does it solve?

Identify and visualize pixel-level differences between two images to quickly find visual regressions and mismatches between a design (e.g., Figma) and an implementation (e.g., web screenshot).

Core Features & Use Cases

  • Pixel-level comparison that highlights differing pixels and regions with a configurable threshold and highlight color.
  • Visual diff output: produces a diff image with differences marked and a JSON summary containing total pixels, diff count, percentage, and bounding regions.
  • Use Cases: validating Figma designs against browser renderings, detecting CSS regressions after deployments, and tracking UI changes between versions.

Quick Start

Run the pixel-diff script with your design file and implementation screenshot paths to generate a visual diff image and a JSON summary, for example python scripts/pixel-diff.py design.png implementation.png --output diff.png

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 design with a web screenshot for visual differences?▼

To compare a Figma design with a web screenshot, you can run a pixel-level comparison script that highlights differing pixels and generates a visual diff image alongside a JSON report of difference statistics.

What is visual regression testing and how does pixel comparison work?▼

Visual regression testing detects unintended UI changes by comparing screenshot pixels. This script identifies differing pixels, applies a configurable threshold, and outputs a highlighted diff image with bounding regions and a JSON summary.

Do I need to manually resize images before comparing screenshots with Pillow and numpy?▼

You do not need to manually resize images before comparing screenshots. The script supports automatic resizing to match resolutions when comparing images of different sizes using Pillow and numpy.

Can I get a JSON report of difference statistics when detecting CSS regressions?▼

Yes, you can get a JSON report of difference statistics when detecting CSS regressions. The script produces a JSON summary containing total pixels, diff count, percentage, and bounding regions.

What's the best way to track UI changes between versions using Python?▼

The best way to track UI changes between versions is running a Python script that compares screenshot pixels using Pillow and numpy, generating a highlighted diff image and a JSON summary of visual regressions.

Related Skills

Explore More Design & Creative Skills→
Eva813Eva813
2

figma-export

Export Figma frames as PNG images via a Python script.

Community
Intermediate
carlkiblercarlkibler
3

visual-qa-loop

Compares before/after screenshots to identify UI visual regressions.

Community
Intermediate
mukiwumukiwu
58

pixel-diff

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

Community
Intermediate
cornmanwtfcornmanwtf

visual-regression-tester

Compare screenshots and generate pixel difference reports for visual consistency.

Community
Intermediate