UD5工具箱
CSRF 令牌生成与验证模拟器 - 跨站请求伪造防护
同步器令牌模式演示：生成令牌嵌入表单，提交时验证，理解CSRF防护核心流程。
设计令牌导出器
将 JSON 设计令牌转换为 SCSS 变量、CSS 自定义属性或 JavaScript 常量
0 个令牌
JSON 有效
支持嵌套对象结构，点击上方按钮加载示例
等待输入 JSON...
等待输入 JSON...
等待输入 JSON...
常见问题与知识点
什么是设计令牌？
设计令牌（Design Tokens）是设计系统中存储视觉设计决策的原子单元，如颜色、字体大小、间距等。它们以平台无关的格式（如JSON）定义，可跨平台转换，确保品牌一致性。
SCSS变量 vs CSS自定义属性
SCSS变量在编译时解析，适合构建时主题；CSS自定义属性（--var）在运行时解析，支持动态切换主题。两者可互补使用：SCSS用于构建时配置，CSS变量用于运行时主题。
如何组织JSON结构？
推荐按类别嵌套：color、typography、spacing、shadow等作为顶级键。使用层级命名如color.primary.500表示不同色阶，工具会自动展开为扁平变量名。
命名约定最佳实践
推荐kebab-case用于CSS/SCSS（如--color-primary-500），camelCase用于JS（如colorPrimary500）。保持语义化命名，避免过于抽象的名称，让变量名自解释。
支持哪些输出格式？
本工具支持SCSS变量（$var）、CSS自定义属性（--var）和JavaScript ES6常量（export const）三种格式。每种格式针对不同平台优化，可直接用于项目。
如何在项目中集成？
将导出的SCSS文件放入styles目录通过@import引入；CSS变量文件通过link标签或@import加载；JS文件通过import导入。建议配合构建工具实现自动化令牌分发。
深层嵌套如何处理？
工具递归遍历JSON对象，将嵌套路径用分隔符连接。例如color.primary.dark会生成$color-primary-dark或colorPrimaryDark，具体取决于所选命名风格。
支持数组和特殊值吗？
支持！数组值（如断点列表、阴影多值）会被保留。SCSS中数组转为括号列表，JS中使用JSON.stringify，CSS中保留原始格式。布尔值和数字也会正确处理。
设计令牌与设计系统
设计令牌是构建设计系统的基石。W3C设计令牌社区组正在推动标准化。使用令牌可实现设计-开发的无缝对接，推荐与Figma变量、Style Dictionary等工具配合。
XML转CSV工具 - 在线XML扁平数据导出表格
解析简单XML结构并提取重复节点转换为CSV表格，方便导入电子表格软件。
设计令牌 (Design Tokens) 编辑器 - 跨平台样式变量管理
结构化编辑颜色、间距、字体等设计令牌，一键导出为CSS自定义属性、SCSS变量或JSON。
内容安全策略生成器 - CSP HTTP头在线定制
图形化配置Content-Security-Policy指令，生成安全策略头，防御XSS和代码注入。
文件系统访问 API 沙盒 - 读写本地文件
使用 showOpenFilePicker 或 showSaveFilePicker 选择文件并读取/写入内容，体会原生文件交互。
JSON Schema 假数据生成器 - 按定义创建莫克数据
定义JSON Schema结构，自动填充符合类型与格式的随机数据，支持导出大文件用于压力测试。
ConfigMap 生成器 - 从键值对快速生成 Kubernetes 资源
输入键值对，自动生成 Kubernetes ConfigMap YAML，支持文字和多行数据。
npm 脚本模拟运行器 - 测试 package.json scripts 逻辑
粘贴 package.json 中的 scripts 部分，模拟执行并预览串联命令和环境变量的效果。
SQL插入语句生成器 - 数据转INSERT批量生成
将JSON数组或CSV数据转换为多条INSERT INTO语句，支持自定义表名和列映射。
语音指令卡牌游戏 - Web Speech API交互
说出特定指令来操控虚拟卡牌出牌或触发效果，体验语音交互娱乐。
JSON 试题生成器 - 自定义题库随机组卷
上传 JSON 格式题库，随机抽取指定数量题目生成在线测验，自动评分和解析。
语音合成音色浏览器 - 列出所有可用语音
获取设备上所有可用的语音合成音色，试听并比较不同语言和嗓音。
Web App Manifest 生成向导 - 填写信息生成清单
通过分步表单填写应用名称、图标、主题色等，生成完整的 manifest.json 文件。
栈与队列模拟器 - 推入弹出可视化操作
交互式向栈（后进先出）或队列（先进先出）添加删除元素，演示数据流变化。
首字母缩略词生成器 - 根据短语提取缩写
输入全称，自动提取首字母组成缩略词，还可调整拼为易记单词。
Web Serial 终端记录器 - 捕获串口输出并保存
连接串行设备，实时显示接收数据，支持时间戳和保存为文本日志文件。
高级 LocalStorage 管理器 - 键值编辑、导入导出
查看、编辑、删除当前域 localStorage，支持备份为 JSON 文件或从文件恢复。
自定义数据工厂 - 配置模版批量生成JSON
定义字段模版和数量，批量生成仿真JSON数据，支持中文姓名、邮箱、电话等。
静态地图链接生成器 - 坐标标记点图片
输入经纬度和标记参数，构造免费静态地图图片URL，嵌入网页或分享位置。
名片设计预览 - 在线排版并导出图片名片
提供名片模板，填写信息并调整样式，实时预览名片效果，可导出为图片下载。
自定义序列号生成 - 前缀+时间+随机数
配置前缀、日期格式、随机位数，批量生成唯一的业务单号或ID。
谍报密码牌生成器 - 自定义单词卡牌版图
生成可用于谍报密码游戏的5x5单词网格，支持自定义主题词库。
代码审查清单生成 - 根据语言定制
选择编程语言，生成一份该语言的代码审查要点清单，包含性能、安全、可读性等。
Docker Run 命令生成器 - 参数可视化配置
通过表单设置端口映射、卷挂载、环境变量等，生成 docker run 命令。
假地址生成器 - 测试用国际地址随机
生成包含街道、城市、邮编的合理格式虚假国际地址，用于原型测试。
时区徽章生成 - 个人/团队工作时间表
选择所在时区和典型工作时间，生成显示可用时段的徽章图片。
Proquint可读标识符生成 - 将IP 地址转为单词
将IP地址或数字ID转换为可发音的无意义单词对，便于人工记忆和沟通。
自定义元素注册表浏览器 - 查看页面内所有 Web Components
扫描当前页面已定义的自定义元素，显示其名称、类定义及生命周期方法。
规则式聊天机器人 - 基于关键词匹配
实现一个简单的 ELIZA 风格的聊天机器人，通过关键词匹配和预设回应进行对话。
OAuth流程模拟器 - 授权码/PKCE演示
逐步演示OAuth 2.0授权码流程或PKCE流程，展示参数跳转和Token交换。