design-system

Structure design tokens using a three-layer architecture of primitive, semantic, and component layers. This enforces brand consistency by mapping raw values to semantic meanings, reducing duplication and drift across product teams.

Generate design tokens and slide templates by running the starter script. This prepares your project with CSS variables, spacing and typography scales, and brand-aligned presentation templates for design-to-code handoffs.

Maintain design token governance using built-in references, templates, and validators. These tools support code generation and enforce UI consistency by validating token architecture and semantic mapping across your design system.

Yes, CSS variables are used for semantic mapping within the token-driven design system. They connect the primitive layer to semantic and component layers, ensuring scalable brand alignment and consistent UI implementation.

No specific framework is required as dependencies are empty. You align component specs with brand guidelines using the skill's internal token architecture, CSS variable usage, and generation scripts without external framework constraints.

Design token drift happens when product teams duplicate values without a centralized architecture. Component specs prevent this drift by enforcing a three-layer token architecture and validation scripts that govern brand alignment and code generation.