ckm-design-system

name	ckm:design-system
description	Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
argument-hint	[component or token]
license	MIT
metadata	{"author":"claudekit","version":"1.0.0"}
trigger	需要建立设计系统
input	设计规范
output	设计系统文档
next	无
dependencies	无

Design System

Token architecture, component specifications, systematic design, slide generation.

When to Use

• Design token creation
• Component state definitions
• CSS variable systems
• Spacing/typography scales
• Design-to-code handoff
• Tailwind theme configuration
• Slide/presentation generation

Token Architecture

Load: references/token-architecture.md

Three-Layer Structure

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

Example:

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);

Quick Start

Generate tokens:

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

Validate usage:

node scripts/validate-tokens.cjs --dir src/

References

Topic	File
Token Architecture	references/token-architecture.md
Primitive Tokens	references/primitive-tokens.md
Semantic Tokens	references/semantic-tokens.md
Component Tokens	references/component-tokens.md
Component Specs	references/component-specs.md
States & Variants	references/states-and-variants.md
Tailwind Integration	references/tailwind-integration.md