UI 线框占位图生成器

快速生成 UI 设计阶段使用的低保真线框占位图（SVG），支持图片、头像、文本段落等多种类型。

参数设置

占位图类型

宽度 (px)

高度 (px)

线条颜色

背景颜色

线条粗细

实时预览

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="300" height="200" fill="#f8fafc" stroke="#94a3b8" stroke-width="2"/>
        <line x1="0" y1="0" x2="300" y2="200" stroke="#94a3b8" stroke-width="2"/>
        <line x1="300" y1="0" x2="0" y2="200" stroke="#94a3b8" stroke-width="2"/>
      </svg>

关于线框占位图

线框占位图（Wireframe Placeholders）主要用于 UI/UX 设计的早期阶段，也就是低保真原型设计阶段。它们用最简单的几何图形代表未来的真实内容（如图片、头像、文本块），帮助设计师专注于布局和结构，而不是视觉细节。生成的 SVG 可以直接拖入 Figma、Sketch 或直接在 HTML 代码中使用。