Plumb (plumb-mcp)

⭐ If Plumb saves you tokens, star it on GitHub — it helps others find it.

The Figma → code MCP with a verification loop. Designs go in, normalised specs come out, and plumb-mcp verify drives headless Chrome to prove your rendered code actually matches what's in Figma.

📖 Full docs: https://tathagat22.github.io/plumb-mcp/  ·  📦 npm: plumb-mcp  ·  🇨🇳 简体中文  ·  🇯🇵 日本語  ·  🇰🇷 한국어

Built for coding agents — Claude Code, Cursor, Windsurf, anything MCP-compatible. Reads Figma through a desktop-app plugin (no REST rate limits, works on every plan including Free), returns a compact normalised spec instead of the multi-hundred-thousand-token JSON the Figma API emits, and exports SVG icons + PNG images straight to disk.

How plumb is different

Three other Figma MCP servers worth knowing:

• Figma's official Dev Mode MCP — bidirectional, but plan-gated and metered.
• Framelink — thin REST wrapper. Two tools. No verification, inherits rate limits.
• cursor-talk-to-figma — bidirectional automation for designers working in Figma.

Plumb is the only one that closes the loop on code. plumb_verify tells you whether the code your agent shipped actually matches the design — colour-coded deltas, no pixel diff, runs in CI. And plumb_fit turns that into a self-healing loop: it scores the build 0–100, hands back the exact deltas to fix, and the agent iterates until it's pixel-perfect.

Run the loop three ways:

• In your editor — plumb_fit (MCP). Claude Code / Cursor build, call it, and self-correct. Free; the agent is the generator.
• From the terminal — plumb-mcp fit <figma-url> generates a build, renders it headless in your Chrome, diffs, and corrects it pass-by-pass until it matches. (Needs ANTHROPIC_API_KEY.)
• In the browser — the Playground: paste a Figma URL or pick a demo and watch it converge, with your own key. No install, no backend.

Are you hitting one of these?

If your agent landed here from an error, Plumb probably solves it.

... View full README on GitHub