sketch2md

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.

Built for AI-assisted coding

AI reads Markdown better than it reads your explanations. Instead of describing a layout for ten minutes — "put a search bar on the left, a table below, pagination at the bottom" — you paste a wireframe. The AI builds it.

sketch2md exports clean Markdown that tools like Claude Code, Cursor, and Copilot understand on the first try. One wireframe replaces a page of instructions.

Sketch the screen in sketch2md. Copy. Paste into your AI coding tool. Get working code back.

Origins

sketch2md is forked from Mockdown by Mike Bespalov. We're grateful for the original idea and editor foundation.

This fork keeps the scene graph core and editor bones, while improving code reliability, test coverage, UX, and the AI-assisted workflow for agent-first development.

Why plain text?

Paste your mockup in a GitHub issue. Drop it in Slack. Commit it with your code.

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.

Feedback comes faster when there's nothing to polish. Five layout options in ten minutes.

Component Library — 20+ built-in elements

Every component below is built into sketch2md. Drag to place, double-click to edit.

Form controls
Button
Submit
Input
Enter text...
Dropdown
Select
Search
/ Search...
Checkbox
☑ Enabled
☐ Disabled
Radio
● Option A
○ Option B
Toggle
[━●] On
Progress
[████░░░░] 50%
Navigation
Nav Bar
LogoLinkLinkLinkAction
Tabs
ActiveTab 2Tab 3
Breadcrumb
Home > Docs > About
Pagination
< 1 2 [3]4 5 >
Containers
Card Title

Cards group related content with a header and body area.

Dialog ×

Are you sure?

CancelOK
Data
Component
Type
Editable
Resizable
Button
Form
Card
Container
Table
Data
Nav Bar
Navigation

+ lines, arrows, freehand pencil, brush, spray, boxes, placeholders, split panels, text blocks, and lists.

How It Works
01

Pick a component

Button, card, table, modal — click the toolbar, drag onto the canvas.

02

Edit inline

Double-click any text to rewrite it. Components resize to fit your content.

03

Copy as Markdown

One click. Paste into GitHub, Notion, Slack, or a code comment. Done.

Who Uses This

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 — not next sprint, now.

Designers

Explore 5 layout options in 10 minutes before opening Figma.

Technical Writers

Embed UI diagrams in docs that survive every format conversion.

Get Started

Free. No account. No install. Works offline.

sketch2md · Free ASCII wireframe editor · Your wireframes stay on your device