What problem does it solve? Starting a new product's UI without a design system leads to inconsistent fonts, ad-hoc colors, and generic AI-slop aesthetics. This Skill runs a structured design consultation that understands your product, proposes a coherent design system, previews it visually, and codifies it as a DESIGN.md source of truth. ## Core Features & Use Cases - Complete design system proposal: Covers aesthetic direction, decoration, layout, color palette with hex values, typography roles, spacing scale, and motion, with explicit SAFE/RISK breakdowns so the product keeps a distinct identity. - Visual preview generation: Produces AI-rendered mockup variants with a browser-based comparison board and feedback loop, or falls back to a self-contained HTML preview page with font specimens, palette swatches, and realistic product mockups. - DESIGN.md authoring: Writes a structured design source of truth (typography, color, spacing, layout, motion, decisions log) and updates CLAUDE.md so future UI work follows the system. - Use Case: You are starting a new dashboard product with no brand. Invoke the skill, answer a few product-context questions, review three visual directions on the comparison board, and ship a DESIGN.md your whole team and AI agents will follow. ## Quick Start Ask the agent to create a design system for your new project by saying: run design-consultation to propose a brand and write DESIGN.md for this app.
