设计系统构建指南：令牌架构、组件规范与自动化幻灯片生成

ckm%3Adesign-system by nextlevelbuilder/ui-ux-pro-max-skill

3,000 周安装量

49,700 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:design-system

开发生产力设计

🇨🇳中文介绍

设计系统

令牌架构、组件规范、系统化设计、幻灯片生成。

使用场景

设计令牌创建
组件状态定义
CSS 变量系统
间距/排版比例
设计到代码的交接
Tailwind 主题配置
幻灯片/演示文稿生成

令牌架构

加载：references/token-architecture.md

三层结构

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

示例：

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

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

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

快速开始

生成令牌：

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

主题	文件
令牌架构	`references/token-architecture.md`
基础令牌	`references/primitive-tokens.md`
语义令牌	`references/semantic-tokens.md`
组件令牌	`references/component-tokens.md`
组件规范	`references/component-specs.md`
状态与变体	`references/states-and-variants.md`
Tailwind 集成	`references/tailwind-integration.md`

属性	默认	悬停	激活	禁用
背景色	primary	primary-dark	primary-darker	muted
文字	white	white	white	muted-fg
边框	none	none	none	muted-border
阴影	sm	md	none	none

脚本	用途
`generate-tokens.cjs`	从 JSON 令牌配置生成 CSS
`validate-tokens.cjs`	检查代码中的硬编码值
`search-slides.py`	BM25 搜索 + 上下文推荐
`slide-token-validator.py`	验证幻灯片 HTML 是否符合令牌规范
`fetch-background.py`	从 Pexels/Unsplash 获取图片

模板	用途
`design-tokens-starter.json`	包含三层结构的入门 JSON 文件

文件	用途
`docs/brand-guidelines.md`	品牌标识、语调、颜色
`assets/design-tokens.json`	令牌定义 (基础→语义→组件)
`assets/design-tokens.css`	CSS 变量 (在幻灯片中导入)
`assets/css/slide-animations.css`	CSS 动画库

幻灯片搜索 (BM25)

# 基础搜索 (自动检测领域)
python scripts/search-slides.py "investor pitch"

# 领域特定搜索
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# 上下文搜索 (高级系统)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

决策系统 CSV 文件

文件	用途
`data/slide-strategies.csv`	15 种演示结构 + 情感曲线 + 故事线节拍
`data/slide-layouts.csv`	25 种布局 + 组件变体 + 动画
`data/slide-layout-logic.csv`	目标 → 布局 + break_pattern 标志
`data/slide-typography.csv`	内容类型 → 排版比例
`data/slide-color-logic.csv`	情感 → 色彩处理
`data/slide-backgrounds.csv`	幻灯片类型 → 图片类别 (Pexels/Unsplash)
`data/slide-copy.csv`	25 种文案公式 (PAS, AIDA, FAB)
`data/slide-charts.csv`	25 种图表类型及 Chart.js 配置

上下文决策流程

1. 解析目标/上下文
        ↓
2. 搜索 slide-strategies.csv → 获取策略 + 情感节拍
        ↓
3. 对于每张幻灯片：
   a. 查询 slide-layout-logic.csv → 布局 + break_pattern
   b. 查询 slide-typography.csv → 类型比例
   c. 查询 slide-color-logic.csv → 色彩处理
   d. 查询 slide-backgrounds.csv → 图片 (如果需要)
   e. 从 slide-animations.css 应用动画类
        ↓
4. 使用设计令牌生成 HTML
        ↓
5. 使用 slide-token-validator.py 进行验证

模式打破 (Duarte 故事线)

高级演示文稿通过交替情感来提升参与度：

"What Is" (frustration) ↔ "What Could Be" (hope)

系统在 1/3 和 2/3 位置计算模式打破点。

所有幻灯片必须：

导入 assets/design-tokens.css - 单一事实来源
使用 CSS 变量：var(--color-primary), var(--slide-bg) 等
图表使用 Chart.js (非纯 CSS 条形图)
包含导航 (键盘方向键、点击、进度条)
内容居中对齐
专注于说服/转化

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // 使用品牌珊瑚色
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

/* 正确 - 使用令牌 */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* 错误 - 硬编码 */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

