---

name: landing-page description: Build high-converting landing pages with expert copywriting and modern design. Use this skill whenever the user wants to create a landing page, marketing page, product page, signup page, waitlist page, launch page, or any page whose primary job is to persuade visitors to take an action. Also use when the user asks to improve conversion on an existing page, rewrite landing page copy, or redesign a hero section. This skill applies regardless of tech stack (HTML, React, Next.js, Vue, Svelte, Astro, etc.).

---

Landing Page Builder

Build landing pages that convert. This skill combines proven copywriting frameworks with modern design principles to produce pages that look great and actually persuade people to act.

Philosophy

The best landing pages share a secret: copy comes first, design serves the copy. A beautifully designed page with weak copy will underperform an ugly page with sharp copy every time. Front-load the strategic thinking — who is this for, what do they care about, what’s stopping them — then build a page where every visual decision reinforces the message.

Process

Step 1: Strategic Discovery

Before writing a single line of code, answer these questions (ask the user if not obvious from context):

1. What’s the product/offer? Get specific — not “a SaaS tool” but “an AI writing assistant for marketing teams.”
2. Who’s the target audience? The more specific, the sharper the copy. “Series A founders drowning in investor reporting” beats “business owners.”
3. What’s the primary action? One page, one CTA. Sign up? Book a demo? Join waitlist? Buy?
4. What’s their awareness level? This determines how much education vs. persuasion:

- Unaware: Lead with the pain. - Problem-aware: Agitate, then reveal. - Solution-aware: Differentiate. - Product-aware: Overcome objections, add urgency. - Most aware: Just show the CTA and the deal.

1. What are the top 3 objections? Price? Trust? Complexity? Switching cost? Each becomes a section.

If the user gives minimal context (e.g., “make a landing page for my app”), don’t guess — ask.

Step 2: Write the Copy First

Write all copy in a structured outline before touching code. This is where the conversion power lives.

The Hero Section (Above the Fold)

Visitors decide in ~5 seconds whether to scroll. The hero needs:

• Headline: One benefit-driven sentence. Not what the product does — what it does for them. Test against the “So what?” filter. “AI-Powered Analytics” fails. “Know exactly which customers are about to churn — before they do” passes.
• Subheadline: Adds specificity, addresses an objection, or quantifies the benefit.
• Primary CTA: Should complete “I want to _.” Strong: “Start Free Trial”, “Get My Report”, “Book a Demo”. Weak: “Submit”, “Click Here”, “Get Started”.
• Visual: Product screenshot, demo video, or illustration — reinforces the headline, doesn’t distract.
• Social proof nugget: Logo bar, “Trusted by 10,000+”, or a single powerful testimonial.

Under the CTA, add a friction-reducer: “No credit card required” / “Takes 30 seconds” / “Cancel anytime”

Headline Formulas

Adapt these to sound natural — they’re starting points, not mad-libs:

• “Get [outcome] without [pain point]”
• “Stop [painful activity]. Start [better alternative].”
• “[Outcome] in [timeframe]”
• “Why [X,000+] [audience] switched to [product]”
• “Finally, [category] that actually works.”

Great headline examples for inspiration: Slack’s “Made for people. Built for productivity.” Stripe’s “Financial infrastructure for the internet.” Linear’s “A better way to build products.” Short, clear, benefit-oriented — none explain how.

Copywriting Frameworks

Pick the framework that fits the audience’s awareness level:

PAS (Problem → Agitate → Solve) — Best for problem-aware audiences. Name the pain, twist the knife (what happens if they don’t fix it), present your product as relief.

AIDA (Attention → Interest → Desire → Action) — Best for mixed audiences. Bold claim → features that enable the benefit → proof (testimonials, numbers) → clear CTA.

Before/After/Bridge — Best for solution-aware audiences. Paint the painful present → paint the solved future → your product is the bridge.

StoryBrand — Best for narrative brands. Customer has a problem → meets a guide (you) → gets a plan → takes action → avoids failure → achieves success.

For most SaaS/product pages, PAS or AIDA works. For personal brands, StoryBrand often wins.

Testimonial Copy

Specific testimonials convert. Generic ones don’t.

Bad: “Great product! Highly recommend.” — Sarah

Good: “We switched from [competitor] 6 months ago. Our team saves 4 hours/week on [task], and [metric] improved by 23%.” — Sarah Chen, VP Engineering at Acme Corp

