The first prompt decides most of what you get. The agent can change things later, but each gap in that first prompt gets filled with a default. The default hero is a purple gradient. The default features block is three cards with icons. The default copy is "Transform the way you work". I listed the whole set in 12 signs a screen was made by AI.
Fewer gaps, fewer defaults. That is what a brief is for. Below is the one I use, piece by piece, with a template at the end you can paste into Claude Code, Lovable, v0 or whatever you build with.
Write the page before you ask for the page
A landing page is a text with a layout. If you ask for the layout first, the agent invents the text, and the text it invents is the generic kind. So the writing comes first, in a plain document, before any tool opens.
Three questions, in this order.
Who is this page for? One person. "A marketing lead at a 20-person SaaS who lost their designer last month" is a reader. "SMBs" is a spreadsheet column.
What is the one thing you want them to do? Book a call, start a trial, join a waitlist. A page with two primary actions has none.
What do they need to believe before they do it? Usually three or four things. Each one becomes a block on the page. Write those blocks as sentences, in your own words, the way you would say them to that one person across a table.
That document is the core of the brief. The rest is constraints.
The brief, part by part
1. The page in one line
Who it is for, what it offers, what the one action is. If you cannot write this line, the page is not ready to build.
2. The sections, in order, with the words
Not "a hero section" but the headline, the line under it, the button label. Not "a features section" but the three claims, each with the sentence that backs it and the picture or screenshot that goes with it. Paste the words from your document. The agent lays them out and does not write them.
3. The look, as rules
People skip this part, and this part is what stops the page looking like AI.
- Type. One typeface. The system font is fine. A size scale: for example 16 for text, 20 for section heads, 40 for the headline, 14 for captions.
- Colour. A ground, an ink, a muted ink for secondary text, a border, and one accent. Name them:
background,foreground,muted,border,accent. No gradients, no glows, no coloured shadows. - Spacing. One scale: 4, 8, 16, 24, 32, 48, 64. Nothing in between.
- Corners. One radius for controls, one for surfaces. State both. Zero is a valid number.
- Images. Real screenshots or nothing. Where a picture is still missing, a plain grey box with the word "screenshot" in it. No stock photos and no illustrations the agent draws itself.
- Buttons. One filled button per screen. The rest are outlines or text links.
- Text alignment. Left. Centre only one-line headlines.
4. The states
Each form has an error and a success state. Each button has a focus ring and a loading state. Each list has an empty state. Name them so they get built.
5. What not to do
A short list, because agents follow "never" better than "prefer". Mine: no gradient text, no blurred blobs, no three equal cards with icons, no emoji in headings, no invented testimonials, no logos of companies that are not customers, no "Get started" without saying started with what.
6. The technical frame
Mobile first, one column under 640 pixels. No animation library. No component library unless you already use one. Semantic HTML: a header, one h1, a main, sections with headings, a footer. Alt text on each image that carries meaning.
The template
Copy it, fill the brackets, delete what does not apply.
Build a landing page.
Who it is for: [one person, their role and situation]
What it offers: [one line]
The one action: [button label] which leads to [where]
Sections, in this order, with these exact words:
1. Hero
Headline: [text]
Line under it: [text]
Button: [label]
Picture: [real screenshot path, or a grey box labelled "screenshot"]
2. [Block name]
Claim: [sentence]
Proof: [sentence, number, or example]
Picture: [...]
3. [...]
4. Proof
[Real quote, real name, real link. If there is none, skip this section.]
5. Final call
[Headline, one line, the same button]
Look:
- Typeface: [system font / name]. Sizes: 16 text, 20 section heads, 40 headline, 14 captions.
- Colours as named tokens: background [value], foreground [value], muted [value], border [value], accent [value]. Use only these names. No gradients, no glows.
- Spacing scale: 4, 8, 16, 24, 32, 48, 64 only.
- Corners: controls [value], surfaces [value].
- One filled button per screen; the rest outline or text links.
- Text left-aligned. Centre only one-line headlines.
- Images: real ones from [folder], or a grey box with the word "screenshot".
States: every form has error and success; every button has focus and loading; every list has an empty state.
Never: gradient text, blurred colour blobs, three equal cards with icons, emoji in headings, invented quotes or logos, stock photos, hover effects on things that are not links.
Technical: mobile first, one column under 640px, semantic HTML, no animation library, alt text on every meaningful image.
Build the page, then list every place where you had to invent content because the brief did not provide it.
That last line matters. The agent will invent somewhere. Asking it to say where turns a hidden gap into a visible one you can fill.
Where the brief lives, by tool
Claude Code. Put the look rules and the "never" list in CLAUDE.md at the root of the project. Later prompts inherit them, so you write them once. The page brief itself goes in the chat. This site works that way: the rules sit in two files the agent reads before touching any UI, and I describe the setup in a design system your coding agent can use.
Lovable. The same rules go in the project's knowledge file. The brief goes in the first message.
v0. Paste the rules at the top of the first message and end with "keep these rules for every change in this chat". Repeat them when you start a new chat.
Whatever the tool, keep the rules in a file. A chat forgets, and a file does not.
After the first result
Do not say "make it better". The agent will add things, because to a model "better" means more.
Point at one thing per message. "The hero button and the card buttons all look primary; make the card buttons text links." "The gap between sections two and three is 27 pixels; snap it to 48." "The quote in section four is invented; remove the section."
Check the result against the twelve signs. Then ask the agent for a list of what it changed, so you see the diff instead of trusting the summary.
Two or three rounds like that and the page stops looking like AI made it, even though it did. It had a brief this time.
What does your first prompt usually say? If it is one sentence, that one sentence is where the purple gradient comes from.