designfit v0.1.0

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

An MCP server + Claude Code skill that hands your coding agent a deterministic fix-list instead of a screenshot diff it thrashes against. First public release.

Install

npm install -g designfit
npx playwright install chromium

Then register it with your MCP client (e.g. Claude Code):

{ "mcpServers": { "designfit": { "command": "designfit" } } }

What's in v1

• One tool — designfit_validate({ url, viewport, design, componentMap, tolerances? }) → { pass, score, violations, unmapped }
• Token checks (color ΔE, border-radius, font-size, border) + geometry (element boxes relative to the screen root) + element presence
• Token-bound mismatch = error, hardcoded value = warn; pass = zero errors
• The designfit-fidelity-loop skill drives the loop: build → tag elements with data-designfit-id → validate → fix → repeat until pass
• Deterministic: same input, same output — no oscillation from anti-aliasing noise

Demo

The attached video shows a page validated against its Figma design — real drift caught (wrong token colors, radii, geometry) and fixed until the score reaches 100.

Roadmap (not in v1)

Responsive multi-breakpoint validation; a perceptual VLM fallback.

MIT