What problem does it solve? Building UI screens often skips usability validation: mockups go straight to code, accessibility issues surface late, and browser flows break silently. This Skill enforces a structured design-to-code pipeline where every screen is wireframed, critiqued by three independent reviewers, implemented, and verified in a real browser before shipping. ## Core Features & Use Cases - Wireframe and Critique Loop: Generates mockups with Stitch, then runs three critics (UX Knowledge, UI Expert, UI-UX Pro) that produce severity-rated findings from P0 blockers to P3 polish items. - Production Component Implementation: Converts approved mockups into working components via Magic MCP (21st.dev) and wires them into application code. - Automated Test-and-Fix Loop: Runs Playwright browser tests plus critic re-reviews on the coded version, fixing P0/P1 findings recursively for up to 4 iterations. - Use Case: Ask for an activity dashboard for project managers aged 35-55 on laptops; the pipeline produces mockups, pauses for your approval at each gate, implements the components, and verifies every user flow in a browser. ## Quick Start Run /qdesign with a screen description and audience profile, for example: design an admin dashboard for operations managers who use desktop browsers.
