How to Build a Landing Page with Cursor in 2026

To build a landing page with Cursor in 2026, start from a Next.js repo with DESIGN.md at the root, scope Composer to one section per session, and @-reference your spec and components/ui/ in every message. Cursor has full repo context — taste comes from what you attach, not from asking for a "modern landing page."

This guide is the landing-page-specific workflow. For general Cursor UI craft, see how to design beautiful UI with Cursor.

What you need before opening Cursor

Prerequisite	Why
Next.js App Router project	`create-next-app` or a starter template
Component library	shadcn/ui or HeroUI installed
DESIGN.md	Tokens, layout, anti-patterns — spec guide
Section outline	Hero, proof, features, pricing, FAQ, footer — in order
Real copy draft	Headlines and CTAs; agents invent weak copy

Optional but high leverage: a gallery template with prompt + DESIGN.md export.

Step 1: Scaffold the page structure

Create empty section components before generating UI:

app/
  page.tsx
components/
  landing/
    hero.tsx
    logos.tsx
    features.tsx
    pricing.tsx
    faq.tsx
    footer.tsx
  ui/
    ...
DESIGN.md

In Cursor Composer:

Create landing page shell in app/page.tsx importing empty section components from components/landing/.
No styling yet — structure only. Do not implement section content.

Structure first prevents one giant page.tsx agents cannot maintain.

Step 2: Load DESIGN.md and project rules

Commit DESIGN.md to repo root. Add standing rules to .cursor/rules or AGENTS.md:

Use only colors from DESIGN.md
No font families not listed in spec
One primary CTA per viewport
Mobile-first: 390px and 768px breakpoints
No purple gradients or default AI hero patterns

These persist across Composer sessions.

Step 3: Build the hero (first real section)

Message template:

@DESIGN.md @components/ui/button.tsx @components/landing/hero.tsx

Implement hero only per DESIGN.md:
- Headline: [your outcome for audience]
- Subhead: [one sentence proof, max 2 lines]
- Primary CTA: [verb + object]
- Layout: [split 55/45 | centered | etc.]
- Product visual: placeholder screenshot frame on right (desktop), below copy (mobile)

Do not edit files outside hero.tsx and page.tsx import.
No gradients. Use existing Button component.

Review in browser before continuing.

Step 4: Add social proof and features

Logo strip:

@DESIGN.md @components/landing/logos.tsx

Horizontal logo strip below hero. Grayscale logos, max height 32px, 5 slots with placeholder SVG text "[Client]".
If we have no logos yet, use "Trusted by teams like" with empty slots — do not invent company names.

Features (bento, not three cards):

@DESIGN.md @components/landing/features.tsx

Bento grid: 5 cells, varied sizes. Title max 6 words, one sentence each.
Follow DESIGN.md spacing. No icon-in-circle trio. No equal three-column row.

Step 5: Pricing and FAQ

@DESIGN.md @components/landing/pricing.tsx

Three tiers: [Starter / Pro / Team]. Middle tier emphasized.
Real feature bullets from our product. Monthly/annual toggle UI only.

@DESIGN.md @components/landing/faq.tsx

Accordion FAQ, 4 questions from [paste support doc or sales objections].
Typography-led — no decorative icons per question.

Step 6: Footer and metadata

@DESIGN.md @components/landing/footer.tsx

Footer: product links, legal (privacy, terms), social only for accounts that exist.
No newsletter unless backend is wired.

Add SEO in app/page.tsx or layout:

export const metadata = {
  title: "[Product] — [outcome]",
  description: "[Answer-first, 150 chars]",
};

Tell the agent to use your strings — do not let it invent "Welcome to the future."

Step 7: Anti-slop review pass

Run the anti-slop checklist. Common Cursor landing failures:

Issue	Fix in Cursor
Gradient hero	Inline edit: solid surface + border
Three identical cards	Regenerate features as bento
Weak headline	Paste your copy; reject agent rewrites
Wide Composer diff	Reject; restate file scope
Missing mobile layout	Screenshot at 390px, paste into chat

Landing page build order (reference)

Order	Section	Why this order
1	Shell + imports	Stable file map
2	Hero	Sets type and color rhythm
3	Logos / proof	Establishes credibility band
4	Features	Main argument
5	Pricing or CTA	Conversion
6	FAQ	Objection handling
7	Footer + metadata	Ship-ready

When to use a gallery template

Skip blank-page hero prompting when:

You are on a deadline
This is your first vibe-coded landing
Previous attempt produced slop you cannot salvage

Copy prompt + DESIGN.md from Agent's Design, @-reference in step 3, customize tokens and copy.

FAQ

How long does a Cursor landing take?

With DESIGN.md and section scoping: 2–4 hours for a credible first draft. Blank-prompt one-shots often take longer due to slop rework.

Can I use v0 for the hero and Cursor for the rest?

Yes. Export v0 components into components/landing/, then continue in Cursor with DESIGN.md as source of truth. See ship tasteful UI with v0.

One page.tsx or many components?

Many components. Agents and humans both maintain smaller files better.

Ship the landing

Building a landing page with Cursor is repeatable: spec in repo, structure before polish, one section per Composer turn, browser review between diffs.

Copy a starting brief from Agent's Design, build hero first, and stop accepting full-page rewrites. Cursor already knows your codebase — give it taste and scope.