jamalkamaladdin/pixelpact

reference and hands back numbers.
A coding agent writes the CSS and says it is done. It never sees the result. Nothing hands it a
number, so the loop cannot close: the agent guesses, you open the page, you send it back, it
guesses again. Every round costs you the one thing the agent was supposed to save.
The same gap exists without an agent, when a teammate says a section is finished and nobody in
the room has a measurement. The difference is that a person can at least look.
pixelpact reads the reference page and writes down what it actually renders: sizes, colors,
spacing, typography, hover and focus states, animation keyframes, design tokens. That file is
the contract. Point pixelpact at the implementation and it answers with one line per
property that drifted, which is precisely what an agent can act on.
bash
npx pixelpact extract https://reference.example.com -o contract.json
npx pixelpact check contract.json http://localhost:3000
## Works with
| MCP clients | Playwright | GitHub Actions | Any framework | Figma |
| Claude Code, Cursor, anything that speaks stdio MCP | the engine it drives | one comment on the pull request | it reads the DOM, not your stack | a frame as the reference, when you want one |
If a browser can render it, pixelpact can measure it.
## For coding agents
An agent that writes UI code cannot tell whether it succeeded. pixelpact-mcp gives it the
measurement, so the loop closes without a person in the middle: extract the contract once,
then let the agent check its own work, read the deviation list, fix, and check again.
jsonc
// .mcp.json
"mcpServers": {
"pixelpact": { "command": "npx", "args": ["-y", "pixelpact-mcp"] }
Tools exposed: extractcontract, checkimplementation, diffpixels,
readcontractsummary.
## Why this is not visual regression testing
Percy, Chromatic, Applitools, BackstopJS and Pixeleye all compare your page against a baseline
that you approved earlier. That model works once the page already looks right and you want to
keep it that way. While you are still building toward a design, there is no baseline to
compare with, and the first run of a regression tool simply records whatever you produced.
| | Visual regression tools | pixelpact |
| Compares against | a snapshot you approved earlier | the reference design itself |
| Useful when | the UI is already correct | the UI is being built |
| First run on a new page | records, cannot judge | measures against the reference |
| Answer you get | an image diff to inspect by eye | a value per property, with a delta |
| Fits an autonomous agent | needs a human to approve the diff | the numbers close the loop |
The two models are complementary. Use a regression tool to keep a finished page finished, and
pixelpact to get it finished in the first place.
## Problems pixelpact solves
| Without pixelpact | With pixelpact |
| ❌ A coding agent writes CSS, declares it done, and a person has to open the page to find out that it is not. | ✅ The agent calls the MCP server, reads the deviations, fixes them and checks again. No person in the middle. |
| ❌ Someone says the section is finished, you disagree, and neither of you has a number. The louder opinion wins. | ✅ Every value in the reference is asserted against your page. What failed is listed with expected, actual and the difference. |