skills.rest
aaltaay
aaltaayCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ckm:design-system

Converts a three-layer token system into CSS variables for brand-consistent design.

Updated Jun 7, 2026
Search Tags:#design-system#css-variables#design-tokens#brand-consistency#token-architecture#slide-generation
One-click install
npx skills add https://github.com/aaltaay/central-command --skill ckm-design-system-aaltaay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/aaltaay/central-command/tree/main/skills/ui-ux-pro-max-skill/.claude/skills/design-system
Command: npx skills add https://github.com/aaltaay/central-command --skill ckm-design-system-aaltaay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Token architecture and governance for design systems, enabling consistent branding across products and slides.

Core Features & Use Cases

  • Three-layer token model (Primitive → Semantic → Component) with CSS variables for scalable theming.
  • Slide generation and design-to-code handoff using tokens to ensure brand-compliant visuals.
  • Centralized references and docs to support tokens, typography, spacing, and component specs.

Quick Start

Create a tokens.json and wire it to the Skill to initialize tokens and bootstrap slides.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I manage design tokens for brand consistency across UI and slides?▼

Generate brand-aligned slides by wiring a structured tokens.json file to the design-token system. The tokens automatically apply your typography, spacing, and color scales to the generated pitch content.

What is the three-layer design token architecture and how does it work?▼

The three-layer design token architecture maps primitive tokens to semantic aliases, which then map to component-specific tokens. Materializing these as CSS variables allows scalable theming and centralized governance across products.

How do I set up CSS design tokens to generate brand-aligned slides?▼

Wire a structured tokens.json file to the token system to initialize your design tokens and bootstrap brand-compliant slide generation. Optional references and assets can support token-driven design decisions.

Do I need a tokens.json file to bootstrap design-to-code handoff and slide generation?▼

Yes, a structured tokens.json file is required to initialize the design-token system. You also need CSS design tokens, while optional references and assets support token-driven design decisions and automated slide production.

What is the best way to govern typography and spacing scales for multiple products?▼

The best way to govern typography and spacing scales is through a centralized token architecture that translates raw values into semantic CSS variables. This enforces brand consistency and scalable theming across all products.

Related Skills

Explore More Design & Creative Skills→
LutimiLutimi

ckm:design-system

Organize design tokens into primitive, semantic, and component layers.

Community
Advanced
aayushsoamaayushsoam
1

ckm:design-system

Automate design token generation and slide rendering for brand-consistent UI systems.

Community
Advanced
erichowenserichowens
181

web-design-expert

Generate distinctive web designs and brand identities with WCAG accessibility.

Community
Advanced
Prathmesh2000Prathmesh2000
1

design-tokens

Standardize color, spacing, typography, and component tokens for multi-brand design systems.

Community
Advanced