designfit

io.github.as9978v0.2.1Updated Oct 3, 2026

Validate AI-built front-ends against Figma by tokens and geometry, not pixels.

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

Validates an AI-built front-end against its Figma design using design tokens and element geometry instead of pixel diffing.

What it does
designfit exposes two tools. designfit_extract reads a Figma frame from a link, a file key and node ID, or pasted nodes JSON, and returns the design, component map, and viewport. designfit_validate compares a rendered implementation against that design and returns a pass flag, score, violations, and unmapped elements. It measures tokens and element boxes relative to the screen root with explicit tolerances, so results are deterministic rather than pixel-based.
When to use it
Use it when an agent is implementing a Figma frame and you want a machine-actionable fix list instead of screenshot-diff loops that never converge. It suits a single-viewport fidelity check on a real frame; responsive multi-breakpoint and perceptual checks are not in this version.
Requirements
Runs locally over stdio, installed from the npm package designfit (or as a Claude Code plugin). Needs Node.js and a Chromium browser installed via npx playwright install chromium. Fetching frames requires a Figma personal access token in the FIGMA_TOKEN environment variable; without it, extract accepts pasted nodes JSON. On a manual install the accompanying skill file must be copied into the agent's skills directory.
Before you install
The Figma personal access token FIGMA_TOKEN is a secret read from the server environment and grants access to Figma content. The server drives a browser to render and measure the implementation, and the skill workflow asks the agent to add data-designfit-id tags to elements and strip them afterwards, so it modifies source files during the loop. On Windows some clients cannot spawn the bare command, so the documented npx or absolute-path form is needed.

Installation

In SourceWeft

  1. Open designfit in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

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.

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

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:

bash
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:

bash
npm install -g designfitnpx playwright install chromium
json
{ "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

Source: README.md at commit 5f0992e

Tools

0
Tool metadata has not been indexed yet.

Version history

1
  1. v0.2.1LatestOct 3, 2026