OxyPages

The Website Building Prompts That Actually Work

The Website Building Prompts That Actually Work

The website building prompts I use on every AI site: one to build it, one to change a single thing, one to catch what it invented. Copy them, add your content.

The OxyPages Team · · 8 min read

You asked an AI for a website and it gave you one. It had a stock photo of a smiling baker, three glowing reviews from people who don't exist, and a menu you've never baked in your life.

The model did what models always do: it filled every gap you left with something plausible. A prompt that describes a vibe gets you a vibe.

The website building prompts that work do the opposite. They hand over your real content, name the exact shape of file you want, and leave the model as little as possible to invent. Then a second kind of prompt handles changes, and a third makes the model own up to what it made up.

I use roughly the same six prompts every time, whichever model I'm in. Below they are in the order you'll need them, with a bakery pre-order page built in Claude as the running example. Copy them, swap in your details, keep what works.

If you want the bigger picture first, the realistic overview of building a site with AI covers what to expect from the whole process. This post is only about the words you type.

TL;DR: Write your content down before you prompt.

Six prompts cover a whole build: an interview prompt so the model asks before it invents, a build prompt that names the file shape and pastes your real content, a change prompt that touches one thing and freezes the rest, a check prompt that makes it list what it made up, a reset prompt for when the chat drifts, and a handoff prompt that gets you the complete file.

Vague words like "modern" get you the average website. Specific words like "one HTML file", "375px wide phone" and "no reviews" get you yours.

Why Do Vague Prompts Produce Generic Pages?

Because a model answers a gap with the most likely thing, and the most likely bakery website is the average of every bakery website it has ever seen. Every word you don't define becomes a decision you've handed over.

"Modern" usually means a huge hero image, rounded cards and a gradient. "Professional" means navy blue. "Make it pop" means more of whatever it already did.

Anthropic's own advice on prompting Claude has a test I like: show the prompt to a colleague who knows nothing about the task, and if they'd be confused, the model will be too. Anthropic's prompting best practices, including the colleague test

So the fix is boring. Move the decisions from the model back to you, before you type.

What people typeWhat the model hearsType this instead
"Make me a bakery website"Invent a bakery"Here is my real menu, prices and pickup times"
"Make it modern"Use the trend average"White background, system fonts, one accent colour, lots of space"
"Add some reviews"Write fake ones"No testimonials. Leave an empty section I'll fill later"
"Make it work on mobile"Maybe add one breakpoint"Readable on a 375px wide phone with no sideways scrolling"
"Add an order form"A form that posts nowhere"A form with name, email, items and pickup day. I'll connect it myself"
"Fix the header"Rewrite whatever it likes"Make the header half as tall. Change nothing else"

Look at the right-hand column. Nothing in it is clever. It's just specific.

Before Your Website Building Prompts: Write The Content Down

Open a plain document and write the page in words before you open the chat. Ten minutes here saves an hour of correcting a model that guessed.

For a bakery pre-order page, it might look like this:

  • Name and one line: Fenwick Lane Bakery. Sourdough and pastries, baked Friday night, collected Saturday morning.
  • What to pre-order: country sourdough, seeded rye, a box of four cinnamon buns, a whole fruit tart. A price next to each.
  • The rules: orders close Thursday at 6pm, pickup Saturday 8am to 12pm, pay at the counter.
  • The one action: fill in the pre-order form.
  • What I don't have yet: photos, reviews, an allergen sheet.

That last line matters more than it looks. Telling the model what you don't have is how you stop it from inventing it.

The Six Prompts, From First Draft To Final File

The Six Prompts, From First Draft To Final File - OxyPages

Six prompts cover a whole build: interview, build, change, check, reset and handoff. They run in that order, and while you won't need all six on every page, you'll send the change prompt dozens of times.

1. The Interview Prompt

Ask the model to question you before it writes anything. It finds the gaps in your content document while they're still cheap to fill.

I want a one-page website. Before you write any code, ask me
up to 8 questions about anything you'd otherwise have to guess:
content, prices, contact details, what visitors should do.
Wait for my answers.

For a bakery, expect questions like whether orders have a cut-off time, whether people pay online, and what happens when an item sells out. Those are exactly the gaps a model would otherwise fill with a guess.

2. The Build Prompt

This is the big one. The overview linked above covers the file-shape checklist line by line, so this version spends its words on the part people skip: keeping the model to your content. It's the AI website prompt template I paste every time:

Build a one-page website as a single HTML file I can save and
open in a browser, with no frameworks and no build step.

Below is my content document. Treat it as the only source of
truth: use my wording, prices and times exactly, and do not
add facts, reviews, statistics or features that are not in it.
Where I've said I don't have something yet, leave a clearly
marked empty space instead of filling it.

[paste your content document]

The most important thing on the page is: [your one action].
Make it obvious on the first screen of a phone.

"Treat it as the only source of truth" is the line that matters. Without it, models tidy your prices, round your times and improve your wording.

3. The Change Prompt

One change per message, and an explicit instruction to freeze everything else.

Change only this: [one specific change].
Keep every other part of the page exactly as it is, including
the text, the colours and the layout. Return the complete file.

Send three changes at once and you can't tell which one broke the page.

4. The Check Prompt

Once the page looks right, make the model audit its own work.

Compare the page to the content I gave you. List every fact,
number, name, review, link or feature on the page that was
not in my content. Don't fix anything yet, just list them.

This is the most useful prompt of the six, and almost nobody sends it. In my experience, a model catches its own inventions when you ask directly, even though it didn't avoid them in the first place.

5. The Reset Prompt

After a long run of changes, a chat starts to drift. Old instructions fade, and fixed bugs come back. Start a new chat and paste your last good file in.

Here is my current website file. It works and I like it.
I'm going to ask for small changes. Never change anything
I haven't asked about. Confirm you understand, then wait.

6. The Handoff Prompt

Before you leave, get the final version as one complete file you can save.

Give me the final complete file in one code block, from the
doctype to the closing html tag, with no placeholders, no
"rest of the code here" comments and nothing left out.

Then scroll to the end of what you copied. If there's no closing html tag, you didn't get it all.

How The Bakery Pre-Order Page Comes Together

Run the six prompts on the bakery page and it comes together in about ten messages. Budget under an hour, including the time it takes to write the content document.

Here's how the set plays out:

  1. Interview. The questions surface the rules that belong on the page: orders close Thursday at 6pm, payment happens at the counter, and sold-out items get a phone call.
  2. Build. Claude returns the page in an artifact, the panel that opens beside the conversation. Expect something clean and close: a menu with prices, a pickup box and a form.
  3. Check. This is where the inventions surface. On a page like this, expect lines such as "free delivery within 3 miles" or "all our bread is organic". Both read naturally, and neither came from you.
  4. Changes. One change prompt per fix: remove the delivery line, remove "organic", make the order deadline bold, move the form above the pickup details.
  5. Handoff. Copy the whole file out and save it as index.html. getting a page out of Claude and onto the web covers the copy and save step in detail.

One thing no prompt fixes: the form. It will look finished, but on a static page a form has nowhere to send anything until something catches the submission. how forms work on a static site explains the options. Some hosts catch it for you. OxyPages does that with one attribute on the form tag, and so do Netlify and several form services.

And one thing no prompt should try. If your pre-order needs to take card payments on the page itself, a static page can't do it. Link to a payment page from your card provider, or use a shop platform. Prompting harder won't get you a checkout.

Which Prompts Waste Your Time?

Which Prompts Waste Your Time? - OxyPages

The ones that hand the model a judgment call it can't make. These five cost me the most time before I stopped sending them.

  • "Make it better." Better in what way? You'll get a different page, and lose the one you had.
  • "Fix everything." It will change things that weren't broken, and you won't know which.
  • "Add some photos of our bread." A chat model can't photograph your bread. You'll get broken links or someone else's pictures.
  • "Make it look like [famous brand]'s site." You'll get a rough copy of their layout and none of your own personality.
  • The fourth attempt at the same bug. If three tries haven't fixed it, the chat has drifted and won't recover. Start a fresh one with the reset prompt.

The pattern in all five is the same. If you can't say what done looks like, the model can't either.

What To Do Next

Write your content document today, before you open a chat window. Then send these website building prompts in order, and save a copy of the file every time a change works.

When the page is right, it needs somewhere to live. A single HTML file goes onto any static host as it is: Netlify, Cloudflare Pages and GitHub Pages all do it well if you're comfortable with their setup. If you'd rather skip the setup, drop the file in and get a live link takes about a minute. If what you've built needs logins, a database or payments on the page, a static host, ours included, is the wrong tool, and you want an app platform instead.

FAQ

What Is The Best Prompt To Build A Website With AI?

The best prompt names the file shape, pastes your real content and lists what to leave out. "One complete HTML file, use this content exactly, no invented reviews, readable on a 375px phone" beats any amount of adjectives. Send an interview prompt first so the model asks about gaps instead of guessing.

Do The Same Prompts Work In ChatGPT, Claude And Gemini?

Yes. A Claude prompt to build a website works the same in ChatGPT or Gemini, because for a single page the differences between models are smaller than the difference between a vague prompt and a specific one. What changes is where the code shows up: Claude opens an artifact panel, Gemini uses Canvas, and ChatGPT returns a code block in the chat. The wording of your prompts can stay the same.

How Long Should A Website Prompt Be?

As long as your content needs. A build prompt with a real menu, prices and opening hours runs to 200 or 300 words, and that's fine. Change prompts should be short, one change and one sentence telling the model to leave everything else alone.

Why Does The AI Keep Changing Things I Didn't Ask For?

Because "make the header smaller" doesn't tell it to leave the rest alone, so it tidies as it goes. Add "change nothing else" to every change prompt and ask for the complete file back. If it keeps drifting after that, start a new chat and paste in your last good version.

Try It Now

Still Here? Drop It In.

The whole pitch fits in one sentence: your HTML, on a link, in seconds.

Drag and drop your HTML file(s), folders, or ZIP file

or ·

No account needed. Your unclaimed website stays live for 30 minutes on a free subdomain. Claim it to your account to keep it permanently.

  • No Account Needed
  • Free SSL
  • 30-Minute Unclaimed Link, Claim To Keep It