# plumb-mcp

Bidirectional MCP server for Figma and code: transforms layouts into React, verifies rendered UI against the source, and drafts Figma designs from prompts.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 81
- Author: tathagat22
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tathagat22/plumb-mcp
- Updated: 2026-10-14
- HTML: https://affpapa.org/en/nevibecode/mcp/plumb-mcp

## What it does

The server extracts Figma screens or live website DOMs into a unified semantic design graph. It resolves auto-layout directly into flexbox, unifies design tokens, and tags elements with structural roles like `nav`, `hero`, or `card`. Reading Figma relies on a desktop app plugin, avoiding REST API rate caps across plans.

It operates in both directions. Functions like `plumb_emit_react` output deterministic JSX, while `plumb_verify` inspects your code against the original design to return prioritized fixes. In reverse, a text prompt triggers reference scraping via headless Chrome, CSS extraction for palettes, and Figma node construction.

Working with local Figma canvases requires the desktop plugin alongside `FIGMA_TOKEN` and `PLUMB_SESSION_NAME` environment keys.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `FIGMA_TOKEN`, `PLUMB_SESSION_NAME` — keys and tokens: ask the human for the values, never commit them or put them in shared files.
- Works with: Figma

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcp
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add plumb-mcp --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> -- npx -y plumb-mcp
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "plumb-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "plumb-mcp"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>",
                "PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "plumb-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "plumb-mcp"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>",
                "PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> -e PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> plumb-mcp npx -y plumb-mcp
```
Replace <…> with your own values

## When to use it
- Extract Figma frames or live URLs into clean flexbox specs
- Generate deterministic React JSX directly from design graphs
- Audit rendered frontends against designs using `plumb_verify`
- Draft on-brand Figma pages and boards from text prompts

## Example prompts
- Normalize this Figma screen into a design spec with `plumb_node`
- Run `plumb_verify` to check my rendered React component against the layout
- Generate a landing page layout and brand board in Figma using `plumb_studio`

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md