What is Designfit?
Designfit is an MCP server that validates an AI-built front end against its Figma design. It extracts the frame, measures the rendered page in a browser, and compares design tokens and element geometry rather than pixels. The result is a pass flag, a score and a fix list.
The README opens with a real run on a 360-node Figma frame. The extract tool read the frame from its link, and the validate tool then scored three build iterations: 87, then 89, then 100 pass.
Designfit exists because screenshot diffing makes agents thrash. Anti-aliasing and sub-pixel shifts read as still wrong, so the agent keeps fixing. Designfit measures what a designer would catch instead.
What it measures
- Design tokens, such as wrong colors and sizes.
- Geometry, meaning element boxes relative to the screen root, which catches misalignment.
- Presence, so missing elements are part of the check alongside tokens and geometry.
- Explicit tolerances, which you can override per call, so the same input always gives the same output.
The fidelity loop
- Give the agent a Figma frame link and ask it to implement the design.
designfit_extractreturns the design, a component map and the viewport.- The agent builds the page and tags elements with
data-designfit-id. designfit_validatemeasures the render and returns violations.- The agent fixes and repeats until the result is pass, then strips the tags.
Scope and fit
Best for
- Anyone letting an agent build from a Figma link who needs an objective stopping rule.
- Teams already using the Figma MCP to read a design who want a check after the build.
- Setups that read designs through Framelink and want a conformance step once the page exists.
Not for
- Responsive work. Version 1 covers one viewport, and multi-breakpoint checks are on the roadmap.
- Judging taste. A perceptual fallback is only planned, so look to a Figma use skill for guidance on intent.
Use it with UiChemy
Designfit checks code an agent wrote against Figma. UiChemy's Figma to WordPress takes the other path and converts the same design into an editable WordPress page. Teams comparing both can click Get Started on uichemy.com.
Connect Designfit MCP: Check an AI-Built Page Against Its Figma Frame to your AI client
npm install -g designfitInstall through the Claude Code plugin
Run /plugin marketplace add as9978/designfit, then /plugin install designfit@designfit. The plugin registers both MCP tools and the designfit-fidelity-loop skill together.
Fetch the browser
Run npx playwright install chromium once. The measurement engine drives that browser.
Or install manually for another client
Run npm install -g designfit, then add the config snippet above. FIGMA_TOKEN is your Figma personal access token. Without one, extract accepts pasted nodes JSON.
Copy the skill on a manual install
Skills are not auto-loaded from a dependency, so copy skill/SKILL.md into your agent's skills directory. For Claude Code that is .claude/skills/designfit-fidelity-loop/SKILL.md.
Handle the Windows case
If your client cannot spawn a bare designfit, use the command npx with the arguments -y and designfit, or point node at dist/index.js inside node_modules.
Client configuration
{ "mcpServers": { "designfit": { "command": "designfit", "env": { "FIGMA_TOKEN": "<token>" } } } }Endpoints and ports
FIGMA_TOKENNeeded to fetch frames from Figma by link or file keyWhat you can do with it
- Tokens and geometry, not pixelsComparison uses design tokens and element boxes relative to the screen root, so font rendering noise never reads as a defect.
- Deterministic outputExplicit tolerances mean the same input gives the same output, which stops the agent from oscillating between fixes.
- Machine-actionable fix listValidation returns violations and unmapped elements the coding agent can act on directly, plus a score and a pass flag.
- Link-based extractionPaste a Figma link, give a file key and node id, or supply a pasted nodes body when no token is available.
- Skill that drives the loopThe designfit-fidelity-loop skill runs extract, build, tag, validate and fix until pass, then strips the tags.
- Browser-driven measurementA Playwright Chromium engine measures the rendered page, so the check reflects what the browser actually shows.
- Honest v1 scopeVersion 1 handles one viewport with token, geometry and presence checks. Multi-breakpoint and a perceptual fallback are roadmap items.
Tools it exposes
designfit_extract
Takes a Figma link, or a file key and node id, or a pasted nodes body, with an optional maxDepth, and returns the design, a component map and the viewport. Hidden nodes are skipped.
designfit_validate
Takes a URL, viewport, design, component map and optional tolerances, then returns a pass flag, a score, a violations list and unmapped elements.
Frequently asked questions
What is Designfit?
Designfit is an MCP server and Claude Code skill that checks a rendered implementation against its Figma design. It compares design tokens and geometry instead of pixels, then gives the coding agent a fix list and a pass or fail score.
How do I install Designfit?
For Claude Code, add the as9978/designfit plugin marketplace and install designfit@designfit. For any other MCP client run npm install -g designfit, add an mcpServers entry that runs designfit with FIGMA_TOKEN, and run npx playwright install chromium once.
Why does it compare geometry and tokens instead of pixels?
Screenshot diffing treats anti-aliasing and sub-pixel shifts as still wrong, so an agent can fix forever. Measuring colors, sizes, alignment and missing elements against explicit tolerances gives repeatable results, which is what lets the loop end.
Do I need a Figma token?
It helps. Fetching a frame needs FIGMA_TOKEN in the MCP server's environment, and the plugin asks once for a personal access token. The token is optional, because extract also accepts a pasted nodes body from the Figma API.
Does Designfit work with Claude Code and other agents?
The README targets Claude Code first, with a plugin install, and also documents a manual install for any other MCP client. On a manual install you copy skill/SKILL.md into your agent's skills directory yourself so it can be discovered.
Can it check mobile breakpoints?
Not yet. The README scopes version 1 to one viewport with token, geometry and presence checks. Responsive multi-breakpoint support and a perceptual VLM fallback are listed as roadmap items rather than shipped features.
What does a real run look like?
The README describes a 360-node Figma frame. The extract tool read it from its link, then validate scored three build iterations at 87, 89 and 100 pass, with no screenshot diffing involved at any point.
What license does designfit use?
Designfit is MIT licensed. It takes a Figma token in the MCP server's environment to fetch designs from a link. Check the repository README for the full requirements and setup before you run it against a real design file.