Wireframe

You might say

Hold off on colors—sketch a gray page skeleton first: header, hero, three cards, footer, just the positions.

A wireframe is the page skeleton drawn in gray blocks and placeholder lines—it fixes "what goes where" before any colors or fonts.Sketch the page in gray blocks first: how tall the header is, what sits in the hero, where the button goes. With positions settled, colors and fonts can be adjusted without reworking the layout. The wireframe fixes positions; the visual design handles colors and fonts.

Know first

Hero

One homepage: wireframe and finished

Header (placeholder)

One headline (placeholder)One paragraph (placeholder)Main button (placeholder)

The wireframe stage confirms positions; changes only move boxesSkeleton first, skin second—rework costs least.

What the wireframe owns

Positions and sizes: Header height, hero footprint, card arrangement—structure questions get settled here, and changes only move boxes.

Placeholder text: Until real copy exists, label blocks as "one headline" or "one paragraph" instead of inventing content for the skeleton.

Quick checkChoose the best answer

The AI asks "what should the homepage look like?" and you only want to settle block positions. Which reply fits?

Draw a gray skeleton first: header, hero, cards, footer in position; colors laterBuild a finished version with gradients and fonts, and we'll react to itJust write all the copy; arrange the page however you like

You can say this to an AI Agent

Start with a wireframe of the homepage: gray placeholder blocks marking header, hero, three cards, and footer with rough heights. Once I confirm the positions, apply colors and fonts.

Learn next

1PRD→2Visual Hierarchy→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website