hiimbomb1999/mcp-perfectpixel

本页由 AI 翻译，技术细节请以原文为准。查看原文

6 stars 3 forks 质量 78 趋势 22MIT

概览

mcp-perfectpixel is an MCP server that screenshots a live URL and diffs it against a static design image (PNG/JPG), returning — not raw pixel noise — each traced to its DOM element, real source location, and a minimal patch suggestion. Capture is (animations disabled, fonts fully loaded, fixed locale/timezone), so re-runs are stable enough to reason about pixel-by-pixel. It is a verification tool, not a design tool: it does not read Figma files, does not generate code, and does not know what framework you use. It closes the loop the other MCP tools leave open — "did the final result actually match the design?" Shipping pixel-perfect themes for usually goes like this: the build itself is fast, but the final pass is a slow, manual, zoom-and-compare chore — and it is exactly the step AI coding agents get wrong (wrong spacing, off-by-one colors, missing tokens).

README

以下为原文 README 节选，完整内容请查看原文。

mcp-perfectpixel

The missing verification layer for AI design-to-code workflows.

mcp-perfectpixel is an MCP server that screenshots a live URL and diffs it against a static design image (PNG/JPG), returning grouped diff regions with severity scores — not raw pixel noise — each traced to its DOM element, real source location, and a minimal patch suggestion. Capture is deterministic (animations disabled, fonts fully loaded, fixed locale/timezone), so re-runs are stable enough to reason about pixel-by-pixel.

It is a verification tool, not a design tool: it does not read Figma files, does not generate code, and does not know what framework you use. It closes the loop the other MCP tools leave open — “did the final result actually match the design?”

Why this exists

Shipping pixel-perfect themes for BigCommerce, Shopify, WordPress and landing pages usually goes like this: the build itself is fast, but the final “does it match the design” pass is a slow, manual, zoom-and-compare chore — and it is exactly the step AI coding agents get wrong (wrong spacing, off-by-one colors, missing tokens).

mcp-perfectpixel automates that verification loop: screenshot the live URL, diff against the design image, get grouped regions + source locations + minimal patches, fix, and re-run until similarity: 1.0. The calling agent (Claude Code, Cursor, DeepSeek Agent, Codex) applies the fixes — the server supplies accurate, structured evidence and stops there.

Where it fits

Three MCP servers, three moments of the design-to-code loop — they complement, not compete:

	Figma MCP	Chrome DevTools MCP	mcp-perfectpixel
Gives you	Structured design data — node tree, styles, variables, tokens, generated code	Live DOM / CSS / console / network debugging of the running page	Pixel-level verification — diff of the final render against the design image

在 GitHub 查看完整 README

安装

npx -y mcp-perfectpixel

新手？先看 mcpskill.org 教程 →

配置

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