用途：用于设计令牌创建、组件状态定义、CSS 变量系统、间距与字体比例、设计到代码交付、Tailwind 主题配置，以及幻灯片/演示文稿生成。
主要能力：采用三层令牌结构——原始值（如 --color-blue-600: #2563EB）、语义别名（--color-primary: var(--color-blue-600)）、组件级（--button-bg: var(--color-primary)）。提供组件规格模式，覆盖默认、悬停、激活、禁用状态下的背景、文字、边框与阴影。附带脚本：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 提供三层结构起点。
使用方式：生成令牌命令为 node scripts/generate-tokens.cjs --config tokens.json -o tokens.css；校验命令为 node scripts/validate-tokens.cjs --dir src/。幻灯片搜索示例：python scripts/search-slides.py "investor pitch"，可加 -d copy 或 -d chart 指定领域，或用 --context --position 2 --total 9 做情境搜索。幻灯片创建命令为 /slides:create "10-slide investor pitch for ClaudeKit Marketing"。脚本路径相对于包含 SKILL.md 的目录，工作目录保持在项目根。
适用场景：设计令牌体系搭建、组件状态与变体定义、设计到代码交接、Tailwind 集成、品牌合规演示文稿生成。幻灯片系统结合 Chart.js 与情境决策 CSV（策略、布局、排版、色彩、背景、文案、图表），并按 Duarte Sparkline 在约 1/3 与 2/3 位置做情绪模式切换。
限制：幻灯片必须导入 assets/design-tokens.css 并仅用 var() 引用令牌，禁止硬编码十六进制值；图表须用 Chart.js 而非纯 CSS 柱状。依赖 brand 与 ui-styling 技能，主要面向 ui-ux-designer、frontend-developer 代理。具体收费、价格与平台支持暂未提供。