Plumb (plumb-mcp) — the AI-native design engineering platform

Plumb is an AI-native design engineering platform, shipped as a single MCP server. Point it at a Figma file or a live website and it normalises either one into the same semantic design graph — deduped tokens, flexbox-resolved layout, conservative role labels (nav / hero / card …) — that your coding agent can build from and a verification loop can grade. Point it at a one-line prompt instead and it becomes an AI design director: it researches best-in-class references, extracts a brand, and generates a full, on-brand Figma file on your canvas, then critiques its own render until it clears the bar.

Design → code (Figma or the live web, verified, not vibes)  •  prompt → design (research → brand → generate → critique)  •  one semantic design graph underneath both. MCP-native — works with Claude Code, Cursor, Windsurf, or any agent that speaks Model Context Protocol.

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

Built for coding agents — Claude Code, Cursor, Windsurf, anything MCP-compatible. Design engineering, agent-native: no dashboard, no separate app to babysit, no human shuttling pixels between Figma and an editor. It reads Figma through a desktop-app plugin (no REST rate limits, works on every plan including Free), reads any live website through headless Chrome, writes new designs back into Figma through the same plugin, and returns compact normalised specs instead of the multi-hundred-thousand-token JSON the Figma API emits.

Why "design engineering platform," not "Figma converter"

Most Figma MCP servers — and most figma-to-code tools generally — are one shape in, one shape out: Figma JSON in, one framework's code out, done. Plumb's architecture is a hub, not a pipe:

• Two independent sources feed the same graph. plumb_node normalises a Figma screen; plumb_import_web normalises a live webpage's DOM. Both land as the same platform-agnostic Semantic Graph — containment, repeat-group, and role edges — regardless of where the pixels came from.
• Every consumer runs against either source, unmodified. plumb_emit_react generates the same deterministic React/JSX whether the graph came from Figma or from a URL. plumb_diff, plumb_audit, and plumb_query's role filters all work identically on both. That's the concrete proof it's a platform, not a converter with a second input bolted on.
• Verification closes the loop on the way out, not just the way in. plumb_verify / plumb_fit diff your shipped code against the source of truth and hand back ranked fixes — "looks right" becomes measurably true.
• Generation runs the loop in reverse. plumb_studio composes a brand-new Figma file from a brief, and plumb_review critiques the render the same way plumb_verify critiques code.

One semantic model. Multiple sources in (Figma, the web), multiple targets out (React code, Figma files), verified at both ends. That's the platform.

Two directions, one server

← Figma or the web → code (read direction)

Your agent extracts a screen — or any live URL via plumb_import_web — as a compact Plumb Design Spec (PDS) riding on the same semantic graph: auto-layout pre-resolved to flexbox, design tokens deduped, roles labelled. It builds the UI, then calls plumb_verify / plumb_fit to diff the rendered result against the source and self-correct to pixel-perfect. The only Figma MCP that closes the loop on code — and the only one that runs the identical loop against a plain webpage, no Figma file required.

→ prompt → design (write direction — the design director)

Give Plumb a one-line brief — "a premium fintech dashboard" — and it acts like a senior designer working live in your Figma:

1. Researches references — finds best-in-class sites for your brief (Linear, Stripe, Mercury…) and screenshots them live onto a References page.
2. Extracts a brand — reads their computed CSS into a coherent palette + type scale, laid down as a Brand board.
3. Generates the design — composes a full, on-brand page (nav, hero, features, gallery, CTA, footer) from a high-level design DSL, built as real Figma nodes.
4. Critiques its own render — the calling agent (Claude Code / any MCP client with vision — no extra API key) grades the screenshot; Plumb blends that with a deterministic design rubric and a structural diff, then hands back a ranked fix list and iterates until it clears the bar.

That's prompt-to-Figma design generation with a self-improving director loop — not a one-shot mockup.

How Plumb is different

Other Figma MCP servers you may know:

• 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.

And beyond the MCP world, the broader design-to-code / AI-UI-generator category — tools like html.to.design, Anima, Locofy, or prompt-first generators like v0 and Builder.io's Visual Copilot — typically move in one direction only (design in, code out, or prompt in, code out) with no shared model spanning both, and no built-in step that checks the output against the source afterward.

