UD5工具箱
占位图构建器 - 指定宽高文字自动生成
输入宽高、背景色和文字，生成对应尺寸的占位图片，适用于原型设计和文档填充。
宽
px
高
px
#6366f1
起始色
#8b5cf6
结束色
无
圆形
菱形
条纹
网格
波点
三角
留空自动显示画布尺寸
预览缩放自适应 · 下载为原始分辨率
常见问题 & 知识点
占位图（Placeholder Image）是在网站或应用开发过程中，用于临时替代实际图片的占位图像。当设计师或开发者尚未准备好最终图片资源时，占位图帮助快速搭建页面布局、测试响应式设计、评估视觉层次，而无需等待真实图片就位。使用占位图可以显著提升开发效率，避免因缺图导致的布局塌陷问题。
PNG 是位图格式，适合模拟真实照片的占位场景，色彩丰富但文件体积相对较大，放大后会失真；SVG 是矢量格式，无限缩放不失真，文件体积极小（通常仅数百字节），可内联嵌入HTML中，非常适合作为UI占位图。本工具同时支持导出PNG和SVG两种格式，满足不同使用场景。
建议根据实际图片的预期尺寸来设置。常见场景：头像类用 200×200，缩略图用 400×300，横幅用 1200×630（社交媒体OG图片比例），全宽Hero图用 1920×1080。如果用于响应式设计测试，建议生成较大尺寸，利用CSS控制显示大小即可。
占位图本身不含语义信息，搜索引擎无法从中获取有意义的alt文本。正式上线前，务必替换为真实图片并添加描述性的alt属性。占位图仅用于开发阶段，线上环境应避免残留占位图，否则可能影响页面专业度和SEO表现。
Data URL 是将图片数据直接编码为base64字符串嵌入HTML或CSS中的技术。优点是不需要额外的HTTP请求，减少网络开销；缺点是体积比原始二进制大约33%，且无法被浏览器缓存。适合小尺寸图标或占位图的内联使用。本工具生成的PNG Data URL可直接用于 <img src="data:image/png;base64,..."> 中。
几何图案（圆形、菱形、条纹、网格等）为占位图增添了视觉层次感和设计感，使占位图在原型演示中更具吸引力。半透明的几何图案叠加在渐变背景上，既保持了占位的功能性，又提升了美观度，在给客户或团队展示时更显专业。
占位图片生成器 - 在线生成示意图片(Canvas)
自定义尺寸、背景色、文字，纯前端生成占位图，适用于原型设计和网页排版，无需依赖外部服务。
布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局，生成基本的布局骨架代码。
几何图案生成器 - 交互式重复纹理SVG
选择基本形状（六边形、菱形等）和配色，无缝拼接生成SVG几何背景图案。
空状态插画生成器 - 无数据占位符
为应用的空白页（如无订单、无消息）生成带插画和文案的HTML/CSS占位组件。
三分法构图覆盖 - 上传图片加九宫格参考线
为上传的照片添加可调节的三分线、斐波那契螺旋等构图辅助线。
ASCII字符画编辑器 - 网格绘制导出
在字符网格上通过工具绘制猫、超人等各种图案，导出为.txt ASCII艺术。
滚动截图拼接器 - 多张截屏自动拼长图
上传多张连续重叠截屏，自动对齐并拼成一幅完整长图，完美展示聊天或网页。
工作任务分解结构(WBS)图 - 在线绘制并导出
拖拽创建树形工作分解结构，清晰展示项目交付物与任务包，支持导出PNG/SVG，项目规划利器。
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格，直观展示子网格如何继承父网格轨道并进行独立调整，生成代码。
JSON 数据表格生成器 - 自动列与样式
粘贴 JSON 数组，自动生成带搜索、排序和分页功能的数据表格组件。
像素画编辑器 - 在线网格绘图与导出
在可缩放网格上逐点绘制像素艺术，支持调色板、橡皮擦和导出PNG。
CSS图案背景构建器 - 纯CSS重复花纹
编写或配置基础的CSS渐变、径向、锥形图案组合，生成美观的无缝重复背景代码。
JSON Schema 示例生成器 - 根据定义产出示例数据
提供JSON Schema定义，自动生成符合约束的示例JSON数据，用于接口文档说明。
GraphQL Schema 关系图浏览器 - 类型图谱展示
输入 GraphQL Schema SDL，生成交互式的关系图谱，展示类型、字段及关联。
CSS Subgrid 布局生成器 - 可视化创建子网格
拖拽嵌套网格项，预览并生成使用 CSS Subgrid 对齐父子网格的代码。
网页元数据查看器 - Open Graph/Twitter Card
输入网址，抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。
GraphQL 查询成本计算器 - 估算字段解析复杂度
粘贴 GraphQL 查询和 Schema（或模拟类型权重），计算请求的代价分，辅助限流策略。
响应式表格生成器 - 移动端堆叠表格
将HTML表格转换为移动端友好的折叠行显示模式，并生成相应CSS。
在线像素标尺 - 测量网页元素宽高
在页面移动鼠标时显示十字参考线和像素距离，方便UI开发。
函数绘图器 - 在线绘制数学函数图像
输入 f(x) 表达式，可同时绘制多条函数曲线，支持缩放、拖拽和坐标点追踪，辅助数学学习。
网页长截图工具 - 滚动捕捉整个页面
输入URL或使用当前页，自动滚动并拼接为一张完整的长图。
在线SVG基础编辑器 - 矢量图形可视化绘制
直接编写SVG代码并实时预览，或通过基本形状工具绘制矩形、圆形、路径，适合动态图形调试。
视频缩略图提取器 - 任意时间点截图
加载本地视频，拖动时间轴选取帧，捕获该帧为PNG图片下载。
网页整页截图生成器 - html2canvas当前页面捕获
使用html2canvas截取当前网页的完整内容（需粘贴HTML或演示），生成长图并下载。
SVG 图标优化器 - 精简路径数据与清理冗余
粘贴SVG代码，移除无用命名空间、注释与默认属性，减小文件体积，提升加载速度。
在线随机诗歌生成器 - 词语拼贴诗意
通过随机组合意象、动词和连接词生成现代诗短句，每次点击都有新创意。
书脊设计预览 - 输入文字看效果
设定书脊宽度，排版书名和出版社文字，模拟书脊在书架上的外观。
CSS 滚动时间线生成器 - 可视化创建 scroll-timeline 动画
拖拽设置滚动时间线的触发范围与动画关键帧，自动生成 @scroll-timeline 及 animation-timeline CSS 代码。
CSS Grid交互演示 - 网格布局可视化学习
通过控件调整网格轨道、间距和对齐，实时展示效果及对应CSS代码，轻松掌握Grid。