What problem does it solve? Teams often jump straight to visual design and end up debating fonts and colors instead of whether the right things are on the screen. This Skill designs the structural anatomy of screens at wireframe fidelity — what goes where and why — so layout decisions stay cheap to change and critique stays focused on structure. ## Core Features & Use Cases - Three fidelity rungs: lo-fi idea vignette boards for divergent mechanism exploration, complete interactive mid-fi wireframes with real labels and working native controls, and click-through prototype views that materialize flow logic. - Locked design system: every artifact embeds a verbatim grayscale component kit (tokens, palette, buttons, forms, cards, overlays) with a 4px grid, one fixed indigo accent, and a separate annotation layer of numbered markers and notes rails. - Multi-format output: self-contained HTML with grid/slideshow/prototype viewer and light-dark theme toggle, plus Figma and pencil output via MCP. - Use Case: Ask to wireframe a checkout flow and receive a single HTML file containing every screen at realistic density, with clickable triggers navigating the flow and per-frame annotation notes for the design review. ## Quick Start Ask the assistant to wireframe the dashboard screen as an HTML artifact with a click-through prototype of the main flow.
