One Prompt, Three Designs: Get Design Variations From AI

TLDR: The fastest way to a page you actually like is not refining the AI’s first draft. It is asking for three distinct design directions in one prompt, comparing them, and refining the strongest. Name the axes you want them to differ on (layout, mood, typography), label them A, B, and C, ask for each as its own self-contained HTML file, then pick, or merge the best parts of two. Below is the exact technique, the copy-paste prompts, and how to share the options so someone else can pick.

Here is a habit worth breaking. You ask AI to build a page, it hands you something, and you spend the next hour nudging that one thing. Bigger hero. Different blue. Move the button. Every request is a small edit to a single direction, and you never stop to ask whether a completely different layout would have been better. You did not choose that direction. You just accepted the first one the model offered, and then you got stuck improving it.

The fix is to get design variations from AI before you commit to any of them. Ask for three directions in one prompt, look at all three, and only then decide what to refine. This is closer to how a designer actually works, and it takes about the same amount of time as babysitting a single draft.

Why does the first draft trap you?

The first draft anchors you. Once there is a real page on your screen, your brain reframes the whole task as “improve this page” rather than “design this page.” You start optimizing a layout you never evaluated against alternatives. The better structure, the one you did not think to describe, never shows up, because you are busy tuning the one that did.

There is a speed problem too. Refining a single draft is a slow back-and-forth: change, look, change, look. You make a dozen small decisions in sequence, each one reacting to the last. Asking for three directions collapses that. You see a spread of options in one shot and make the big decision first, which is the one that matters most. The small decisions get much easier once the direction is settled.

Think of the model as a fast junior designer. If you say “make me a page,” you get their safest guess. If you say “show me three directions before we pick,” you get their range. The second request is almost free, and it is far more useful.

How do you ask AI for design variations?

The request has three moving parts: how many, how different, and in what format. Here is the pattern.

Say how many. Three is the sweet spot. Two rarely feels like a real choice, and five starts to blur. Three distinct options is enough to see range without drowning in it.

Say how they should differ. This is the part people skip, and it is the whole game. If you just ask for “three versions,” the model tends to hand you one page with three accent colors. You have to name the axes you want it to vary:

• Layout structure. Single column versus a grid, hero-first versus content-first, left-aligned versus centered.
• Visual mood. Minimal and calm, bold and high-contrast, warm and friendly.
• Typographic feel. A classic serif, a clean geometric sans, an editorial mix.
• Information density. Airy and spacious versus tight and packed.

Say what you want back. For a page you intend to publish, ask for each direction as its own complete, self-contained HTML file, so you can open each one on its own and compare them as real pages, not descriptions.

Here is a prompt that puts it together. Drop your own content and context into the brackets.

I'm building a [landing page for a freelance photography business].
The one thing a visitor should do is [book a shoot].
The audience is [couples planning a wedding, non-technical, browsing on their phone].

Give me THREE distinct design directions for this page.
Make them genuinely different, not color swaps. Vary:
- layout structure
- visual mood
- typography
- information density

Direction A: minimal and editorial, lots of whitespace, serif headlines.
Direction B: bold and high-contrast, large imagery, confident sans-serif.
Direction C: warm and friendly, soft colors, rounded shapes, approachable.

Build each direction as its own complete, self-contained HTML file.
All CSS and JavaScript inlined, no external dependencies, mobile-friendly.
Label them clearly as A, B, and C.

Notice that the prompt assigns a persona to each direction. You do not have to, the “vary these axes” instruction alone goes a long way, but naming a feel for each one gives the model a clear target and keeps the three from collapsing into each other. If you are not sure what words to use, our vocabulary of feel-words that art-direct AI design is a good place to borrow from.

Three ways to use AI design, compared

The difference between these workflows is not effort, it is where you make the big decision.

The third column is the only one where you actually choose a direction before investing in it. That is the whole point.

How do you pick and refine?

Once you have three real pages in front of you, resist the urge to grab the prettiest at a glance. Judge them against the job. Which direction makes a visitor do the one thing you want? Which one fits the audience? A bold, high-contrast page might look exciting and still be wrong for a calm, high-trust service.

Then do the thing designers do and steal across directions. You are not limited to one winner. If B has the layout you want but A has the better color palette and C nailed the headline, say so:

