wireframe

name

wireframe

description

Create and render wireframes using wiremd — converts Markdown into visual HTML mockups. Trigger whenever the user wants to wireframe, mockup, prototype, or sketch a UI screen: from a description, Jira ticket, PRD, existing React/JSX, or rough idea. Also trigger on: "draw a login page", "show what this would look like", "create a mockup", "design a screen for X", "sketch the UI", "prototype this flow", "document this component as a wireframe", or any request to render or preview a .md wireframe file.

Wireframe

wiremd converts plain Markdown with extended syntax into visual wireframes — 7 styles, no design tools needed.

Authoring convention

Use plain semantic tokens for UI intent and combine them in one brace block: [Delete]{danger large disabled}, ::: row {right}, ::: column Summary {span-2 right}, ((Done)){success}, [Email___]{type:email error}.

Use key-value attributes for explicit props such as type:email, rows:4, and placeholder:"Search...". Use dot-prefixed tokens only as raw CSS class escape hatches, not in normal examples.

Step 1 — Choose a rendering mode

Ask this single question first, before anything else:

How do you want to view the wireframe?

• display — rendered HTML saved to disk + shown as an artifact in Claude's panel. Works everywhere.
• editor — live browser editor with auto-refresh. Chrome, Edge, or Safari 16.4+. Best for iterating.
• serve — local dev server at localhost:PORT. Any browser. Only when Claude runs on your machine.

Wait for the answer, then read ${CLAUDE_PLUGIN_ROOT}/references/<mode>.md and follow it completely.