Wireframe

Produce low-fidelity, black-and-white UI wireframes as standalone SVG files. The goal is to communicate structure — what goes where, in what order, at roughly what size — without committing to colour, brand, or polish.

When to use

Trigger on phrases like:

• "wireframe a [screen / page / flow] for X"
• "low-fi / lo-fi mockup of X"
• "draft a layout for X"
• "rough sketch of the [dashboard / settings / login / ...] page"
• "show me how X would lay out before I build it"

Skip and defer to frontend-design (or similar) when the request mentions: brand, polish, real components, "production-ready", colour palettes, hi-fi, Figma export, or actual code/HTML/React deliverables.

House style — non-negotiable

Wireframes are diagnostic, not decorative. Lock these tokens on every output:

If you need to highlight a specific region for a callout, use the annotation layer (red dashed). Never colourise the wireframe itself.

Workflow

1. Confirm scope. What screen(s)? Which viewport (desktop / tablet / mobile)? Single screen or multi-screen flow? If unclear, ask one question, then proceed with the most likely default.
2. Pick a canvas from the table above. State the viewport in your reply.
3. Compose from primitives. Read references/components.md and assemble the screen from the primitive snippets. Snap every coordinate to 8px.
4. Write the SVG to a file. Default path: wireframes/<slug>.svg in the working directory. Filename slug describes the screen (login.svg, dashboard.svg, settings-account.svg).
5. Emit a textual annotation list in your reply, mapping each numbered region in the SVG to a one-line description ("1 — primary nav, 2 — search input, 3 — list of recent items"). This makes the wireframe accessible, queryable, and reviewable in text-only channels.
6. For multi-screen flows, produce one SVG per screen and a summary flow.svg that arranges thumbnails left-to-right with arrows between them.

Quick start — minimal SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
  <!-- canvas border -->
  <rect x="0" y="0" width="1280" height="800" />

  <!-- example: a button -->
  <g transform="translate(48, 48)">
    <rect width="120" height="40" rx="4" />
    <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>
  </g>
</svg>

Two house-style gotchas worth memorising:

• Always set stroke="none" on <text> elements (text inherits the parent stroke and gets a halo otherwise).
• Always wrap text fill explicitly (fill="#000") since the parent group fill is #fff for boxes.

Primitive library

The full set of reusable primitives lives in references/components.md. Load it whenever you need a primitive whose exact markup you do not have in working memory. Do not re-derive primitives from scratch — copy the snippet and adjust coordinates.

Primitives provided:

• Inputs: button (filled, outlined, icon), text input, textarea, dropdown, checkbox, radio, toggle, search input

…