# pixelpact

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 16
- Author: jamalkamaladdin
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/jamalkamaladdin/pixelpact
- Updated: 2026-10-17
- HTML: https://affpapa.org/en/nevibecode/mcp/pixelpact

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add pixelpact -- npx -y pixelpact-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add pixelpact -- npx -y pixelpact-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "pixelpact": {
            "command": "npx",
            "args": [
                "-y",
                "pixelpact-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "pixelpact": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "pixelpact-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add pixelpact npx -y pixelpact-mcp
```

## When to use it
- 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
- Extract a design contract from `https://reference.example.com` and save it to `contract.json`
- Run pixelpact against `http://localhost:3000` using `contract.json` and fix the broken margins
- Show the pixel diff between the reference header and our current implementation

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74569
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4406
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3451

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md