使用 AI 构建系统化设计令牌（Design Tokens）与品牌幻灯片

解决设计与开发脱节的痛点：通过建立三层 Token 架构（原子 语义 组件），让 AI 自动化管理品牌视觉规范，并将其应用于代码实现及高水准的商业演示文稿生成。

为什么需要这个技能

在大型项目中，直接在代码中使用硬编码的颜色值（如 #2563EB）会导致维护灾难。当品牌色需要微调时，开发者必须在数百个文件中进行全局替换。

本技能引入了“设计令牌（Design Tokens）”概念，将视觉属性抽象为变量。通过三层映射机制，即使品牌主色发生变更，只需修改最底层的 Primitive Token，所有语义层和组件层会自动同步更新，确保 UI 的极致一致性。

适用场景

• 设计系统构建：创建可扩展的颜色、间距和排版比例。
• 样式自动化：将 JSON 定义的 Token 快速转换为 CSS 变量或 Tailwind 配置。
• 品牌合规检查：自动检测代码中是否存在未定义在 Token 系统中的硬编码颜色。
• 专业演示文稿生成：基于品牌 Token 和心理学叙事结构（如 Duarte Sparkline），生成 HTML 格式的商业 Pitch Deck。

核心工作流

1. 建立三层 Token 架构

AI 将按照以下逻辑层级定义变量，避免逻辑混乱：

• Primitive（原子层）：原始数值（如 --color-blue-600: #2563EB）。
• Semantic（语义层）：定义用途（如 --color-primary: var(--color-blue-600)）。
• Component（组件层）：绑定具体组件（如 --button-bg: var(--color-primary)）。

2. 自动化工具链

使用内置脚本实现从定义到部署的闭环：

• 生成：运行 node scripts/generate-tokens.cjs 将 JSON 配置转换为 tokens.css。
• 验证：运行 node scripts/validate-tokens.cjs 扫描源码，揪出所有硬编码的颜色值。

3. 品牌幻灯片生成逻辑

不仅是视觉统一，更包含决策系统：

• 策略匹配：通过 slide-strategies.csv 确定情感弧线（如“现状的沮丧” “未来的希望”）。
• 布局决策：根据目标（Goal）在 slide-layout-logic.csv 中匹配最优布局。
• 技术实现：强制导入 design-tokens.css，使用 Chart.js 绘制品牌色图表，确保所有样式均通过 var() 调用。

下载和安装

下载 ckm:design-system 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