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 writes it to DESIGN.md as the project's design source of truth. ## Core Features & Use Cases - Complete design system proposal: Presents aesthetic direction, decoration level, layout approach, color palette with hex values, font recommendations, spacing scale, and motion approach as one coherent package with safe choices and deliberate creative risks. - Visual preview generation: Creates AI-rendered mockups with a browser-based comparison board for feedback, or a self-contained HTML preview page with font specimens, palette swatches, and realistic product mockups. - DESIGN.md authoring: Writes a spec-format DESIGN.md with normative YAML frontmatter (colors, typography, rounded, spacing, components) and updates CLAUDE.md so future UI work follows the system. - Use Case: You are starting a new health-tech app with no brand guidelines. Invoke the skill, answer questions about your product and audience, review three visual directions on the comparison board, and receive a validated DESIGN.md plus CLAUDE.md guidance. ## Quick Start Ask the assistant to create a design system and DESIGN.md for your new project from scratch.
