Landing Page Examples Decoded: What Each One Gets Right, and the Claude Prompt That Rebuilds It

Search "landing page examples" and you'll get the same thing every time: a gallery of screenshots, a sentence or two about whitespace, and no explanation of why any of it matters for the click you just paid for. But you already know from <Your Ads Change Weekly. Your AI Website Builder Should Too.> that a landing page lives or dies on one thing — whether the person who landed can see, in about two seconds, that they're in the right place.

So instead of a gallery, we're going to decode five classic landing page layouts through that lens: what each one gets right about message match, what it gets wrong, and — because this is a blog about building websites with AI — the exact Claude prompt that rebuilds the pattern on your own domain.

Why decode examples at all?

Because a screenshot tells you what a page looks like. It doesn't tell you what job the layout is doing. Once you can name the job — "this layout exists to echo the ad's promise in the first 600 pixels" — you stop copying designs and start choosing them. And once you can name the job, you can hand it to Claude as an instruction.

Every prompt below assumes you've already done the setup from <Your Launching Page, Live Today: From Blank Domain to First Visitor With Claude>: a domain pointed at easy hosting, Claude writing and deploying the page. If you're starting from scratch there, read that first.

Example 1: The Single-Promise Hero

What it is: One headline, one subhead, one button, one product screenshot. Think of the classic SaaS hero — Stripe popularized this pattern, and half the internet copied it.

What it gets right: Total message match. There is nowhere to hide. If the ad says "send invoices from your phone," the headline says exactly that, and the visitor's first question — am I in the right place? — is answered before they scroll.

What it gets wrong: Nothing, if the ad promise is simple. It breaks when your product does three things and you tried to cram all three into one headline. Then it's mud.

When to use it: Cold traffic from a single ad with a single promise. Which, per <Feed Your Search Terms Report to Claude: Landing Pages That Match the Ad Before You Write a Word>, is most of your campaigns.

The Claude prompt:

Build a single-page landing site. Layout: one hero section only above
the fold — headline, one-sentence subhead, primary CTA button, and a
product mockup image placeholder. The headline must restate this ad
promise in different words: "[PASTE YOUR AD COPY HERE]". Below the
fold: three proof blocks (testimonial, one stat, one objection
handled), then a repeated CTA. No navigation menu. No secondary
offers. Static HTML + CSS, mobile-first, total page weight under
200KB.

Example 2: The Before/After Split

What it is: Two columns — "life with the problem" on the left, "life with your product" on the right. Weight-loss, productivity, and finance offers love this.

What it gets right: It makes the pain explicit, which matters when your ad caught attention with a problem rather than a solution. If the ad headline was "still doing payroll by hand?", the left column is payroll by hand, magnified.

What it gets wrong: It invites vague copy. "Tired of chaos? Meet clarity." That's not message match, that's mood boarding. The left column must use the searcher's actual words — which is why your search terms report is the raw material, not your imagination.

When to use it: Ads written around a pain point or a search query phrased as a problem.

The Claude prompt:

Build a landing page with a two-column comparison as the hero: left
column titled "Before [PRODUCT]" listing the pains below, right
column "After [PRODUCT]" listing the outcomes. Use the exact phrasing
from these search terms for the pain list: "[PASTE SEARCH TERMS]".
Keep the pains concrete and specific — no abstractions like "chaos"
or "stress." CTA sits under the right column. Then a short FAQ and a
final CTA. Static HTML, no frameworks.

Example 3: The Longform Sales Page

What it is: The classic direct-response scroll — headline, problem agitation, mechanism, proof stack, offer, guarantee, FAQ, close. Ten sections if it's one.

What it gets right: Depth of persuasion. For a high-consideration offer, one hero can't carry the whole argument. The longform layout walks the visitor through every objection in sequence.

