UI设计师看过来！design_token_generator一键生成完整设计系统，再也不用手动调色了🎨-Skill优仓

这个Skill在解决什么问题

做过设计系统的人都懂那种痛——品牌色定了，但衍生色要一个个手算；间距规范要写，8pt网格要自己推；交付给开发的时候，CSS变量、SCSS变量、JSON格式各要一份，来回导出到崩溃。UI Design System这个Skill就是冲着这些痛点来的，从设计Token生成到开发交付文档，一套流程全包了。

核心功能

UI Design System的核心是design_token_generator.py这个脚本，输入一个品牌主色，它能自动推导出完整的色彩体系，包括主色、辅助色、中性色、语义色（成功、警告、错误）等。除了颜色，还会同步生成：

字体排版比例：基于模块化比例自动计算H1到正文的字号层级，不用再靠感觉拍数字。
8pt间距网格：spacing-1到spacing-16全套间距Token，和主流设计工具的网格系统完全对齐。
阴影与动效Token：elevation层级、过渡时长、缓动曲线，统统纳入Token体系。
响应式断点：移动端到宽屏的断点配置，直接输出可用的媒体查询值。

风格上支持modern、classic、playful三种预设，输出格式支持json、css、scss，一条命令搞定，不需要手动转换格式。

除了Token生成，这个Skill还覆盖了组件系统架构设计和无障碍合规检查，帮你在搭建组件库的时候就把WCAG对比度要求考虑进去，而不是上线前才发现颜色不达标。

适用平台

UI Design System作为一个标准化的Skill，可以无缝接入主流AI编程助手，成为你工作流里的”隐形设计顾问”。

Cursor：在Cursor里调用这个Skill，AI能直接理解你的设计Token结构，生成的组件代码会自动引用正确的变量名，不会出现魔法数字。
GitHub Copilot：配合Copilot写组件样式时，Token文档作为上下文，补全的CSS变量准确率大幅提升。
Claude Code：让Claude Code读取Token文件后生成组件，输出的代码风格和设计规范高度一致。
文心快码 / 腾讯云CodeBuddy / 华为云CodeArts：国内AI编程工具同样适用，Token的JSON格式是通用的，导入即用。

简单说，这个Skill给AI提供了”设计语言”，让它不再靠猜来写样式代码。

实操代码示例

用法非常直接，一行命令就能跑起来：

python scripts/design_token_generator.py #3B82F6 modern css

上面这条命令以蓝色#3B82F6为品牌色，生成modern风格的CSS变量文件。输出大概长这样：

:root {
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --transition-base: 150ms ease-in-out;
}

换成scss格式就把最后一个参数改成scss，换成json就改成json，其他不用动。

优势分析

市面上也有Figma插件、Style Dictionary这类工具能做Token管理，但UI Design System的优势在于它是面向AI工作流设计的。传统工具的输出是给人看的文档，这个Skill的输出是给AI读的结构化数据，两者的侧重点完全不同。

另一个优势是风格预设降低了决策成本。很多项目卡在”设计系统怎么定调”这一步，modern/classic/playful三种预设提供了合理的起点，不用从零开始推导每一个Token的值，改起来也方便。

对于设计开发协作来说，同一份Token文件同时输出CSS和SCSS，设计师和前端用的是同一个数据源，不会出现”设计稿上是16px，代码里写了15px”这种低级错误。

应用场景

新项目启动：产品定好品牌色之后，10分钟内生成完整的Token体系，设计和开发可以同步开工，不用等设计师手动整理规范文档。
品牌升级：主色调整，所有衍生色、语义色自动重新计算，不用一个个手改，改完直接导出覆盖旧文件。
多端适配项目：响应式断点和间距Token统一管理，移动端和PC端用同一套规范，不会出现两套间距体系打架的情况。
设计系统维护：组件文档和Token文档保持同步，新加入的开发可以直接看文档上手，不需要反复问设计师”这个颜色是什么值”。

最佳实践

Token命名要语义化，不要用颜色值命名。用--color-primary-500而不是--color-blue-500，这样品牌色从蓝色换成绿色的时候，所有引用这个变量的地方不需要改名字，只改值就行。

建立Token的版本管理。把生成的Token文件纳入Git仓库，每次品牌调整都走PR流程，方便追溯历史版本，也方便回滚。

区分全局Token和组件Token。全局Token（如--color-primary-500）是原始值，组件Token（如--button-bg-color）引用全局Token。这样修改全局Token时，所有组件自动跟着变，不需要逐个组件去改。

定期做无障碍对比度审查。文字颜色和背景色的对比度至少要达到4.5:1（WCAG AA级），在Token生成阶段就检查，比上线后再修要省事得多。

如果你的团队在多个项目里都需要维护设计系统，把这个Skill和项目的Token文件一起托管到Skill优仓是个不错的选择——团队成员可以直接拉取最新版本的Skill配置，不用每个项目单独维护一套脚本，协作效率会明显提升。

文章版权归作者所有，未经允许请勿转载。

THE END

UI设计师看过来！design_token_generator一键生成完整设计系统，再也不用手动调色了🎨