UI Wireframe Placeholder Generator

Quickly generate low-fidelity wireframe placeholders (SVG) for UI design, supporting image, avatar, text block, and other types.

Settings

Placeholder Type

Width (px)

Height (px)

Stroke Color

Background Color

Stroke Width

Live Preview

<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>

About Wireframe Placeholders

Wireframe Placeholders are primarily used in the early stages of UI/UX design, i.e. the low-fidelity prototyping phase. They use simple geometric shapes to represent future real content (such as images, avatars, text blocks), helping designers focus on layout and structure rather than visual details. The generated SVG can be dragged directly into Figma, Sketch, or used in HTML code.