wireframe

# 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: | 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 ...