What problem does it solve? Choosing a UI direction without seeing concrete options leads to costly rework and subjective debates. This Skill runs a structured design exploration workflow that produces five meaningfully different UI variants you can compare side-by-side in your own app before committing to one. ## Core Features & Use Cases - Guided Design Interview: Collects scope, pain points, brand tone, persona, and constraints, then detects your framework (Next.js, Vite, Remix, Nuxt, Astro), package manager, and styling system (Tailwind, MUI, Chakra, Ant Design) automatically. - Five-Variant Design Lab: Generates a temporary route (e.g., /__design_lab) rendering five variants that each explore a different axis—hierarchy, layout, density, interaction model, and brand expression—using your project's existing design tokens. - Interactive Feedback Overlay: A Figma-like overlay lets you click any element in the browser, attach comments, and paste structured feedback back into the conversation for targeted refinement. - Synthesis and Finalization: Combines liked elements into a hybrid variant, shows a final preview, then cleans up all temporary files and produces DESIGN_PLAN.md plus a DESIGN_MEMORY.md for future sessions. - Use Case: Redesigning a checkout summary component—run the interview, review five variants in your running dev server, pick a winner with tweaks, and receive a step-by-step implementation plan with accessibility and testing checklists. ## Quick Start Ask the AI to run the design-lab skill to explore redesign options for a specific component or page in your project.
