pixelpact — Claude Code MCP server: what it does, how to install
Extracts a visual spec from a reference webpage into a JSON contract and scores an implementation against it. Helps coding agents fix CSS with exact numbers.
claude mcp add pixelpact -- npx -y pixelpact-mcpWhat pixelpact does
Standard visual regression tools verify changes against an earlier snapshot. pixelpact works differently. It inspects an external reference site or design to capture live computed values. It writes dimensions, colors, font rules, spacing, hover behaviors, and keyframes into an inspectable JSON contract.
The MCP server exposes four tools: extract_contract, check_implementation, diff_pixels, and read_contract_summary. Instead of vague image diffs, the agent receives line-by-line numerical deltas for each drifted CSS property. The agent adjusts the stylesheet and measures again on its own.
Running this tool requires Node 22.12 or newer alongside Playwright with Chromium downloaded. Without an installed Chromium binary, pixelpact cannot render or inspect the DOM.
What it helps with
- extract layout dimensions and design tokens into a JSON contract
- audit local web pages against an external reference URL
- return exact CSS property deltas to an autonomous coding agent
- inspect interactive hover and focus states without manual browser checks
Example prompts for the agent
- Extract a design contract from
https://reference.example.comand save it tocontract.json - Run pixelpact against
http://localhost:3000usingcontract.jsonand fix the broken margins - Show the pixel diff between the reference header and our current implementation
How to install pixelpact
Platform CLI
claude mcp add pixelpact -- npx -y pixelpact-mcpPlatform CLI
codex mcp add pixelpact -- npx -y pixelpact-mcpConfig file
{
"mcpServers": {
"pixelpact": {
"command": "npx",
"args": [
"-y",
"pixelpact-mcp"
]
}
}
}Config file
{
"servers": {
"pixelpact": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"pixelpact-mcp"
]
}
}
}Platform CLI
gemini mcp add pixelpact npx -y pixelpact-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about pixelpact
How to install pixelpact in Claude Code?
Run claude mcp add pixelpact -- npx -y pixelpact-mcp. Make sure your system has Node 22.12 or newer and run playwright install chromium beforehand.
What does pixelpact do?
It extracts computed layout metrics and styles from a target reference page into a structured contract. Then it compares your implementation against that spec and reports exact numeric differences.
How does pixelpact differ from Chromatic or Percy?
Regression test suites verify changes against an earlier snapshot of the same build. pixelpact benchmarks ongoing work against a target reference design from day one, outputting property deltas rather than image diffs.