What it gets wrong: It's the layout most often built without message match. Someone copies a template, keeps the template's hype rhythm, and pastes in their own offer — and the page reads like it was written for someone else's product, because it was. Longform only works when every section traces back to the ad's promise.

When to use it: Higher-priced offers, webinar funnels, anything with a real objection to overcome.

The Claude prompt:

Write and build a longform landing page with these sections in order:
(1) headline that restates this promise: "[AD COPY]", (2) problem
section written for someone searching "[SEARCH TERM]", (3) mechanism
— how the product works in 3 steps, (4) two testimonials with
placeholders, (5) the offer with price, (6) a guarantee block,
(7) FAQ answering the top 5 objections: "[LIST OBJECTIONS]", (8)
final CTA. Conversational tone, short paragraphs, no hype adjectives.
Each section headline must connect back to the original promise.

Example 4: The App-Style Minimal Page

What it is: Almost nothing. A wordmark, a one-line value prop, an app store button or email capture. Cash App-style bluntness.

What it gets right: Speed and confidence. There's no page to evaluate — the brand is the message match. For brand-term search ads, this is often the correct answer: the searcher typed your name, they don't need convincing, they need a door.

What it gets wrong: It's catastrophically wrong for cold traffic. A visitor who has never heard of you sees a page with no argument and bounces. Minimalism is a trust subsidy — you can only spend it if trust already exists.

When to use it: Brand campaigns, app-install ads where the store listing carries the persuasion.

The Claude prompt:

Build an ultra-minimal landing page: centered logo, one-line value
proposition using this exact ad phrase: "[AD COPY]", single CTA
button. Nothing else above the fold — no nav, no footer links, no
social icons. Under the fold, only a one-paragraph legal/summary
block. Optimize for fastest possible load: inline CSS, system fonts,
no images except the logo.

Example 5: The Social-Proof-First Page

What it is: Logos and testimonials at the top — "trusted by" — before the product explanation even starts.

What it gets right: It answers the unspoken cold-traffic question, which isn't "what is this?" but "who else has done this?" For B2B offers especially, the trust question often precedes the product question.

What it gets wrong: Anonymous testimonials ("— Sarah M.") do almost nothing. And a logo wall of companies that don't obviously relate to your searcher is decoration, not proof. The proof has to look like the visitor.

When to use it: Cold traffic where your credibility is your strongest card — known clients, named customers, real volume.

The Claude prompt:

Build a landing page where the section immediately under the hero is
a proof strip: [NUMBER] named testimonials with role and company
placeholders, plus a stats row using only these real numbers from me:
"[PASTE YOUR REAL NUMBERS — do not invent any]". Hero headline
restates this ad promise: "[AD COPY]". After proof: a three-step "how
it works," then CTA. Mark every placeholder clearly as TODO so I fill
in real names before launch.

The pattern underneath all five

Notice what every prompt has in common: the ad copy goes in first, before the layout instructions. That's the whole trick. A template gives you layout and lets copy fall where it may; a prompt lets you make message match the input and layout the output. This is the same principle behind <Stop Reviewing AI Design. Encode Your Brand Rules Once and Never Review Again.> — the more you specify up front, the less you're reviewing after the fact.

And it's why building landing pages with AI beats scrolling example galleries for inspiration. A screenshot is a picture of someone else's message match. A prompt is your message match, rebuilt, on a domain you own, live the same afternoon — the workflow we walked through in <Yes, You Can Host Your Business Site on a $10 Domain With Claude or ChatGPT — Here's the Full Walkthrough>.

One caution before you run these: the layout is the easy half. The QA half — promise match, load weight, mobile fold, broken form paths — is what separates a page that ships from a page that converts, and Claude can run that pass for you too, as covered in <The Launch Checklist Claude Runs on Your Landing Page Before You Spend a Dollar>. Run the checklist, then spend the dollar.

Pick the one example that matches the campaign you're running right now, paste your ad copy into its prompt, and see how fast a decoded example becomes a live page.