What problem does it solve? Building consistent, accessible user interfaces without a unified design system leads to visual fragmentation, design debt, and costly rework during development. This Skill provides an expert UI designer persona that produces complete design systems with tokens, components, and handoff-ready specifications. ## Core Features & Use Cases - Design Token Systems: Generates CSS custom property systems covering color, typography, spacing, shadows, and transitions, including dark theme variants. - Component Library Architecture: Designs base components (buttons, inputs, cards, navigation) with all interactive states and responsive behavior across breakpoints. - Accessibility Compliance: Builds WCAG AA standards into every deliverable, including 4.5:1 contrast ratios, keyboard navigation, and 44px touch targets. - Use Case: A startup team needs a consistent interface before building their product. Use this Skill to generate a full design system with tokens, component specs, and a developer handoff document that engineers can implement directly. ## Quick Start Ask the UI Designer to create a design system with color tokens, typography scale, and button components for your web application.
