# designfit

Checks an AI-built frontend against Figma using tokens, geometry, and element presence. Useful when screenshot diffs keep producing noisy fixes.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 7
- Author: as9978
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/as9978/designfit
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/mcp/designfit

## What it does

\`designfit` reads a Figma frame and compares it with the rendered implementation. It checks colors, dimensions, placement, and missing elements through design tokens and element geometry relative to the screen root. The validation result includes a score, violations, and unmapped elements.

The package exposes `designfit_extract` and `designfit_validate`. Claude Code also gets the `designfit-fidelity-loop` skill, which guides extraction, implementation, element tagging with `data-designfit-id`, validation, and fixes until the result is `pass`; the tags are then removed. Version 1 handles one viewport. Multi-breakpoint responsive checks and a perceptual VLM fallback are outside its scope.

A `FIGMA_TOKEN` is needed when the design is fetched from a Figma link; pasted node JSON is another input form. Install Chromium with `npx playwright install chromium` before validation, or the measurement engine cannot launch its browser.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `FIGMA_TOKEN` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfit
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add designfit --env FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfit
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "designfit": {
            "command": "npx",
            "args": [
                "-y",
                "designfit"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "designfit": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "designfit"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> designfit npx -y designfit
```
Replace <…> with your own values

## When to use it
- compare an AI-built frontend with a Figma frame
- spot incorrect colors and element dimensions
- check alignment against the screen root
- return actionable fixes to the coding agent
- detect elements missing from the implementation

## Example prompts
- Compare this page with the Figma frame at the provided link and keep fixing differences until the result is `pass`.
- Use `designfit_extract` to read the Figma frame, then run `designfit_validate` against the current implementation.
- Validate this one-viewport build, match elements through `data-designfit-id`, and remove the tags after the check.

## Similar
- [screenshot-to-code](https://affpapa.org/en/nevibecode/skills/screenshot-to-code.md) — skill · 1300 installs
- [d2c](https://affpapa.org/en/nevibecode/plugins/d2c.md) — plugin · ★ 8
- [frontend-visual-qa](https://affpapa.org/en/nevibecode/skills/frontend-visual-qa.md) — skill · 572 installs
- [reviewing-interface-quality](https://affpapa.org/en/nevibecode/skills/reviewing-interface-quality.md) — skill · 352 installs
- [frontend-app-builder](https://affpapa.org/en/nevibecode/skills/frontend-app-builder.md) — skill · 252 installs
- [figma-implement-design](https://affpapa.org/en/nevibecode/skills/openai-figma-implement-design.md) — skill · 6700 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md