WireframePro MCP

WireframePro MCP server.

Two way design workflow. AI creates wireframes. Export wireframes to code.

Connect to MCPSee the tools
Open source · Claude · Cursor · VS Code
Two way workflow

Design to code. Code to design.

WireframePro bridges the gap between visual design and production code.

AI generating HTML that becomes an editable wireframe in WireframePro

AI to wireframe

Describe a page layout. AI generates HTML. WireframePro converts it to editable wireframe components on your canvas.

Exporting a wireframe design to AI for React and Tailwind code generation

Wireframe to code

Design your wireframe in the editor, then ask AI to generate React, Vue, or Tailwind code from it.

Choose your setup

Two ways to connect.

Work right on your open canvas with the desktop app, or install the CLI and save wireframes to your account.

Most powerful · direct on canvas

Desktop App MCP

Built into the MockFlow Desktop App. Full two way workflow: create wireframes and export them to code.

  1. Step 1Open Desktop App → open a WireframePro project
  2. Step 2In Claude Code / Cursor, run:
    claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp
  3. Step 3Ask: "Create a wireframe for..."

Includes read_wireframe to export a wireframe to code.

Best for designers, product teams and design to code workflows. Works with offline and file mode projects.

Download the app
For developers · saved to your account

CLI Web MCP

Install from npm, log in through the browser (OAuth), and wireframes are saved to your MockFlow account.

  1. Step 1
    npm install -g @mockflow/wireframepro-mcp
  2. Step 2
    mockflow-wireframepro-mcp login
  3. Step 3
    mockflow-wireframepro-mcp

Best for developers using Claude Code, Cursor or VS Code Copilot.

npm package
Works with

Connect your favorite AI tools.

Step by step guides for each tool, with more on the way.

Claude AI

Claude.ai

Learn more
Claude Code CLI

Claude Code

Learn more
Cursor AI editor

Cursor

Learn more
VS Code with GitHub Copilot

VS Code Copilot

Learn more
ChatGPT

ChatGPT

Coming soon
OpenAI Codex

Codex (OpenAI)

Coming soon
How it works

From description to wireframe.

Describe a page, get an editable wireframe, then refine it or turn it into code.

1

Describe

Tell your AI what page or layout you need.

2

Generate

AI creates HTML, MCP converts to editable wireframe components.

3

Refine or export

Edit in WireframePro, or ask AI to convert the wireframe to React/Vue/Tailwind code.

Tools

What you can do.

Each tool turns your AI's output into something you can keep editing in WireframePro.

Wireframesrender_wireframe

AI generates HTML with inline CSS. MCP converts to editable wireframe components on your canvas.

Flowcharts and diagramsrender_flowchart

Create flowcharts and UML diagrams across many diagram categories.

Cloud architecturerender_cloudarchitecture

AWS, Azure, GCP, and Cisco network diagrams.

Desktop onlyExport to coderead_wireframe

Read the wireframe from your canvas and export design context for AI code generation. Ask AI to convert your wireframe to React, Vue, Tailwind, or any framework.

Example prompts

What you can ask AI to create.

Ask in plain language from Claude Code, Cursor or VS Code Copilot.

Wireframe

"Create a wireframe for a SaaS dashboard with sidebar, stats cards, and data table."

Wireframe

"Wireframe an e-commerce checkout page with cart summary and payment form."

Export to code

"Read the current wireframe and convert it to React with Tailwind CSS."

Flowchart

"Create a flowchart for the payment processing flow."

Contextual: codebase

"Based on my website repo create a pricing page wireframe using the same styleguide"

Add to existing project

"Wireframe a settings page at https://app.mockflow.com/wire/M5b8a...#/page/M9fc0..."

Use cases

WireframePro MCP for every team.

From product briefs to production code, AI gets your team to a wireframe faster.

Product manager converting PRDs into wireframes with AI

Product management

Convert PRDs into wireframes. Share interactive mockups from AI conversations.

Engineer generating wireframes from API routes and converting to code

Software engineering

Generate wireframes from API routes. Convert wireframes to React/Vue code.

Designer iterating wireframes with AI and exporting to code

Design and UX

Iterate wireframes with AI. Export designs for pixel-perfect frontend code.

Startup founder rapidly prototyping ideas with AI wireframes

Startups

Rapidly prototype from ideas. Go from concept to wireframe in seconds.

