UD5工具箱
实时预览
左侧面板修改任意参数后，右侧预览区域会在毫秒级时间内刷新渲染结果。工具采用 CSS 自定义属性（CSS Variables）驱动预览，避免了传统"修改-保存-刷新"的繁琐流程。开发者可以连续调整颜色、字号、圆角等参数，实时观察列表标记的视觉变化，快速找到满意的组合方案。
标准样式库
工具内置 12 种标准计数器样式，涵盖 decimal（阿拉伯数字）、lower-roman / upper-roman（罗马数字）、lower-alpha / upper-alpha（字母序列）、cjk-decimal（中文数字）、lower-greek（希腊字母）、disc（实心圆）、circle（空心圆）、square（实心方块）等。每种样式均附带简要说明，帮助初学者快速理解其适用场景。
创意样式模板
除标准样式外，工具还提供 6 套创意样式模板：渐变数字使用 background-clip: text 实现彩色渐变标记；药丸标签以圆角矩形包裹数字并填充主题色背景；双线边框通过 border 叠加营造立体感；浮雕效果利用 text-shadow 模拟凹凸质感；彩虹序列为每个编号分配不同色相；荧光标记在深色背景下呈现发光效果。这些模板可直接复制到项目中使用。
自定义参数调节
工具提供 6 个可调节参数：起始编号（1-999）、标记颜色（颜色选择器）、背景颜色（颜色选择器）、标记字号（12px-48px）、字体粗细（100-900）、边框圆角（0-50%）。每个参数均配有滑块控件和数值输入框，支持精确控制。修改后的参数会同步更新到 CSS 代码输出区域，确保复制的代码与预览效果完全一致。
一键复制代码
调试完毕后，点击"复制代码"按钮即可将完整的 CSS 代码片段导入系统剪贴板。代码包含选择器、属性声明和必要的注释，可直接粘贴到项目的样式表中。工具还会自动检测剪贴板 API 的可用性，在不支持的浏览器中回退到 document.execCommand('copy')，确保兼容性。复制成功后会显示绿色提示，确认操作完成。
嵌套列表演示
工具默认渲染一个三层嵌套列表结构，展示计数器在不同嵌套层级中的行为差异。通过这个演示，开发者可以直观看到 counter-reset 如何在父元素上重置子计数器、counter-increment 如何在每次递增时更新当前值、以及 content: counters() 函数如何自动拼接多级编号（如 1.1、1.2、2.1）。这比阅读 MDN 文档更加直观高效。