Skip to main content
Glama

designfit

designfit validates an AI-built UI against its Figma design and returns a deterministic fix-list: token and geometry violations with the exact source token and delta, score 82 fail to 100 pass

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.

CI

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@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

Available Tools

2 tools
designfit_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.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlNo
nodesNo
nodeIdNo
fileKeyNo
maxDepthNo

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYes
designYes
viewportYes
tolerancesNo
componentMapYes

TDQS

A4.2/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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.

  1. 2 tool updatesv0.2.0
    • First observeddesignfit_extract
    • First observeddesignfit_validate

TDQS

A4.3/5.0

Scored across 2 tools

Disambiguation5/5

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.

Naming Consistency5/5

Both tools follow the same `designfit_<verb>` pattern with snake_case, and the verbs (extract, validate) accurately describe each action.

Tool Count3/5

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).

Completeness4/5

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

ActivityNo data
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    D
    maintenance
    Converts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.
    1
    9 npm
    MIT
  • A
    license
    Not graded
    quality
    B
    maintenance
    Deterministic screenshot diffing for AI coding agents. Extract design tokens, diff implementations vs reference, get CSS fix suggestions.
    97 npm
    5
    MIT