Plumb is the only one that both closes the loop on code and directs new design generation, on top of one semantic graph that doesn't care whether the source was Figma or a URL. plumb_verify tells you whether shipped code actually matches the design (or the reference page); plumb_fit turns that into a self-healing loop. plumb_import_web + plumb_emit_react prove the graph travels: the same role classifier and the same code generator run against a live website with zero Figma involved. And on the write side, plumb_studio / plumb_brand / plumb_design / plumb_review turn a prompt into a designed, critiqued Figma file — no design skills, no separate design tool, no extra model key.

Are you hitting one of these?

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

Install: npm install -g plumb-mcp → plumb-mcp init.

Quick start

# 1. Install
npm install -g plumb-mcp

# 2. Wire into your editor — auto-detects Claude Code / Cursor / VS Code / Windsurf
plumb-mcp init

# 3. Sideload the Figma plugin (one-time). Find the manifest:
echo "$(npm root -g)/plumb-mcp/figma-plugin/manifest.json"
#    Figma desktop → Plugins → Development → Import plugin from manifest…
#    Run Plumb → click "Pair with Plumb" → done. Future runs collapse to a dot.

Then, in your agent:

# Figma → code
"Extract the Settings screen with Plumb and build it, then plumb_fit until it matches."

# web → code, no Figma required
"Use plumb_import_web on https://example.com, then plumb_emit_react to scaffold it."

# prompt → design
"Use plumb_studio to design a premium fintech dashboard, then screenshot it and
 run plumb_review as the director until the score clears 90."

Other install paths: npx plumb-mcp · docker run --rm -i ghcr.io/tathagat22/plumb-mcp:latest · build from source.

Twenty-four tools, one semantic graph

Every tool below reads from or writes to the same semantic design graph described above — that's what makes adding a new source (the web) or a new target (React) additive, not a rewrite.

Read — Figma or the web → code

Write — prompt → design (the director)

Why it wins on tokens and quality

• Compact specs. A 178-node dialog that is 351k tokens of Figma REST JSON comes back as ~2.6k tokens of PDS — deduped tokens, flexbox-resolved layout, depth-stable handles.
• Verified, not vibes. plumb_verify / plumb_fit diff the rendered result against the design (ΔE2000 perceptual colour, shadow, rotation, flex-child, fill-stack) — no pixel diff, runs in CI.
• Designed, not defaulted. The write direction bakes real design craft in: size-aware letter-spacing, generous section rhythm, extracted brand palettes from real references, gradient text, full-bleed and asymmetric layouts, and a vision-based director that grades the render and pushes it up.
• Understands structure, not just geometry — and not just Figma. Plumb tags nav/hero/footer/sidebar/card conservatively on top of the raw tree (node.pattern — silence over a guess when the signals don't line up) and builds on it: plumb_diff narrates changes by role, plumb_audit flags contrast and touch-target issues, plumb_query's select: "role" and plumb_node's collapseRoles filter and compress by the same labels. The same underlying model reads a live webpage too — plumb_import_web extracts structure and roles from any URL, no Figma involved — and plumb_emit_react generates deterministic React/JSX from either source.

Two data paths

Tools auto-pick the path. With the plugin paired, omit fileKey and pass id or name.

Configuration

.env (gitignored — never commit secrets; Plumb loads it on startup):

FIGMA_TOKEN=figd_your_read_only_token   # REST path only
# prompt→design photo providers (all free — for on-brief imagery)
UNSPLASH_ACCESS_KEY=…
PEXELS_API_KEY=…
PIXABAY_API_KEY=…

• Cache — ~/.cache/plumb/v1/ (override with PLUMB_CACHE_DIR).
• Assets — ./plumb-assets/<screen>/ · Screenshots — ./plumb-screenshots/.

Security

• Loopback-only WebSocket bridge; a single paired plugin at a time (one deliberate click).
• Zero telemetry. No personal-access token needed for the plugin path.
• The write direction never calls an external model — the AI agent already driving the MCP server does the design judgment.

Contributing

Contributions welcome — from typo fixes to new verify checks to design-director upgrades. See CONTRIBUTING.md. New here? Browse the good first issue label.

License

MIT © Tathagat Maitray. See LICENSE.