[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81346":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":14,"starSnapshotCount":14,"syncStatus":44,"lastSyncTime":45,"discoverSource":46},81346,"plumb-mcp","tathagat22\u002Fplumb-mcp","tathagat22","Local Figma MCP server with no REST rate limits, no metered tool-call quotas, and a verification loop. Drop-in alternative to Figma's Dev Mode MCP and Framelink for Claude Code, Cursor, Windsurf — works on every plan including Free.",null,"TypeScript",60,4,15,0,1,20,2.1,"MIT License",false,"main",true,[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"ai","ai-coding-agent","anthropic","claude-code","claude-mcp","cursor","design-to-code","design-tokens","dev-mode","figma","figma-mcp","figma-plugin","free-tier","mcp","mcp-server","model-context-protocol","typescript","windsurf","2026-06-12 02:04:14","\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fdocs\u002Fpublic\u002Fbanner.png\" alt=\"Plumb — Figma ↔ AI coding, plumbed.\" width=\"100%\">\n\u003C\u002Fp>\n\n# Plumb (`plumb-mcp`)\n\n**The Figma → code MCP with a verification loop.** Designs go in, normalised specs come out, and `plumb-mcp verify` drives headless Chrome to prove your rendered code actually matches what's in Figma.\n\n📖 Full docs: **\u003Chttps:\u002F\u002Ftathagat22.github.io\u002Fplumb-mcp\u002F>**  ·  📦 npm: [`plumb-mcp`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fplumb-mcp)  ·  🇨🇳 [简体中文](.\u002FREADME.zh-cn.md)  ·  🇯🇵 [日本語](.\u002FREADME.ja.md)  ·  🇰🇷 [한국어](.\u002FREADME.ko.md)\n\nBuilt for coding agents — Claude Code, Cursor, Windsurf, anything MCP-compatible. Reads Figma through a desktop-app plugin (no REST rate limits, works on every plan including Free), returns a compact normalised spec instead of the multi-hundred-thousand-token JSON the Figma API emits, and exports SVG icons + PNG images straight to disk.\n\n---\n\n## How plumb is different\n\nThree other Figma MCP servers worth knowing:\n\n- **Figma's official Dev Mode MCP** — bidirectional, but plan-gated and metered.\n- **Framelink** — thin REST wrapper. Two tools. No verification, inherits rate limits.\n- **cursor-talk-to-figma** — bidirectional automation for designers working *in* Figma.\n\nPlumb is the only one that **closes the loop on code.** `plumb_verify` (MCP tool) and `plumb-mcp verify` (CLI) tell you whether the code your agent shipped actually matches the design — colour-coded deltas, no pixel diff, runs in CI.\n\n---\n\n## Are you hitting one of these?\n\nIf your agent landed here from an error, Plumb probably solves it.\n\n| Error you're seeing | Why Plumb fixes it |\n|---|---|\n| `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. |\n| `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. |\n| `Framelink figma-developer-mcp HTTP 429` · `Figma REST API rate limit exceeded` | The plugin path doesn't touch REST. Zero rate limits. |\n| `Variables API requires Enterprise plan` · `403 Forbidden on variables` | Plumb reads Variables through the Figma Plugin API — works on every plan. |\n| `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 diff your rendered DOM against the design. |\n| `Dev Mode MCP requires selection` · \"Open desktop app with the right selection\" | Plumb streams the whole file inventory the moment the plugin pairs. No per-call selection dance. |\n\nInstall: `npm install -g plumb-mcp` → `plumb-mcp init`.\n\n---\n\n## Quick start\n\n```bash\n# 1. Install\nnpm install -g plumb-mcp\n\n# 2. Wire into your editor — auto-detects Claude Code \u002F Cursor \u002F VS Code \u002F Windsurf\nplumb-mcp init\n\n# 3. Sideload the Figma plugin (one-time). Find the manifest:\necho \"$(npm root -g)\u002Fplumb-mcp\u002Ffigma-plugin\u002Fmanifest.json\"\n#    Figma desktop → Plugins → Development → Import plugin from manifest…\n#    Run Plumb → click \"Pair with Plumb\" → done. Future runs collapse to a dot.\n\n# 4. Optional — verify rendered code against Figma from the terminal\nplumb-mcp verify http:\u002F\u002Flocalhost:5173\u002Fdashboard --url \u003Cfigma-url>\n```\n\nOther install paths: `npx plumb-mcp` · `docker run --rm -i ghcr.io\u002Ftathagat22\u002Fplumb-mcp:latest` · [build from source](https:\u002F\u002Fgithub.com\u002Ftathagat22\u002Fplumb-mcp).\n\n---\n\n## The fourteen MCP tools\n\n| Tool | What it does |\n|---|---|\n| `plumb_status` | Self-description, key legend, connection state. Call first. |\n| `plumb_outline` | Every screen in the file (id, name, size). |\n| `plumb_node` | Extract a screen as compact PDS — by id or by name. |\n| `plumb_query` | Pull a slice (`skeleton` \u002F `buttons` \u002F `text` \u002F `components`) when a full screen would blow the token budget. |\n| `plumb_describe` | Text-only visual description — per-region narrative + child summary, for image-blind harnesses. |\n| `plumb_tokens` | Design-token table (colours, type, radii, shadows). |\n| `plumb_selection` | The user's live Figma selection. |\n| `plumb_assets` | Export icons (SVG) + images (PNG) — three modes: recursive, list (manifest only), or surgical by ids. |\n| `plumb_screenshot` | Render any node to PNG\u002FJPG. |\n| `plumb_search` | Find nodes by name and\u002For type. |\n| `plumb_components` | List components + instance usages. |\n| `plumb_verify` | Diff your rendered layout against the design — structured deltas with ΔE2000 perceptual colour distance, shadow\u002Frotation\u002Fflex-child\u002Ffill-stack checks, no pixel diff. |\n| `plumb_fig_outline` | Headless: read a saved `.fig` file from disk and list every screen. No Figma desktop, no token. |\n| `plumb_fig_node` | Headless: fetch one node from a saved `.fig` file by id. |\n\n---\n\n## The agent's flow\n\n```js\nplumb_outline()                                  \u002F\u002F 1. list screens\nplumb_node({ name: \"Settings\" })                 \u002F\u002F 2. extract PDS\nplumb_assets({ name: \"Settings\", ids: [...] })   \u002F\u002F 3. pull only the icons you need\n\u002F\u002F 4. Build the UI — tag each element data-plumb-id=\"\u003Cel>\" using the el from PDS\nplumb_verify({ name: \"Settings\", rendered })     \u002F\u002F 5. structural diff\n```\n\nFor the `rendered` payload shape, see [the verify docs](https:\u002F\u002Ftathagat22.github.io\u002Fplumb-mcp\u002Fverify.html) — or skip the in-browser capture entirely and use the `plumb-mcp verify` CLI to drive headless Chrome end-to-end.\n\n---\n\n## Two data paths\n\n| | Plugin (primary) | REST (secondary, headless) |\n|---|---|---|\n| Rate-limited | **No.** Reads the in-memory document. | Yes. Free\u002FStarter workspaces get very low budgets. |\n| Token required | No. | Yes — `FIGMA_TOKEN` (figma.com → Settings → Security). |\n| Variables | **Yes**, even on Free plans. | No — Variables REST API is Enterprise-only. |\n| Headless \u002F CI | No (needs Figma open). | Yes. |\n\nTools auto-pick the path. With the plugin paired, omit `fileKey` and pass\n`id` or `name`. For the REST path, pass `fileKey` + `id`.\n\n---\n\n## Architecture\n\n```\nFigma (desktop or browser, any plan)\n  │\n  │  Plumb plugin\n  │    • reads document + variables (Figma Plugin API, no rate limits)\n  │    • one-time \"Pair with Plumb\" click; collapses to a dot\n  ▼\n  ws:\u002F\u002F127.0.0.1:31337    JSON control channel (paired, Origin-aware)\n   +   \u002Fupload\u002F:key.:ext  loopback HTTP for binary blobs — screenshots,\n                          assets — POSTed straight to disk, no base64,\n                          per-item ack for array uploads to keep Figma's\n                          IPC from buffering and redelivering\n  ▼\nPlumb MCP server  —  `npx plumb-mcp` \u002F `node dist\u002Findex.js`\n  │  • REST + plugin ingest\n  │  • Normalizer → Plumb Design Spec (PDS):\n  │      auto-layout → flexbox, tokens deduped, depth-stable `el` handles\n  │      (mints handles in a full pre-walk so the same node gets the same\n  │       el regardless of the requested depth — `plumb_verify` needs this)\n  │  • Version-keyed cache, fit-to-budget (maxTokens → auto-depth)\n  │  • Fourteen MCP tools (status \u002F outline \u002F node \u002F query \u002F describe \u002F\n  │    tokens \u002F selection \u002F assets \u002F screenshot \u002F search \u002F components \u002F\n  │    verify \u002F fig_outline \u002F fig_node)\n  ▼\n  stdio MCP\n  ▼\nClaude Code · Cursor · VS Code · Windsurf\n```\n\n---\n\n## Configuration\n\n`.env` (gitignored — never commit secrets):\n\n```bash\nFIGMA_TOKEN=figd_your_read_only_token   # REST path only\nPLUMB_FILE_KEY=…                        # for `npm run outline` etc.\nPLUMB_NODE_ID=131:6950                  # demo target\n```\n\nCache and outputs:\n\n- **Cache** — `~\u002F.cache\u002Fplumb\u002Fv1\u002F` (TTL'd; override with `PLUMB_CACHE_DIR`).\n- **Assets** — `.\u002Fplumb-assets\u002F\u003Cscreen>\u002F` (override with `PLUMB_ASSETS_DIR`).\n- **Screenshots** — `.\u002Fplumb-screenshots\u002F` (override with `PLUMB_SCREENSHOTS_DIR`).\n\n---\n\n## Testing\n\n```bash\nnpm run typecheck   # strict TS (server + plugin)\nnpm run build       # bundle server + plugin\nnpm run smoke       # MCP handshake; expects 14 tools\nnpm run check       # offline fit-to-budget + cache verification\nnpm run bridge      # simulated plugin + every tool offline\nnpm run prove       # normalizer depth\u002Ftoken curve (fixture or live)\nnpm run outline     # live: list every screen in your file (needs .env)\nnpm run connect     # live end-to-end against a paired plugin\n```\n\n---\n\n## Layout\n\n```\nplumb-mcp\u002F\n├── src\u002F\n│   ├── index.ts          # bin entry: stdio MCP server + bridge\n│   ├── server.ts         # registers the fourteen tools\n│   ├── verify.ts         # the plumb_verify comparison engine\n│   ├── cache.ts          # on-disk version-keyed result cache\n│   ├── assets.ts         # writes exported assets to disk\n│   ├── pds.ts            # Plumb Design Spec types\n│   ├── keylegend.ts      # the compact-key legend (self-description)\n│   ├── meta.ts           # server name + version\n│   ├── errors.ts         # instruction-shaped error payloads\n│   ├── figma\u002F            # REST ingest + raw Figma types\n│   ├── bridge\u002F           # localhost WebSocket bridge to the plugin\n│   ├── normalize\u002F        # raw Figma → PDS (handles, layout, paint, …)\n│   ├── tools\u002F            # the fourteen MCP tools (one file each)\n│   ├── cli\u002Finit.ts       # `plumb init` — write editor MCP configs\n│   └── util\u002F             # round, estimateTokens, …\n├── figma-plugin\u002F\n│   ├── manifest.json\n│   ├── code.ts           # main thread — reads, serializes, exports\n│   └── ui.html           # the panel (dot + pair button)\n├── scripts\u002F              # smoke · check · bridge · connect · prove · outline\n└── README.md             # you are here\n```\n\n---\n\n## Security\n\n- Loopback-only WebSocket bridge.\n- Single paired plugin at a time; pairing is a deliberate click in the plugin\n  panel (one-time, then remembered via `figma.clientStorage`).\n- Zero telemetry.\n- No personal-access token needed for the plugin path; the REST path's token\n  is consumed only by the server's own outbound `fetch` calls.\n\n---\n\n## License\n\nMIT © Tathagat Maitray. See [`LICENSE`](.\u002FLICENSE).\n","Plumb-mcp 是一个本地 Figma MCP 服务器，旨在为 AI 编码代理（如 Claude Code、Cursor 和 Windsurf）提供无 REST 速率限制和无计量工具调用配额的服务，并且支持所有计划包括免费版。该项目的核心功能是通过桌面应用插件读取 Figma 文件，输出标准化的设计规范而非庞大的 JSON 数据，并直接导出 SVG 图标和 PNG 图像到磁盘；同时，它还提供了一个验证循环，使用 headless Chrome 来确保生成的代码与 Figma 设计相匹配。适用于需要频繁从设计转代码但受限于 Figma 官方 API 限制的开发者或团队，特别是在使用基于 AI 的编码助手时。",2,"2026-06-11 04:04:43","CREATED_QUERY"]