AI Wireframe Generator
A page as a column of named sections with what goes in each, and three lines on why that order. Words rather than boxes: the order is the argument.
This tool needs JavaScript: a model lays out the sections; it is an argument about order.
What the page is for, who it is for, and where they come from. The last part changes the order more than the first.
This is one of the few tools here that asks the server rather than your browser, because a browser cannot do it. Nothing you put in is stored; the request is rate limited by address and the answer is not cached.
A page laid out as a column of named sections, with what goes in each and three lines on why that order. Words rather than boxes, because the order is the argument and boxes make the conversation about the boxes.
How to use
Describe the page: what it is for, who it is for, and where they arrive from. The last part changes the order more than the first.
Example
Page a landing page whose one job is a single conversion
Brief A scheduling app for independent hairdressers, who mostly
arrive from Instagram on a phone.
HERO — one line on what it does, the app icon, and a single button
SOCIAL PROOF — three named salons with photographs, immediately under the fold
...
WHY THIS ORDER:
- Instagram traffic arrives cold on a phone: the first screen has to answer "what is this" in five words
- Proof comes before features because the objection is trust, not capability
- Pricing sits above the FAQ so the answer to "how much" is not below three screens of reassurancePitfalls
A wireframe is an argument about order. What comes first, what has to be believed before the next thing can be read, what can wait. Draw it once you agree; drawing first makes the argument about rectangles.
Where they arrive from decides the top of the page. Cold traffic from social needs the what and the why. Traffic from a comparison article needs the difference. The same product gets a different first screen.
One page, one job. A landing page with three calls to action is three landing pages badly. The sections here assume one.
Mobile is the layout, not a variant. A single column is what most people will see, which is also why this is a column.
It cannot know your product. The sections are conventional and the reasoning is generic unless your brief is specific. A one-line brief gets a one-size layout.
This spends the site owner’s money. Each wireframe is a model call, capped daily and monthly, with the cost printed at the bottom.
Compatibility
One model call. The page type is written into the prompt, the model is asked for eight to twelve sections with at most fifteen words each, and then three lines on the ordering decisions that matter.
There is deliberately no ASCII art. A box drawn in text is a worse drawing than a sketch on paper and a worse description than a sentence, and it makes the output harder to paste into a document where the conversation will actually happen.
Cost is counted from the tokens the provider reports, against a monthly ceiling the site owner sets; the key stays on the server. Nothing is stored.