Waiframe
waiframePlan it. Build with AI.
For developers who build with AI

Plan it.
Then let AI build it

Your AI coding tool generates better code when it can see your design. Waiframe creates wireframes that Claude Code and Cursor read directly — so the code matches what you actually had in mind.

MCP Integration
AI Generation
60+ Components
No credit card requiredOpen-source MCP server
The Loop

Idea → Wireframe → Code

Stop describing UIs in text and hoping for the best. Give your AI coding tool a real spec to work from.

Step 1

Describe

Tell Waiframe what you're building. The AI plans your screen flow — which screens you need, how they connect, what goes on each one.

Step 2

See it

Get a complete multi-screen wireframe in seconds. Drag-and-drop to adjust. Share a clickable prototype for feedback. Iterate until it feels right.

Step 3

Build it

Connect the MCP server. Your AI coding tool reads the actual component structure — not a screenshot, not a description. Structured data it can build from.

The wireframe isn't the deliverable. The code is. Waiframe is the planning step that makes AI-generated code actually match your vision.

Why this works

Text prompts are lossy. Wireframes aren't.

When you tell your AI “build a dashboard with stats and a sidebar,” it guesses. When it reads a wireframe, it knows.

Without Waiframe

  • "Build me a settings page" → generic layout, wrong components, missing navigation
  • You re-prompt 5 times, manually fix the rest
  • Every screen is a fresh guess

With Waiframe

  • AI reads: nav bar with 4 tabs, form with 3 sections, save button navigates to Dashboard
  • Component types, props, hierarchy, navigation targets — all structured
  • Every screen is built from an actual spec

Wireframes describe structure and intent, not pixels. That's exactly what a code generator needs.

MCP Integration

Your wireframes, in your coding agent

One command connects Waiframe to Claude Code, Cursor, Windsurf, or any MCP-compatible tool.

Step 1

Design

Create wireframes with AI or drag-and-drop

Step 2

Connect

Install the Waiframe MCP server with one command

Step 3

Build

AI reads your wireframes and generates production code

npx @waiframe/mcp-server

What your AI sees

{
"screen": "Login",
"components": [
{ "type": "navigation-bar", "title": "Welcome Back" },
{ "type": "text-input", "label": "Email" },
{ "type": "text-input", "label": "Password" },
{ "type": "button-primary", "label": "Sign In", "navigatesTo": "Dashboard" }
]
}

No UUIDs. No pixel coordinates. Clean semantic structure optimized for code generation.

get_screenComponent tree for any screen
get_flowNavigation sequence between screens
get_design_contextApp type, audience, features
get_project_overviewAll screens and flows at a glance
get_component_specProps and defaults for any component
list_projectsAll your wireframe projects
Open source on GitHub
Get Your API Key — Free

Works with Claude Code, Cursor, Windsurf, and any MCP-compatible tool

AI Generation

Describe your app. Get every screen.

Not one screen at a time. The AI plans your entire flow — which screens you need, how they connect — then generates each one in parallel.

Architect step — You describe your app. AI plans the screen flow: what screens to create, what goes on each one, how they connect.
Parallel generation — Each screen is generated simultaneously. A 6-screen app takes seconds, not minutes.
Refine — Don't like a screen? Describe what to change. The AI modifies it in context, keeping everything else intact.

Choose mobile, tablet, or desktop. The AI generates platform-appropriate components — tab bars for mobile, sidebars for desktop, proper device frames throughout.

Login FlowDashboardE-commerceSettings
When AI isn't enough

Drag, drop, and fine-tune

AI gets you 90% there. The editor handles the rest. 60+ components, visual canvas, no design skills required.

NavigationContentFormsDataFeedback
iPhone
Android
Tablet
Browser

Start with AI, finish by hand. Or build the whole thing manually. Your call.

How It Works

From zero to spec in 5 minutes

A simple workflow from app idea to AI-ready wireframe spec.

01

Create a project

Pick your platform — mobile, tablet, or desktop. Add a short description of what you're building.

02

Generate screens

Describe your app and AI generates the full screen flow. Adjust anything with drag-and-drop.

03

Share a prototype

Generate a link. Anyone can click through your screens without an account. Get feedback before writing code.

04

Connect MCP and build

Run the MCP server. Tell Claude Code or Cursor to build from your wireframes. The code matches the design.

Ready to plan your next project?

Create your first wireframe project and connect it to your AI coding tool.

Get Started

No credit card required

Built for the AI coding era

The wireframe tool for people who build with AI

Figma is for designers. Waiframe is for developers and founders who want to plan their UI before their AI builds it.

"Helped me think"

The AI forces decisions you'd otherwise postpone. What screens does this actually need? How does the user get from A to B? You react to a concrete wireframe instead of staring at a blank canvas.

"Not just a picture"

Your wireframe isn't a PNG someone squints at. It's structured data — component types, properties, navigation targets — that your coding agent reads directly via MCP.

"Idea to code, one loop"

Describe → wireframe → MCP → code. No export steps. No copy-pasting. No lost-in-translation. The spec and the code stay connected.

Not sure what to build yet?

Start with a mind map. Describe your idea, AI breaks it into features and flows. Branch, iterate, export a PRD. Then move to wireframes when you're ready.

Try Mind Maps

Your AI is building blind. Give it a wireframe.

Free to start. MCP server is open source. Plan your next project in 5 minutes.

Get Started Free

No credit card required

Pricing

Start free. Scale when you're ready.

The MCP server is always free and open source. Plans control AI generations and project limits.

Free

Try the full loop

$0/month
  • 3 AI generations/month
  • 2 projects total
  • Priority support
  • MCP integration included
Wireframes
  • 5 screens per project
  • Component library (60+)
  • Drag & drop editor
  • App map view
  • Clickable prototypes
  • PDF/JPG export(watermarked)
  • 1 PRD per project
  • Export to code
  • View-only sharing
Mind Maps
  • Mind map creation
  • Mind map export(watermarked)
  • Version history

Starter

For side projects and MVPs

$12/month

Or $10/mo billed annually

  • 100 AI generations/month
  • 10 projects total
  • Priority support
  • MCP integration included
Wireframes
  • 25 screens per project
  • Component library (60+)
  • Drag & drop editor
  • App map view
  • Clickable prototypes
  • PDF/JPG export(no watermark)
  • 3 PRDs per project
  • Export to code
  • View-only sharing
Mind Maps
  • Mind map creation
  • Mind map export(no watermark)
  • Version history
Most Popular

Pro

For serious builders

$29/month

Or $24/mo billed annually

  • Unlimited AI generations
  • Unlimited projects
  • Priority support
  • MCP integration included
Wireframes
  • Unlimited screens
  • Component library (60+)
  • Drag & drop editor
  • App map view
  • Clickable prototypes
  • PDF/JPG export(no watermark)
  • Unlimited PRDs
  • Export to code(when ready)
  • Full collaboration + comments
Mind Maps
  • Mind map creation
  • Mind map export(no watermark)
  • Version history
Need more?

Custom solutions available

Larger teams, custom integrations, or specific requirements? Let's talk.

Contact Us

Frequently Asked Questions