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
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.
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
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↗Further reading
Quick check