Most sites people build with Claude look AI-generated for one reason: the brief was vague. This guide gives you the five-input prompting system, the exact animation and layout constraints, and the review loop that turns default output into premium. You define the brief once at the start of a session, then build section by section.
You open Claude, type "build me a website for my coaching business," and get back safe layouts, filler copy, and a design that reads as template. Then you decide the tool is not good enough.
The tool is fine. A vague brief gives Claude nothing to work with except its defaults, and defaults are generic by definition. I built a full site this way once and got the same mediocre result everyone gets. I built another with the system below, and nobody who looked at it could tell it was AI.
The difference was not a smarter model. It was a better input.
Why Does Claude Build Generic Websites?
Because it fills the gaps you leave. When you do not specify the purpose, the audience, the visual direction, the structure, or the tone, Claude picks the most average version of each. Five average choices stacked together read as template. That is the whole problem, and it is entirely on the input side.
So the fix is not a longer conversation or a cleverer trick. It is a specific brief you write before you ask for anything.
The Five-Input Brief
Before you write a single prompt, define five things. They become the standing brief you paste in at the start of every build session, so Claude is never guessing.
| Input | What it decides | Example |
|---|---|---|
| Purpose | What the site has to make happen | "Convert cold traffic to booked calls for a B2B consulting offer" |
| Audience | Who is reading and what they need to see | "Operators running $1M to $10M businesses who are skeptical of AI marketing" |
| Visual style | The aesthetic direction | "White background, violet accent #7C3AED, Inter font, no stock photos, minimal ornamentation" |
| Structure | Which sections to build and in what order | "Hero, three proof points, how it works in three steps, pricing, FAQ, CTA" |
| Tone | How the copy should read | "Direct, no filler, short declarative sentences, no AI tells" |
The examples matter as much as the labels. "A site for a consultant" is a category. "Convert cold traffic to booked calls for a B2B consulting offer" is an instruction Claude can act on. Write yours at that level of specificity for all five.
Then paste them in as one block and hold Claude to building one section at a time.
Copy the starting prompt
Copy this.
You are building a premium website. Here is the brief: Purpose: [YOUR PURPOSE] Audience: [YOUR AUDIENCE] Visual style: [YOUR STYLE] Structure: [LIST YOUR SECTIONS] Tone: [YOUR TONE] Start with the hero section only. Do not proceed to the next section until I confirm.
Your first real run: take a page you already have, or one you keep meaning to build, and fill in all five brackets before you touch Claude. Then paste the block and let it build only the hero. Look at that one section. If the hero is right, the rest of the site inherits the same brief and comes out consistent. If the hero is wrong, you caught it in thirty seconds instead of regenerating a whole page.
The mistake that makes it fail: asking for the entire site in the first message. Claude will build all of it, the first two sections will be off, and now you are editing a finished page instead of steering an empty one. Build section by section. It is slower for the first screen and far faster for everything after it.
If you want the copy inside those sections to read like a person wrote it, the same discipline applies to the words. I keep a separate pass for stripping the tells out of AI-written copy, covered in strip the AI tells from everything you write, and it pairs cleanly with the tone line in your brief.
Animations That Serve The Content
Claude can handle motion natively when you tell it what kind. The failure is asking for "animations" and nothing more, because "animations" resolves to whatever is average. Be explicit about the motion, the same way you were explicit about the brief.
Specify four things.
Entrance effects: "Fade up on scroll for all section headings. Stagger the entrance of list items by 80ms each." The stagger is what reads as intentional. Items arriving one after another feels designed. Everything arriving at once feels like a template dump.
Hover states: "Cards lift 4px on hover with a subtle shadow increase and a 200ms ease-out transition." Small numbers, said out loud. A 4px lift is felt, not noticed, which is the point.
Hero motion: "Animate the hero headline in with a 0.6s ease-out fade. Nothing that feels slow or dramatic." The hero sets the tone for the visit. Keep it quick.
Page transitions: "Use a simple opacity fade between sections. No slides, no bounces, nothing that calls attention to itself."
The rule underneath all four: good animation is invisible. If a visitor notices the animation, it is too much. You want motion that serves the content, not motion that performs for its own sake.
Your first real run: add exactly one animation to the hero you already built. The 0.6-second headline fade is the safest first move. Ship that, look at it, then add the scroll fade to your section headings. One motion at a time, same as one section at a time.
The mistake that makes it fail: when an animation does not trigger, people regenerate the whole page and lose the parts that were working. Do not. Say instead: "The hero headline fade is not working. Check the Framer Motion import and confirm all animated elements are wrapped in motion components." You are pointing at the actual failure, so Claude fixes that and leaves the rest alone.
Layout And Responsiveness Without Touching CSS
Claude handles responsive layout well when you give it explicit constraints, and poorly when you leave it to defaults. The defaults are mediocre. The constraints produce premium. You never open a CSS file.
Put these numbers in the brief.
Copy this.
Max content width 1100px, centered, with 24px horizontal padding on mobile. Spacing between sections: 80px desktop, 48px mobile. Never let sections touch. On mobile, all multi-column layouts collapse to a single column. No horizontal scroll. Typography scale: hero headline 56px, section headings 36px, body 17px. Line height 1.5 everywhere. No default browser margins on headings or paragraphs. Reset everything.
Those exact values are not sacred, but the specificity is. When Claude has a max width, a spacing rhythm, a type scale, and a mobile rule, it does not guess. The output is a clean, consistent layout on the first pass, and it holds together on a phone without a second round of fixes.
Your first real run: paste the block into your standing brief and rebuild the hero once more. Then open it on your phone. If the headline is 56px, the sections breathe at 80px, and nothing scrolls sideways on mobile, the constraints took. If something is off, you have a specific number to point at.
The mistake that makes it fail: skipping the mobile line because the desktop version looks good. Half your visitors are on a phone, and the default mobile behavior is where AI sites break first. State the collapse rule and the no-horizontal-scroll rule every time.
The Review Loop: Fix, Don't Rebuild
This is where most builds go wrong. Something looks off, so people ask Claude to "make it better" or regenerate the page. You get a different site with different problems, and you have lost the parts that worked.
Review section by section. Target the specific element that is off. Give Claude a precise instruction to fix that one thing.
| Problem | What to say |
|---|---|
| Copy reads as AI | "Rewrite the [section] copy. Shorter sentences. No hedging. Remove all filler. Treat the reader as smart." |
| Design looks template | "The layout is too default. Add more visual contrast: bigger headline, more whitespace, fewer elements competing for attention." |
| Section is too long | "Cut the [section] by 40%. Keep the strongest point, drop the support structure." |
| Mobile breaks | "The [element] breaks on mobile. Fix it so it stacks cleanly without horizontal overflow." |
| Animations feel off | "The animations are too fast, too slow, or too dramatic. Adjust to [what you want]." |
Every one of these names a target and a fix. None of them says "improve the site." That is the whole discipline: you are the reviewer, Claude is the builder, and reviewers point at specific things.
Your first real run: take the hero you have been building and run one review instruction on it. If the copy feels generic, use the first row verbatim. Read what comes back. If it is better, move to the next section. If it is not, you tell Claude exactly what is still wrong, in a sentence you could say to a junior designer.
The mistake that makes it fail: vague feedback. "Make the hero pop" gives Claude nothing, so it returns another average guess. "Bigger headline, more whitespace, cut the subheadline to one line" gives it three targets and gets you three fixes.
Honest: Where This Falls Short
A specific brief makes Claude build like a competent designer following orders. It does not make Claude a creative director. If you do not know what a good site for your business looks like, this system will faithfully produce a clean version of the wrong idea. The taste is still yours to supply. The five inputs only make sure Claude executes it instead of overriding it with defaults.
It also will not save a weak offer. A premium-looking site for a page nobody wants to read is a premium-looking page nobody reads. Fix what the site is selling before you polish how it looks.
And the numbers in this guide are starting points, not a house style. A 56px headline and an 80px section gap are sane defaults, not the only right answer. Once you have built a few sites this way, you will have your own values, and the brief is where you put them.
When not to reach for this at all: a one-page holding site or a quick internal tool does not need a five-input brief and a review loop. Type the vague prompt, take the generic result, move on. The system is for the pages that have to earn something, where the difference between template and premium is the difference between a bounce and a booked call.
If you want the specific tool stack I run alongside this, the four Claude pieces that ship an animated site are covered in the four-part Claude stack that ships animated websites. The brief in this guide is what you feed into that stack.
The One Thing To Do This Week
Pick one page. Not five. One page that actually matters, a sales page or a lead-magnet page where a generic look is costing you.
Write the five inputs for it before you open Claude. Paste the starting prompt. Build the hero, and only the hero, then judge that one section against what you wrote. If it is right, keep going one section at a time. If it is wrong, fix the brief, not the page.
You will know inside the first screen whether the system is working. If it is not for you, you spent ten minutes and a hero section finding out.