Agency creating client wireframes from brief descriptions

Agencies

Create client wireframes from brief descriptions. Speed up proposal workflows.

Educator teaching UI design with AI-generated wireframe examples

Education

Teach UI design with AI-generated examples. Create wireframe assignments instantly.

AI Skills

Ready made prompts for Claude Code.

Skills teach Claude Code how to use WireframePro tools for specific tasks. Install a skill once, and it triggers automatically when Claude detects a matching intent.

How to install a skill

Copy the skill file to your Claude Code skills directory:

mkdir -p ~/.claude/skills/mockflow-wp-retro-windows-98-style
# Copy SKILL.md from the GitHub repo skills/ directory

Then use it naturally in Claude Code:

# Triggers automatically:
"Create a retro Windows 98 style wireframe"

# Or invoke directly:
/mockflow-wp-retro-windows-98-style Create a settings page

Skills library

Browse the WireframePro Skills Library for more ready made prompts. Each skill can be installed in Claude Code.

WireframePro Skills Library

Create custom skills

Use the Mida Skills modal inside WireframePro to generate or create skills from scratch, then install them in Claude Code.

Open source

Built in the open.

The WireframePro MCP server is on GitHub and npm under the MIT license.

npm: @mockflow/wireframepro-mcpmockflow/wireframepro-mcp
# Install WireframePro MCP Server
npm install -g @mockflow/wireframepro-mcp

MIT License

Questions

WireframePro MCP: Frequently asked questions.

How it works, exporting to code, pricing and limits.

How does HTML-to-wireframe work?
When you ask AI to create a wireframe, it generates standard HTML with inline CSS describing your layout. The WireframePro MCP server receives this HTML and converts each element into editable wireframe components on your canvas: buttons, text fields, images, navigation bars, and more. You get a fully editable wireframe, not a static screenshot.
What is read_wireframe?
read_wireframe is a Desktop App exclusive tool that exports your current wireframe design to AI for code generation. It reads the components on your canvas and provides the design context so AI can generate React, Vue, Tailwind, or any framework code from your wireframe. This tool is only available when using the MockFlow Desktop App MCP.
Which frameworks can I export to?
You can export wireframes to React, Vue, Next.js, Tailwind CSS, and plain HTML/CSS. Since read_wireframe provides design context to the AI, you can ask for any framework or styling approach, and the AI handles the code generation based on your wireframe layout.
Can I convert existing wireframes to code?
Yes. Open your wireframe in the MockFlow Desktop App, then use the read_wireframe tool from Claude Code or Cursor. The AI reads your existing design and generates production-ready code in the framework of your choice.
Can I add wireframes to an existing project?
Yes, in two ways:

Desktop App: Renders wireframes directly on your open canvas.

CLI MCP: Pass your wireframe URL to add screens to an existing project. If the URL includes a page hash fragment, the wireframe is created on that specific page. For example:
“Wireframe a settings page at https://app.mockflow.com/wire/M5b8a...#/page/M9fc0.../mode/design”
How is this different from Mida AI?
Mida AI is MockFlow's built-in AI assistant that lives inside the board and WireframePro editors. It generates, modifies, and transforms content directly on your canvas with full context of your project.

MCP servers let you use MockFlow's visualization tools from external AI tools like Claude Code, Cursor, or VS Code Copilot. MCP is ideal when you're already working in your IDE or AI chat and want to create visuals without switching to MockFlow.

In short: Mida AI is the full experience inside MockFlow. MCP brings MockFlow's tools to wherever your AI already is.
Is WireframePro MCP free?
The CLI npm package requires a MockFlow account (free tier available) for saving wireframes to your workspace. The Desktop App MCP is included with the MockFlow Desktop App. The npm package is open source under the MIT license.
Are there rate limits?
Yes. Only tool calls (render_wireframe, render_flowchart, render_cloudarchitecture, read_wireframe) are counted. Protocol messages like initialize and tools/list are unlimited.
CLI MCP (Basic)10 tool calls / 30 minutes (per user)
CLI MCP (Paid)30 tool calls / minute (per user)
Desktop App (Basic)10 tool calls / 30 minutes
Desktop App (Paid / App Store)30 tool calls / minute
Get started

Start creating with AI.

Get started freeBook a demo
Install from npm

Install the WireframePro MCP server, then log in with your MockFlow account.

npm install -g @mockflow/wireframepro-mcp