Log inSubmit server
Plumb MCP logo

Plumb MCP

Converts Figma files or live websites into verified React output, and generates reviewed Figma designs from prompts.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Plumb MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "plumb-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "plumb-mcp"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 23 tools correctly (8d ago).

Overview

plumb-mcp MCP server turns Figma files and live webpages into a shared semantic design graph for code generation and visual verification. It can emit deterministic React/JSX, compare rendered code with its source, and return ranked fixes through tools such as `plumb_verify` and `plumb_fit`. In the opposite direction, a prompt can drive reference research, brand extraction, Figma generation, and design review. Reach for it when an MCP-compatible coding agent needs design-to-code workflows, webpage import, or prompt-to-Figma generation without relying on Figma REST limits.

Use cases

  • Convert a Figma screen into React/JSX
  • Import a live webpage into a semantic design graph
  • Verify rendered code against a Figma design
  • Generate and review a Figma page from a brief
  • Query design elements by semantic role

Key features

  • Figma and live-web input
  • Shared semantic design graph
  • Deterministic React/JSX generation
  • Visual and structural verification
  • Prompt-to-Figma design generation
  • Deduplicated design tokens and resolved layout

Tools23

What Plumb MCP lets your agent do. Expand a tool for its parameters.

Verified live~8.8k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

8/8 checks healthy over the last 45d

What it can do

From the 23 tools this server returned when we ran it; 23 declare their own safety hints.

Writes files · 2Handles credentials · 8Makes network requests · 7Read-only tools · 21
Network at startup3 connections
Files written at startupNone
Install scriptsNone
npm provenanceNot published
Package age144 days
Maintainers1

Observed 2026-10-15 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 8d ago via OSV.dev · plumb-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars83Stargazers on the source repository.
npm downloads345Package downloads in the last 30 days.
Last commit9d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed23Callable tools this server registers over MCP.
Directory activity2 viewsConfig copies, upvotes, and views on AllMCPs.

How Plumb MCP works

What plumb-mcp MCP server does

plumb-mcp MCP server connects coding agents to Figma files and live websites, then represents either source as a shared semantic design graph. The graph captures containment, repeated groups, semantic roles such as navigation, hero, and card, deduplicated design tokens, and layout resolved into flexbox-oriented structures.

That common model supports two workflows. In the read direction, an agent can inspect a Figma screen or URL, generate React/JSX, and compare the result with the source. In the write direction, a brief can lead to reference research, brand extraction, a generated Figma page, and an iterative review of the rendered design.

How it works

Figma data is read through a desktop-app plugin rather than the Figma REST API. The same plugin can write generated designs back into Figma. Web imports use headless Chrome to inspect a live page. Both inputs are normalised into a compact Plumb Design Spec backed by the semantic graph, avoiding the large raw JSON payloads associated with the Figma API.

The main verification path compares shipped or rendered code against the source design and reports ranked corrections. plumb_fit supports an iterative correction loop, while plumb_diff and plumb_audit provide comparison and inspection functions. The generation path uses plumb_studio, plumb_brand, plumb_design, and plumb_review to move from a brief and references toward a reviewed Figma file.

Setup and configuration

The documented package is available through npm. A standard stdio configuration can start it with:

config.json
{
  "command": "npx",
  "args": ["-y", "plumb-mcp"]
}

The repository provides install links for Cursor and VS Code, and identifies Claude Code and Windsurf as supported MCP clients. Figma workflows require the desktop-app plugin connection. Web workflows require access to a live URL that can be opened by headless Chrome.

The MCP-tool version of the design review flow does not require an additional model API key; the README distinguishes this from the standalone plumb-mcp fit CLI, which is the exception.

Tools and capabilities

  • plumb_node normalises a Figma screen into the semantic graph.
  • plumb_import_web imports a live webpage through headless Chrome.
  • plumb_emit_react produces deterministic React/JSX from the graph.
  • plumb_query supports role-based graph queries.
  • plumb_diff and plumb_audit inspect differences and design structure.
  • plumb_verify compares rendered code with its source of truth.
  • plumb_fit returns ranked fixes for an iterative verification loop.
  • plumb_studio, plumb_brand, and plumb_design support prompt-led Figma generation.
  • plumb_review critiques a generated design render.

Limitations and notes

plumb-mcp MCP server is an MCP tool service rather than a standalone dashboard or separate application. Figma access depends on its desktop plugin path, while webpage import depends on headless Chrome. The material supports the absence of per-call quotas for the plugin route, including the Free Figma plan, but does not establish that every possible operation has identical limits. The standalone fit command has a separate model-key requirement, unlike the MCP-tool workflow.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Plumb MCP

plumb-mcp is an MCP server that connects coding agents to Figma files and live websites. Its main tools normalise designs into a semantic graph, emit React/JSX, verify rendered code, and generate or review Figma designs from prompts. It uses a Figma desktop plugin and headless Chrome for web imports.

Install it as a stdio MCP server with `npx -y plumb-mcp`. Add `npx` as the command and `-y`, `plumb-mcp` as the arguments in your MCP client configuration. The repository also provides installation links for Cursor and VS Code.

Yes, plumb-mcp works with Cursor. The repository provides a Cursor MCP installation link, and the server uses a standard stdio configuration based on `npx -y plumb-mcp`.

Yes, it can import a live webpage with `plumb_import_web` and pass the resulting semantic graph to `plumb_emit_react`. The webpage is inspected through headless Chrome, and the same graph-based verification tools can be used afterward.

No, the plugin-based Figma workflow is documented as working on every Figma plan, including Free. It reads and writes through the desktop-app plugin rather than the Figma REST API, avoiding the REST rate limits described in the repository.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewPlumb MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/plumb-mcp?style=directory)](https://allmcps.com/mcp/plumb-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/plumb-mcp"><img src="https://allmcps.com/api/badge/plumb-mcp?style=directory" alt="Plumb MCP on AllMCPs" /></a>