What problem does it solve? Starting a new product's UI without a design system leads to inconsistent, generic-looking interfaces. This Skill researches your product context, proposes a coherent design system covering aesthetic, typography, color, layout, spacing, and motion, and persists it as a DESIGN.md source of truth. ## Core Features & Use Cases - Complete design system proposal: Presents aesthetic direction, decoration level, layout, color palette with hex values, font recommendations, spacing scale, and motion approach as one coherent package with explicit safe choices and deliberate creative risks. - Visual preview generation: Creates AI-rendered mockups with a browser-based comparison board and feedback loop, or falls back to a self-contained HTML preview page with font specimens, color swatches, and realistic product mockups. - DESIGN.md authoring: Writes a structured design source of truth to the repo root and updates CLAUDE.md so future UI work follows the system. - Use Case: You are starting a new web app with no branding. Invoke the skill, answer questions about your product and audience, review the proposed palette and fonts on a preview page, and ship a DESIGN.md your whole team codes against. ## Quick Start Ask the agent to create a design system and DESIGN.md for your new project from scratch.
