Prompt Recipes
Whole pages, described precisely enough that the first build is the one you keep.
A landing page is not a layout with copy poured into it. It is an argument, and the order of the sections is the argument. Put pricing above proof and you ask for money before you have earned it. Put the feature grid above the problem statement and you answer a question nobody has asked yet.
Most AI-generated landing pages fail the same way. The hero describes the category instead of the outcome. The proof is a logo strip of companies the visitor has never heard of. The CTA sits below three identical cards with icons, each claiming to be powerful and intuitive.
None of that is a model failure. It is a prompt failure: the prompt asked for sections, not for a sequence where each section has a job. The template below names every section, states what it must accomplish, and caps how many items it may contain — which is what stops a model from producing nine features and four pricing tiers.
The order is the argument. Reordering these is not a layout decision, it is a change to the reasoning.
Four links maximum. Every extra link costs attention at exactly the moment attention is scarcest.
Outcome headline, mechanism subhead, one primary CTA. If the visitor cannot name what the product does after one line, nothing below it matters.
Placed before the argument so doubt is lowered before it can form. One row, greyscale, no carousel.
Written in the customer's language with no product nouns. The visitor has to recognise their own week before they will accept a fix for it.
Three steps. Steps are the cheapest form of credibility, because they prove the product has a shape.
Three features, each carrying a number. This is where AI pads, so this is where the cap belongs.
One tier marked most popular. Two tiers invite a coin flip; four invite an exit.
Answers the last objections, which are almost always integration fit and what happens on cancellation.
A verbatim repeat of the hero CTA. A different verb at the bottom reads as a different product.
A real contact email. This is the page a reviewer opens to decide whether a human stands behind the site.
6 variables. Change one and the text below rewrites itself — nothing else on this page moves.
Build a marketing landing page for a B2B SaaS product. AUDIENCE Engineering leads and platform teams at 50 to 500 person companies. They evaluate on documentation quality and how long the first successful API call takes. PRIMARY GOAL A visitor arriving from a cold search result should be able to say what the product does, who it is for, and what happens if they click, within ten seconds — without scrolling on a 1440x900 desktop viewport. STRUCTURE (exactly this order) 1. Header: wordmark left, four links maximum, one primary button right. No hamburger on desktop. 2. Hero: an outcome headline of seven words or fewer; a subhead of two sentences that names the mechanism; one primary CTA and one low-commitment secondary link. Below it, a single product screenshot inside a browser frame, at a slight perspective, using real interface text rather than lorem ipsum, with at least one visible number in the UI.. 3. Proof strip: six customer logos in a single greyscale row at 60 percent opacity, with the line Used by teams at above them. Static. No carousel, no autoplay. 4. Problem: three short paragraphs describing the current workflow in the customer's words. Zero product nouns in this section. 5. How it works: exactly three steps, each one verb and one sentence. 6. Feature grid: exactly three features, each with a specific claim and a number. 7. Pricing: three tiers (Free, Team, Business) with a monthly and annual toggle, a feature comparison limited to six rows, and the middle tier marked Most popular. 8. FAQ: exactly five questions. The last one must answer how this differs from the most obvious alternative. 9. Final CTA: repeat the hero CTA verbatim, plus one line of risk reversal (no card required, cancel anytime, export everything). 10. Footer: product, resources, legal, and a real contact email. STYLE Editorial: serif display headlines at 3.5 to 4.5rem with tight leading; body at a 62 character measure; warm off-white background; one accent colour used only on links and the primary button; 6rem section padding; 1px hairline rules between sections instead of cards. COPY RULES - Never use: revolutionary, seamless, cutting-edge, empower, unlock, game-changing, next-generation, robust. - Every feature claim needs a number, a duration, or a named integration. No claim survives without one. - Sentence case for every heading. No title case, no all caps except the wordmark. - Placeholder content must look like placeholder content (Acme, [email protected], 12,480) so it can never be mistaken for final copy. - No exclamation marks. No rhetorical questions in headings. MOTION Animate exactly one thing: the hero enters once on load, opacity 0 to 1 and translateY 24px to 0 over 600ms with cubic-bezier(.22,1,.36,1). Everything else is static. - Animate transform and opacity only. Never animate height, top, left, width or filter. CONSTRAINTS - Mobile first: the hero CTA must be fully visible at 390x844 without scrolling. - Body text at least 4.5:1 contrast against its own background. Check the CTA label too. - Reserve explicit width and height on every image, embed and video to prevent layout shift. - Semantic HTML: one h1, sections as section elements with an accessible name, buttons as buttons. - No carousels, no autoplaying video with sound, no modal before the visitor has read anything. OUTPUT One self-contained page. A single stylesheet or inline style block. No framework, no build step, no JavaScript beyond what the page genuinely needs.
| Variable | How to edit it |
|---|---|
{{AUDIENCE}} |
Change this and the copy has to change with it. A developer audience wants a code block in the hero; a finance audience wants an approval flow diagram. Do not keep the copy and swap the audience line. |
{{PROOF}} |
If you have no logos, use the metric row. An invented logo strip is the fastest way to lose a technical visitor, and it is the detail reviewers check first. |
{{PRICING}} |
Three tiers is the default because it makes one tier look chosen. If your product is genuinely single-plan, say so in the prompt and delete the tier table entirely — do not ship three tiers with two disabled. |
{{STYLE}} |
Swap the whole block, never individual words inside it. Half an editorial brief produces a page that is serif in the hero and sans in the cards. |
{{MOTION}} |
Choose one and hold it for the entire page. Mixed motion levels are the most common reason AI output feels assembled rather than designed. |
| Builder | What to do differently |
|---|---|
| v0 | Paste the whole prompt, then iterate one section per message (make the pricing table denser). Re-pasting the full prompt after each change resets the layout and loses earlier fixes. |
| Lovable | Ask for the structure first with placeholder visuals, then request each section. It tends to add a hero image on its own — the line below it in the hero prevents that. |
| Bolt | Works best if you also say the target stack (plain HTML and CSS, or React with Tailwind). Without a stack it will pick one and the page will arrive with a build step. |
| Cursor / Claude Code | Drop the prompt into a fresh repository as a file named BRIEF.md, then ask for the page in one pass. Referencing the file later keeps the constraints alive across edits. |
A modern platform for modern teams is a true sentence that says nothing. The fix is grammatical: force the headline to contain a verb and an object the visitor cares about. If the headline still works with another company's name in front of it, it is not a headline, it is a category label.
More than three options turns a decision into research. The middle tier marked Most popular is doing real work: it converts an open comparison into a default with an opt-out.
Fast, secure, scalable is one feature described three times. Each card needs a number, a duration or a named integration, because those are the only claims a reader can verify.
Start free at the top and Book a demo at the bottom describes two products and two commitments. Repeat the hero CTA verbatim; if the bottom needs a different offer, the page has two audiences and needs two pages.