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 researches the product context, proposes a coherent design system, previews it visually, and records the result as a DESIGN.md source of truth. ## Core Features & Use Cases - Complete design system proposal: Covers aesthetic direction, decoration level, layout, color palette with hex values, typography roles, spacing scale, and motion approach, with explicit SAFE/RISK breakdowns so the product keeps category literacy while gaining 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.md (product context, typography, color, spacing, layout, motion, decisions log) and appends design-system rules to CLAUDE.md so future UI work stays consistent. - Use Case: You are starting a new web app and have no brand guidelines. 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 codes against. ## Quick Start Ask the assistant to run the design-consultation skill to create a design system and DESIGN.md for your project.
