Match Reference — Development skill for Claude Code

match-reference

[](LICENSE)   

A coding-agent skill — for [Claude Code](https://claude.com/claude-code), [Codex](https://openai.com/codex/), Cursor, or any tool that reads `AGENTS.md` — plus standalone Node scripts, that rebuilds a frontend to look **(near) pixel-identical** to a visual reference: a design mockup, a screenshot of another site or app, a photo of a UI, or an existing page you want to clone.

Most visual tools stop at *"here's a red overlay, good luck."* This one **measures the gap and hands the agent a fix list it can execute** — for each wrong zone: what kind of mistake it is, how far off the colour is and in which direction, the exact element and CSS behind it, and a plain-language hypothesis of the cause — then iterates until it converges.


What makes it different

	Free OSS diff tools	Paid "Visual AI" (Applitools, Percy…)	match-reference
Runs locally, no SaaS	✅	❌	✅
Perceptual colour (ΔE), not raw pixels	⚠️ some	✅	✅
Output an agent can act on (per-element fix list)	❌	⚠️ (regression-focused)	✅
Rebuild from a foreign mockup/screenshot/photo	❌ (needs your own baseline)	❌	✅
Convergence verdict across iterations	❌	⚠️	✅

The empty quadrant — *local + perceptual + made for an LLM to rebuild-until-identical from an arbitrary image* — is exactly where this sits.

Example

The reference vs. an in-progress build with three mistakes — a lighter button blue, a greyed-out condition label, and tighter card padding:

| Reference | Your build | Diff (`3.72%`) | |---|