ckm:design-system

Map primitive, semantic, and component tokens to UI components and slide templates.

7|Updated Mar 4, 2026

Search Tags:#slides #design-system #css-variables #design-tokens #token-architecture #component-tokens

Ready to run

npx skills add https://github.com/Davie521/claude-skills --skill ckm-design-system-davie521

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/Davie521/claude-skills/tree/main/plugins/design/skills/design-system
Command: npx skills add https://github.com/Davie521/claude-skills --skill ckm-design-system-davie521

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Automates token-driven design by mapping primitive, semantic, and component tokens to UI components and slide templates.

Core Features & Use Cases

Token architecture: primitive → semantic → component with CSS variables for scalable theming.
Slide/template system: brand-aligned decks generated from token data and component specs.
Design-to-code handoff: references and scripts to generate tokens, validate usage, and produce slide-ready assets.

Quick Start

Run the slide generator to produce a brand-compliant deck from token data.

Frequently Asked Questions about ckm:design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is a three-layer design token architecture and how does it map to UI components?▼

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.

How do I generate brand-aligned presentation slides from design tokens?▼

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.

How do CSS variables support scalable theming in a 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.

Can I use this token-driven design workflow without external dependencies?▼

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.

What is the best way to automate the design-to-code handoff for slide-ready assets?▼

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.