designfit — Claude Code MCP server: Figma checks
Checks an AI-built frontend against Figma using tokens, geometry, and element presence. Useful when screenshot diffs keep producing noisy fixes.
claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfitWhat designfit 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.
What it helps with
- 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 for the agent
- Compare this page with the Figma frame at the provided link and keep fixing differences until the result is
pass. - Use
designfit_extractto read the Figma frame, then rundesignfit_validateagainst the current implementation. - Validate this one-viewport build, match elements through
data-designfit-id, and remove the tags after the check.
How to install designfit
Platform CLI
claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfitReplace <…> with your own values
Platform CLI
codex mcp add designfit --env FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfitReplace <…> with your own values
Config file
{
"mcpServers": {
"designfit": {
"command": "npx",
"args": [
"-y",
"designfit"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"designfit": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"designfit"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> designfit npx -y designfitReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about designfit
How do I install designfit in Claude Code?
Run claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfit. Then install the browser with npx playwright install chromium.
What does designfit do?
It compares a rendered frontend with a Figma design through tokens, geometry, and element presence. The result reports a score, violations, and unmapped elements.
Do I need a Figma token to use designfit?
A FIGMA_TOKEN is required when extracting a design from a Figma link. You can instead provide pasted JSON from GET /v1/files/:key/nodes.
