skills.rest
calvingit
calvingitCOMMUNITY
Explore all skills by this author →
Website𝕏@zhangwen_siteGitHub

ckm:design-system

Organize token architecture, component specifications, and slide generation into a design system.

2|Updated Mar 26, 2026
Search Tags:#theming#design-system#css-variables#design-tokens#token-architecture#component-tokens
One-click install
npx skills add https://github.com/calvingit/skills --skill ckm-design-system-calvingit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/calvingit/skills/tree/main/external-skills/Design/ui-ux-pro-max/design-system
Command: npx skills add https://github.com/calvingit/skills --skill ckm-design-system-calvingit

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Designers and developers often contend with fragmented token definitions and inconsistent component specs across projects. This Skill provides a unified, three-layer token model (primitive → semantic → component), CSS variable-based theming, and a workflow for design-to-code handoff to ensure brand-aligned experiences.

Core Features & Use Cases

  • Three-layer token architecture and per-component tokens to enable scalable theming.
  • Component specifications and slide generation pipelines for brand-aligned presentations.
  • References and scripts to generate tokens, validate usage, and produce slides from data.

Quick Start

Run the design-system Skill to generate tokens and 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 structure design tokens for scalable UI theming?▼

Component tokens extend the three-layer token architecture by binding semantic variables to specific UI elements. This per-component token approach enforces brand-compliant specifications and enables predictable design-to-code handoff.

What is the best way to organize CSS variables for a design-to-code handoff?▼

Organizing CSS variables for design-to-code handoff requires a structured token template that enforces a primitive-to-semantic-to-component flow. This prevents fragmented token definitions and ensures frontend engineers receive consistent, structured data.

Can I generate brand-compliant presentation slides directly from design tokens?▼

Yes, you can generate brand-compliant presentation slides directly from design tokens using built-in scripts. The pipeline validates token usage and produces slide outputs aligned with your component specifications.

Does the three-layer token model work for existing component specifications?▼

The three-layer token model integrates with existing component specifications by mapping primitive and semantic CSS variables into structured component token templates. This enforces consistent theming without requiring a full architectural reset.

Why do my design tokens become fragmented across multiple frontend projects?▼

Design tokens become fragmented across projects when lacking a unified token architecture. Applying a structured primitive-semantic-component hierarchy with CSS variable validation scripts prevents inconsistent definitions and ensures scalable UI theming.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

token-docs

Generate structured Markdown documentation from CSS, JSON, or JS design tokens.

Community
Intermediate
MacPhobosMacPhobos

DaisyUI Component Library

Provides 50+ pre-styled semantic UI components with theming and dark mode for Tailwind CSS.

Community
Intermediate
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced