What is Plumb MCP?
Plumb is a local MCP server that turns a Figma file or a live website into one semantic design graph. An AI coding agent builds from that graph, then runs a verification loop against the source. It reads Figma through a desktop plugin, so Figma REST API rate limits do not apply.
Plumb ships as a single MCP server with two jobs. It reads a Figma screen or a live webpage into a normalised graph of tokens, flexbox layout and role labels such as nav, hero and card.
The same graph feeds a code emitter and a verification loop. The README says one 178-node dialog comes back at about 2.6k tokens, where raw Figma JSON can run to hundreds of thousands.
Two directions, one server
- Read direction:
plumb_nodeextracts a Figma screen andplumb_import_webextracts any live URL, both into the same graph. - Build direction:
plumb_emit_reactproduces React and JSX from either source. - Check direction:
plumb_verifyandplumb_fitdiff shipped code against the source and return ranked fixes. - Write direction:
plumb_studiocomposes a new Figma page from a one line brief, andplumb_reviewcritiques the render.
Figma access without the REST API
Plumb reads Figma through a plugin you sideload in the Figma desktop app, not through the REST API. The README states this avoids rate limits and per call quotas, and that it works on every plan including Free.
Who Plumb is for
Best for
- Teams that hit tool call limits or HTTP 429 errors with Framelink or the official Figma MCP.
- Builders who want code checked against the design instead of trusting a first pass.
- Anyone who also wants a live website read into a design spec with no Figma file.
Not for
- Browser only Figma users. Plugins must be sideloaded in the desktop app.
- People who want a hosted service. Plumb runs locally.
- Teams that need Figma writes without a plugin, since write access rides on the same bridge.
Use it with UiChemy
Plumb gets a design into React with a verified match. If the destination is a WordPress site, UiChemy's Figma to WordPress converts the Figma file into Elementor or Gutenberg pages. Click Get Started on uichemy.com. Related: Talk to Figma.
Connect Plumb MCP: Figma and Live Websites as One Design Graph to your AI client
npm install -g plumb-mcpInstall the package
Run
npm install -g plumb-mcpand confirm withplumb-mcp --version. The README says Node 20 or newer is required.Try the offline demo
Run
npx plumb-mcp demo. It needs no Figma account, key or network, and prints a scoreboard of planted mistakes the verification engine caught.Wire up your editor
Run
plumb-mcp initin your project root. It detects Claude Code, Cursor, VS Code and Windsurf and writes the MCP config for the editor it finds.Sideload the Figma plugin
In Figma desktop choose Plugins, Development, Import plugin from manifest. Run Plumb in your file and click Pair with Plumb, then restart the editor.
Check the connection
Ask the agent to call
plumb_status. Success meansconnected: truewith a screen count. Thenplumb_outlinelists your screens.
Client configuration
{
"type": "stdio",
"command": "npx",
"args": ["-y", "plumb-mcp"]
}Endpoints and ports
https://tathagat22.github.io/plumb-mcp/Full documentationghcr.io/tathagat22/plumb-mcp:latestAlternative to the npm installWhat you can do with it
- Compact design specTokens are deduped and auto layout is pre resolved to flexbox, so the agent reads a small spec instead of raw Figma JSON.
- Figma or the live web as a sourceA screen or any URL lands in the same graph, and the same tools work on both.
- Verification loopplumb_verify and plumb_fit compare built code to the source and return ranked fixes until the match improves.
- No REST rate limitsThe desktop plugin path avoids the Figma REST API and works on every plan including Free.
- Prompt to Figma designplumb_studio researches references, extracts a brand and composes a full page as real Figma nodes.
- Offline demoThe demo plants 13 mistakes and shows what the verification engine catches, with no account or network.
- Standalone CLIA plumb-mcp verify command diffs a rendered DOM against the design outside an agent session.
Tools it exposes
plumb_status
Reports whether the Figma plugin is paired, with a screen count.
plumb_outline
Lists the screens in the connected Figma file.
plumb_node
Normalises a Figma screen into the semantic design graph.
plumb_import_web
Reads a live webpage into the same graph through headless Chrome.
plumb_emit_react
Generates deterministic React and JSX from the graph.
plumb_verify
Diffs shipped code against the source of truth and ranks the fixes.
plumb_fit
Turns verification into a loop that repeats until the build matches.
plumb_studio
Composes a new on brand Figma file from a brief.
plumb_review
Critiques a render and hands back a ranked fix list.
plumb_brand
Part of the write direction that extracts a brand from reference sites.
plumb_design
Part of the write direction that builds a page from a design DSL.
plumb_query
Queries the graph, including role filters, on either source.
plumb_audit
Runs an audit over the graph from either source.
plumb_diff
Compares graphs, working the same on Figma and web sources.
Frequently asked questions
What is Plumb MCP?
Plumb is a local MCP server that normalises a Figma file or a live website into one semantic design graph. An AI coding agent builds from it, and a verification loop diffs the shipped code against the source and returns ranked fixes.
How do I install Plumb MCP?
Run npm install -g plumb-mcp, then plumb-mcp init from your project root to write the editor config. Sideload the Figma plugin in the desktop app, click Pair with Plumb, restart the editor and call plumb_status to confirm.
Does Plumb need a Figma API token?
The plugin path does not. The README says it reads Figma through a desktop plugin, so there are no REST rate limits and it works on every plan including Free. It tells you to leave the FIGMA_TOKEN placeholder alone unless you supply a token.
Which AI coding agents does Plumb work with?
The README lists Claude Code, Cursor, Windsurf and VS Code, plus any agent that speaks the Model Context Protocol. The init command detects the first four and writes their config files, so setup differs only slightly between them.
Can Plumb read a website with no Figma file?
Yes. The plumb_import_web tool reads a live URL through headless Chrome into the same graph a Figma screen produces. The plumb_emit_react tool then generates React from it, so the web to code path needs no Figma involvement.
How is Plumb different from other Figma MCP servers?
The README says Figma's Dev Mode MCP is plan gated and metered, and Framelink is a thin REST wrapper with two tools. Plumb adds verification and design generation on one graph. For comparison see the official Figma MCP.
What does Plumb cost and what license is it under?
The repository is MIT licensed. The README describes the plugin path as free of per call quotas on every plan including Free. Standalone CLI fitting is the one command the README says may need a model key.