包含所有功能的完整示例：

assets/designs/slides/claudekit-pitch-251223.html

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

切勿在组件中使用原始十六进制值 - 始终引用令牌
语义层支持主题切换 (亮色/暗色)
组件令牌支持按组件定制
使用 HSL 格式以控制不透明度
记录每个令牌的用途
幻灯片必须导入 design-tokens.css 并完全使用 var()

🇺🇸English

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`

Component Spec Pattern

Property	Default	Hover	Active	Disabled
Background	primary	primary-dark	primary-darker	muted
Text	white	white	white	muted-fg
Border	none	none	none	muted-border
Shadow	sm	md	none	none

Scripts

Script	Purpose
`generate-tokens.cjs`	Generate CSS from JSON token config
`validate-tokens.cjs`	Check for hardcoded values in code
`search-slides.py`	BM25 search + contextual recommendations
`slide-token-validator.py`	Validate slide HTML for token compliance
`fetch-background.py`	Fetch images from Pexels/Unsplash

Templates

Template	Purpose
`design-tokens-starter.json`	Starter JSON with three-layer structure

Integration

With brand: Extract primitives from brand colors/typography With ui-styling: Component tokens → Tailwind config

Skill Dependencies: brand, ui-styling Primary Agents: ui-ux-designer, frontend-developer

Slide System

Brand-compliant presentations using design tokens + Chart.js + contextual decision system.

Source of Truth

File	Purpose
`docs/brand-guidelines.md`	Brand identity, voice, colors
`assets/design-tokens.json`	Token definitions (primitive→semantic→component)
`assets/design-tokens.css`	CSS variables (import in slides)
`assets/css/slide-animations.css`	CSS animation library

Slide Search (BM25)

# Basic search (auto-detect domain)
python scripts/search-slides.py "investor pitch"

# Domain-specific search
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Contextual search (Premium System)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

Decision System CSVs

File	Purpose
`data/slide-strategies.csv`	15 deck structures + emotion arcs + sparkline beats
`data/slide-layouts.csv`	25 layouts + component variants + animations
`data/slide-layout-logic.csv`	Goal → Layout + break_pattern flag
`data/slide-typography.csv`	Content type → Typography scale
`data/slide-color-logic.csv`	Emotion → Color treatment
`data/slide-backgrounds.csv`

Contextual Decision Flow

1. Parse goal/context
        ↓
2. Search slide-strategies.csv → Get strategy + emotion beats
        ↓
3. For each slide:
   a. Query slide-layout-logic.csv → layout + break_pattern
   b. Query slide-typography.csv → type scale
   c. Query slide-color-logic.csv → color treatment
   d. Query slide-backgrounds.csv → image if needed
   e. Apply animation class from slide-animations.css
        ↓
4. Generate HTML with design tokens
        ↓
5. Validate with slide-token-validator.py

Pattern Breaking (Duarte Sparkline)

Premium decks alternate between emotions for engagement:

"What Is" (frustration) ↔ "What Could Be" (hope)

System calculates pattern breaks at 1/3 and 2/3 positions.

Slide Requirements

ALL slides MUST:

Import assets/design-tokens.css - single source of truth
Use CSS variables: var(--color-primary), var(--slide-bg), etc.
Use Chart.js for charts (NOT CSS-only bars)
Include navigation (keyboard arrows, click, progress bar)
Center align content
Focus on persuasion/conversion

Chart.js Integration

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Use brand coral
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

Token Compliance

/* CORRECT - uses token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* WRONG - hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

Reference Implementation

Working example with all features:

assets/designs/slides/claudekit-pitch-251223.html

Command

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Best Practices

Never use raw hex in components - always reference tokens
Semantic layer enables theme switching (light/dark)
Component tokens enable per-component customization
Use HSL format for opacity control
Document every token's purpose
Slides must import design-tokens.css and use var() exclusively

Weekly Installs

3.0K

Repository

nextlevelbuilde…ax-skill

GitHub Stars

49.7K

First Seen

Mar 10, 2026

Installed on

codex2.8K

gemini-cli2.8K

opencode2.8K

cursor2.8K

github-copilot2.8K

cline2.7K

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

102,200 周安装