Skip to content
Agentmart
Submit a tool

Plumb MCP

Two-way Figma MCP: extract + verify design-to-code, or generate on-brand Figma pages from a prompt.

Connector by tathagat22 · GitHub account verified by the MCP Registry

IndexedMITLocal (stdio)★ 81
Write a review

Install

Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.

npx agentmarket install connector/tathagat22-plumb-mcp

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

Two-way Figma MCP: extract + verify design-to-code, or generate on-brand Figma pages from a prompt.

Use cases: ui-design, frontend-development

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list, install config and code. Checked Oct 25, 2026.

Tools
19 read · 2 write · 7 delete
Secrets
2 (API keys, tokens or passwords)
Install scripts
None found
Runs as
Node.js package

Tools by what they do 28

Read from the source code; the running server may list different tools.

Read 19 · Look things up without changing anything.

  • plumb_audit
  • plumb_components
  • plumb_describe
  • plumb_diff
  • plumb_emit_react
  • plumb_fig_node
  • plumb_fig_outline
  • plumb_fit
  • plumb_import_web
  • plumb_node
  • plumb_outline
  • plumb_query
Show 7 more tools
  • plumb_review
  • plumb_scan_references
  • plumb_search
  • plumb_selection
  • plumb_status
  • plumb_tokens
  • plumb_verify

Write 2 · Create, change, send or run things.

  • plumb_screenshot
  • plumb_studio_start

Delete 7 · Delete, drop, revoke or wipe things.

  • plumb_assets
  • plumb_brand
  • plumb_design
  • plumb_source
  • plumb_studio
  • plumb_studio_kit
  • plumb_studio_page

Secrets and settings it asks for

Secrets: values you paste in that let it act as you.

  • FIGMA_TOKEN
  • PLUMB_SESSION_NAME

Network hosts it talks to 40

  • active-theory.com · found in code
  • allbirds.com · found in code
  • anthropic.com · found in code
  • api.anthropic.com · found in code
  • api.dicebear.com · found in code
  • api.figma.com · found in code
  • api.iconify.design · found in code
  • api.pexels.com · found in code
  • api.unsplash.com · found in code
  • apple.com · found in code
  • cdn.tailwindcss.com · found in code
  • dicebear.com · found in code
  • figma.com · found in code
  • fonts.google.com · found in code
  • fonts.googleapis.com · found in code
  • fonts.gstatic.com · found in code
  • github.com · found in code
  • google.com · found in code
  • googleapis.com · found in code
  • gymshark.com · found in code
  • helm.sh · found in code
  • icon-sets.iconify.design · found in code
  • iconify.design · found in code
  • linear.app · found in code
  • lusion.co · found in code
  • mercury.com · found in code
  • openai.com · found in code
  • pexels.com · found in code
  • picsum.photos · found in code
  • pixabay.com · found in code
Show 10 more hosts
  • porsche.com · found in code
  • posthog.com · found in code
  • ramp.com · found in code
  • raw.githubusercontent.com · found in code
  • resend.com · found in code
  • stripe.com · found in code
  • tathagat22.github.io · found in code
  • teenage.engineering · found in code
  • unsplash.com · found in code
  • vercel.com · found in code

Files it touches

  • Your home directory (~)

