# 设计系统

浏览 7 个设计系统相关在线工具，在浏览器中处理设计系统工作流；文本不会保存，上传文件将在 6 小时后自动删除。

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

## 概述

设计系统工具集合帮助你在浏览器中完成与 Design System 相关的处理任务。无需安装软件，具体功能取决于所选工具。

## 常见问题

### 设计系统工具可以做什么？

你可以浏览并使用该分类下的 7 个工具，处理与 Design System 相关的任务；每个工具支持的操作可能不同。

### 使用这些工具需要安装软件吗？

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

### 上传的数据会如何处理？

文本输入不会保存。上传的文件会自动在 6 小时后删除；工具在浏览器界面中使用，但处理运行在 Elysia Tools 服务器上。

## 工具

- [无障碍色彩对比度检查器](https://elysiatools.com/zh/tools/accessible-color-palette-contrast-checker): 按 WCAG 2.1 AA/AAA 审查整套调色板的颜色组合，并给出调整建议
- [CSS 流体排版 Clamp 计算器](https://elysiatools.com/zh/tools/css-fluid-typography-clamp-calc): 输入最小/最大视口与字号边界，输出 clamp() 表达式、可复制 CSS 与实时预览数据
- [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 色板同步器](https://elysiatools.com/zh/tools/tailwind-color-palette-sync): 输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。
- [网页字体配对实验室](https://elysiatools.com/zh/tools/webfont-pairing-lab): 并排预览 标题 + 正文 的 Google 字体配对，调节字重与行高，复制即可粘贴的 CSS @import + 变量代码。精选 22 款字体及 7 组经典搭配预设。

## 相关内容

- [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 小时后自动删除。
- [颜色调色板](https://elysiatools.com/zh/tags/color-palette): 浏览 10 个颜色调色板在线工具，在浏览器中处理颜色调色板相关任务，无需安装软件。
- [CSS Variables](https://elysiatools.com/zh/tags/css-variables): 浏览 8 个 CSS Variables 在线工具，在浏览器中处理 CSS Variables 相关内容，无需安装软件。
- [Design Tokens](https://elysiatools.com/zh/tags/design-tokens): 使用 5 个 Design Tokens 在线工具处理、转换、验证和管理相关数据，无需安装软件。文本不保存，上传文件 6 小时后自动删除。