What problem does it solve? AI-generated frontend code often misses the user's vision because it is produced without understanding references, brand guidelines, or design intent, leading to repeated rework. This Skill enforces a discovery-first workflow so UI code matches expectations on the first attempt. ## Core Features & Use Cases - Structured Discovery Workflow: Runs a 7-phase process (briefing, reference collection, design direction, prototyping, execution plan, atomic build, review) that scales to project size. - Design Direction Synthesis: Converts visual references into concrete design tokens covering color palettes, typography pairings, spacing systems, and icon styles. - Google Stitch Prototyping: Generates Stitch prompts or drives the Stitch MCP server to visualize screens before writing code. - Use Case: A fullstack developer asks for a dashboard but cannot articulate the look. The Skill asks targeted questions, collects references, proposes a design direction, optionally prototypes screens in Stitch, then builds the UI component by component with review at each step. ## Quick Start Ask the agent to design and build a landing page or dashboard UI and answer its discovery questions about references, colors, and typography.
