Loading...
Loading...
Compare original and translation side by side
references/token-architecture.mdreferences/token-architecture.mdPrimitive (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);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.cssnode scripts/validate-tokens.cjs --dir src/node scripts/generate-tokens.cjs --config tokens.json -o tokens.cssnode scripts/validate-tokens.cjs --dir src/| Topic | File |
|---|---|
| Token Architecture | |
| Primitive Tokens | |
| Semantic Tokens | |
| Component Tokens | |
| Component Specs | |
| States & Variants | |
| Tailwind Integration | |
| 主题 | 文件 |
|---|---|
| 令牌架构 | |
| 基础令牌 | |
| 语义令牌 | |
| 组件令牌 | |
| 组件规范 | |
| 状态与变体 | |
| Tailwind集成 | |
| 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 |
| 属性 | 默认状态 | 悬停状态 | 激活状态 | 禁用状态 |
|---|---|---|---|---|
| 背景 | primary | primary-dark | primary-darker | muted |
| 文本 | white | white | white | muted-fg |
| 边框 | none | none | none | muted-border |
| 阴影 | sm | md | none | none |
| Script | Purpose |
|---|---|
| Generate CSS from JSON token config |
| Check for hardcoded values in code |
| BM25 search + contextual recommendations |
| Validate slide HTML for token compliance |
| Fetch images from Pexels/Unsplash |
| 脚本 | 用途 |
|---|---|
| 从JSON令牌配置生成CSS |
| 检查代码中的硬编码值 |
| BM25搜索 + 上下文推荐 |
| 验证幻灯片HTML的令牌合规性 |
| 从Pexels/Unsplash获取图片 |
| Template | Purpose |
|---|---|
| Starter JSON with three-layer structure |
| 模板 | 用途 |
|---|---|
| 包含三层结构的入门JSON模板 |
| File | Purpose |
|---|---|
| Brand identity, voice, colors |
| Token definitions (primitive→semantic→component) |
| CSS variables (import in slides) |
| CSS animation library |
| 文件 | 用途 |
|---|---|
| 品牌标识、品牌调性、品牌色彩 |
| 令牌定义（primitive→semantic→component） |
| CSS变量（在幻灯片中导入） |
| CSS动画库 |
undefinedundefinedundefinedundefined| File | Purpose |
|---|---|
| 15 deck structures + emotion arcs + sparkline beats |
| 25 layouts + component variants + animations |
| Goal → Layout + break_pattern flag |
| Content type → Typography scale |
| Emotion → Color treatment |
| Slide type → Image category (Pexels/Unsplash) |
| 25 copywriting formulas (PAS, AIDA, FAB) |
| 25 chart types with Chart.js config |
| 文件 | 用途 |
|---|---|
| 15种演示文稿结构 + 情感弧线 + 波动节奏 |
| 25种布局 + 组件变体 + 动画 |
| 目标 → 布局 + break_pattern标记 |
| 内容类型 → 排版比例 |
| 情感 → 色彩处理 |
| 幻灯片类型 → 图片类别（Pexels/Unsplash） |
| 25种文案公式（PAS、AIDA、FAB） |
| 25种带Chart.js配置的图表类型 |
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.py1. 解析目标/上下文
↓
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验证"What Is" (frustration) ↔ "What Could Be" (hope)"现状"（沮丧）↔ "愿景"（希望）assets/design-tokens.cssvar(--color-primary)var(--slide-bg)assets/design-tokens.cssvar(--color-primary)var(--slide-bg)<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><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>/* 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';/* 正确 - 使用令牌 */
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.htmlassets/designs/slides/claudekit-pitch-251223.html/slides:create "10-slide investor pitch for ClaudeKit Marketing"/slides:create "10-slide investor pitch for ClaudeKit Marketing"