Pixel Not Perfect

Check your coding agent's work against the design, down to the pixel.

Pixel Not Perfect is an MCP server that compares a rendered page with your design reference, whether that's a screenshot, a Figma export, a PDF or a live URL, and shows the agent exactly which regions differ. When it's your turn, open the page in Chrome, pin what needs work, and approve or reject each fix.

Works with any coding agent that supports MCP. No account, no lock-in.

Learn more at pixelnotperfect.dev.

Get Started

You need Node.js 20 or later and Google Chrome.

1. Install the server

Add Pixel Not Perfect to your coding agents with one command, then choose which agents to add it to. Your agents download and run the package; there is nothing else to install.

npx add-mcp @codeandfunction/pixelnotperfect --env "PIXELNOTPERFECT_ALLOWED_ROOTS=~/Designs" -g

Set PIXELNOTPERFECT_ALLOWED_ROOTS to the folders that hold your reference images and PDFs. The agent can read every folder you list, so keep it narrow.

To set it up by hand instead, add this to your MCP client's configuration:

{
  "mcpServers": {
    "pixelnotperfect": {
      "command": "npx",
      "args": ["-y", "@codeandfunction/pixelnotperfect"],
      "env": {
        "PIXELNOTPERFECT_ALLOWED_ROOTS": "~/Designs"
      }
    }
  }
}

2. Ask your agent to compare

Compare http://localhost:3000/login with ~/Designs/login.png and fix the differences.

The agent renders the page, compares it, fixes the code and repeats until the page is within the threshold.

3. Review in Chrome

Install the Pixel Not Perfect extension from the Chrome Web Store. Ask your agent for a visual review, open the page, and click Review this tab. Pin feedback on the page, talk each item through with the agent, and approve or reject every fix with before and after captures.

The server connects itself to the extension when it starts. Set PIXELNOTPERFECT_HOST_REGISTRATION=off to turn this off.

Reporting a Vulnerability

Email [email protected] with the details. Please do not disclose the issue publicly until it has been addressed.

License

Free to use, including on commercial projects, under the EULA. You may not resell, redistribute or rebrand it.

© Code and Function. All rights reserved.