designfit
Validates AI-built front-ends against Figma designs by extracting design tokens, component mappings, and geometry from Figma frames, then returning deterministic token, geometry, and presence violations with a pass/fail score.
designfit

Validate AI-built front-ends against their Figma design — without the screenshot-diff thrash.
▶ Watch the demo — the fidelity loop closing in real time: Figma and the build side by side, score climbing to 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.
Related MCP server: Figma Console MCP Server
Install
Claude Code — as a plugin:
/plugin marketplace add as9978/designfit
/plugin install designfit@designfitThen once, to fetch the browser the measurement engine drives:
npx playwright install chromiumThe 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 todesignfit.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 thenpxform, 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_extracttakes a Figma link ({ url }), or{ fileKey, nodeId }, or a pastedGET /v1/files/:key/nodesbody ({ nodes }), plus optionalmaxDepth, and returns{ design, componentMap, viewport }. Fetching needsFIGMA_TOKENin the MCP server's environment. Hidden nodes are skipped and a frame made only of vectors is one leaf.designfit_validatetakes{ 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
Available Tools
2 toolsdesignfit_extractExtract a design spec from FigmaA
Turn a Figma frame into the design spec designfit_validate expects. Give it a Figma link (https://www.figma.com/design//...?node-id=...), or fileKey + nodeId, and it fetches the node via Figma's REST API using the FIGMA_TOKEN env var; or paste the raw GET /v1/files/:key/nodes response as nodes and nothing is fetched. Returns { design, componentMap, viewport }: add url and call designfit_validate. Deterministic. Hidden nodes are skipped; a frame made only of vectors is one leaf (an icon). maxDepth limits how deep to go.
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | ||
| nodes | No | ||
| nodeId | No | ||
| fileKey | No | ||
| maxDepth | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does well: it discloses the FIGMA_TOKEN env var auth dependency, that fetching goes through Figma's REST API, determinism, hidden-node skipping, and vector-only frames collapsing to a single leaf. It does not cover error behavior or rate limits, so it falls just short of exhaustive.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Dense but front-loaded, moving from purpose to input modes to return shape to call-site instruction. Every clause carries information; nothing is padding for a five-parameter tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, but the description names the return shape { design, componentMap, viewport }, which covers the gap. Combined with full parameter coverage and the auth/fetch explanation, an agent has what it needs, though the nested `nodes` object shape is left to the raw API response.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 0%, so the description must compensate and largely does: it shows the `url` format with an example, explains `fileKey` + `nodeId` as the alternative, documents `nodes` as a raw GET /v1/files/:key/nodes passthrough, and defines `maxDepth` as depth limit. It does not state precedence if both `url` and `nodes` are supplied, leaving one ambiguity.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Specific verb+resource: 'Turn a Figma frame into the design spec designfit_validate expects.' It names the downstream sibling explicitly, so an agent can place it in the workflow without opening either schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It lays out the input modes clearly (Figma URL, or fileKey + nodeId, or paste a raw nodes response with no fetch) and routes to designfit_validate with 'add `url` and call designfit_validate'. No explicit when-not-to-use case, but the alternatives are enumerated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
designfit_validateValidate design fidelityA
Validate a rendered front-end against its Figma design. Tag each built element with data-designfit-id="", pass the design spec (geometry + tokens, from designfit_extract or relayed from Figma's MCP), the running URL, and the component map. Returns a fidelity score and a machine-actionable fix-list of token, geometry, and presence violations.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | ||
| design | Yes | ||
| viewport | Yes | ||
| tolerances | No | ||
| componentMap | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does disclose two non-schema behaviors: the page must be instrumented with data-designfit-id before validation, and the tool returns a fidelity score plus a machine-actionable fix-list of token/geometry/presence violations. It omits auth/permission needs and any rate or rendering limitations, but the operational model is largely conveyed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences, front-loaded with purpose, then the setup/instrumentation requirement, then the return values. Dense and free of filler; every clause adds information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
There is no output schema, so the description correctly explains what comes back (fidelity score + fix-list). For a 5-param tool with nested objects and no annotations it is largely complete, though it leaves viewport and tolerance controls unexplained.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must compensate. It meaningfully clarifies that design is a geometry+tokens spec and that componentMap links selectors to figmaNodeId (via the data-designfit-id tagging), but it never mentions viewport or tolerances, leaving two of five parameters semantically undocumented.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource: 'Validate a rendered front-end against its Figma design.' It also distinguishes itself from its sibling by naming designfit_extract as the source of the design spec, so an agent can route between the two without opening either schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description lays out the preconditions for a successful call (tag elements with data-designfit-id, supply the spec, the running URL, and the component map) and points to designfit_extract / Figma's MCP as spec sources. It conveys the workflow clearly but does not state a when-not or an explicit alternative-validation path.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
2 tool updates
v0.2.0- First observed
designfit_extract - First observed
designfit_validate
TDQS
Scored across 2 tools
The two tools have clearly distinct roles: designfit_extract produces the design spec from a Figma frame, while designfit_validate consumes that spec to check a rendered page. Their descriptions explicitly chain them (extract → validate), leaving no ambiguity about which to call when.
Both tools follow the same `designfit_<verb>` pattern with snake_case, and the verbs (extract, validate) accurately describe each action.
Only two tools for the server's scope, which is borderline thin. The extract/validate pairing is well-chosen, but the surface is minimal and could justify helpers (e.g. token setup, batch validation).
The extract→validate pipeline fully covers the core workflow, from Figma frame to fidelity score and fix-list, including a way to bypass the REST fetch by passing raw nodes. Minor gaps exist around configuration/token setup and reporting, but agents can work around them.
Maintenance
Related MCP Connectors
- WhoogyOAuthcom.whoogy
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
Score any URL against a real design contract — 42 checks, A-F grade, token + motion validation.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Related MCP Servers
- AlicenseAqualityDmaintenanceConverts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.19 npmMIT
- AlicenseNot gradedqualityBmaintenanceBridges AI assistants with Figma for design system extraction, bidirectional token sync, visual debugging, and design creation.454 npm1MIT
- AlicenseNot gradedqualityDmaintenanceVerifies that AI-generated UI code matches Figma design specs by rendering components in a real browser, comparing computed CSS, and returning patch-ready fixes with scored parity reports.MIT
- AlicenseNot gradedqualityBmaintenanceDeterministic screenshot diffing for AI coding agents. Extract design tokens, diff implementations vs reference, get CSS fix suggestions.97 npm5MIT