Copycat
Lets a coding agent rebuild a UI it can see, then diff the result against the original.


- 1structureMissing list item "Audit trail"
- 2typographyHeading "Pricing" is 28px, reference is 32px
- 3spacingCard padding-top is 16px, reference is 24px
An open-source agent skill and browser toolkit. Point it at a live page, a local build or a screenshot. Playwright measures the reference: tokens, layout, responsive states and what each control really does. The agent rebuilds it in your stack, then a pixel and structural diff lists what still differs, most important first.
Node.js, Playwright and pixelmatch. Runs in Claude Code, Codex, Cursor and Antigravity. MIT licensed.
$ copycat compare --reference … --local … desktop: 3.72% pixels differ, 44/45 elements matched 1. [structure] Missing listitem "Audit trail" [typography] heading "Pricing": 32px → 28px [spacing] section: paddingTop 24px → 16px $ # fix, run again iteration 2 · desktop: 0.00% pixels differ
How it works
- Plan. Pick one scope: a component, page, flow, full site, screenshot, tokens, an audit or a compare.
- Inspect. Open the reference in real Chromium at each viewport and record screenshots, DOM, computed styles and breakpoints.
- Probe. Click menus, tabs and dialogs safely and record what actually changes.
- Build. The agent rebuilds the scope in your stack, with working controls.
- Compare. Run a pixel and structural diff with unstable pixels masked, and rank the fixes.
- Report. Only measured facts. Mocks and guesses are labelled as such.



