MCP server · Developer tools

pixelpact MCP server

Lets your AI measure a web page against a reference design and list every value that drifted.

Developer tools Design tools For it and development Developer Tools

pixelpact is a tool that reads a reference web page or Figma frame, writes down what it actually looks like, and then measures your own page against that record. It hands back a list of every size, color, spacing and state that is off, with the expected value, the actual value and the difference. It is handy for developers and designers who want proof that a page matches the design, not just an opinion.

What is an MCP server? The 30-second version

On its own, your AI can only chat. It cannot open a browser and look at a page. An MCP server is a small helper program that gives your AI a new skill, and here that skill is measuring a web page against a reference design. Once this helper is connected, your AI can ask pixelpact to read the reference, check your page, and come back with numbers instead of guesses.

What this MCP server does

You ask your AI to compare your page with a reference page. The AI uses this helper, and the helper opens both pages in a real browser. It reads the sizes, colors, spacing, fonts, hover states and focus states from the reference, then measures the same things on your page. It gives back one line per property that drifted, with the expected value, the measured value and the difference.

What you can do with it

Extract a contract from a live reference page or a Figma frame
Check your implementation against that contract and list every deviation
Compare screenshots pixel by pixel when values pass but the page still looks wrong
Read a short summary of a contract without opening the whole file
Measure hover, focus and animation values, not just layout
Run the same check again after fixes to see if the numbers improved

Try asking your AI

“Extract a contract from https://reference.example.com using the main selector and save it as contract.json”
“Check http://localhost:3000 against contract.json and show me every property that drifted”
“Compare the screenshots of my page and the reference and tell me the pixel difference”
“Give me a summary of the contract in contract.json”

What it gives back to you

You get a report in the chat with a table of deviations. Each line names the element, the property, the expected value, the actual value and the difference. You also get counts like how many checks passed and how many failed, and for pixel comparisons you get a percentage. If you ask for a contract summary, you get a short overview instead of the full file.

Before you start

What you need

Node.js 22.12 or newer
Playwright and the Chromium browser installed
A reference page or Figma frame to measure against
Your own page running somewhere, for example on localhost

Good to know

It opens pages in a real browser, so only point it at pages you are allowed to load, and remember that a passing check only means the values match, not that the page is perfect.

Install it with your AI

Add pixelpact MCP server to your AI, no technical skills needed

You don't install anything by hand. You copy one prompt, paste it into an AI that can work on your computer, and it checks, installs and connects the server for you, asking you when it needs something.

Sign in to get the install prompt

Members get a ready-made prompt that lets the Claude desktop app check pixelpact MCP server, install it and connect it for them, step by step. You don't need any technical skills: you copy, paste and answer a few questions. Your connected AI can also find and install any of the 4,609 MCP servers here for you.