ui-design-system

This professional-grade UI design system skill provides a comprehensive toolkit for Senior UI Designers and Frontend Engineers to create, maintain, and scale complex design systems. Designed for integration within the Claude Code Orchestrator Kit environment, it streamlines the translation of brand identity into functional code tokens. It is an essential asset for teams striving for pixel-perfect implementation, accessibility compliance, and improved collaboration between design and development departments.

• Automated design token generation from brand colors, supporting styles such as modern, classic, and playful.

• Multi-format output generation for seamless integration, including JSON, CSS, and SCSS variables.

• Architecture support for component systems, ensuring modularity and reusability.

• Advanced responsive design calculations including grid systems based on 8pt spacing and fluid typography scales.

• Built-in shadow and animation token management for consistent motion design.

• Comprehensive developer handoff documentation generation to bridge the gap between design specs and implementation.

• The primary entry point for token generation is the design_token_generator.py script, which accepts brand colors and style parameters as inputs.

• Ensure all color inputs are provided in standard hex or RGB formats to guarantee accurate palette derivation.

• Use the generated JSON outputs as the single source of truth for downstream tools, ensuring that changes to brand colors propagate automatically to all frontend stylesheets.

• When implementing responsive breakpoints, the tool relies on standard media query patterns; validation of generated breakpoints against specific project constraints is recommended.

• The system focuses on atomic design principles; maintain visual consistency by adhering strictly to the generated spacing and typography scales defined in the output documentation.