Take the layout and structure from Direction B.
Use the color palette and whitespace from Direction A.
Keep the friendly headline style from Direction C.
Build one page that combines these into a single self-contained HTML file.

Merging the strongest pieces usually beats any single variation. From there you are back to normal refinement, but now you are polishing a direction you deliberately chose, which is a much better use of the back-and-forth. If you want a deeper method for that stage, see how to iterate on AI-generated pages and our follow-up prompts to polish an AI page.

Does this work in both Claude and ChatGPT?

Yes, with one practical note. Both models handle the “give me three directions” request well. The difference is how they return the files. Claude will happily produce three separate artifacts, which is ideal, since you can open each one on its own. ChatGPT in Canvas tends to work on one document at a time, so it often helps to ask for the directions one at a time in the same conversation, “now show me Direction B as its own file,” or to ask for all three and then request each as a standalone file. Either way, the instruction that matters most is the same in both: tell it to make the directions genuinely different, and name the axes. Without that, any model defaults to three near-identical pages. For more on picking a tool, see building with Claude and ChatGPT.

One more tip: ask for self-contained HTML every time. Three directions are only useful if you can open all three as working pages, and a single file with everything inlined is the format that just opens. If a model gives you loose snippets, read how to get self-contained HTML from AI.

Put the options in front of a real person

Here is where variations get even more useful. Often you are not the only one who gets a say. A client, a founder, a teammate, someone has to weigh in on which direction to run with. Describing three options in a message is useless. Sending three HTML files is worse, because half the time they will not open, or they open without the fonts and the interactivity, and the person judges a broken version.

So publish each direction as its own live link. Once you have A, B, and C as self-contained HTML files, paste each into VisiblePage and you get a real URL for each one in seconds. Now you send three links. The other person opens all three on their phone, clicks through the actual interactive pages, buttons and animations and all, loading fast from the edge, and tells you “B, but with A’s colors.” You can keep the options private or password-protected while they are in review, and because each link is canonical, when you refine the winner you re-publish to the same URL and the link they bookmarked just shows the new version. No “final_v3.zip,” no screenshots, no guessing what the page is supposed to do.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.

Frequently asked questions

How do I get design variations from AI in one prompt?

Ask for several complete directions at once and name the axes you want them to differ on. A line like “Give me three distinct design directions for this page. Make them genuinely different in layout, mood, and typography, not just color swaps. Label them A, B, and C and build each as its own self-contained HTML file” produces three real options instead of one. Then you pick the strongest and refine that single direction.

Why is asking for variations better than refining the first draft?

The first draft anchors you. Once you have a page in front of you, every change you ask for is a small edit to that one direction, so you rarely discover the better layout you did not think to request. Generating three directions up front lets you compare real options side by side and choose before you commit, which is how designers actually work.

How do I make the variations genuinely different and not three versions of the same page?

Tell the model what to vary. Give it axes: layout structure, visual mood, typographic feel, and information density. You can even assign each one a persona, such as “A is minimal and editorial, B is bold and high-contrast, C is warm and friendly.” Without that instruction the model tends to produce three near-identical pages with different accent colors.

Can I combine the best parts of different variations?

Yes, and you should. Pick the layout you like from one, the color treatment from another, and the hero copy from a third, then tell the AI exactly that: “Take the layout from B, the color palette from A, and the headline style from C, and build one page.” Merging the strongest pieces usually beats any single variation on its own.

How do I share the variations so other people can pick?

Publish each one as its own live link. With VisiblePage you paste the HTML or drop a ZIP and get a shareable URL for each direction, so a client or teammate can open all three on any device, click through the real interactive pages, and tell you which one to run with.

The short version

Stop improving the AI’s first draft. In one prompt, ask for three distinct design directions and name what should differ between them: layout, mood, typography, and density. Give each a persona so the three do not collapse into the same page with different colors, and ask for each as its own self-contained HTML file. Then compare the real options, pick the strongest, or tell the AI to merge the best parts of two, and refine from there. When you need someone else to weigh in, publish each direction as its own live link so they open the real working pages and point at a winner. You make the big decision on purpose, after seeing your options, instead of settling for whatever showed up first.