Verified:GitHub

ckm:design-system

Build token-driven design systems with three-layer token architecture and CSS variables.

1|1|Updated Apr 19, 2026

Search Tags:#design-system #css-variables #design-tokens #component-specs #brand-consistency #token-architecture #slide-generation

Ready to run

npx skills add https://github.com/RamonsDka/the-architect-overlay --skill ckm-design-system-ramonsdka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/RamonsDka/the-architect-overlay/tree/main/skills/design-system
Command: npx skills add https://github.com/RamonsDka/the-architect-overlay --skill ckm-design-system-ramonsdka

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Centralized token architecture and component specs reduce design drift and speed up cross-team collaboration by codifying design tokens, semantic layers, and slide templates.

Core Features & Use Cases

Token architecture with three-layer tokens (primitive → semantic → component)
CSS variables and design-token governance for brand consistency
Slide/presentation generation templates that enforce design system constraints
Reference materials and multi-format outputs to accelerate design-to-code handoff

Quick Start

Run the token-driven design-system initializer to scaffold tokens and slides from your brand assets.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema

How do I build a token-driven design system for scalable brand consistency?▼

Build a token-driven design system by codifying a three-layer architecture of primitive, semantic, and component tokens. This enforces strict design vocabulary and CSS variable governance to eliminate design drift across cross-team products.

What is the best way to structure design tokens for cross-team UI collaboration?▼

The best way to structure design tokens is through a three-layer architecture flowing from primitive to semantic to component tokens. This centralizes component specs and accelerates design-to-code handoff with multi-format outputs.

Can I generate presentation slides that enforce my design system constraints?▼

Yes, you can generate presentation slides using built-in slide-generation templates. These templates enforce strict design system constraints and reference materials to ensure brand consistency across all generated slide outputs.

Do I need CSS variables to govern my component specs and design vocabulary?▼

Yes, CSS variables are required to govern component specs and maintain a strict design vocabulary. Token architecture uses these variables to map primitive values to semantic meanings, ensuring scalable brand consistency.

How do I scaffold design tokens and slide templates from existing brand assets?▼

Run the token-driven design-system initializer to scaffold tokens and slides directly from your brand assets. This quick start process establishes your foundational three-layer token architecture and reference-based tooling immediately.

When should I use a three-layer token architecture instead of flat CSS variables?▼

Use a three-layer token architecture instead of flat CSS variables when scaling design systems across multiple teams. It prevents design drift by separating primitive values, semantic meaning, and component-specific specifications.