UD5工具箱
CSS Flexbox交互演示 - 在线弹性布局学习
拖拽调节Flex容器和子项属性，即时可视化响应效果，同时显示CSS代码，边学边用。
Flexbox 高级演练场 - 所有属性可视化控制
快速预设
容器属性
flex-direction
flex-wrap
justify-content
align-items
align-content
子项属性 （点击下方方块选中）
👆 点击可视化区域中的方块来选中子项
实时预览
容器内共 5 个子项
主轴
交叉轴
生成的 CSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
跳跃表可视化器 - 插入/搜索层级演示
随机可视化Skip List的层级结构和快速查找过程，对比链表效率。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
纯CSS暗黑模式切换 - checkbox黑客实现
利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码，自动处理class→className、行内样式对象化等。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
OffscreenCanvas性能演示 - Worker中绘图对比
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画，对比FPS和流畅度。
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
Brainfuck在线解释器 - 步进调试
编写Brainfuck代码，以可视化的方式步进执行，观察活动纸带和指针。
字距与字偶距预览器 - 实时调节CSS letter-spacing
输入文本，滑块调节letter-spacing和word-spacing，实时显示效果并复制CSS。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
HTML源码顺序与视觉顺序对比
粘贴HTML和基本CSS，分析渲染后视觉顺序与DOM顺序的差异，避免可访问性问题。
JSON 查询演练场 - JMESPath/JSONPath 即时评测
在可视化环境中编写JSONPath或JMESPath表达式，实时高亮匹配结果并查看路径提取逻辑。