UD5工具箱
第一步：访问工具页面
在浏览器中打开设计令牌导出器的工具页面。页面加载后，您将看到左右分栏的布局：左侧是JSON输入区域，右侧是变量代码预览区域。页面顶部或侧边提供了命名风格选择器、前缀设置面板和示例数据按钮。整个界面设计直观清晰，无需任何额外配置即可开始使用。
第二步：准备JSON设计令牌数据
将您的设计令牌以JSON格式组织好。JSON的顶层键对应设计令牌的分类（如colors、spacing、typography等），每个分类下可以包含嵌套的对象结构。例如，一个典型的令牌结构可能如下所示：colors.primary对应主色调，colors.secondary对应次要色，spacing.small、spacing.medium、spacing.large对应不同级别的间距值。工具支持任意深度的嵌套结构，但建议保持在合理层级以内以便于管理。如果您是首次使用，可以点击页面上的"基础示例"按钮加载预置数据。
第三步：粘贴JSON数据到输入框
在左侧的JSON输入区域中，粘贴您的设计令牌JSON数据。粘贴后，右侧预览区域会立即更新，显示转换后的变量代码。如果您粘贴的JSON格式有误（例如缺少逗号、引号不匹配等），工具会显示错误提示，帮助您快速定位并修复问题。确保JSON数据格式正确是获得正确输出的前提。输入框支持多行编辑，您也可以直接在框内修改JSON数据，预览会实时同步更新。
第四步：选择命名风格
在工具的设置区域中，选择您项目所需的命名风格。工具提供三种选项：kebab-case（如primary-color）适合使用CSS模块或BEM命名规范的项目；camelCase（如primaryColor）适合JavaScript和TypeScript项目；snake_case（如primary_color）适合某些特定的代码风格偏好。选择不同风格后，预览区域会立即刷新，展示对应命名风格下的变量代码。命名风格的选择不影响变量的值，仅改变变量名的格式。
第五步：配置输出前缀
根据项目需求，在设置面板中配置SCSS前缀和/或CSS前缀。例如，如果您正在为一个名为"design-system"的项目生成变量，可以将SCSS前缀设置为"ds-"，CSS前缀也设置为"ds-"。这样，原本的color-primary变量在SCSS输出中会变为$ds-color-primary，在CSS输出中会变为--ds-color-primary。前缀设置是可选的，如果不需要前缀隔离，保持默认空值即可。设置完成后，预览区域会自动反映前缀变化。
第六步：选择输出格式并预览
在输出格式选择区域，选择您需要的变量格式。SCSS变量格式适用于使用Sass预处理器的项目，生成的代码可以直接在.scss文件中使用。CSS自定义属性格式适用于原生CSS项目或需要运行时动态修改主题的场景。JavaScript ES6常量格式适用于React、Vue等现代框架项目中的主题配置文件。选择格式后，右侧预览区域会展示完整的变量声明代码，您可以仔细检查变量名和值是否符合预期。
第七步：复制或下载生成的代码
确认输出内容无误后，点击"复制"按钮将生成的变量代码复制到系统剪贴板，然后切换到您的项目编辑器中粘贴到对应的文件里。如果您需要保存完整的文件，点击"下载"按钮，工具会根据当前选择的格式自动创建相应扩展名的文件（如tokens.scss、tokens.css或tokens.js）。下载的文件包含格式正确的变量声明，可以直接引入到项目中使用。至此，设计令牌的格式转换流程全部完成。