# Design Tokens

使用 5 个 Design Tokens 在线工具处理、转换、验证和管理相关数据，无需安装软件。文本不保存，上传文件 6 小时后自动删除。

> 标准页面: https://elysiatools.com/zh/tags/design-tokens

## 概述

Design Tokens 工具帮助你通过浏览器界面处理相关文件和数据，支持格式处理、转换、验证与管理，适合设计系统工作流使用。

## 常见问题

### Design Tokens 工具可以做什么？

你可以使用该分类下的工具处理、转换、验证和管理 Design Tokens 文件及数据。

### 使用 Design Tokens 工具需要安装软件吗？

不需要安装软件，在浏览器界面中即可操作。处理过程由 Elysia Tools 服务器完成。

### 上传的数据会保存多久？

文本输入不会保存；上传的文件会在 6 小时后自动删除。

## 工具

- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [Figma Tokens 导出](https://elysiatools.com/zh/tools/figma-tokens-export): 粘贴 Figma / Tokens Studio 变量 JSON，导出为 Tailwind、shadcn CSS 变量、Style Dictionary 或 SCSS。通过类型推断保留颜色、间距与字体 token。
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [Tailwind 类名转 CSS](https://elysiatools.com/zh/tools/tailwind-class-to-css-converter): 把 Tailwind class(如 p-4 flex gap-2 hover:bg-blue-500/20 md:p-6)解析成等价的纯 CSS 代码,可复制到非 Tailwind 项目。覆盖 spacing、flex、grid、颜色、排版、边框、特效、变换、过渡以及响应式/状态变体。
- [Tailwind 色板同步器](https://elysiatools.com/zh/tools/tailwind-color-palette-sync): 输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。

## 相关内容

- [CSS](https://elysiatools.com/zh/tags/css): 使用48个在线CSS工具处理、转换、验证和管理CSS文件与数据，无需安装软件。文本不保存，上传文件6小时后自动删除。
- [HTML/CSS](https://elysiatools.com/zh/tags/html): 浏览 86 个 HTML/CSS 在线工具，处理 HTML、CSS 和 DOM 相关内容。无需安装软件，文本不保存，上传文件将在 6 小时后自动删除。
- [颜色](https://elysiatools.com/zh/tags/color): 浏览 214 个在线颜色工具，处理 HEX、RGB、HSL、调色板等颜色数据。无需安装软件，文本不保存，上传文件将在 6 小时后自动删除。
- [CSS Variables](https://elysiatools.com/zh/tags/css-variables): 浏览 8 个 CSS Variables 在线工具，在浏览器中处理 CSS Variables 相关内容，无需安装软件。
- [设计系统](https://elysiatools.com/zh/tags/design-system): 浏览 7 个设计系统相关在线工具，在浏览器中处理设计系统工作流；文本不会保存，上传文件将在 6 小时后自动删除。
- [颜色调色板](https://elysiatools.com/zh/tags/color-palette): 浏览 10 个颜色调色板在线工具，在浏览器中处理颜色调色板相关任务，无需安装软件。