UD5工具箱
占位图片生成器 - 在线生成示意图片(Canvas)
自定义尺寸、背景色、文字，纯前端生成占位图，适用于原型设计和网页排版，无需依赖外部服务。
✅ 已复制到剪贴板
场景模板
无数据
无搜索结果
暂无消息
暂无通知
页面未找到
网络断开
暂无文件
暂无订单
选择图标
主题色
自定义
文字内容
样式设置
操作按钮
实时预览
暂无数据
当前没有数据，请稍后再来查看或添加新内容。
生成的代码
常见问题 (FAQ)
空状态插画（Empty State Illustration）是当页面或应用中没有数据时显示的占位图形。它通常包含一个图标或插画、标题、描述文字和可选的操作按钮。好的空状态设计能够：减少用户的困惑和焦虑、引导用户采取下一步行动、提升产品的品牌调性。相比空白的页面，一个精心设计的空状态能显著提升用户体验。
本工具可以帮助你快速生成漂亮且专业的空状态占位符。你可以：选择预设场景模板、自定义Font Awesome图标、调整主题颜色、设置标题和描述文字、添加动画效果（浮动/脉冲/弹跳）、配置操作按钮，并一键复制生成的HTML和CSS代码到你的项目中使用。支持实时预览，所见即所得。
是的，生成的代码可以直接使用。HTML代码包含了完整的空状态结构，CSS代码包含装饰元素和动画效果。唯一的外部依赖是Font Awesome 6（用于图标显示）。如果你的项目已经引入了Font Awesome，只需将生成的代码粘贴到对应位置即可；如果还没有，只需在
<head>中添加Font Awesome的CDN链接即可。
本工具内置了20个常用的Font Awesome 6 Free图标，涵盖了空状态最常见的场景（数据、搜索、消息、通知、文件、购物车等）。如果你需要使用自定义图标（如SVG插图），可以在复制代码后将
<i>标签替换为你自己的SVG或图片元素，CSS样式保持不变即可。
优秀的空状态设计应遵循以下原则：① 告知状态——用清晰的标题说明当前情况；② 引导行动——提供明确的操作按钮引导用户；③ 保持品牌一致性——颜色和风格与整体产品一致；④ 适度趣味性——适当的动画或插画可以缓解用户的失落感；⑤ 不要过度设计——保持简洁，避免信息过载。
是的。生成的代码使用了相对单位和弹性布局，图标大小和文字都会根据容器自适应。如果你在移动端使用，建议将图标大小设置在60-100px之间，标题使用1.1rem左右的字体大小，以获得最佳的移动端显示效果。本工具的预览区也支持响应式查看。
占位图构建器 - 指定宽高文字自动生成
输入宽高、背景色和文字，生成对应尺寸的占位图片，适用于原型设计和文档填充。
高级占位图生成器 - 渐变/几何/文字组合
生成漂亮几何图案或文字占位图，指定尺寸，下载用于原型。
布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局，生成基本的布局骨架代码。
网页整页截图生成器 - html2canvas当前页面捕获
使用html2canvas截取当前网页的完整内容（需粘贴HTML或演示），生成长图并下载。
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格，直观展示子网格如何继承父网格轨道并进行独立调整，生成代码。
CSS Subgrid 布局生成器 - 可视化创建子网格
拖拽嵌套网格项，预览并生成使用 CSS Subgrid 对齐父子网格的代码。
网页元数据查看器 - Open Graph/Twitter Card
输入网址，抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。
JSON Schema 示例生成器 - 根据定义产出示例数据
提供JSON Schema定义，自动生成符合约束的示例JSON数据，用于接口文档说明。
展开/收起文本截断生成器 - 行数限制CSS
设置限制行数，生成带“更多”按钮的纯CSS或轻JS截断方案。
视图过渡动画演示 - View Transitions API
在多页面或元素切换时呈现流畅的交叉淡入淡出和变形动画，体验原生视图过渡。
JSON 数据表格生成器 - 自动列与样式
粘贴 JSON 数组，自动生成带搜索、排序和分页功能的数据表格组件。
血条样式生成器 - 游戏风HP条CSS
生成用于网页游戏或展示的动态血量/进度条样式代码，支持渐变和闪烁。
全屏数字时钟 - 简洁桌面时间显示
显示巨大的纯数字时间，支持12/24小时制，夜间模式，适合作为工作或学习桌面时钟。
未使用 CSS 扫描器 - 根据 HTML 检测多余样式
提供 HTML 和 CSS，分析哪些选择器在当前页面中未被使用，提供清理建议。
网页长截图工具 - 滚动捕捉整个页面
输入URL或使用当前页，自动滚动并拼接为一张完整的长图。
滚动截图拼接器 - 多张截屏自动拼长图
上传多张连续重叠截屏，自动对齐并拼成一幅完整长图，完美展示聊天或网页。
视频缩略图提取器 - 任意时间点截图
加载本地视频，拖动时间轴选取帧，捕获该帧为PNG图片下载。
像素画编辑器 - 在线网格绘图与导出
在可缩放网格上逐点绘制像素艺术，支持调色板、橡皮擦和导出PNG。
响应式表格生成器 - 移动端堆叠表格
将HTML表格转换为移动端友好的折叠行显示模式，并生成相应CSS。
ASCII字符画编辑器 - 网格绘制导出
在字符网格上通过工具绘制猫、超人等各种图案，导出为.txt ASCII艺术。
工作任务分解结构(WBS)图 - 在线绘制并导出
拖拽创建树形工作分解结构，清晰展示项目交付物与任务包，支持导出PNG/SVG，项目规划利器。
API Blueprint 预览器 - 在线渲染 API 文档
编写 API Blueprint 标记，实时预览生成的 HTML 文档，方便 API 设计。
CSS @scope 规则演示 - 作用域样式隔离
演示新的 CSS @scope 规则如何限定样式作用范围，对比传统 BEM 和 CSS Modules。
随机借口生成器 - 幽默迟到/未完成作业理由
一键生成创意借口，应对小尴尬，娱乐为主，勿用于正式。
Web Worker 线程池演示 - 多任务并行处理
创建多个 Worker 同时执行计算任务，对比串行与并行的效率。
CSS 滚动时间线生成器 - 可视化创建 scroll-timeline 动画
拖拽设置滚动时间线的触发范围与动画关键帧，自动生成 @scroll-timeline 及 animation-timeline CSS 代码。
SVG 图标优化器 - 精简路径数据与清理冗余
粘贴SVG代码，移除无用命名空间、注释与默认属性，减小文件体积，提升加载速度。
JavaScript事件循环可视化 - 任务队列动画
动画展示调用栈、宏任务和微任务的执行顺序，帮助理解JS异步机制。
待办事项清单 - 在线Todo任务管理(LocalStorage)
简洁的待办事项管理工具，支持添加、完成、删除任务，数据保存在浏览器本地存储中，刷新不丢失。