Pixelpact

Extract a visual contract from a reference page and measure an implementation against it

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "pixelpact": {
      "command": "npx",
      "args": [
        "-y",
        "pixelpact"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

Your coding agent cannot see the page it just built. pixelpact measures it against the 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.

Terminal

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: extract_contract, check_implementation, diff_pixels, read_contract_summary.

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.
❌ A regression tool has nothing to compare a brand new page against, so its first run records whatever you happened to build.	✅ The reference is the baseline from the first minute. Nothing has to be approved before the tool is useful.
❌ Hover, focus and animation values are almost never reviewed, because checking them by hand is slow and boring.	✅ They are part of the contract, so they are measured on every run like any other value.
❌ An image diff tells you that something changed and leaves you to hunt for what.	✅ Deviations name the element, the property, the expected value and the measured one.
❌ The design lives in a file nobody opens during code review.	✅ The contract is committed JSON, so a pull request shows exactly which values moved.

Install

bash

pnpm add -D pixelpact playwright
pnpm exec playwright install chromium

playwright is a peer dependency, so the browser download stays under your control and a project that already has Playwright installs nothing extra. Node 22.12 or newer is required.

Quickstart

1. Extract the contract from the reference.

Terminal

npx pixelpact extract https://reference.example.com \
  --selector "main" \
  --viewport desktop,mobile \
  --screenshots .pixelpact/shots \
  -o contract.json

2. Measure your implementation.

Terminal

npx pixelpact check contract.json http://localhost:3000 --viewport desktop

3. Fix what it reports, then run it again. The command exits 0 when everything is inside tolerance and 1 when it is not, so it drops straight into a script or a CI job.

What a contract looks like

A contract is plain JSON, readable and diffable, with no proprietary format and no service behind it.

JSON Config

{
  "version": 1,
  "source": { "type": "url", "value": "https://reference.example.com" },
  "root": "main",
  "extractedAt": "2026-09-06T01:20:44.812Z",
  "viewports": [{ "name": "desktop", "width": 1440, "height": 900 }],
  "tokens": { "--brand-600": "rgb(11, 114, 133)" },
  "keyframes": { "fade-up": [{ "offset": "0%", "css": "opacity: 0" }] },
  "byViewport": {
    "desktop": {
      "documentHeight": 4218,
      "elements": [
        {
          "selector": "main > header > a.cta",
          "tag": "a",
          "text": "Get started",
          "box": { "x": 120, "y": 32, "w": 148, "h": 44 },
          "styles": {
            "background-color": "rgb(11, 114, 133)",
            "font-size": "16px",
            "border-radius": "8px"
          },
          "hover": { "background-color": "rgb(8, 90, 105)" },
          "focus": { "outline": "2px solid rgb(11, 114, 133)" }
        }
      ]
    }
  }
}

Because it is a file, you can commit it, review it in a pull request, hand it to another developer, or hand it to an agent.

What a check prints

text

pixelpact check  FAILED
  target    http://localhost:4173/impl.html
  reference http://localhost:4173/ref.html
  viewport  desktop 1440x900
  elements  14 matched, 0 missing of 14
  checks    1056 passed, 10 failed (99.1% of 1066)

deviations (10)
SELECTOR          PROPERTY                  EXPECTED                ACTUAL                  DIFF
body > main > h1  font-size                 48px                    44px                    4px
body > main > a   box.width                 117.75px                109.75px                8px
body > main > a   padding-right             24px                    20px                    4px
body > main > a   padding-left              24px                    20px                    4px
body > main > a   background-color          rgb(11, 114, 133)       rgb(37, 99, 235)        60.1 (color)
body > main > a   border-top-left-radius    8px                     4px                     4px
body > main > a   border-top-right-radius   8px                     4px                     4px
body > main > a   border-bottom-left-ra...  8px                     4px                     4px
body > main > a   border-bottom-right-r...  8px                     4px                     4px
body > main > a   focus.outline             rgb(11, 114, 133) s...  rgb(37, 99, 235) so...  differs

That is a real run against two copies of one page with four declarations changed. Four edits produce ten measured deviations, because padding moves the box width and one border-radius shorthand sets four corners. Run the same check against the reference itself and all 1066 assertions pass, which is the property that matters: a passing check has to mean something.

Add --json to get the same report as a data structure, which is what CI jobs and agents read.

What a side by side run shows

check says which values moved. diff says how many pixels moved. Neither tells a person where to look. side splits both pages into sections, puts them next to each other, and boxes what differs.

Terminal

npx pixelpact side https://reference.example.com http://localhost:3000 --widths 1440,390

text

#   SECTION   WIDTH   VERDICT  DIFF
01  hero      1440px  PASS     0.000%
02  features  1440px  FAIL     0.675%
  .pixelpact/side/1440/02-features.png
03  pricing   1440px  PASS     0.000%
04  foot      1440px  FAIL     1.265%
  .pixelpact/side/1440/04-foot.png

One section compared side by side, differences boxed in red

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Pixelpact

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "pixelpact": { "command": "npx", "args": ["-y", "pixelpact"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/pixelpact?style=directory)](https://allmcps.com/mcp/pixelpact)

HTML Embed

<a href="https://allmcps.com/mcp/pixelpact"><img src="https://allmcps.com/api/badge/pixelpact?style=directory" alt="Pixelpact on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

37Quality signal: Fair · 37/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity2/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

AllMCPs Server

The official MCP server for AllMCPs.com - submit and manage tools directly from your AI. The open directory for MCP servers. Connect Claude, Cursor, Windsurf, and AI agents to databases, tools, files, and APIs. Explore 10,000+ servers. AllMCPs is the premier, open directory for discovering, evaluating, and installing Model Context Protocol (MCP) servers to equip AI agents and LLMs with real-world superpowers.

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Pixelpact →Install in Claude Desktop Install in Cursor Install in VS Code

Pixelpact

Extract a visual contract from a reference page and measure an implementation against it

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "pixelpact": {
      "command": "npx",
      "args": [
        "-y",
        "pixelpact"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

Your coding agent cannot see the page it just built. pixelpact measures it against the reference and hands back numbers.

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.

Terminal

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

jsonc

// .mcp.json
{
  "mcpServers": {
    "pixelpact": { "command": "npx", "args": ["-y", "pixelpact-mcp"] }
  }
}

Tools exposed: extract_contract, check_implementation, diff_pixels, read_contract_summary.

Why this is not visual regression testing

	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.
❌ A regression tool has nothing to compare a brand new page against, so its first run records whatever you happened to build.	✅ The reference is the baseline from the first minute. Nothing has to be approved before the tool is useful.
❌ Hover, focus and animation values are almost never reviewed, because checking them by hand is slow and boring.	✅ They are part of the contract, so they are measured on every run like any other value.
❌ An image diff tells you that something changed and leaves you to hunt for what.	✅ Deviations name the element, the property, the expected value and the measured one.
❌ The design lives in a file nobody opens during code review.	✅ The contract is committed JSON, so a pull request shows exactly which values moved.

Install

bash

pnpm add -D pixelpact playwright
pnpm exec playwright install chromium

playwright is a peer dependency, so the browser download stays under your control and a project that already has Playwright installs nothing extra. Node 22.12 or newer is required.

Quickstart

1. Extract the contract from the reference.

Terminal

npx pixelpact extract https://reference.example.com \
  --selector "main" \
  --viewport desktop,mobile \
  --screenshots .pixelpact/shots \
  -o contract.json

2. Measure your implementation.

Terminal

npx pixelpact check contract.json http://localhost:3000 --viewport desktop

3. Fix what it reports, then run it again. The command exits 0 when everything is inside tolerance and 1 when it is not, so it drops straight into a script or a CI job.

What a contract looks like

A contract is plain JSON, readable and diffable, with no proprietary format and no service behind it.

JSON Config

{
  "version": 1,
  "source": { "type": "url", "value": "https://reference.example.com" },
  "root": "main",
  "extractedAt": "2026-09-06T01:20:44.812Z",
  "viewports": [{ "name": "desktop", "width": 1440, "height": 900 }],
  "tokens": { "--brand-600": "rgb(11, 114, 133)" },
  "keyframes": { "fade-up": [{ "offset": "0%", "css": "opacity: 0" }] },
  "byViewport": {
    "desktop": {
      "documentHeight": 4218,
      "elements": [
        {
          "selector": "main > header > a.cta",
          "tag": "a",
          "text": "Get started",
          "box": { "x": 120, "y": 32, "w": 148, "h": 44 },
          "styles": {
            "background-color": "rgb(11, 114, 133)",
            "font-size": "16px",
            "border-radius": "8px"
          },
          "hover": { "background-color": "rgb(8, 90, 105)" },
          "focus": { "outline": "2px solid rgb(11, 114, 133)" }
        }
      ]
    }
  }
}

Because it is a file, you can commit it, review it in a pull request, hand it to another developer, or hand it to an agent.

What a check prints

text

pixelpact check  FAILED
  target    http://localhost:4173/impl.html
  reference http://localhost:4173/ref.html
  viewport  desktop 1440x900
  elements  14 matched, 0 missing of 14
  checks    1056 passed, 10 failed (99.1% of 1066)

deviations (10)
SELECTOR          PROPERTY                  EXPECTED                ACTUAL                  DIFF
body > main > h1  font-size                 48px                    44px                    4px
body > main > a   box.width                 117.75px                109.75px                8px
body > main > a   padding-right             24px                    20px                    4px
body > main > a   padding-left              24px                    20px                    4px
body > main > a   background-color          rgb(11, 114, 133)       rgb(37, 99, 235)        60.1 (color)
body > main > a   border-top-left-radius    8px                     4px                     4px
body > main > a   border-top-right-radius   8px                     4px                     4px
body > main > a   border-bottom-left-ra...  8px                     4px                     4px
body > main > a   border-bottom-right-r...  8px                     4px                     4px
body > main > a   focus.outline             rgb(11, 114, 133) s...  rgb(37, 99, 235) so...  differs

Add --json to get the same report as a data structure, which is what CI jobs and agents read.

What a side by side run shows

check says which values moved. diff says how many pixels moved. Neither tells a person where to look. side splits both pages into sections, puts them next to each other, and boxes what differs.

Terminal

npx pixelpact side https://reference.example.com http://localhost:3000 --widths 1440,390

text

#   SECTION   WIDTH   VERDICT  DIFF
01  hero      1440px  PASS     0.000%
02  features  1440px  FAIL     0.675%
  .pixelpact/side/1440/02-features.png
03  pricing   1440px  PASS     0.000%
04  foot      1440px  FAIL     1.265%
  .pixelpact/side/1440/04-foot.png

One section compared side by side, differences boxed in red

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Pixelpact

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "pixelpact": { "command": "npx", "args": ["-y", "pixelpact"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/pixelpact?style=directory)](https://allmcps.com/mcp/pixelpact)

HTML Embed

<a href="https://allmcps.com/mcp/pixelpact"><img src="https://allmcps.com/api/badge/pixelpact?style=directory" alt="Pixelpact on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

37Quality signal: Fair · 37/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity2/15

Community engagement0/10

★ Featured

AllMCPs Server

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Pixelpact →Install in Claude Desktop Install in Cursor Install in VS Code