Name: Design Consultation
Author: boosey

Generates a complete design system with production-ready tokens and component specifications.

What This Skill Does

Generates a color palette with semantic naming (primary, secondary, neutral, status colors)
Defines a typography scale with font stacks, sizes, weights, and line heights
Creates a spacing system (4px/8px base grid) with named tokens
Produces motion and animation guidelines (duration, easing, purpose-based presets)
Builds a component inventory based on the project's UI needs
Outputs production-ready CSS custom properties and/or design tokens

Workflow

Discovery: Analyze the project's existing UI (if any), brand requirements, and target platforms. Identify constraints (accessibility requirements, performance budgets).
Foundation: Generate color palette, typography scale, and spacing system. Ensure WCAG 2.1 AA contrast ratios for all text/background combinations.
Motion: Define animation guidelines: entrance/exit transitions, micro-interactions, loading states. Respect .

Generates a complete design system with production-ready tokens and component specifications.

Generates a color palette with semantic naming (primary, secondary, neutral, status colors)
Defines a typography scale with font stacks, sizes, weights, and line heights
Creates a spacing system (4px/8px base grid) with named tokens
Produces motion and animation guidelines (duration, easing, purpose-based presets)
Builds a component inventory based on the project's UI needs
Outputs production-ready CSS custom properties and/or design tokens

Discovery: Analyze the project's existing UI (if any), brand requirements, and target platforms. Identify constraints (accessibility requirements, performance budgets).
Foundation: Generate color palette, typography scale, and spacing system. Ensure WCAG 2.1 AA contrast ratios for all text/background combinations.
Motion: Define animation guidelines: entrance/exit transitions, micro-interactions, loading states. Respect .

Decision	Category	Rationale
Base grid unit (4px vs 8px)	TASTE	8px default, auto-decided via pragmatic principle
Color palette generation	TASTE	Derived from brand input or sensible defaults
Accessibility minimum (AA vs AAA)	TASTE	AA minimum, AAA recommended where feasible
Brand direction and identity	USER_CHALLENGE	Human defines brand; agent implements system