Landing Page Design skill for Claude Code

A landing page is done when a stranger can say what the product is, who it is for, and what to do next within five seconds of the first screen; every section answers the next question a skeptical visitor would ask; and the page has a point of view that could not be swapped onto a competitor’s product by changing the logo.

Ground rules

• One page, one goal, one primary CTA label repeated (same wording) through the page. Secondary actions are visually quieter (text link or ghost button).
• Show the product. A real screenshot, short loop, or interactive demo beats any abstract illustration or 3D blob.
• Specific beats impressive: “Cuts invoice reconciliation from 3 days to 4 hours” over “Supercharge your workflow”.
• Decide an art direction before writing CSS (see step 2). Generic happens when every decision is a default.
• Copy decisions belong to landing-page-copy; this skill owns structure, hierarchy, and visual execution. Use real or realistic draft copy, never lorem ipsum, because layout depends on length.

The generic AI look, and what to do instead

Tell	Replace with
Purple/blue gradient background, glowing orbs	Solid or near-solid canvas; color comes from the product UI and one accent
Everything centered, symmetrical	Left-aligned hero text with the product visual offset or overlapping the fold; asymmetric grids (7/5, 2:1)
Emoji or generic line icons in a 3×2 feature grid	Features shown as cropped product UI, each with a one-line outcome headline; vary layout per feature
“Trusted by” row of grayscale logos nobody recognizes	Logos only if recognizable; otherwise one strong, attributed quote with name, role, photo, and a number
Uniform cards with identical shadows and 16px radius	Fewer containers; use whitespace, rules, and type to group; cards only for clickable or comparable items
Gradient text on the headline	Solid ink; emphasis via weight or one accent-colored word
Every section the same height and padding	Rhythm: dense proof band, generous feature sections, compact FAQ
Stock photos of people pointing at laptops	Product, customer artifacts, or no image
“Get Started” + “Learn More” buttons	A CTA that names the outcome: “Start free trial”, “Book a 20-min demo”, “Join the waitlist”

For the full audit list with fixes, read references/anti-generic-audit.md when reviewing an existing page or before calling a new one finished.

Workflow

- [ ] 1. Brief: audience, the one action, top 3 objections, proof available
- [ ] 2. Art direction: concept, type pairing, palette, image strategy
- [ ] 3. Wireframe sections in visitor-question order
- [ ] 4. Build the hero and get it right before anything else
- [ ] 5. Build remaining sections with varied layouts
- [ ] 6. Mobile pass, performance pass, accessibility pass
- [ ] 7. Audit against the generic-look list and the five-second test

1. Brief (write it down)

Audience: <role, company size, current tool>
Primary action: <trial | demo | waitlist | purchase>
Core promise (≤ 10 words):
Objections: 1. <switching cost> 2. <security> 3. <price>
Proof on hand: <metrics, customer quotes with names, logos, reviews, awards>

If proof is missing, say so and design for what exists; never invent testimonials, logos, or numbers.

2. Art direction

Pick a concept rooted in the product’s world (e.g. a logistics tool borrowing shipping-label typography and manifest grids; a writing app using editorial serif and paper tones). Then commit:

• Type: one display face with character + one text face (see typography-scale). Marketing ratio 1.25–1.333, body 18px, hero 48–80px desktop / 36–44px mobile.
• Color: one accent in OKLCH, tinted neutrals, contrast checked (see color-systems).
• Shape language: pick radius 0–4px (precise, editorial) or 8–12px (friendly) and keep it consistent.
• Image strategy: real UI screenshots in a consistent frame, product photography, or diagrams. One style only.

3. Section order (default)

#	Section	Visitor question	Notes
1	Hero	What is it, for whom, what do I do?	Headline, subhead, CTA, product visual
2	Proof strip	Is this real?	Recognizable logos, a metric, or rating; compact
3	Problem / before-after	Do they understand my pain?	Optional for known categories
4	Key features (3–4)	How does it solve it?	Outcome headline + visual per feature, alternating or varied layout
5	How it works	Is it hard to adopt?	3 steps max, concrete
6	Deep proof	Did it work for someone like me?	Case quote with name, role, company, metric
7	Pricing or plan teaser	What does it cost?	Hide pricing only if sales-led
8	FAQ / objections	What could go wrong?	Answers the brief’s objections directly
9	Final CTA	Ready?	Restate promise + same CTA label

Cut sections that have no real content. A short page with real proof outperforms a long page of filler.

4. Hero specifics

• Headline ≤ 10 words, subhead ≤ 25 words, one primary CTA, optional secondary text link.
• Above the fold at 1440×900 and 390×844: headline, subhead, CTA, and at least the top edge of the product visual.
• Hero text column max ~ 20–24ch for the headline, ~ 50ch for the subhead.
• Primary button: height 48–56px, horizontal padding 24–32px, label 16–18px weight 500–600.
• Microcopy under the CTA removes risk: “No credit card. Cancel anytime.”
• The product visual is the LCP element: serve AVIF/WebP, sized correctly, fetchpriority="high", never lazy-loaded.

<img src="/hero-app.avif" width="1600" height="1000" alt="Invoice matching view showing 42 matched payments"
     fetchpriority="high" decoding="async">

5. Section execution

• Section padding on a scale: 64px (compact bands), 96px (default), 128–160px (feature showcases) at desktop; roughly 60% of that on mobile, via clamp().
• Heading → body gap 16–24px; body → visual 32–48px; between features 96–128px.
• Vary layout every section: split, full-bleed screenshot, bento of 3 unequal tiles, quote on its own. Never three identical card rows in a row.
• Motion: one entrance reveal per section at most (opacity + 8–16px translate, 400–600ms, ease-out), honor prefers-reduced-motion. No scroll-jacking. See ui-motion.
• Sticky header ≤ 64px with the primary CTA once the hero CTA scrolls out of view.

6. Mobile, performance, accessibility

• Mobile hero: stack headline → subhead → CTA → visual; full-width CTA button.
• Core Web Vitals at p75: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Avoid client-only rendering for the hero; preload the hero font and image.
• Total JS for a marketing page: aim under 150 KB compressed; defer chat widgets and analytics until interaction or idle.
• Contrast ≥ 4.5:1 for all body text including text over images; visible focus states; a meaningful alt on the product shot.

Verification

• Five-second test: show the first screen to someone (or describe it neutrally) and ask what it is, who it is for, what to do. All three must be answerable.
• Squint test: blur the screenshot; the headline and primary CTA should be the two strongest shapes.
• Swap test: replace the logo with a competitor’s; if the page still works unchanged, the art direction and copy are too generic.
• Lighthouse mobile run: performance ≥ 90, accessibility 100 as a floor, then check field data once live.
• Run the anti-generic audit in the reference file and fix every hit or justify it.

Output contract

## Landing page: <product>
Goal / primary CTA: Start free trial
Art direction: <concept in one sentence>; type <X / Y>; accent oklch(...); radius 4px
Sections: Hero → Proof → Features (3) → How it works → Case study → Pricing → FAQ → CTA
Proof used: <list, all real>; missing proof: <list>
Perf: LCP element = hero image (AVIF, 180 KB, preloaded); JS 96 KB
Open questions: <copy needing review, assets needed>