How do I install Designfit?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does Designfit need an API key?

The publisher lists these environment variables: FIGMA_TOKEN.

What transport does Designfit use?

Designfit runs locally over stdio.

When was Designfit last checked?

Last checked 2026-11-09. Validate AI-built front-ends against Figma by tokens and geometry, not pixels.

Designfit MCP server

Power your agent

Add this server

The publisher's own command. Not a PlugMCP endpoint.

Add to Cursor Add to VS Code Run on PlugMCP

Host a copy with our keys and logs.

Local command

npx -y [email protected]

Credentials from the publisher

FIGMA_TOKEN — Figma personal access token. Lets designfit_extract fetch frames; without it, pass the /nodes JSON instead.

Claude Code has no install link for a local command. Copy the command below and run it in a terminal.

shClaude Code

1FIGMA_TOKEN=<secret> claude mcp add io.github.as9978-designfit -- npx -y designfit@0.2.1

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "io.github.as9978-designfit": {4      "command": "npx",5      "args": [6        "-y",7        "[email protected]"8      ],9      "env": {10        "FIGMA_TOKEN": "<secret>"11      }12    }13  }14}

claude_desktop_config.json

Local · npmPublisher installStep-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

Run on PlugMCP

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

Launch

Server facts

Local

Transport: stdio
Version: 0.2.1
API key

Tools

No tool list yet. Remote servers get one after the first health check.

FAQ

Questions

designfit

Validate AI-built front-ends against their Figma design — without the screenshot-diff thrash.

https://github.com/user-attachments/assets/01df52c9-90eb-4abc-b56c-fe18b31076cd

A real run on a 360-node Figma frame: designfit_extract reads the frame from its link, then designfit_validate scores three build iterations, 87 to 89 to 100 pass. No screenshot diffing anywhere in it.

designfit is an MCP server + Claude Code skill that checks a rendered implementation against its Figma design and hands the coding agent a machine-actionable fix-list. It compares design tokens and geometry (element boxes relative to the screen root) — not raw pixels — so font-rendering noise never makes the agent oscillate. Deterministic in, deterministic out.

Why geometry, not pixels

Screenshot-diffing an AI-built UI against a Figma frame thrashes: anti-aliasing and sub-pixel shifts read as "still wrong," so the agent fixes forever. designfit compares what a designer actually catches — wrong colors, wrong sizes, misalignment, missing elements — as deterministic measurements with explicit tolerances. Same input, same output, no oscillation.

The long version: Why screenshot-diffing AI-built UIs thrashes, and how geometry fixes it.

Install

Claude Code — as a plugin:

/plugin marketplace add as9978/designfit
/plugin install designfit@designfit

Then once, to fetch the browser the measurement engine drives:

npx playwright install chromium

The plugin registers the designfit_extract and designfit_validate MCP tools and the designfit-fidelity-loop skill together, and asks once for a Figma personal access token (optional: without it, extract accepts pasted /nodes JSON).

Any other MCP client — manually:

npm install -g designfit
npx playwright install chromium

{ "mcpServers": { "designfit": { "command": "designfit", "env": { "FIGMA_TOKEN": "<token>" } } } }

Windows: some MCP clients can't spawn a bare designfit (it resolves to designfit.cmd). Use { "command": "npx", "args": ["-y", "designfit"] }, or point at the binary directly with { "command": "node", "args": ["<absolute-path>/node_modules/designfit/dist/index.js"] }. The plugin install above already uses the npx form, so it isn't affected.

Use

Ask your agent to implement a Figma frame and give it the frame's link. The designfit-fidelity-loop skill drives: designfit_extract → build → tag elements with data-designfit-id → designfit_validate → fix → repeat until pass → strip the tags.

If you installed the plugin, the skill is already registered. On a manual install it isn't: skills aren't auto-loaded from an npm dependency, so copy the one that ships at skill/SKILL.md into your agent's skills directory (for Claude Code: .claude/skills/designfit-fidelity-loop/SKILL.md) so it can be discovered.

Two tools:

designfit_extract takes a Figma link ({ url }), or { fileKey, nodeId }, or a pasted GET /v1/files/:key/nodes body ({ nodes }), plus optional maxDepth, and returns { design, componentMap, viewport }. Fetching needs FIGMA_TOKEN in the MCP server's environment. Hidden nodes are skipped and a frame made only of vectors is one leaf.
designfit_validate takes { url, viewport, design, componentMap, tolerances? } and returns { pass, score, violations, unmapped }.

For a full walkthrough on a real Figma frame — the loop, a copy-paste prompt, and troubleshooting — see docs/validating-a-figma-frame.md.

v1 scope

One viewport. Token + geometry + presence checks. Responsive multi-breakpoint and a perceptual VLM fallback are on the roadmap, not in v1.

License

MIT

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install Designfit?

Does Designfit need an API key?

What transport does Designfit use?

When was Designfit last checked?

Documentation

designfit

Why geometry, not pixels

Install

Use

v1 scope

License