wireframe

Topics in the source

• Wireframe
• When to use
• House style — non-negotiable
• Workflow
• Quick start — minimal SVG
• Primitive library
• Grid, palette, and type scale
• Worked examples

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. 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. Wireframes are diagnostic, not decorative. Lock these tokens on every output: | Token | Value | Notes | | ---------------- | ------------------------------------------------- | -------------------------------------- | | Stroke | #000 width 1.5 | All borders, dividers, outlines | | Fill (boxes) | #fff | Default for cards/containers | | Placeholder fill | #e6e6e6 | Image/avatar/empty-state regions | | Text colour | #000 for labels, #666 for placeholder text | No other colours | | Accent | #d33 (dashed) — annotation layer ONLY | Never inside

This is an excerpt. Refer to the complete source and its current requirements.