RefMockdown — ASCII Wireframe Editor

Mockdown — ASCII Wireframe Editor

Mockdown — ASCII Wireframe Editor

Wireframes that live in plain text. Sketch a UI in minutes, export as Markdown, paste into Claude Code or Cursor. AI reads a wireframe faster than your explanation. 20+ components, zero setup.

Mockdown ASCII Wireframe Editor

What Is It

Mockdown is a browser-based ASCII wireframe editor that lets you sketch UI layouts using text-based components and export them as clean Markdown. The key insight: AI coding tools read Markdown wireframes better than verbal descriptions of layouts.

Free, no account required, no installation, works offline. Wireframes stay on your device.

What Problem Does It Solve

Describing a UI layout to an AI is painful and imprecise:

"Put a search bar on the left, a table below, pagination at the bottom…"

With Mockdown you just:

  1. Sketch the screen in Mockdown
  2. Click "Copy Markdown"
  3. Paste into Claude Code, Cursor, or Copilot
  4. Get working code back

"One wireframe replaces a page of instructions."

It also solves the format portability problem of visual wireframe tools: ASCII wireframes paste into GitHub issues, Slack messages, code comments, and Notion pages without broken image links or export friction.

Key Features

20+ Built-in Components

Form controls: Button, Input, Dropdown, Search, Checkbox, Radio, Toggle, Progress bar

Navigation: Nav Bar, Tabs, Breadcrumb, Pagination

Containers: Card, Dialog/Modal

Data: Table (with headers and rows)

Drawing: Lines, Arrows, Freehand Pencil, Brush, Spray, Boxes, Placeholders, Split panels, Text blocks, Lists

Editor Capabilities

  • Drag to place components, double-click any text to edit inline
  • Components resize to fit content
  • Generate button (AI generation feature)
  • Undo/Redo, Clear Canvas, Toggle Grid Lines, Dark Mode
  • 80×40 character canvas
  • Copy Markdown — one click exports the full wireframe as plain text

Why Plain Text?

  • Paste into GitHub issues, Slack, code commits — no screenshots, no broken image links
  • Commits with your code (wireframes are version-controllable)
  • "No screenshots. No broken image links. No 'can you export that as PNG?'"

Why Lo-fi?

  • "Text wireframes keep the conversation on structure, not color"
  • Faster feedback: "Five layout options in ten minutes"
  • No time wasted polishing pixels before the layout is validated

Who Built It

Mike Bespalov (@bbssppllvv) — Design + Code + AI. Founder of Refero (250K+ users). Ex-Clerk. Based in Barcelona.

Why It Matters

AI-Native Workflow

Mockdown is explicitly designed for the AI-assisted coding era. Most wireframe tools were built for human-to-human communication; Mockdown is built for human-to-AI communication. The Markdown output is structured for LLM consumption, not just visual clarity.

Target Users

  • Developers: Sketch a login form in a code comment before writing the first line of JSX
  • Product Managers: Show a layout idea in a Jira ticket — immediately, not next sprint
  • Designers: Explore 5 layout options in 10 minutes before opening Figma
  • Technical Writers: Embed UI diagrams in docs that survive every format conversion

The Shift from Visual to Textual Prototyping

Tools like Figma are optimized for high-fidelity visual design. Mockdown is optimized for the idea phase — when you need to communicate structure quickly to both humans and AI systems. It occupies the space between a napkin sketch and a proper wireframe tool.

  • openspec.dev — AI-powered spec writing tool (complementary: Mockdown for layout, OpenSpec for behavior)
  • github-spec-kit — GitHub's spec format for communicating with AI agents
  • ascii-art — The underlying art form Mockdown builds on
  • claude-code — Primary AI coding tool that consumes Mockdown's Markdown output
  • vibe-coding — The workflow Mockdown accelerates: idea → wireframe → code

Added: February 18, 2026

Edit this page