ckm:design-system

Design tokens map to UI components by structuring styles across primitive, semantic, and component layers. This three-layer token architecture uses CSS variables to automate token-driven design, ensuring scalable theming for UI components and slide templates.

Generate brand-aligned presentation slides by running a script-based slide-generation pipeline. This pipeline uses your design tokens and component specifications to automatically produce slide-ready decks that align with your design system.

CSS variables support scalable theming by acting as the binding mechanism for design tokens. They allow primitive, semantic, and component tokens to dynamically update UI components and slide templates across your design system without rewriting individual styles.

Yes, you can use this token-driven design workflow without external dependencies. The skill operates independently using its internal scripts and references to map design tokens to UI components and generate slide templates.

The best way to automate design-to-code handoff is using a token-driven workflow with scripts and references. This method validates token usage and generates slide-ready assets directly from your primitive, semantic, and component token data.