planflow-design-mcp

An MCP server that reads Planflow Design published designs, so an LLM in any MCP client can read every screen's React + Tailwind code and rebuild it.

Set up once

Add it to your MCP client (Claude Code, Claude Desktop, Cursor, …) — no design needed in the config:

{
  "mcpServers": {
    "planflow-design": {
      "command": "npx",
      "args": ["-y", "planflow-design-mcp"]
    }
  }
}

Claude Code: claude mcp add planflow-design -- npx -y planflow-design-mcp

Then just paste a link

In your chat, paste any design's public link and ask:

use this design: https://design.planflow.tools/d/ — build it as a Next.js app

The model calls open_design with the link, then reads the screens. Switching to another design is just pasting a different link — no reconfig.

Tools

open_design · list_artboards · get_artboard(file) · get_all_artboards · get_design_system · get_design_tokens · search_design(query) · get_design_summary · get_implementation_guide

Each accepts an optional design (link or id); once you've opened one it's the default. You can also pin a single design by passing it as an arg: npx -y planflow-design-mcp https://design.planflow.tools/d/<id>.

Remote alternative (no install)

Clients that support remote MCP can point straight at the generic endpoint and pass the link per design:

https://apidesign.planflow.tools/mcp