npx claudepluginhub akonan/wiremd --plugin wireframeThis skill uses the workspace's default tool permissions.
Write a wiremd `.md` file, render it, and iterate. wiremd converts plain Markdown with extended
references/examples/_nav.mdreferences/examples/_sidebar-nav.mdreferences/examples/dashboard.mdreferences/examples/multi-page/_nav.mdreferences/examples/multi-page/detail.mdreferences/examples/multi-page/index.mdreferences/examples/settings-form.mdreferences/multi-page.mdreferences/quick-reference.mdreferences/rendering-modes.mdreferences/styles.mdreferences/syntax.mdreferences/vscode.mdCreates wireframes for UI mockups using SVG for precise layouts or HTML/Tailwind for standard UI patterns. Use for wireframing, mockups, skeletal layouts.
Wireframe a screen — text/ASCII by default, or hand-drawn HTML when the user says "sketch", "hand-drawn", "lo-fi HTML", "whiteboard", "graph paper", or "visual wireframe". Text mode produces a buildable ASCII spec Form and Prism can act on. HTML mode produces a single self-contained file with graph-paper background, marker headlines, sticky-note annotations, and hatched chart placeholders — looks like a designer's whiteboard, commits to nothing.
Generates annotated wireframe specs defining content priority, component placement, interaction notes, responsive behaviors, and fidelity levels for UI layouts.
Share bugs, ideas, or general feedback.
Write a wiremd .md file, render it, and iterate. wiremd converts plain Markdown with extended
syntax into visual wireframes — 7 styles, no design tools needed.
references/syntax.md → Component mapping table)Answer three questions up front — they determine what you build and how you hand it back.
1. What wiremd version is available? Run wiremd --version. Require ≥ 0.1.7 for:
::: layout {.sidebar-main} — proper sidebar CSS (stock 0.1.5 stacks vertically)[[ [Label](./page.md) | ... ]] — cross-page hrefs in nav (stock 0.1.5 drops them silently)![[file.md]] — shared partial includesIf older, build from source: git clone https://github.com/teezeit/wiremd && cd wiremd && npm install && npm run build, then invoke via node path/to/wiremd-fork/bin/wiremd.js.
2. Single page or multi-page? Ask the user up front. For multi-page, scaffold from the start — don't bolt on later:
_nav.md shared across all pages via ![[_nav.md]]_sidebar.md if using sidebar layout.md per page at top levelSee references/multi-page.md for folder layout, cross-page link syntax, and the rebuild recipe.
3. Which render route does this environment support? Triage by the tools Claude actually has — not by product name. See references/rendering-modes.md for the full table.
.html into the user's folder; they open via file:// or double-click.--serve PORT --watch for live iteration..md and direct the user to https://tobiashoelzer.com/wiremd/editor to paste and render.localhost:PORT URL — it binds to Claude's host, not the user's. When in doubt, write HTML to the folder.# Live preview in browser with hot reload
wiremd my-screen.md --style clean --serve 3001 --watch
# Build to a static HTML file
wiremd my-screen.md -o output.html -s clean
# VS Code: Cmd+Shift+P → "wiremd: Open Preview" (live preview while editing)
# See references/vscode.md for extension install steps
Tell the user: open http://localhost:3001 for live preview, or the HTML path for a static file.
To screenshot and verify from the CLI:
npx playwright screenshot --browser chromium --full-page "file://$(pwd)/output.html" /tmp/wf-check.png
Then read the PNG with the Read tool.
Default to clean unless the user specifies otherwise. See references/styles.md for full descriptions.
| Style | Best for |
|---|---|
sketch | Early ideation, lo-fi client presentations |
clean | Stakeholder review, internal handoff (default) |
wireframe | Low-fidelity explorations, documentation |
material | Material Design apps |
tailwind | Tailwind-based products, indigo/purple palette |
brutal | Bold, high-contrast concepts |
none | Custom CSS, embedding elsewhere |
For the full syntax including all attributes, edge cases, and disambiguation rules, read references/syntax.md.
# Navigation & breadcrumbs
[[ :logo: Brand | Home | *Active* | :user: Profile | [Sign Up]* ]]
[[ Home > Section > Current Page ]]
# Sidebar-main layout
::: layout {.sidebar-main}
::: sidebar
[[Dashboard](#)]
[[Reports](#)]
:::
::: main
### Page Title
:::
:::
# In-page tabs — use a button group, * marks the active tab
[Overview]* [Details] [Raw Data]
# Buttons
[Primary]* [Secondary]{.secondary} [Outline]{.outline}
[Danger]{variant:danger} [Disabled]{state:disabled} [Saving...]{state:loading}
# Inputs — label must be on the line DIRECTLY above (no blank line)
Email
[_____________________________]{type:email required}
Password
[*****************************]{type:password required}
Notes
[Your message here...]{rows:4}
Role
[Select role_____________v]
- Admin
- Editor
- Viewer
- [ ] Unchecked - [x] Checked
- ( ) Option A - (*) Option B (selected)
# Row — horizontal group of inputs, filters, or actions
::: row
[Search_______________]{type:search}
[All Teams___________v]
- All Teams
- Team A
:::
# Row, right-aligned
::: row {.right}
[+ New Item]*
:::
# Section header with right-aligned action — VERY COMMON PATTERN
::: grid-2
### Section Title
### {.right}
[+ Add Item]*
:::
# KPI metric card
::: grid-3
### Total Revenue
**$124,500**
↑ 8% vs last period
### Active Users
**3,842**
↑ 12% vs last period
### Conversion
**4.2%**
↓ 0.3% vs last period
:::
# Grid — layout only, equal columns, no card chrome
::: grid-3
### Revenue
$124,500
### Users
3,842
### Conversion
4.2%
:::
# Grid of cards — each item gets card styling
::: grid-3 card
### :rocket: Organic
42% of traffic
:::
# Table
| Name | Role | Status | Actions |
|-------|-------|---------|-----------------|
| Alice | Admin | Active | [Edit] [Remove] |
# Icons — use anywhere in text, headings, nav, buttons
:home: :user: :gear: :chart: :bell: :shield: :rocket: :check: :x: :search: :edit: :trash: :plus:
# Badges / pills — inline status labels and counts
|Active|{.success} |Pending|{.warning} |Failed|{.error} |New|{.primary} |Draft|
# Card, alert
::: card
Content here
:::
::: alert success
Changes saved.
:::
# Annotations for states and design notes
> **Loading state:** spinner + "Loading..."
> **Empty state:** "No items yet" + [Add Item]*
> **Design note:** Only visible to Admin users.
# Modals go after --- at the bottom of the file
---
## Modals & Dialogs
> Not visible on page load.
::: modal
## Confirm Delete
Are you sure?
[Delete]{variant:danger} [Cancel]
:::
A dashboard with sidebar, in-page tabs, a metrics grid, a grid of cards, and a data table.
See the renderable version at references/examples/dashboard.md.
[[ :logo: AppName | Dashboard | *Reports* | :gear: Settings | :user: Account ]]
[[ Dashboard > Reports ]]
::: layout {.sidebar-main}
::: sidebar
#### Navigation
[[Overview](#)]
[[Reports](#)]
[[Analytics](#)]
[[Users](#)]
---
#### Filters
[Jan 2025____________v]
- Last 7 days
- Last 30 days
- This quarter
[Apply Filters]*
:::
::: main
### Monthly Reports
[Summary]* [Details] [Raw Data]
---
::: grid-3
### Total Revenue
$124,500
### Active Users
3,842
### Conversion Rate
4.2%
:::
---
::: grid-3 card
### :rocket: Organic Search
**42%** of traffic
↑ 12% vs last month
### :chart: Paid Ads
**31%** of traffic
↓ 3% vs last month
### :bell: Email
**27%** of traffic
↑ 8% vs last month
:::
---
## Recent Transactions
| Date | Customer | Amount | Status |
|--------|------------|--------|---------|
| Jan 15 | Acme Corp | $4,200 | Paid |
| Jan 14 | Globex Inc | $1,850 | Pending |
| Jan 13 | Initech | $3,100 | Paid |
[Export CSV] [View All Transactions]*
:::
---
## Modals & Dialogs
> Not visible on page load.
::: modal
## Export Report
Format
[CSV_________v]
- CSV
- Excel
- PDF
[Export]* [Cancel]
:::
[_____] — it breaks the association.::: when last line has inline elements. Buttons, backtick code, bold, links, or list items on the final line of a container — add an empty line before :::.[[ ]] nav hrefs require wiremd ≥ 0.1.7. Earlier versions silently drop the URL and every item renders as href="#". Mixed static + clickable works in 0.1.7+: [[ *Home* | [About](./about.md) | [Contact](./contact.md) ]].:::accordion doesn't exist. Use ::: tabs with ::: tab Label children for tabbed panels. For a simple button-group switcher, use [Tab]* [Other].![[file.md]] for includes, not :::display. :::display is obsolete. ![[path/to/file.md]] works in both the CLI and VS Code preview — path resolves relative to the current file.--serve is unreachable from the user's browser. wiremd --serve PORT binds to localhost on Claude's host, not the user's. When Claude is running in Cowork/Desktop and the user is elsewhere, write HTML to a shared folder instead. See references/rendering-modes.md..md hrefs — rewrite after build. wiremd x.md -o x.html preserves ./page.md link targets. For file:// double-click delivery, rewrite with: sed -i -E 's|href="\./([A-Za-z0-9_-]+)\.md"|href="./\1.html"|g' *.html. On macOS without GNU sed, use sed -i ''.references/quick-reference.md — one-page cheat sheet for all components (copied from QUICK-REFERENCE.md at build time)references/syntax.md — full syntax, all attributes, disambiguation rules, component mapping, gotchasreferences/styles.md — style guide with visual descriptions and use casesreferences/multi-page.md — folder layout, shared _nav.md, cross-page links, rebuild recipe for .md→.html handoffreferences/rendering-modes.md — decision table: files-in-folder, dev server, screenshot, web-editor handoffreferences/vscode.md — VS Code extension install and live-preview workflowreferences/examples/dashboard.md — renderable dashboard wireframe (point user to this path)references/examples/settings-form.md — renderable settings/form wireframe (point user to this path)references/examples/multi-page/ — minimal 2-page prototype (_nav.md + index.md + detail.md) demonstrating shared nav, cross-page links, and the render-and-open-html flow