以 skill 自身的术语
生成三层设计 token 架构（primitive → semantic → component）、组件规格，以及符合品牌规范的演示幻灯片。Primitive token 定义原始值，例如 --color-blue-600。Semantic token 按用途为其取别名（--color-primary）。Component token 指定每个组件的具体用法（--button-bg）。
该 skill 提供用于 CSS 变量、Tailwind 主题集成的生成与校验脚本，以及一个基于 BM25 搜索的上下文幻灯片系统，覆盖 15 种版式结构、25 种布局，以及 Duarte 情感曲线（sparkline）。所有幻灯片必须导入 design-tokens.css 并只能使用 CSS 变量。数据可视化需要 Chart.js。支持通过 Pexels 和 Unsplash 获取图片。
它产出什么
- Token 校验报告，用于识别源代码中应引用 token 却写成硬编码值的部分
工作方式
- 01加载 Token 架构参考文档
该 skill 会在生成或校验 token 之前加载 references/token-architecture.md，以确立三层 token 结构。
- 02从 JSON 配置生成 CSS
使用 JSON 配置文件运行 generate-tokens.cjs，输出一个以 CSS 变量形式呈现三层 token 结构的 CSS 文件。
- 03按目标搜索幻灯片策略
通过 search-slides.py 使用 BM25 搜索，从 slide-strategies.csv 中查找匹配的版式结构、情绪曲线和数据节奏点，可按领域（文案或图表）以及上下文位置进行过滤。
- 04应用上下文决策流程
解析目标后，查询 slide-layout-logic.csv 获取布局与 break_pattern 标记，查询 slide-typography.csv 获取字号层级，查询 slide-color-logic.csv 获取色彩处理方式，查询 slide-backgrounds.csv 获取图片分类。
- 05使用设计 token 生成 HTML
创建幻灯片 HTML，导入 assets/design-tokens.css，所有样式均使用 var()，包含用于图表的 Chart.js，并添加来自 slide-animations.css 的导航与动画类。
- 06验证 Token 合规性
运行 slide-token-validator.py，检查生成的幻灯片 HTML 是否完全使用 CSS 变量，且不包含任何硬编码的颜色、字体或间距值。