wireframe

wiremd

Text-first UI design tool - Create wireframes and mockups using Markdown syntax

wiremd is a markdown-based UI wireframing tool that lets you create wireframes and mockups using familiar markdown syntax with intuitive extensions. Write your UI designs as text, render them as beautiful wireframes.

Why wiremd?

• Designer-friendly syntax - No complex DSL to learn, just extended Markdown
• Version control ready - Store your wireframes as plain text in Git
• Fast iteration - Update designs as quickly as you can type
• Collaboration - Review wireframe changes in pull requests
• Developer handoff - Export to HTML or framework components
• No vendor lock-in - Open source MIT license, runs anywhere

Quick Example

Contact Form

Create a contact.md file:

## Contact Form

Name
[_____________________________]{required}

Email
[_____________________________]{type:email required}

Message
[_____________________________]{rows:5}

[Submit]* [Cancel]

Generate a wireframe:

wiremd contact.md --style sketch

This renders into a styled HTML wireframe with a form, inputs, and buttons.

Grid Layout

Create a features.md file:

::: grid-3 card

### :rocket: Fast
Lightning quick performance

### :shield: Secure
Bank-level security

### :gear: Flexible
Fully customizable

:::

Generate a wireframe:

wiremd features.md --style sketch

This creates a responsive 3-column grid layout with icons and descriptions.

Features

• ✅ Markdown-first - Valid markdown that degrades gracefully
• ✅ Full markdown support - Headings, text formatting, lists, links, images, blockquotes, code blocks, tables
• ✅ Grid layouts - Responsive multi-column grids (2, 3, 4, 5 columns) with simple ::: grid-N syntax
• ✅ Visual syntax - Looks like what it renders
• ✅ Fast to write - Intuitive shortcuts for common patterns
• ✅ Extensible - Add classes and attributes as needed
• ✅ Multiple outputs - HTML, JSON, React (JSX/TSX), Tailwind CSS, Figma (via plugin)
• ✅ 7 visual styles - sketch (Balsamiq-inspired), clean, wireframe, tailwind, material, brutal, none
• ✅ Full CLI tool - Watch mode, live-reload dev server, style switching
• ✅ Rich examples - Showcase files demonstrating all styles
• ✅ Framework renderers - React, Tailwind CSS classes (Vue, Svelte coming soon)
• ✅ VS Code extension - Live preview with real-time updates and style switching

Project Structure

This is an open-source MIT-licensed project containing:

• src/ - Core parser and renderer library
• tests/ - Comprehensive test suite (48 tests)
• docs/ - Documentation site (Live at teezeit.github.io/wiremd)
• docs/examples/ - Example wireframes
• figma-plugin/ - Figma plugin for importing wiremd designs
• vscode-extension/ - VS Code extension with live preview and style switching

Installation

npm

npm install -g wiremd

yarn

yarn global add wiremd

pnpm

pnpm add -g wiremd

Homebrew (macOS)

brew install teezeit/wiremd/wiremd

From Source

git clone https://github.com/teezeit/wiremd.git
cd wiremd
npm install
npm run build
npm link

Use with Claude

This repo ships a wireframe skill that teaches Claude how to write wiremd syntax and render mockups. It's packaged as a Claude plugin marketplace (.claude-plugin/marketplace.json), so the same GitHub URL installs on every surface that supports marketplaces. A zip fallback is available for surfaces that only accept skill uploads.

Claude Code (CLI)

Inside a Claude Code session:

/plugin marketplace add teezeit/wiremd
/plugin install wireframe@wiremd

Then /reload-plugins (or restart the session).

Claude Desktop

1. Open Settings → Plugins → Add Marketplace
2. Paste the repo URL: https://github.com/teezeit/wiremd (or the shorthand teezeit/wiremd)
3. In the newly added wiremd marketplace, install the wireframe plugin

Claude.ai, Claude Cowork (zip upload)

Surfaces that only accept skill uploads (no GitHub import) take a zip:

1. Download the latest skill bundle: wireframe-skill.zip (attached to each GitHub release; or build locally with npm run skill:zip)
2. Open Claude → Settings → Capabilities → Skills → Upload skill
3. Select wireframe-skill.zip

The skill activates automatically when you ask Claude to wireframe, mock up, or sketch a UI.