TLDR: An AI prompt for a web page produces a generic result when it names a topic instead of describing an output. A prompt that builds a finished page has seven parts pulling together: the output you want, the goal and audience, the real content, the sections in order, the style and feel, the constraints, and the output format. Fill those in and the same model hands you a draft you can publish and polish instead of one you have to rescue. There is a copy-paste template below.
The most common complaint about building with AI is that the pages come back generic. A fuzzy headline, some placeholder text, a layout you have seen a hundred times. It is easy to blame the model, but most of the time the model did exactly what it was told, which was almost nothing specific. “Make me a landing page” is a topic. The AI cannot read your mind, so it fills every gap with its safest default, and safe defaults are what generic is made of.
The fix is to stop typing topics and start writing an AI prompt for a web page the way you would write a spec. A good build prompt is not longer for the sake of it. It just answers the questions the model would otherwise have to guess at. This is the anatomy of that prompt, part by part, with a template you can reuse for a deck, a report, or a full page.
Why does a vague prompt produce a generic page?
AI is very good at following a specific brief and very average at guessing what you meant. When you leave a decision out of the prompt, the model still has to make it, and it will make the most statistically ordinary choice available. Ask for “a pricing page” and you get three columns, a highlighted middle plan, and lorem-ipsum features, because that is the average of every pricing page on the internet. Nothing about it is wrong. Nothing about it is yours either.
A build prompt closes those gaps. Every part you add is a decision the model no longer has to default. That is the whole mechanism. You are not coaxing the AI into being more creative. You are removing the ambiguity that forces it to be generic.
The seven parts of a build prompt
A prompt that reliably produces a finished page answers seven questions. You do not need fancy wording for any of them. You need to actually state them.
1. The output you want
Name the thing, not the subject. “A single self-contained landing page as one HTML file” tells the model to build an artifact. “Something about my app” tells it to write an essay. This one line is the difference between a page and a wall of text, and it is the part people most often skip.
2. The goal and audience
State who the page is for and the single outcome you want from them. “For non-technical small business owners; the one thing they should do is book a free call.” The audience shapes the language and the layout, and the goal tells the model what to make prominent. Without it, everything on the page gets equal weight, which is the same as nothing being important.
3. The raw material
Paste your actual content. Real feature names, real prices, real copy, the three testimonials you already have. This is the highest-leverage part and the one people cut because it feels like work. If you make the model invent the content, you get invented content: plausible, generic, and wrong. Give it your material and it arranges what is true instead of guessing.
4. The structure
List the sections in the order you want them. “Hero, then three benefits, then how it works in three steps, then pricing, then an FAQ, then a footer with a contact link.” A structured list turns a loose page into a real document and makes the draft far easier to iterate on, because now you can point at a section by name.
5. The style and feel
Describe the look in a few plain words: the colors, the type, and the mood. “Warm and confident, cream background, one deep green accent, generous spacing, a clear size jump between headings and body.” You do not need design vocabulary. A short list of feel words to art-direct the AI does more than a paragraph of adjectives, and it is what stops the output from looking like every other template.
6. The constraints
These are the practical rules that keep the page usable and shareable: make it mobile-friendly, inline all the CSS and JavaScript, and use no external libraries or CDNs. Constraints are also where you prevent common failures. Asking for one self-contained HTML file is what makes the result something you can actually publish in one step rather than a folder of pieces that only run on the model’s machine.
7. The output format
Close by telling the model exactly what to hand back: “Return the complete HTML in a single code block, ready to copy.” This keeps the AI from splitting the answer into fragments or wrapping the code in explanation. It is a small line that saves you the cleanup every time.
A build prompt vs a vague prompt
The two approaches feel similar to type and produce completely different results. Here is what actually changes.
| Vague prompt | Build prompt | |
|---|---|---|
| What you type | “Make me a landing page for my app” | The seven parts: output, goal, content, structure, style, constraints, format |
| What the model does | Fills every gap with a safe default | Arranges the material you gave it |
| The first draft | A generic template with placeholder text | A page with your real content, close to done |
| Your next move | Rescue it, or start over | Polish it with small follow-ups |
| Time to something usable | Several rounds of rewrites | One structured prompt, then light edits |
A fill-in-the-blanks template
Paste this into Claude or ChatGPT and replace the brackets. It covers all seven parts in order, so the first draft comes back close instead of generic.
Build a single self-contained HTML page. Return the complete file in one code block, ready to copy.
Goal and audience: This page is for [who it is for, and how technical they are]. The one thing I want them to do is [the single action: sign up, book a call, buy].
Content to use (do not invent, use exactly this):
[paste your real headline ideas, features, prices, testimonials, and any copy you already have]
Structure, in this order:
1. [section, for example: hero with headline, subhead, and one button]
2. [section]
3. [section]
4. [section]
5. [footer with a contact link]
Style and feel: [a few plain words, for example: warm and confident, cream background, one deep green accent, generous spacing, a clear size jump between headings and body text].
Constraints: Mobile-friendly. Inline all CSS and JavaScript. No external libraries, fonts, or CDNs. Every button, link, and interaction should work in a single file.The same skeleton works for a pitch deck, a one-page report, or a dashboard. Swap the output line, the structure list, and the content, and keep the rest. For more ready-made examples by format, see the AI prompt library for pages worth sharing.
Before and after: the same request, two prompts
Watch what the seven parts do to the output. On the left, a topic. On the right, a spec.
The right-hand page is not the model trying harder. It is the model having enough to work with: your headline, your three benefits, your one action, and a clear order to put them in.
What do you do after the first draft?
Even a good build prompt gives you a draft, not a final. The advantage is that a structured draft is easy to refine, because you can point at a named section and change one thing at a time. Keep the follow-ups small and specific: “Make the headline shorter and more direct.” “Use the green accent only on the primary button.” “Move the FAQ above the pricing.” A tight sequence of follow-up prompts to polish the page does more than one giant rewrite, and it keeps the parts you already liked intact. If a section comes out broken, resist the urge to start over; describe what is wrong and let the AI fix it.
Publish it as a link and see it for real
There is a point where staring at HTML in a chat window stops helping. A page has to be seen at real size, on a real device, with the buttons actually clicking, before you can tell whether it works. Your prompt got you a finished draft. The last step is getting it in front of a person as a page.
That is where VisiblePage fits. Paste the HTML the AI gave you, or drop a ZIP if the project came as several files, and you get a live URL in seconds, with no build step, no hosting to configure, and no domain to wire up. Every button, chart, and animation still works, because you are sharing the real page and not a screenshot. Send the link for feedback, and when your next round of prompts improves the page, re-publish to the same URL so the link you already shared always shows the latest version. You can keep the page public, private, or password-protected while you iterate, then point a custom domain at it when it is ready.
Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.
Frequently asked questions
How do I write an AI prompt for a web page? Treat the prompt as a spec, not a topic. Name the output (a single self-contained HTML file), state the goal and audience, paste the actual content, list the sections in order, describe the style and feel, add constraints like mobile-friendly and no external libraries, and specify the output format. When you give the AI those seven parts, it stops defaulting to a generic template and builds the page you described.
Why does my AI page come back generic? Because the prompt was vague, so the model filled the gaps with its safest defaults: a fuzzy headline, placeholder text, a stock layout. AI is very good at following a specific brief and very average at guessing what you meant. The fix is almost never a better model. It is a more specific prompt that names the sections, the content, and the style instead of just the subject.
What is the difference between a vague prompt and a build prompt? A vague prompt names a topic, like make me a landing page. A build prompt names an output and everything the model needs to produce it: the goal, the audience, the real content, the sections in order, the style, the constraints, and the output format. The first gets you a starting point you have to rescue. The second gets you a draft you can publish and refine.
Should I put all the detail in one prompt or add it over several? Start with one structured prompt that covers the seven parts, so the first draft is close. Then iterate in short follow-ups that change one thing at a time. One big prompt sets the foundation; small follow-ups do the polish.
Does prompt structure matter for Claude and ChatGPT both? Yes. The seven parts are model-agnostic. Both return a much better page when you name the output, the content, the structure, and the constraints. If a model hands you loose text instead of a page, add the line asking for one complete, self-contained HTML file with all CSS and JavaScript inlined, and it will build the page.