How does HTML-to-wireframe work?

When you ask AI to create a wireframe, it generates standard HTML with inline CSS. The WireframePro MCP server converts each element into editable wireframe components on your canvas — buttons, text fields, images, navigation bars, and more.

Is WireframePro MCP free?

The CLI npm package requires a MockFlow account (free tier available). 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 are counted. CLI MCP Basic: 10 per 30 minutes per user. CLI MCP Paid: 30 per 30 minutes per user. Desktop Basic: 10 per 30 minutes. Desktop Paid/App Store: 30 per minute. Every response includes RateLimit headers.

WireframePro MCP Server - AI to Wireframes, Wireframes to Code

Two-Way Workflow

Design to code. Code to design.

WireframePro bridges the gap between visual design and production code.

↓

AI → Wireframe

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

AI generating HTML that becomes an editable wireframe in WireframePro

↑

Wireframe → Code

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

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

Choose Your Setup

Two ways to connect

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.

How it works:

Step 1: Open Desktop App → open a WireframePro project

Step 2: In Claude Code / Cursor, run:
claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp

Step 3: Ask: "Create a wireframe for..."

3 tools + read_wireframe (export wireframe to code)

Best for: Designers, product teams, design-to-code workflows. Works with offline/file-mode projects.

Download App →

For developers — Saved to your account

CLI Web MCP

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

How it works:

Step 1: npm install -g @mockflow/wireframepro-mcp

Step 2: mockflow-wireframepro-mcp login

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

ChatGPT

Coming soon

Codex (OpenAI)

Coming soon

How It Works

From description to wireframe

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

Wireframes

render_wireframe

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

Flowcharts & Diagrams

render_flowchart

Create flowcharts and UML diagrams with 11 category types.

Cloud Architecture

render_cloudarchitecture

AWS, Azure, GCP, and Cisco network diagrams.

Desktop Only

Export to Code

read_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

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."

Use Cases

WireframePro MCP for every team

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 & 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

Pre-built 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 pre-built prompts. Each skill can be installed in Claude Code.

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

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

npm: @mockflow/wireframepro-mcp mockflow/wireframepro-mcp

MIT License

FAQ

WireframePro MCP — Frequently asked questions

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.

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.

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 — the AI handles the code generation based on your wireframe layout.

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.

Mida AI is MockFlow's built-in AI assistant that lives inside the IdeaBoard 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.

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.

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 / 30 minutes (per user)
Desktop App (Basic)	10 tool calls / 30 minutes
Desktop App (Paid / App Store)	30 tool calls / minute

WireframePro MCP Server

Design to code. Code to design.

AI → Wireframe

Wireframe → Code

Two ways to connect

Desktop App MCP

How it works:

CLI Web MCP

How it works:

Connect your favorite AI tools

From description to wireframe

Describe

Generate

Refine or Export

What you can do

What you can ask AI to create

WireframePro MCP for every team

Product Management

Software Engineering

Design & UX

Startups

Agencies

Education

Pre-built prompts for Claude Code

How to install a skill

Skills Library

Create custom skills

Built in the open

WireframePro MCP — Frequently asked questions

Start creating with AI

Get MockFlow

Contact form

Connect with us

OR

Sign in with SSO