Formula: before state → turning point → measurable after state. When writing placeholder testimonials, make them realistic so the user understands the format to aim for.

Step 3: Structure the Page

Not every page needs every section, but this is the proven sequence:

1. Hero — Headline, subheadline, CTA, visual, social proof nugget
2. Logo bar — 4-6 customer/partner logos (or “Trusted by X teams” if none yet)
3. Problem section — Articulate the pain. 2-3 specific pain points that show you understand their world.
4. Solution section — 3-4 features, each with a benefit-first heading and one sentence. Icons help.
5. Social proof — 2-3 testimonials with names, photos, titles. Anonymous quotes are worthless.
6. How it works — 3 steps. Reduce perceived complexity.
7. Objection handling — FAQ or dedicated blocks addressing top objections head-on.
8. Final CTA — Repeat with a slightly different angle. The visitor has read your full argument — close it.
9. Footer — Links, legal, contact. Minimal.

Handling Objections in Copy

Price: Show ROI, anchor against alternatives, offer free tier/trial. Trust: Guarantee, security badges, customer count, case studies. Complexity: “Set up in X minutes”, 3-step process, “No code required.” Switching cost: One-click import, comparison table, migration assistance.

Section Transitions

Keep readers scrolling with bridge copy between sections:

• Problem → Solution: “There’s a better way.”
• Features → Proof: “Don’t just take our word for it.”
• Proof → CTA: “Ready to [get the benefit]?”

Step 4: Build the Page

Detect the Stack

Check the project for framework signals:

• package.json → react, next, vue, nuxt, svelte, astro, remix
• tailwind.config.* → use Tailwind utilities
• .vue, .svelte, *.astro → match the framework
• Nothing detected → single self-contained HTML file with inline CSS

Default to a single HTML file with modern CSS (custom properties, grid, clamp) when there’s no existing project. Most portable option.

Design Principles

Each one directly impacts conversion:

Visual hierarchy drives reading order. Eye flows: headline → subheadline → CTA → content. Use size, weight, contrast. If everything is bold, nothing is.

Whitespace signals confidence. Generous padding around CTAs and testimonials. Cramped pages feel desperate.

One column for narrative flow. Side-by-side is fine for feature grids, but the persuasion sequence is vertical.

Color serves the CTA. One accent color, used almost exclusively for the primary action button. If everything is the accent color, the CTA disappears.

Typography carries trust. Professional font pairing. Body: 16-18px minimum. System fonts or Inter/DM Sans for body, something with character for headings.

Mobile first. Hero headline readable, CTA thumb-friendly (min 48px tap target), nothing overflows.

Responsive Approach

• Fluid type: clamp(1rem, 2.5vw, 1.25rem) body, clamp(2rem, 5vw, 3.5rem) hero headline
• Grid/Flexbox only — no floats, no Bootstrap unless already present
• Feature grids: repeat(auto-fit, minmax(280px, 1fr))
• Container: max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 3rem)
• Stack everything on mobile

Animation

Minimal and purposeful only:

• Subtle fade-in on scroll (IntersectionObserver, ~6 lines of JS)
• Smooth scroll for anchors
• CTA hover state (slight scale or brightness)
• No parallax, particles, or scroll-jacking — they hurt conversion.

Step 5: Review Checklist

• Headline passes the “So what?” test
• One primary CTA, repeated consistently
• Social proof is specific (names, numbers, outcomes)
• Every section earns its place
• Fast load — no heavy frameworks, minimal JS
• Mobile: readable, tappable, no overflow
• WCAG AA contrast on CTA
• No lorem ipsum or placeholders left
• Meta tags: title, description, OG image

Common Patterns

Waitlist / Coming Soon: Hero → brief problem/solution → email capture → “Join X others” → feature preview → FAQ. Short — sell curiosity.

SaaS / Product: Full sequence: hero → logos → problem → features → testimonials → how it works → pricing → FAQ → final CTA.

Event / Launch: Date/countdown → what attendees gain → speaker credentials → past event proof → register CTA → agenda → FAQ.

Open Source / Dev Tool: Hero with code snippet → quick-start command → feature grid with examples → GitHub stars/contributors → comparison table → getting started CTA.

Freelancer / Service: Hero with outcome promise → credibility (clients, results) → services → process → testimonials → book a call CTA → FAQ.