Ui Design System

**Quick judgment** A strong, opinionated design‑system aid intended for senior UI designers who already understand tokens, atomic components, and responsive design. It excels at giving step‑by‑step workflows and implementation patterns, especially around token generation and developer handoff. **Strengths** - Covers the full workflow from brand color to production‑ready tokens and component architecture. - Offers concrete tables and formulas for color scales, typography, spacing, and breakpoints. - Explicit integration paths for CSS, SCSS, Tailwind, styled‑components, and Figma via Tokens Studio. - Encourages accessibility and consistent use of tokens (no hard‑coded values). **Key risks / limitations** - Color and token outputs are based on predefined algorithms and presets; they may not fully match nuanced brand guidelines without manual tuning. - WCAG contrast checking is described conceptually; compliance still depends on the user validating final combinations. - The documented `design_token_generator.py` workflow assumes an external script and environment; behavior and performance depend on that implementation, which is not visible here. - Opinionated choices (breakpoints, type ratio, 8pt spacing) may not align with all projects; less suitable if you need to strictly follow an existing company system. **Recommended scenarios** Use this skill when you need to rapidly bootstrap or rationalize a design system: generating tokens from a brand color, defining consistent component variants and sizes, setting up fluid type and spacing, and producing handoff artifacts for developers. It’s particularly valuable for greenfield products, design‑system overhauls, or teams formalizing their first token‑driven workflow.