ui-design-system

Design tokens are reusable design decisions—colors, typography, spacing, shadows—exported as code. This Skill generates a complete token system from a single brand color, producing JSON, CSS variables, and SCSS files across style variants (modern, classic, playful) to standardize design-to-development handoff.

Design tokens export to JSON, CSS variables, SCSS, and human-readable summaries. This multi-format approach lets developers integrate tokens directly into their build pipeline or stylesheets while designers review the output in a clear summary view.

Yes. The Skill generates modular typography using Major Third ratios, 8pt spacing grids, sizing tokens, borders, shadows, breakpoints, z-index, and animation timing—all derived from your brand color and style preference to maintain visual hierarchy and consistency.

It uses HSV-based color scale generation to derive complementary colors and tonal variations from your input brand color, automatically calculating the full palette needed for UI states, gradients, and accessibility contrast levels.

Three built-in style variants—modern, classic, and playful—apply different typographic choices and aesthetic treatments to the same underlying token structure, letting you match your brand voice without rebuilding the system.

No specialized tools are required beyond the ability to provide a hex color code. The Python script handles token generation; the output is formatted for both designers (summary view) and developers (code exports), requiring no prior design-system experience.