Design Tokens收集页面使用的每个CSS变量、颜色、字体堆栈、半径和阴影，将它们分类为基本tokens、主题模式和组件范围，并将它们下载为Figma的W3C design-token JSON或CSS文件。
设计系统很少能像其实现那样完整地被写下来。真正的调色板、间距比例和类型渐变存在于样式表中——分布在自定义属性、主题覆盖和硬编码值中——从DevTools手动重建它们意味着单击数百个规则并一次复制一个值。
该工具可以一次性读取所有内容。它遍历页面上的每个样式表，包括页面本身不允许检查的跨域样式表，并收集每个自定义属性，以及在运行时在内联样式中设置的变量。:root上的变量成为基本tokens；在主题选择器下重新定义的相同名称，例如.dark、[data-theme="dark"]或prefers-color-scheme成为单独的模式；在各个组件上定义的变量被列为作用域。每个值都是通过其var()链解析的，因此您可以看到实际呈现的颜色，而不仅仅是对另一个变量的引用。
每个token都根据其值和名称进行分类 - 颜色、字体系列、字体大小、粗细、行高、间距、半径、阴影、渐变、持续时间、缓动或 z 索引 - 并且颜色标准化为十六进制，包括Tailwind和shadcn使用的仅限通道的格式 ( 222 47% 11%) 和Bootstrap的-rgb三元组。除了声明的变量之外，该工具还对渲染元素进行采样，以报告实际使用的颜色、字体堆栈、大小、半径和阴影以及使用计数——这正是您在从未采用变量的网站上所需要的。
只需单击一下即可导出。Download tokens JSON保存W3C Design Tokens格式（ $value和$type），Tokens Studio插件将其导入Figma中，Style Dictionary将其转换为适用于任何平台的代码；主题模式和观察值保留在各自的组中，因此不会混淆。Download CSS将变量作为样式表写回，每种模式都位于其原始选择器下。
每个样式表的自定义属性，包括页面无法读取的跨源表，以及运行时在内联样式中设置的变量。
.dark、[data-theme]或prefers-color-scheme下的覆盖成为单独的模式，与基本值并排显示。
每个var()链都被解析，每个token都被输入为颜色、字体、大小、间距、半径、阴影、持续时间、缓动或 z 索引。
Hex、rgb、hsl、oklch、命名颜色以及Tailwind、shadcn和Bootstrap使用的仅限通道值，全部标准化为十六进制。
从渲染元素中采样的颜色、字体堆栈、大小、粗细、半径和阴影，以及每一项出现的频率。
用于Tokens Studio和Style Dictionary的W3C design-token JSON，或在其原始选择器下包含每种模式的CSS文件。
将真实的调色板、类型和间距导入到Tokens Studio中，而不是从屏幕截图中选取颜色。
查看网站实际使用了多少种颜色和字体大小，以及哪些值绕过了它定义的tokens。
并排比较深色模式覆盖的每个变量与其浅色值，并找出从未覆盖的变量。
导出tokens一次并将它们提供给Style Dictionary或Tailwind配置，而不是手动复制值。
将您欣赏的网站的颜色系统、字体比例和半径拉入您可以使用的文件中。
单击DevSuite Pro坞站中的Design Tokens图标。提取立即运行，摘要对变量、模式、颜色和字体堆栈进行计数。
“颜色”选项卡将每个颜色token显示为样本，拆分以显示每个主题模式，后面是页面呈现的颜色以及使用计数。
版式预览每个字体堆栈并列出大小、粗细、行高和@font-face规则；最后一个选项卡涵盖间距、半径、阴影和运动。
“变量”选项卡列出了每个自定义属性及其创作和解析的值。在基本、每个主题模式和组件范围变量之间切换。
通过Tokens Studio下载Figma的Download tokens JSON，或Download CSS。勾选该复选框也可以包含组件范围的变量。
