TLDR: The first page an AI builds is almost always 80 percent finished: the structure and content are right, the polish is not. You do not fix that with a longer first prompt, you fix it with short, targeted follow-up prompts that each change one thing. Below are 12 copy-paste follow-up prompts grouped by layout, type and color, copy, and final polish, plus the one scoping rule that stops the AI from rewriting the parts you already liked. When the page is done, publish it as a live link so every interaction still works.
You wrote a decent prompt, the AI built you a page, and it is close. The layout makes sense, the content is right, and it clearly understood the assignment. But it also looks like a draft: the headings do not stand out, everything is a little cramped, the font is the default, the accent color is that same flat purple, and the copy runs long. It is 80 percent there.
Here is the thing most people get wrong. They try to fix that last 20 percent by going back and writing a bigger, smarter first prompt, then regenerating from scratch. That is the slow way, and it throws out the good draft you already have. The fast way is a handful of follow-up prompts: small, specific second-pass messages that polish the page you have instead of rolling the dice on a new one.
This is a working library of those prompts. Copy them, swap in your specifics, and paste them one at a time.
Why the first draft is always 80 percent
An AI model builds a page the way a fast, talented junior designer would build a first pass: it nails the brief and skips the finishing. That is not a flaw in your prompt. Even a great first prompt leaves judgment calls, spacing, contrast, rhythm, word count, that the model resolves with safe defaults. Safe defaults are why so many AI pages look vaguely the same.
Follow-up prompts are where you replace those defaults with decisions. And because you are editing an existing page rather than generating a new one, each change is cheap, reversible, and easy to judge.
The one rule that makes follow-up prompts work
Before the library, the rule every prompt below depends on: scope the change and protect the rest. A follow-up prompt has three parts.
- Point to the exact spot. Name the section, element, or text you mean. “The hero heading,” not “the top.”
- Describe one specific change. One decision per message. Not “improve the design.”
- Protect what works. End with a line like “keep everything else on the page exactly as it is.”
That third part is the one people skip, and it is the reason the AI “randomly” rewrites things you liked. A broad prompt reads as permission to redo the whole page. A scoped prompt reads as a surgical edit. Here is the difference on the same intent.
| Vague follow-up | Scoped follow-up | |
|---|---|---|
| The ask | “Make the header look better.” | “Increase the hero heading to about 3rem, tighten its line-height, and add more space below it.” |
| What the AI changes | The whole layout, often | Just the hero heading |
| Can you judge the result? | Hard, too much moved | Easy, one thing moved |
| Risk to prior work | High | Low |
| Ends with | Nothing | “Keep everything else on the page identical.” |
Change one thing per turn, in the same conversation so the model keeps its memory of the page. Now the library.
Layout and hierarchy
The first thing that separates a draft from a finished page is that your eye knows where to go. These three fix that.
1. Fix the visual hierarchy. When everything looks equally important, nothing does.
Right now the page has weak visual hierarchy. Make the most important
element (the headline and primary call to action) clearly dominant, and
step everything else down from there in size and weight. Establish a
clear type scale so headings, subheadings, and body text are visibly
different levels. Do not change the content or the section order. Keep
everything else identical.2. Add breathing room. Cramped spacing is the most common AI-page tell.
The layout feels cramped. Increase the whitespace: add more padding
inside sections, more space between sections, and more room around the
headings so the page can breathe. Use a consistent spacing scale rather
than arbitrary values. Do not change any colors, fonts, or content.3. Tighten the mobile layout. Desktop-first drafts often fall apart on a phone.
Check this page at a 375px wide mobile viewport and fix what breaks.
Make sure text is readable without zooming, tap targets are large
enough, nothing overflows horizontally, and multi-column sections stack
cleanly into one column. Keep the desktop layout as it is now.If mobile is a recurring problem for you, there is a deeper walkthrough on making AI pages mobile-friendly.
Type and color
This is where “generic AI page” usually lives. Two font decisions and one color decision fix most of it.
4. Upgrade the typography. The default system font is a choice you did not make.
Replace the default font with a deliberate pairing from Google Fonts:
one characterful font for headings and one clean, highly readable font
for body text. Set a comfortable body size (16 to 18px), a line-height
around 1.6, and a max line length near 65 characters for body copy.
Load the fonts with a link tag in the head. Do not change the layout or
the colors.There is a full guide to typography for AI pages if you want to go further here.
5. Replace the generic accent color. Move off the default purple-on-white that every AI reaches for.
The color scheme looks generic. Give the page one intentional accent
color and a supporting neutral palette that feel deliberate and match
the tone of the content (for example, a warm editorial feel). Apply the
accent consistently to links, buttons, and highlights, and make sure
text keeps strong contrast against its background. Do not change the
layout, the fonts, or the content.Swap in a real feel if you have one. A vocabulary for that lives in feel words to art-direct AI and a set of ready palettes in color palettes for AI pages.
6. De-genericize the whole look. A catch-all when it just reads as “AI made this.”
This page looks like default AI output. Without changing the content or
structure, make it look designed: pick one distinctive visual idea (a
strong accent, a subtle background texture, a confident heading
treatment) and carry it through the whole page consistently. Aim for
something a real designer would sign off on, not a template.For the reasons behind why AI pages drift toward sameness, see make AI pages look less generic.
Copy and content
The words are usually 90 percent right and 20 percent too long.
7. Cut the fluff. Tighten without losing meaning.
Edit the copy on this page to be tighter and more concrete. Cut filler
and hedging, shorten long sentences, and remove any generic marketing
phrases. Keep the same message, headings, and structure, just make every
line earn its place. Do not touch the layout or styling.8. Break up a wall of text. Turn a dense block into something scannable.
The [section name] is a dense block of text. Restructure it into
scannable pieces: a short intro, then bullet points or small cards for
the individual ideas, with clear subheadings. Keep all the information,
just make it easier to skim. Do not change any other section.Interactivity and polish
The finishing touches that make a page feel built, not generated.
9. Add tasteful micro-interactions. Small motion signals quality.
Add subtle, tasteful interactivity: gentle hover states on buttons and
links, a soft transition on interactive elements, and a light fade or
slide as sections come into view on scroll. Keep it understated and fast,
nothing flashy or slow. Use only CSS and vanilla JavaScript, no
libraries. Do not change the layout or content.If you want to go deeper, there is a guide to adding animation to AI pages.
10. Add the missing states. For anything interactive, cover the edges.
For every interactive part of this page, add the states it is missing:
a clear hover and active state, a focus style for keyboard users, and
sensible empty, loading, or error states where they apply. Make the
defaults feel intentional. Keep the existing layout and styling.11. Run an accessibility pass. Non-negotiable, and easy to ask for.
Do an accessibility pass on this page. Ensure text has sufficient color
contrast (aim for WCAG AA), every image has descriptive alt text,
interactive elements are keyboard reachable with visible focus states,
and the heading levels are in a logical order. Add ARIA labels only where
they genuinely help. Do not change the visual design.There is a fuller checklist in make AI pages accessible.
12. The final ship-ready pass. One last sweep before you send it.
Review the whole page as if you were shipping it to a client. Fix any
inconsistent spacing, misaligned elements, mismatched font sizes, or
awkward wrapping. Make sure the styling is consistent from top to bottom.
List the changes you made. Do not add new sections or change the
content.How to run the library without making a mess
Do not paste all 12 at once. The workflow that actually works:
- Go in order, top to bottom. Layout first, then type and color, then copy, then polish. Fixing spacing after you have tuned micro-interactions just undoes work.
- One prompt, then look. Read the result before the next prompt. If a change made things worse, say “revert that last change” and move on.
- Keep the same conversation while it is coherent, so the model remembers the page. If the thread gets long and confused, paste the current HTML into a fresh chat as the new starting point.
- Save versions you like. When a version looks good, keep it before you experiment further. The guide to iterating on AI pages covers this rhythm in depth.
Publish the finished page as a live link
Once the page is genuinely done, the last step is getting it in front of someone with every part still working. A screenshot flattens all the hover states, transitions, and interactivity you just added, and emailing an HTML file makes the recipient download it, trust it, and open it in the right browser. Neither shows the real thing.
This is where VisiblePage fits. Paste your final HTML, or drop a ZIP if the AI split the project into files, and you get a live URL in seconds, with every button, hover state, animation, and chart intact because you are sharing the real page, not a picture of it. Pages serve fast from the edge, you can make them public, private, or password-protected, and you can point a custom domain at one. Best of all, it is a single canonical link: as you keep running follow-up prompts, re-publish to the same URL and everyone who has the link sees your latest version, with no “final_v3.zip” to chase.
Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.
FAQ
Why does my AI page look 80 percent done but not shippable? The first draft gets structure and content right and leaves the details rough: weak hierarchy, cramped spacing, default fonts, a generic accent, and slightly long copy. Those are exactly what targeted follow-up prompts fix.
How do I stop the AI from rewriting the whole page? Scope every request. Name the exact element, describe one change, and end with “keep everything else identical.” Vague prompts invite a rewrite, scoped ones produce clean edits.
One prompt with all my changes, or one at a time? One at a time, so you can tell what each change did and revert cleanly if one goes wrong. Slower per turn, faster overall.
Do these work in Claude and ChatGPT? Yes. They describe design outcomes, not code, so they are model-agnostic across Claude, ChatGPT, and Gemini.
How do I share the finished page? Publish the HTML as a live link so every interaction keeps working. With VisiblePage you paste the HTML or drop a ZIP, get a URL in seconds, and re-publish updates to the same link.