visual-diff

What problem does it solve?

This Skill measures how closely a rendered replica matches its reference capture and pinpoints where visual fidelity breaks down so refinement agents can prioritize fixes.

Core Features & Use Cases

• Pixel-level comparison: Generate pixelmatch diffs and red/yellow visualizations that expose exact pixel divergences and compute an aggregate fidelity score.
• Structural critique: Use LLM-guided vision prompts to interpret layout and token-level mismatches that pixel diffs alone cannot explain.
• Token traceability & gating: Map drift regions back to design tokens, flag blocking failures (for example wrong font family or hero colour), and apply plateau detection to stop endless iteration.
• Use Case: Validate replicas during the design-extraction pipeline, drive the refinement loop by locating problem regions, or run ad-hoc replica-vs-reference comparisons to produce gate verdicts.

Quick Start

Run visual-diff to compare replica.png with reference.png and produce a pixel diff image, a visual drift map, and a fidelity score.