What problem does it solve? Frontend code generated without design context rarely matches the user's vision, causing repeated rework. This Skill enforces a structured discovery workflow — briefing, reference collection, design direction, and atomic builds — so UI code is accurate on the first attempt. ## Core Features & Use Cases - Structured Discovery Workflow: A 7-phase process (Briefing, References, Design Direction, Stitch Prototyping, Execution Plan, Atomic Build, Review) that scales from single components to full applications. - Design Direction Synthesis: Converts user references into a concrete summary covering color palette, typography pairing, layout approach, and icon style, with explicit approval before coding. - Google Stitch Integration: Optional visual prototyping via Stitch MCP or manual prompts, including design systems, variants, and HTML extraction as build references. - Use Case: A developer asks for a dashboard but cannot articulate the design. The Skill asks targeted questions, collects references, proposes a design direction, optionally prototypes screens in Stitch, then builds each component atomically with review checkpoints. ## Quick Start Ask the assistant to design and build a landing page or dashboard UI and answer its discovery questions about references, colors, and typography before it writes any code.
