01 · A landing page from one line

At a glance

Output	Single-file HTML landing page
Time	15 to 30 minutes
Type	Prototype
The hard part	Not the generation — whether you can say what it sells and to whom

The situation

You need a presentable page for a product, a feature, or an event. Maybe to test an idea, maybe to show a client, maybe just an internal explainer.

The prompt

Build a landing page.

Product: [one line on what it is]
Audience: [who uses it, and how they solve this problem today]
The page has to convince them: [one sentence]
Primary action: [what you want them to click]

Structure:
1. Hero — value proposition and a single primary action
2. [section two]
3. [section three]
4. [...]
5. Closing call to action

Tone: [use a reference object, e.g. "like an internal memo"]

Constraints:
- Any number without a real source becomes a labelled placeholder.
  Do not invent figures.
- No gradient backgrounds. Use solids from the design system.
- Every icon maps to a specific function. If none does, use words.
- Buttons need hover, focus, and disabled states.
- No horizontal scrolling at phone width.

Why it's written this way

"How they solve this problem today" beats "who they are". It decides the hero. If they already have a workaround, your line is "there's a better way". If they have nothing, your line is "this is now possible". Two different pages.

"The page has to convince them" gets one sentence. Write three and the page becomes three parallel blocks, and the reader remembers none of them.

The five constraints are reusable. They map to the five most common faults in generated pages. Write them once and paste them forever.

Acceptance

• [ ] Can someone who's never heard of the product understand the hero line?
• [ ] Is the primary action singular and obvious?
• [ ] Does each section advance the argument, or just list features?
• [ ] Does every number have a source, or a label?
• [ ] Do buttons have all three states?
• [ ] No horizontal scroll at phone width?
• [ ] Contrast clears WCAG AA?
• [ ] No purple gradients, generic icons, or invented user counts?

Variants

A second language

Make an English version of this page. Don't translate it.

Rewrite for English readers: shorter sentences, a more direct call to
action, and none of the throat-clearing the original opens with.

Both versions share one design system and one layout.

Two angles for A/B

Build a second version from the same content with a different hero
angle. The current one leads on saving time; the second leads on
not making mistakes.

Keep the rest of the structure identical so they compare cleanly.

Improve an existing page

Here is our current landing page HTML. Diagnose its problems, ordered
by severity, then produce a revised version based on your diagnosis.

Every finding needs concrete evidence. Don't tell me the "visual
hierarchy is unclear" without pointing at something.

Questions that come up

It's too long to scroll.

Cap it in the prompt: "the whole page fits in five screens at 1440 wide". Left open, it fills every section generously.

Three capabilities became three equal cards, but one of them is the point.

Say so: "the second capability is the differentiator. Give it more visual weight than the other two. Don't split them into equal thirds."

The copy is empty.

Usually not a generation problem — there was nothing concrete in the input. Add real detail: one specific use case, one real number, one sentence a user actually said. The copy sharpens immediately.

I need it on our own design system.

Do playbook 04 first. Once the DESIGN.md exists, every page inherits it.

Related

• Get started / Your first artifact — the same thing, step by step
• Playbook 04 · Extract a brand
• Go deeper / Anti-slop