landing-page

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: landing-page
description: 'Build solo-product landing pages the way Kushal builds them — confident, sparse, no SaaS theater. Use whenever the task involves designing or writing a new landing page, redesigning an existing one, or critiquing one. Captures the lessons from autark / chrome-relay / tteg / bidsmith iterations: what to put in the hero, what NOT to put anywhere, palette + type defaults, and the section template. NOT a generic "landing page best practices" doc — this is opinionated for pre-revenue indie products that have no logos to flex and no users to quote.'
---

# Landing Page

The landing page is the hardest visual artifact for a pre-revenue product because it has to look confident without lying. Every SaaS template fights you on this — they're built to dress up a product as if it has 10K users. You don't. Don't pretend you do.

## The two failure modes

**Mode 1: SaaS theater.**
Customer logos you don't have. "Trusted by 10,000+" when there are 3. Countdown timers. "Be the first to" buttons. Pricing tiers for a product that doesn't ship. FAQ sections nobody asked for. Quote carousels with stock-photo founders. Multiple CTAs fighting for the click.

When you see this on someone's landing it shows they don't know what they're doing — they're papering over the fact that the product is unproven by stuffing the page with credibility theater.

**Mode 2: too much explanation.**
Three paragraphs in the hero. Five "key benefits" with icons. A 6-step "how it works" section. A 12-row feature comparison table. Eyebrow text + headline + sub-headline + lede + bullet list + two CTAs all in the hero. A 6-stat row.

When the design is working, you don't have to explain. The visual should land before the words. If you find yourself writing more, your hero visual is weak — fix that, not the copy.

## The shape that works

Asymmetric hero, two-column on desktop, one column on mobile.

- **Left:** wordmark logo (top), display headline (1 line, max 2), 3-bullet proof list, inline email form. That's it.
- **Right:** a literal visual demonstration of the product — what it produces, or what it replaces. Not an abstract illustration. A concrete UI mockup, a code window, a "before / after" pair, the thing the user will actually see.

Below the hero: TWO sections, max. Not three, not four.

1. **The "why this works" section** — one sentence headline, one paragraph, ONE artifact: usually a versus-table (3 rows max) contrasting "the usual way" with "your way." This is where you punch incumbents without naming them.
2. **The "how it works" section** — one sentence headline, one paragraph, 4 numbered steps. Three sentences max per step. End there.

Footer: one line. Maybe two. Personal site link, contact email if you must. No nav, no sitemap.

That's the whole page. ~600 words of copy total. Most pre-revenue landings have 3,000.

## What goes in the hero (and what doesn't)

**In:**
- Brand mark + wordmark (custom, with personality — see "Brand mark" below)
- Display headline that does wordplay or contrast — strike-through, em-dashed contrast, antithesis. Not a value-prop sentence.
- 3-bullet proof list using the smallest concrete unit you can ("10-20 min agent run", not "fast turnaround")
- Inline email form: input + button, that's it
- One micro-line under the form (no CC, who it's for, picking criteria — pick ONE)

**Out:**
- Eyebrow tags ("FOR UPWORK PROS · EARLY ACCESS") — they age the page in 2 weeks
- Sub-headlines (your headline + lede already do too much)
- Two CTAs (one primary kills the secondary every time)
- "Trusted by" / customer logos / "as seen on" rows
- Press strips, GitHub star counts, ProductHunt badges (unless they're current and impressive)

## Headline pattern

Use one of these. Pick by feel, not by formula:

1. **Strike-through wordplay** — "Send the work, not the ~~promise~~." (bidsmith)
2. **Antithesis with cross-out** — "AI cover letters don't win. **The actual work** does."
3. **Concrete > abstract** — "Lo