UD5工具箱
设计令牌（Design Tokens）
设计令牌是设计系统中的最小原子单位，用于存储视觉设计属性的值，如颜色、字体大小、间距、阴影、边框半径等。它们以键值对的形式组织，通常采用JSON格式存储。设计令牌的核心价值在于为设计决策提供统一的、可编程的表示方式，使得设计系统能够在不同平台和工具之间保持一致性。在本工具中，设计令牌是输入数据的基本单元，用户提供的JSON文件即包含完整的设计令牌集合。
SCSS变量
SCSS变量是Sass预处理器中用于存储可复用值的命名容器，以美元符号（$）作为声明前缀。例如，$primary-color: #007bff; 声明了一个名为primary-color的变量。SCSS变量支持作用域控制、插值、运算等高级特性，是前端样式开发中广泛使用的工具。在本工具中，SCSS变量是三种输出格式之一，适用于使用Sass编译工具链的项目。
CSS自定义属性
CSS自定义属性（CSS Custom Properties），也称为CSS变量，是W3C标准中定义的原生变量机制，以双连字符（--）作为声明前缀。例如，--primary-color: #007bff; 声明了一个CSS变量。与SCSS变量不同，CSS自定义属性在浏览器运行时可用，支持通过JavaScript动态修改，适用于主题切换等场景。本工具的CSS自定义属性输出格式可直接用于任何现代浏览器项目。
JavaScript ES6常量
ES6常量是ECMAScript 2015及之后版本中引入的变量声明方式，使用const关键字声明不可重新赋值的命名值。在设计令牌导出器中，工具会将JSON令牌转换为export const形式的ES6模块导出语句，方便在React、Vue、Angular等现代JavaScript框架项目中以模块化方式引入和使用设计令牌值。
命名风格转换
命名风格转换是指将变量名从一种命名约定自动变换为另一种约定的过程。设计令牌导出器支持三种命名风格：kebab-case（连字符分隔，如primary-color）、camelCase（驼峰命名，如primaryColor）、snake_case（下划线分隔，如primary_color）。工具会根据用户选择的目标风格，自动将JSON键名转换为对应的格式，确保输出变量名与项目编码规范保持一致。
JSON展平（Flattening）
JSON展平是将多层嵌套的JSON对象结构转换为单层扁平结构的过程。在设计令牌场景中，原始JSON通常以嵌套对象表示层级关系（如colors.primary.base），而生成的变量名需要是扁平的（如$color-primary-base或--color-primary-base）。设计令牌导出器内置的展平引擎会递归遍历整个JSON树，根据用户选择的命名风格连接各层级的键名，生成保留语义的扁平变量名。无论嵌套深度是两层还是五层，展平引擎都能正确处理。
变量前缀
变量前缀是添加在变量名开头的标识字符串，用于在大型项目或多设计系统共存的环境中隔离命名空间，防止变量名冲突。设计令牌导出器允许用户自定义SCSS前缀和CSS前缀，工具会自动将前缀拼接到每个生成的变量名之前。例如，设置前缀为"ds-"后，color-primary变量会输出为$ds-color-primary或--ds-color-primary。这一功能在微前端架构中尤为重要。
设计系统（Design System）
设计系统是一套完整的、可复用的设计标准和组件集合，用于指导产品的视觉和交互设计。设计令牌是设计系统的基础构建块，它们定义了系统中所有视觉属性的值。一个成熟的设计系统通常包含颜色令牌、排版令牌、间距令牌、阴影令牌、动画令牌等多个类别。设计令牌导出器帮助开发者将设计系统中定义的令牌高效地转化为代码实现，是设计系统落地过程中的关键工具。
令牌层级结构
令牌层级结构是指设计令牌在JSON中以树状嵌套对象方式组织的层级关系。典型的层级结构包括分类层（如colors、spacing）、子分类层（如colors.primary、colors.secondary）和值层（如colors.primary.base）。合理的层级结构有助于设计令牌的组织、查找和维护。设计令牌导出器在处理嵌套结构时，会将层级路径信息编码到变量名中，确保扁平化后的变量名仍然保留原始的层级语义。
视觉属性令牌
视觉属性令牌是设计令牌中用于描述视觉外观的具体类型，包括颜色（color）、字体大小（font-size）、字体权重（font-weight）、行高（line-height）、间距（spacing/padding/margin）、边框半径（border-radius）、阴影（box-shadow）、透明度（opacity）等。设计令牌导出器对所有类型的视觉属性令牌均能正确处理，生成对应格式的变量代码，无需用户对不同属性类型进行区分配置。
令牌集成
令牌集成是将生成的变量代码引入到项目构建流程中的过程。对于SCSS变量，可以通过@import语句引入到其他SCSS文件中。对于CSS自定义属性，可以通过link标签或@import规则引入CSS文件。对于JavaScript常量，可以通过import语句以模块方式引入。设计令牌导出器生成的代码遵循各格式的标准语法规范，确保用户可以无缝地将输出集成到现有的项目构建工具链中。