wireframe

1# Wireframe
2 
3Produce 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.
4 
5## When to use
6 
7Trigger on phrases like:
8 
9- "wireframe a [screen / page / flow] for X"
10- "low-fi / lo-fi mockup of X"
11- "draft a layout for X"
12- "rough sketch of the [dashboard / settings / login / ...] page"
13- "show me how X would lay out before I build it"
14 
15Skip 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.
16 
17## House style — non-negotiable
18 
19Wireframes are diagnostic, not decorative. Lock these tokens on every output:
20 
21| Token            | Value                                             | Notes                                  |
22| ---------------- | ------------------------------------------------- | -------------------------------------- |
23| Stroke           | `#000` width `1.5`                                | All borders, dividers, outlines        |
24| Fill (boxes)     | `#fff`                                            | Default for cards/containers           |
25| Placeholder fill | `#e6e6e6`                                         | Image/avatar/empty-state regions       |
26…