Sources
plumb_node— a Figma screen, via the plugin. No REST, no rate limit.plumb_import_web— any live URL, via headless Chrome. No Figma needed.
The AI-native design engineering platform
One MCP server normalises Figma files and live websites into a shared semantic design graph, generates deterministic React code, and runs a verification loop that proves your build actually matches the source — or, from a one-line prompt, designs and critiques a brand-new Figma page. No REST rate limits, no metered tool-call quotas, no 25k-token cap explosions, no extra API key.
$ npx plumb-mcp init
→ found Claude Code, Cursor
→ wrote .mcp.json (2 servers)
✓ plumb ready — 28 tools, one semantic graphMost figma-to-code tools are one shape in, one shape out. Plumb's architecture is a hub: two independent sources normalise into the same graph, and every downstream tool runs against either one, unmodified — that's what makes it a platform, not a converter.
Sources
plumb_node — a Figma screen, via the plugin. No REST, no rate limit.plumb_import_web — any live URL, via headless Chrome. No Figma needed.The graph
Deduped tokens, flexbox-resolved layout, and conservative role labels (nav / hero / footer / sidebar / card) — the same shape regardless of source.
Targets
plumb_emit_react — deterministic React/JSX, same emitter either source.plumb_studio — a brand-new, on-brand Figma file from a brief.plumb_diff, plumb_audit, and plumb_query's role filters all run identically on both sources — the concrete proof it's a platform, not a converter with a second input bolted on.
Design → code
plumb_outline, plumb_node, or plumb_query pull a Plumb Design Spec — auto-layout pre-resolved to flexbox, tokens deduped to $c1, $t1 refs. plumb_import_web pulls the same shape from any live URL — no Figma needed.
Your agent writes the component from the spec, same as it always does.
plumb_verify drives headless Chrome and diffs the rendered DOM against the source — layout, color, type, shadow, assets.
plumb_fit turns the diff into a 0–100 convergence score and ranked fixes. Fix, re-run, repeat until true.
Ends true — score 100, pixel-identical.
Prompt → design
The director studies live reference sites, screenshots them, and extracts a palette and type scale from their computed CSS.
plumb_studio writes real Figma nodes — nav, hero, features, gallery, CTA, footer — from the brand DSL.
plumb_review blends a structural diff, a design rubric, and the agent's own vision verdict into a score and fixes — director, not just generator.
Ends on your canvas — reviewed, on-brand, ready.
Plumb reads and writes through a companion Figma plugin, not the REST API — so none of Figma's Dev Mode MCP or Framelink ceilings apply.
Every iteration of plumb_verify → plumb_fit nudges the render closer to the source. The score only reads 100 when the build is pixel-identical — same idea, same word as the name: plumb, exactly true.
shadow offset wrong, radius drifted
Plugin and server talk over loopback. Nothing about your design leaves your machine — the director never calls an external model.
MIT-licensed. Twenty-eight focused tools on one semantic graph, plus an offline .fig parser. Issues and roadmap on GitHub.
Free, Starter, Professional, Organization, Enterprise — no plan-gating on the plugin path.
Prompt → design runs on the calling agent's own model. No network calls, no second API bill.