ckm:design-system

To generate design tokens from a JSON config, run the provided Node script: `node scripts/generate-tokens.cjs --config tokens.json -o tokens.css`. This automates token validation and outputs CSS variables for your branding system.

Design tokens are variables representing design decisions like colors and spacing, structured in primitive, semantic, and component layers. They maintain UI consistency by providing a single source of truth for component specifications across platforms.

Yes, Node is required to run the token generation scripts. The Skill relies on Node.js to process your JSON configuration files and automate the validation and output of CSS variables.

Yes, you can generate brand-compliant presentations using design tokens. The Skill handles slide creation by applying your defined CSS variables and component specifications directly to the presentation output.

The best way to structure component specifications is by defining a token architecture with primitive, semantic, and component layers. This approach ensures detailed specifications for UI components like buttons and cards adhere to brand guidelines.

Using a design-to-code approach for component specifications bridges the gap between visual design and implementation. It automates token generation and validation to ensure UI components strictly adhere to established branding systems.