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: