What problem does it solve? Teams often jump straight to visual design or a single layout idea, so structural questions about what belongs on a screen and where it sits never get debated. This Skill produces wireframe-fidelity artifacts — lo-fi idea boards, complete interactive grayscale wireframes, and click-through prototypes — so screen structure can be critiqued before styling makes changes expensive. ## Core Features & Use Cases - Three fidelity rungs: lo-fi idea vignettes for divergent mechanism exploration, mid-fi full-page interactive wireframes for structural convergence, and a prototype view that wires real trigger elements into a click-through flow. - Locked design system: a five-role grayscale palette, 4px spacing grid, token-driven type scale, drawn SVG glyphs, and native interactive controls (buttons, inputs, switches, chips) embedded verbatim from reference files into one self-contained HTML file per rung. - Viewer chrome with grid, slideshow, and prototype modes: section grouping, per-frame annotation rails with numbered markers, light/dark theme toggle, and hash-linkable review states. - Use Case: Ask to wireframe a checkout flow and receive a wireframes-checkout.html file with every screen at realistic density, real labels, working controls, annotation notes, and an optional prototype mode that walks the flow defined with the companion /journey skill. ## Quick Start Ask the assistant to wireframe the dashboard screen as an HTML artifact with a grid and slideshow view.