Tools (28)

Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].

  • plumb_assetsPlumb · assets

    Export Figma assets — icons as SVG, images as PNG — through the paired plugin. Three modes: • Default — `id` or `name` of a screen → recursive export of every asset in it, written to a local folder. • List — same + `list: true` → just the manifest (id, name, format, parentId) of available assets; no files written. Cheap; use first to see what's there. • Surgical — `ids: [...]` → export exactly those node ids (one file each, no recursion). Preferred once you know what you need.

  • plumb_auditPlumb · auditread-only

    Heuristic accessibility audit over a PDS snapshot — pass the raw JSON response from a prior plumb_node/plumb_outline/plumb_query call. Checks today: text contrast against its resolved ancestor background (WCAG AA, large-text threshold applied at ≥24px) and role:"button" nodes under the 44×44px minimum touch-target size. Each finding carries a plain-language `note` plus the raw ratio/box data. This is a heuristic problem-finder, not a certified WCAG audit — it reports failures only (a clean result means the checks it runs found nothing, not that the screen is fully accessible), and heading-orde…

  • plumb_brandPlumb · brand (direct + build)

    Direct a brand board from a one-line brief and BUILD it into the paired Figma file. Given a brief (e.g. "a premium fintech dashboard"), Plumb discovers a diverse set of best-in-class reference sites, screenshots them live, synthesizes a coherent semantic palette from their computed CSS, and assembles a single 1440-wide Brand page (reference screenshots + colour swatches + a type scale) — then compiles it down through the same DSL → PDS → emit-plan write path plumb_design uses and executes it via the plugin. Returns the picked references, the synthesized brand palette, and the built root node i…

  • plumb_componentsPlumb · componentsread-only

    List every Figma component definition in the file and the instance usages of each — useful for understanding the design system before building. Each component carries an instance count; each instance carries the component id, so you can match usage to definition. Pass `health: true` to also get a design-system health report: unused components (zero instances), possible duplicates (near-identical names — 'Button', 'Button copy', 'Button 2'), and variant outliers (an instance whose prop overrides don't match any other instance of the same component, among components with enough instances for a p…

  • plumb_describePlumb · describeread-only

    Text-only visual description of a Figma screen or node — useful when you can't read the rendered screenshot (image-blind harness, sandboxed Read, or token-conscious flows). Returns a per-region narrative ('top-left: ...') and a flat child summary derived from the PDS. Pair with plumb_node for the full structural spec, or pair with plumb_screenshot for the pixel reference.

  • plumb_designPlumb · design (build)

    Author a design from a high-level Plumb Design DSL document and BUILD it into the paired Figma file. This is the write direction: the DSL (semantic pages → sections → blocks + brand tokens) is validated, compiled DOWN to the PDS IR, lowered to a Figma-native emit plan, and executed by the plugin (auto-layout frames, text, images, icons). Returns the created node ids keyed by authored element handle — the join key you then feed to plumb_review / motion. Pass a `brief` to record intent (audience, tone, brand) alongside the build. Use `dryRun: true` to compile + validate without touching Figma.

  • plumb_diffPlumb · diffread-only

    Semantic diff between two PDS snapshots of the same screen — call plumb_node (or plumb_outline/plumb_query) once before a design change and once after, then pass both raw JSON responses here. Returns structured deltas (added/removed/renamed/changed nodes, each with a `note` — e.g. 'the hero moved from (0, 0) to (0, 120)') plus a one-line `summary`, not a JSON diff. Narration uses the same role labels plumb_node already returns on `pattern` (nav/hero/footer/sidebar/card/button) when available, so 'the hero moved' beats 'el btn-3 moved 40px' whenever a role was detected. This tool does no live F…

  • plumb_emit_reactPlumb · emit reactread-only

    Deterministic PDS/WebSpec → React (JSX + inline styles) code generator. Pass the raw JSON from a prior plumb_node/plumb_outline/plumb_query call (Figma) OR a prior plumb_import_web call (a live site) — the same emitter handles both, proving the underlying graph is source-agnostic. Not an LLM call: template-based and deterministic, mirroring the existing PDS→Figma emit path's own 'every conversion happens here, mechanically' design. Output is PIXEL-FAITHFUL (every box's width/height is emitted explicitly), not a hand-tuned responsive component — there's no hug/fill/fixed sizing signal in the gr…

  • plumb_fig_nodePlumb · fig noderead-only

    Read one node from a saved .fig file by its id (the `sessionID:localID` form returned by plumb_fig_outline). Returns the node's type, name, size, auto-layout mode, fills, opacity, and (for TEXT nodes) characters and font. Pair with plumb_fig_outline to find the id first.

  • plumb_fig_outlinePlumb · fig outlineread-only

    Read a saved .fig file from disk and list every screen (top-level frame) across every page. The headless / CI counterpart to plumb_outline — works with no Figma desktop, no plugin pairing, no FIGMA_TOKEN. Use this when you've exported a .fig file and need to inspect or implement screens without opening Figma.

  • plumb_fitPlumb · fitread-only

    Self-healing build loop — iterate to a pixel-perfect match instead of a one-shot check. The loop: 1. Build the component, stamping data-plumb-id="<el>" on each element using the PDS handles (same `el` keys plumb_node/plumb_query return). 2. Capture box (getBoundingClientRect) + the getComputedStyle subset (backgroundColor, color, font*, padding*, gap, flex*, justifyContent, alignItems, borderRadius/Color/Width, opacity, textDecorationLine) + text for every tagged element. Same shape as plumb_verify. 3. Call plumb_fit with `rendered`. You get back: • score — 0–100 convergence (c…

  • plumb_import_webPlumb · import webread-only

    Import a live webpage's structure and semantics — no Figma connection needed. Drives headless Chrome to walk the page's visible DOM (skipping script/style/hidden elements), maps it onto the same Semantic Graph Figma designs use, and returns nodes carrying real CSS values (hex colors, literal px) plus a detected `role` (nav/hero/footer/sidebar) using the exact same classifier plumb_node's `pattern` field uses. Use this to understand an existing site's structure, audit it (plumb_audit accepts this shape too), or track it over time (plumb_diff two imports of the same URL). Text nodes also carry `…

  • plumb_nodePlumb · noderead-only

    Extract a Figma screen or node as a compact, normalized Plumb Design Spec (PDS): deduplicated design tokens plus a CSS-shaped node tree, with auto-layout pre-resolved to flexbox. With the Plumb plugin paired, pass a screen `id` or `name` (no file key) — duplicate names come back as a match list to disambiguate. On the REST path, pass `fileKey` + `id`.

  • plumb_outlinePlumb · outlineread-only

    Map a Figma file cheaply: its pages and their top-level screens (id, name, size). The shallow entry point — call it to find the screen you want, then call plumb_node with that screen's id (or name) to extract it. With the Plumb plugin paired, no file key is needed.

  • plumb_queryPlumb · queryread-only

    Query a Figma subtree by pattern instead of dumping the whole tree. Use this on dense screens where plumb_node would be too big — pull a skeleton (structure only, no text/fills/effects), every button, every TEXT node above a size, every instance of a component, or every node Plumb classified with a given semantic role (nav/hero/footer/sidebar/card — select: "role"). Mirrors the same scope-resolution as plumb_node: pass `id` or `name` with the plugin paired, or `fileKey` + `id` (or a Figma URL) on the REST path.

Show 13 more tools
  • plumb_reviewPlumb · reviewread-only

    Description is built at runtime.

  • plumb_scan_referencesPlumb · scan referencesread-only

    Scan N live reference URLs and extract a per-role STYLE DIGEST — concrete nav/hero/footer/card exemplars (box size, layout, colour, type size/family, alignment) from each reference that actually has one, using the same structural pipeline plumb_import_web uses. Streams live progress to Plumb Studio as each reference is scanned. Use this BEFORE plumb_studio/plumb_design when you want the generated sections to actually resemble the references structurally (typical hero height, card-grid density, nav style) — not just share their colour palette (that's plumb_brand's job). Returns data for you to …

  • plumb_screenshotPlumb · screenshot

    Render a Figma screen or node to PNG (or JPG) and save it locally; returns the file path. Use this as a visual reference while building UI from the PDS — and later as the source for plumb_verify. Plugin path; needs the Plumb plugin paired.

  • plumb_searchPlumb · searchread-only

    Find nodes across the file by name and/or type — 'where is the primary button?', 'every TEXT layer named Title', etc. Returns matches with id, name, type, page, and size. Drill into one with plumb_node, or pull its asset with plumb_assets. Plugin path; needs the Plumb plugin paired.

  • plumb_selectionPlumb · selectionread-only

    Extract whatever the user currently has selected in Figma, via the paired Plumb plugin — no file key, no token, no rate limit. Returns the same compact PDS as plumb_node. Prefer this when plumb_status shows the plugin connected and the user says 'build this' about their Figma selection.

  • plumb_sourcePlumb · source

    Source design assets from the open web — icons, photos, avatars, illustrations — for the write direction. Queries every provider in parallel (keyless-first: Iconify, Lorem Picsum, DiceBear always work; Unsplash / Pexels / Pixabay activate when their API key is in env) and ranks the results with one scoring function, including pick-the-right-icon-pack so a design uses ONE consistent icon family. Two modes: • search (default) — return ranked candidates (metadata only, no bytes). Cheap; use to see what's available and which icon pack was locked. • fetch — resolve the best match, download its …

  • plumb_statusPlumb · statusread-only

    Plumb's status and self-description — call this FIRST. Reports which data paths are available (the paired Figma plugin, and/or the REST token), how many screens the plugin sees, the compact-key legend for reading every PDS response, and the token budget. Needs no Figma access. Plumb is the rate-limit-free, plan-free alternative to Figma's official Dev Mode MCP and Framelink (figma-developer-mcp) — reach for it when the official MCP is plan-gated, exceeds the 25k token cap, or when REST returns 429.

  • plumb_studioPlumb · studio (direct + build a full page)

    Direct a FULL landing page from a one-line brief and BUILD it into the paired Figma file — the headline director-completion tool. Given a brief (e.g. "a premium fintech dashboard"), Plumb discovers a diverse set of best-in-class reference sites, screenshots them live, synthesizes a coherent semantic palette from their computed CSS, then composes a real, brand-consistent page — nav, hero, features, a reference-imagery gallery, a content split, a cta, and a footer, with copy derived from the brief — and builds it through the same DSL -> PDS -> emit-plan write path plumb_design uses. Returns the …

  • plumb_studio_kitPlumb · studio kit (build the component library)

    STEP 2 of the transparent studio flow. Build the reusable COMPONENT LIBRARY for a session's brand — real Figma component masters (Button, FeatureCard, StatCard, PricingCard) — onto a named page and put them on show. The masters inherit the session palette + type scale. Follow with plumb_studio_page to compose product pages that instantiate this kit. Requires a sessionId from plumb_studio_start and the Plumb plugin paired.

  • plumb_studio_pagePlumb · studio page (compose a product page)

    STEP 3 of the transparent studio flow (repeatable). Compose a full PRODUCT PAGE of a given kind — landing / features / pricing / dashboard — onto its own named Figma page, reusing the session's brand + reference imagery and instantiating the component library. Returns { rootId, ids, authoredPath } — screenshot the rootId, grade it as director, then feed it to plumb_review for the critique loop. Call once per page to build a whole product page by page. Requires a sessionId from plumb_studio_start and the Plumb plugin paired.

  • plumb_studio_startPlumb · studio start (references + brand + open session)

    STEP 1 of the transparent studio flow. Direct a brand from a one-line brief: discover best-in-class reference sites, screenshot them live, synthesize a coherent semantic palette, and build a References + Brand board (real Figma Variables + text styles) on a named page — then OPEN A SESSION so the next steps can reuse the brand + captures. Returns { sessionId, name, brand, references }. Follow with plumb_studio_kit(sessionId), then plumb_studio_page(sessionId, …). Requires the Plumb plugin to be paired.

  • plumb_tokensPlumb · tokensread-only

    Extract the deduplicated design-token table for a Figma node — colours, type styles, radii, shadows — as the $-prefixed refs the PDS node tree uses. With the Plumb plugin paired, pass a screen `id` or `name` (no file key). On the REST path, pass `fileKey` + `id`. Build with these tokens, not magic numbers.

  • plumb_verifyPlumb · verifyread-only

    Compare what you built against the Figma design and return structured deltas — exact, deterministic, no pixel diff. After rendering, for every element you tagged `data-plumb-id="<el>"` (or the globally-unique `data-plumb-id="<path>"` for deeply nested DOM), collect: • box — getBoundingClientRect() → { x, y, w, h } • styles — a subset of getComputedStyle: backgroundColor, color, fontFamily, fontSize, fontWeight, lineHeight, padding{Top,Right,Bottom,Left}, gap, flexDirection, justifyContent, alignItems, borderRadius, borderColor, borderWidth, opacity, textDecorationLine, boxShadow, backdropF…

Compare and alternatives

    Featured in

    Signals

    Stars
    81
    Forks
    7
    Open issues
    3
    Contributors
    3
    Last commit
    Oct 10, 2026 (18 days ago)
    Last release
    Jul 3, 2026 (3 months ago)

    From GitHub (fetched Oct 24, 2026).

    Details

    Registry name
    io.github.tathagat22/plumb-mcp
    Version
    0.13.2
    Auth
    API key
    Packages
    npm plumb-mcp
    License
    MIT
    Repository
    github.com/tathagat22/plumb-mcp
    Website
    tathagat22.github.io/plumb-mcp/
    First seen
    Oct 24, 2026
    Last checked
    Oct 24, 2026
    Source
    Official MCP Registrygithub-graphql

    More from tathagat22

    Cite this page

    Plumb MCP. Agent Mart. https://agentmart.dev/connectors/tathagat22-plumb-mcp (last updated 2026-10-24)