Lesson 3 of 6~2 min read

Lesson 2 — Generating the Page

Now open Claude at claude.ai (or paste your prompt into Cursor if you're using a code editor).

Lesson 2 — Generating the Page

Now open Claude at claude.ai (or paste your prompt into Cursor if you're using a code editor).

Structure your prompt like this:

Build a complete, single-file HTML landing page for [YOUR PRODUCT].

Target customer: [DESCRIBE THEM]

Color palette: [PRIMARY], [SECONDARY], [ACCENT]

Font vibe: [e.g., modern sans-serif, elegant serif]

Sections to include:

Sticky nav with logo + CTA button

Hero — bold headline, subheadline, primary CTA, secondary CTA

Social proof bar — logos or "As seen in..." strip

Features — 3-column grid with icon, title, description

How it works — numbered steps

Testimonials — 3 cards with avatar, name, quote, 5 stars

Pricing — 2 tiers (free vs paid), feature list, CTA buttons

FAQ — 5 questions with expandable answers (pure CSS, no JS needed)

Footer — links, copyright, social icons

Requirements:

Single HTML file with embedded CSS

Mobile responsive (CSS Grid + Flexbox)

No external frameworks

Smooth scroll behavior

Modern design, not corporate-bland

Hit send. Within 30 seconds you'll have 200–400 lines of clean HTML.

**What to look for in the output:** The page should have distinct sections, consistent colors, and readable text. If something looks off, don't regenerate from scratch — tell the AI exactly what to fix.

← PREVIOUSLesson 1 — The Anatomy of a Great Prompt NEXT →Lesson 3 — Previewing and Iterating