Most people asking for "a website mockup" get three different-looking screenshots that could belong to three different products. That's not a model problem. It's a specification problem. If you describe a page as a vibe, you'll get a vibe back — and a vibe can't be reviewed, handed to a developer, or shown to a client twice without changing.
This walks through how to prompt a landing page so the output is actually usable: consistent layout, readable placeholder text, and a visual language that survives more than one screen. You can run everything here through the AI image generator on this site while you follow along.
Start with the layout, not the mood
Before you type anything about style, decide the structure. A landing page has zones, and the model needs to know them. Write the layout in plain spatial terms in the first sentence:
"A desktop landing page viewed straight on. Top navigation bar across the full width, with a logo mark at left and four short menu items at right. Below it, a large hero image occupying the left 60 percent of the screen, and a text block on the right with a headline line, a smaller subline, and a single rectangular button."
Notice what's missing: no adjectives yet. That paragraph alone fixes the proportions, the viewer's position, and the element count. When people get inconsistent screenshots, this is almost always the paragraph they left out. The model fell back on its own idea of what a landing page looks like, and it has several.
Borrow a design language by name, then describe it anyway
Naming a style gets you close: "Swiss editorial," "brutalist," "corporate SaaS." But names drift. Ask two people what brutalist means and you'll get black-on-white type grids from one and thick neubrutalist borders from the other. Keep the name as a shortcut, then add two concrete traits that pin it down.
For a clean SaaS page, that might be: "Generous white space between sections, one accent colour used only on the primary button, rounded corners of roughly 8 pixels, and a geometric sans-serif typeface." Those four traits are checkable. "Modern and clean" is not.
Colour is where most prompts go soft. Give a palette with roles, not a list. Something like "warm off-white background, near-black text, single sage green accent for the call to action" tells the model which colour goes where. A list of five hex codes tells it nothing about hierarchy, and you'll often get the loudest one behind the headline.
Decide what the text should look like before you ask for it
Image models still struggle with long strings of real words. For mockups, that's fine — you don't need a legal footer, you need the impression of type. Ask for it explicitly: "Placeholder text rendered as short grey lines, with the headline as two larger lines of clearly readable short words."
If you must have a real headline — because you're pitching a client and the copy matters — keep it to three or four words, quote it exactly, and put it in a separate sentence so it doesn't get buried. Anything longer gets mangled, and a mangled headline kills an otherwise good mockup faster than any layout error.
Generate the set, not the image
One screenshot is a picture. Three are a design. If you're showing a page, show the scroll. Reuse the same prompt and append the second screen:
"Same page, continued below the fold: a three-column feature row with an icon, a short heading, and two lines of body text in each column."
Keeping the opening description identical across all of them is what makes the set look like one product. Change the first paragraph and the typeface, the spacing rhythm, and the accent colour will all quietly shift. Save your base prompt in a text file and edit only the final sentence for each new screen. It's dull, and it's the difference between a portfolio piece and a mood board.
Common failures and the one-line fix
Text everywhere, all unreadable. Ask for less text and specify the placeholder style. Models fill empty space with letter-shaped noise unless you tell them the space is meant to breathe.
Elements floating with no alignment. Add a grid instruction — "all content aligned to a 12-column grid with equal gutters" — or name a specific margin. Loose composition reads as a mistake, not a style.
Looks like a stock illustration, not a screen. Say "flat UI screenshot, no device frame, no perspective, no shadows on the frame itself." A lot of outputs are beautiful 3D product shots of a laptop, which is not what you asked for and not what you can use.
Every generation completely different. Your prompt is too abstract. Add element counts and positions; numbers anchor the composition in a way adjectives never will.
Where this fits in a real workflow
These images are for direction, not production. Use them to settle an argument about hierarchy, to show a client two layout directions in an afternoon, or to sanity-check whether a three-column feature row will feel crowded before anyone writes CSS. Then build the real thing in code, where the spacing is exact and the text is real.
The trick throughout is the same: describe structure first, style second, and keep the first paragraph frozen while you iterate. Once you have a base prompt that gives you a usable layout, the rest is small edits. You can start with the free AI image generation tool and keep the base prompt in a notes file — it'll save you more time than any prompt library.