Build a Landing Page with Claude Code
An agent can produce a landing page in four minutes. The hard part is producing one you'd actually ship: real copy, a layout that survives 375 px, and a CTA that goes somewhere. That's a briefing problem more than a coding problem.
What you get
- One self-contained HTML file (or a Next.js page) that opens offline
- Sections: hero, proof, how it works, pricing or CTA, FAQ, footer
- Copy written from your brief, not placeholder text
- Responsive from 375 px to 1440 px
- No external fonts that block first paint
Before you start
Write five lines: who it's for, the one outcome, the proof you have, the price, and the single action. If you can't fill those in, the page will be beautiful and useless.
Three prompts
1. Structure first — "Before writing code, propose a section outline for a landing page selling [product] to [audience]. For each section, give the headline and the one job it does. Wait for my approval."
2. Then build — "Build the approved outline as a single HTML file. System font stack, max-width 1120 px, 8 px spacing scale, one accent colour. Every button links to #pricing."
3. Then attack it — "Now review your own page at 375 px. List every place text overflows, tap targets under 44 px, or contrast below 4.5:1. Fix them and show the diff."
Skills that do the heavy lifting
| Skill | What it's good at | Installs |
|---|---|---|
| Cadence Marketing Landing | Full marketing page with sections | 299 |
| Beacon SaaS Landing | SaaS hero + feature grid | 191 |
| Obsidian Cinema Landing | Dark, cinematic product page | 58 |
| Quartz SaaS Landing | Clean, light SaaS page | 51 |
| Airy Flight Booking Landing | Multi-step flow with search | 52 |
| Alpine Travel Agency Landing | Image-led, editorial layout | 50 |
Failure modes to check
- Fake proof. Agents invent "trusted by 10,000 teams". Delete it or replace with something true.
- Decorative motion. A fade-in on every section is not a design system.
- Dead links. Every CTA must resolve to a real route.
- Mobile afterthought. Ask for 375 px first, desktop second.
FAQ
HTML or React? HTML for a one-off campaign page; React when it needs to live inside the app.
Can it match my brand? Give it the hex codes, font names and two reference URLs. Vague words like "modern" produce generic output.
How long does it take? Four to ten minutes for a first draft, an hour to make it shippable.