plumb-mcp

Plumb (plumb-mcp) — the two-way Figma MCP: design → code, and prompt → design

     

⭐ If Plumb saves you tokens — or designs you a page — star it on GitHub so others can find it.

Plumb is the Figma MCP server that goes both ways. Point it at a design and it returns a compact, normalised spec your coding agent can build from — then proves the code matches with a verification loop. Point it at a prompt and it turns into an AI design director: it researches real best-in-class reference websites, extracts a brand, and generates a full, on-brand Figma design on your canvas — then critiques its own render and iterates until it's good.

Figma → code (extract, verify, self-heal)  •  prompt → design (research → brand → generate → critique). One MCP server, both directions.

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

 

Built for coding agents — Claude Code, Cursor, Windsurf, anything MCP-compatible. It reads Figma through a desktop-app plugin (no REST rate limits, works on every plan including Free), writes new designs back through the same plugin, and returns compact normalised specs instead of the multi-hundred-thousand-token JSON the Figma API emits.

Two directions, one server

← Figma → code (read direction)

Your agent extracts a screen as a compact Plumb Design Spec (PDS) — auto-layout pre-resolved to flexbox, design tokens deduped — builds the UI, then calls plumb_verify / plumb_fit to diff the rendered result against the design and self-correct to pixel-perfect. The only Figma MCP that closes the loop on code.

→ 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:

• Researches references — finds best-in-class sites for your brief (Linear, Stripe, Mercury…) and screenshots them live onto a References page.
• Extracts a brand — reads their computed CSS into a coherent palette + type scale, laid down as a Brand board.
• 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.
• 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.

Plumb is the only one that both closes the loop on code and directs new design generation. plumb_verify tells you whether shipped code actually matches the design; plumb_fit turns that into a self-healing loop. 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.

Error you're seeing	Why Plumb fixes it
Figma Dev Mode MCP exceeded the 25k token cap · 351,378 tokens observed	PDS dedups design tokens ($c1, $t1 …) and pre-resolves auto-layout to flexbox. A 178-node dialog comes back at ~2.6k tokens.
Dev Mode MCP: 6 tool calls per month limit · Starter plan tool-call limit reached	Plumb's plugin path has no per-call quota on any plan, including Free.
Framelink figma-developer-mcp HTTP 429 · Figma REST API rate limit exceeded	The plugin path doesn't touch REST. Zero rate limits.
Variables API requires Enterprise plan · 403 Forbidden on variables	Plumb reads Variables through the Figma Plugin API — works on every plan.
Figma MCP returned 85% wrong layout · hallucinated structure	Plumb returns structured PDS (not parsed prose) and ships plumb_verify + a plumb-mcp verify CLI that diffs your rendered DOM against the design.
"How do I generate a Figma design from a prompt?" · "AI that designs UI in Figma"	plumb_studio — brief → researched references → extracted brand → a full composed Figma page, critiqued and refined.

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

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

The twenty MCP tools

Read — Figma → code

Tool	What it does
plumb_status	Self-description, key legend, connection state. Call first.
plumb_outline	Every screen in the file (id, name, size).
plumb_node	Extract a screen as compact PDS — by id or by name.
plumb_query	Pull a slice (skeleton / buttons / text / components) when a full screen would blow the token budget.
plumb_describe	Text-only visual description — for image-blind harnesses.
plumb_tokens	Design-token table (colours, type, radii, shadows).
plumb_selection	The user's live Figma selection.
plumb_assets	Export icons (SVG) + images (PNG) — recursive, list, or surgical by ids.
plumb_screenshot	Render any node to PNG/JPG.
plumb_search	Find nodes by name and/or type.
plumb_components	List components + instance usages.
plumb_verify	Diff rendered layout against the design — ΔE2000 colour, shadow/rotation/flex checks.
plumb_fit	The self-healing loop: verify + a 0–100 convergence score + prioritised fixes.
plumb_fig_outline / plumb_fig_node	Headless: read a saved .fig file from disk. No Figma desktop, no token.

Write — prompt → design (the director)

Tool	What it does
plumb_studio	The design director. One brief → researched references → extracted brand → a full composed Figma page. Returns the node ids + authored spec so you can critique and refine.
plumb_brand	Brief → live-screenshots best-in-class reference sites + a synthesized brand palette/type board on the canvas.
plumb_design	Author a design from Plumb's high-level Design DSL and build it into Figma (full control: pages, sections, components, motion).
plumb_review	The critique loop: blends a structural diff, a deterministic design rubric, and the calling agent's own vision verdict into one score + ranked fixes. No API key — the agent that drives the MCP server is the creative director.
plumb_source	Resolve on-brief assets (icons, photos, illustrations, patterns) for a design.

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.

Two data paths

	Plugin (primary)	REST (secondary, headless)
Rate-limited	No. Reads the in-memory document.	Yes. Free/Starter get very low budgets.
Token required	No.	Yes — FIGMA_TOKEN.
Variables	Yes, every plan.	No — Variables REST is Enterprise-only.
Write (generate designs)	Yes.	No.
Headless / CI	No (needs Figma open).	Yes.

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.