UD5工具箱
多格式输出支持
设计令牌导出器支持三种主流前端变量格式的输出，覆盖了当前绝大多数前端技术栈的需求。SCSS变量格式以美元符号（$）作为前缀，适用于使用Sass预处理器的项目，生成的变量可以直接在SCSS文件中通过变量名引用。CSS自定义属性格式以双连字符（--）作为前缀，符合W3C标准的CSS变量规范，可在原生CSS和所有现代浏览器中使用，无需任何预处理器支持。JavaScript ES6常量格式则以export const语句输出，适用于React、Vue、Angular等现代JavaScript框架项目中的主题配置文件。用户可以在三种格式之间自由切换，实时查看不同格式下的输出结果。
三种命名风格自动转换
工具内置了kebab-case（连字符分隔）、camelCase（驼峰命名）和snake_case（下划线分隔）三种命名风格的自动转换引擎。无论用户输入的JSON键名采用何种格式，工具都能在输出时将其统一转换为选定的命名风格。例如，输入中的"primaryColor"或"primary-color"在选择kebab-case时均会输出为"primary-color"，选择camelCase时则输出为"primaryColor"。这一功能确保了生成的变量名能够精确匹配项目现有的编码规范和命名约定。
深层嵌套JSON自动展平
设计令牌的JSON结构通常具有多层嵌套关系，例如colors.primary.base或spacing.md.padding等层级结构。设计令牌导出器能够自动识别并展平这些嵌套对象，生成带有层级路径的扁平化变量名。展平过程中，工具会根据用户选择的命名风格自动连接各层级的键名，确保生成的变量名既保留了原始的层级语义，又符合扁平化变量的命名要求。无论嵌套深度是两层还是五层，工具都能正确处理。
SCSS前缀与CSS前缀自定义
为了满足不同项目的命名空间隔离需求，工具提供了SCSS前缀和CSS前缀的自定义功能。用户可以在设置面板中输入自定义前缀字符串，工具会自动将其添加到所有生成的变量名之前。例如，设置SCSS前缀为"ds-"后，原本的"color-primary"变量会输出为"$ds-color-primary"。CSS前缀同理，设置为"app-"后，变量会输出为"--app-color-primary"。这一功能在微前端架构或多设计系统共存的大型项目中尤为实用，能有效避免变量名冲突。
实时预览与即时反馈
设计令牌导出器采用响应式设计，用户在输入框中粘贴或编辑JSON数据后，右侧的预览面板会即时更新输出结果。无需点击任何按钮或等待服务器响应，变量代码会在毫秒级时间内完成重新生成。实时预览机制让用户能够快速验证不同命名风格和前缀设置下的输出效果，大幅缩短了从输入到确认的反馈周期。预览面板采用代码高亮显示，清晰展示生成的变量代码结构。
一键复制与下载功能
当用户对生成的变量代码满意后，可以通过一键复制按钮将全部代码复制到系统剪贴板，直接粘贴到项目的SCSS、CSS或JavaScript文件中。对于需要保存完整文件的场景，工具还提供了一键下载功能，会根据当前选择的输出格式自动创建对应扩展名的文件（.scss、.css或.js），文件内容包含格式正确的变量声明代码。复制和下载操作均在浏览器端完成，无需额外配置。
内置示例数据集
工具内置了三套示例数据集，帮助新用户快速了解工具的功能和使用方法。基础示例展示了最常见的颜色令牌结构，适合初次接触设计令牌的用户。完整示例涵盖了颜色、排版、间距、阴影、边框等全面的设计令牌类型，展示了复杂项目中的令牌组织方式。Material色彩示例则基于Google Material Design色彩系统，包含primary、secondary、error等标准色彩组合，适合使用Material Design规范的项目参考。用户只需点击对应按钮即可加载示例数据，无需手动编写JSON。
响应式界面与零配置使用
设计令牌导出器采用完全响应式布局设计，无论用户使用桌面电脑、平板还是手机访问，界面都能自动适配屏幕尺寸并保持良好的操作体验。工具无需注册账号、无需安装任何软件、无需配置任何环境变量，打开浏览器即可使用。所有功能均在单页面内完成，用户无需在多个页面之间跳转。零配置的设计理念让工具的使用门槛降至最低，即使是非技术背景的设计师也能轻松上手。