在线可视化生成Design Token和CSS变量系统，支持颜色/字体/间距。一键导出CSS/SCSS/JSON/Tailwind格式。无需注册，数据绝不上传服务器。
零依赖 · 可离线使用🎨 颜色令牌
📐 间距令牌
🔤 字体令牌
📦 导出
点击"生成"查看输出...
❓ 常见问题
Q1: 什么是Design Token？
Design Token是设计系统的原子级构建块，用键值对表示设计决策（颜色、字体、间距等）。它们是设计与开发之间的桥梁，确保UI一致性。Token可转换为CSS变量、SCSS变量、JSON配置等多种格式，支持跨平台使用（Web/iOS/Android）。
Q2: Design Token和CSS变量有什么区别？
CSS变量是Web平台的原生特性，只能在CSS中使用。Design Token是更高层级的概念，是平台无关的设计决策表示。一个Token可以导出为CSS变量、SCSS变量、Android XML资源、iOS Swift常量等多种格式。Token还支持语义化命名（如--color-primary而非--blue-500）和主题切换。
Q3: 如何组织Design Token的命名？
推荐三级命名：类别.属性.变体，如color.primary.500、spacing.md.4、font.size.lg。语义化命名优于具体值命名：用--color-danger而非--red-500，这样换主题时只需改值不需改名。全局Token（原始值）→别名Token（语义化）→组件Token（特定用途），形成三层架构。