skills.rest
landim32
landim32COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ckm:design-system

Automate design-token organization and slide-template generation for design systems.

1|Updated Feb 10, 2026
Search Tags:#frontend#tokens#design-system#css-variables#design-token#slide-generation#token-scripts
One-click install
npx skills add https://github.com/landim32/awesome-ai-skills --skill ckm-design-system-landim32
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/landim32/awesome-ai-skills/tree/main/skills/design-system
Command: npx skills add https://github.com/landim32/awesome-ai-skills --skill ckm-design-system-landim32

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Provides a structured, three-layer token system (primitive, semantic, component) and slide-generation templates to enable scalable, brand-consistent design systems across UI and presentation assets.

Core Features & Use Cases

  • Token Architecture: Three-layer model (primitive → semantic → component) for scalable theming and design-to-code handoff.
  • Slide System: Brand-aware slide templates powered by design tokens for cohesive presentations.
  • Tooling & References: Scripted token generation, token embedding, and references to design-tokens assets to streamline design-system workflows.

Quick Start

Run the included scripts from the repository root to bootstrap tokens, components, and slide templates.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I structure design tokens for scalable UI theming?▼

Structure design tokens using a three-layer architecture: primitive, semantic, and component layers. This model enables scalable theming and streamlines design-to-code handoff by mapping raw values to semantic meanings and specific UI components.

How do I integrate CSS variables into a design system workflow?▼

Integrate CSS variables by running scripted token generation to embed token values into frontend assets. The included scripts automate token embedding and provide JSON references to bridge design decisions with CSS variable implementation.

Do I need a three-layer token architecture to build a design system?▼

A three-layer token architecture is recommended for brand-consistent design systems. Separating primitive, semantic, and component layers allows scalable theming and prevents token duplication when managing complex UI components and presentations.

What is the best way to automate design-token organization?▼

Automate design-token organization by executing token scripts from the repository root to bootstrap tokens and components. This generates structured JSON references for tokens and components, streamlining the entire design-system workflow.

How do I generate brand-aligned slide templates using design tokens?▼

Generate brand-aligned slide templates by running the included scripts to bootstrap slide-generation assets. The templates are powered by your design tokens, ensuring cohesive presentations that automatically reflect your brand's UI variables.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced
LutimiLutimi

ckm:design-system

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

Community
Advanced
ProfPowellProfPowell
1

css-author

Organize CSS with layers, nesting, and design tokens.

Community
Intermediate
hiimtrunghiimtrung
4

ckm:design-system

Implement a three-layer token architecture with semantic tokens and CSS variables.

Community
Advanced