landing-page-design

Conversion-optimized landing page design — single-file HTML with embedded CSS, no external dependencies. Hero sections, social proof, CTA placement, A/B variants, responsive design, accessibility, and performance (<100KB). Use when generating landing pages or conversion-focused web content.

Landing Page Design Skill

Generate production-ready, conversion-optimized landing pages as single self-contained HTML files with embedded CSS and zero external dependencies.

Output Constraint: Single-File HTML

Every landing page output MUST be:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="[SEO description]">
  <!-- Open Graph -->
  <meta property="og:title" content="[Title]">
  <meta property="og:description" content="[Description]">
  <meta property="og:type" content="website">
  <title>[Page Title]</title>
  <style>
    /* ALL CSS embedded here */
  </style>
</head>
<body>
  <!-- ALL content here -->
</body>
</html>

Page Structure

Every landing page follows this section order:

1. Hero Section (Above the Fold)

The most critical section. Must contain:

<section class="hero">
  <h1>[Value proposition — benefit, not feature]</h1>
  <p class="subheadline">[How it works in one sentence]</p>
  <a href="#cta" class="btn-primary">[Action Verb] — [Benefit]</a>
  <p class="trust">[Trust signal: "Used by 10,000+ teams" or "★★★★★ 4.9/5"]</p>
</section>

Hero patterns:

| Pattern | Best For | Structure | |---------|----------|-----------| | Centered | SaaS, apps | Headline + CTA centered, illustration below | | Split | Products with visuals | Text left, visual right (stacks on mobile) | | Gradient | Bold brands | Full-width gradient bg, white text | | Minimal | Premium/luxury | Lots of whitespace, single strong headline |

2. Social Proof Section

Position immediately after hero to validate the promise.

<section class="social-proof">
  <!-- Option A: Logo bar -->
  <p class="proof-label">Trusted by</p>
  <div class="logo-bar">[Company names or inline SVG logos]</div>

  <!-- Option B: Testimonials -->
  <div class="testimonials">
    <blockquote>
      <p>"[Specific result achieved]"</p>
      <cite>— [Name], [Title] at [Company]</cite>
    </blockquote>
  </div>

  <!-- Option C: Stats -->
  <div class="stats">
    <div class="stat"><strong>[Number]</strong><span>[Label]</span></div>
  </div>
</section>

3. Features / Benefits Section

3-4 benefits maximum. Lead with outcomes, not features.

<section class="features">
  <h2>[Section headline — outcome-focused]</h2>
  <div class="feature-grid">
    <div class="feature">
      <div class="feature-icon">[Inline SVG or CSS icon]</div>
      <h3>[Benefit headline]</h3>
      <p>[1-2 sentences explaining the benefit]</p>
    </div>
    <!-- 2-3 more features -->
  </div>
</section>

4. How It Works (Optional)

3-step process. Reduces cognitive load.

<section class="how-it-works">
  <h2>How it works</h2>
  <ol class="steps">
    <li><strong>[Step 1]</strong><p>[Brief explanation]</p></li>
    <li><strong>[Step 2]</strong><p>[Brief explanation]</p></li>
    <li><strong>[Step 3]</strong><p>[Brief explanation]</p></li>
  </ol>
</section>

5. CTA Section (Repeat)

Repeat the primary CTA with urgency or additional proof.

<section class="cta-section">
  <h2>[Restate value proposition differently]</h2>
  <p>[Urgency or additional benefit]</p>
  <a href="#" class="btn-primary">[Same CTA text as hero]</a>
  <p class="reassurance">[Risk reversal: "No credit card required" / "Cancel anytime"]</p>
</section>

6. Footer

Minimal. Don't distract from conversion.

<footer>
  <p>&copy; [Year] [Brand]. [Optional: Privacy | Terms]</p>
</footer>

Conversion Optimization (CRO) Principles

CTA Rules

Copy Hierarchy

  1. Headline: Benefit-first, <10 words
  2. Subheadline: Supporting detail, 1-2 sentences
  3. Body: Scannable, bullet points preferred
  4. CTA: Action verb, 2-5 words

Psychological Triggers

| Trigger | Implementation | |---------|---------------| | Social proof | Numbers, testimonials, logos | | Scarcity | "Limited spots" (only if true) | | Authority | Certifications, press mentions | | Risk reversal | "Money-back guarantee", "No CC required" | | Reciprocity | Free resource, calculator, tool |

Responsive Design

All pages must work across breakpoints:

/* Mobile-first approach */
/* Base: mobile (320px+) */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }

/* Tablet (768px+) */
@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 4rem 2rem; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 6rem 4rem; }
  body { max-width: 1200px; margin: 0 auto; }
}

Mobile Priorities

Accessibility Requirements

<html lang="en">
<body>
  <a href="#main" class="skip-link">Skip to content</a>
  <header role="banner">...</header>
  <main id="main" role="main">...</main>
  <footer role="contentinfo">...</footer>
</body>

Performance Budget

| Metric | Target | |--------|--------| | Total file size | <100KB | | First Contentful Paint | <1.0s | | CSS size | <15KB | | No external requests | 0 | | Inline SVG total | <20KB |

Performance Techniques

A/B Testing Variants

When generating a landing page, always produce a primary version and specify testable variants:

ab_variants:
  - element: headline
    control: "[Original headline]"
    variant: "[Alternative headline]"
    hypothesis: "[Why this might convert better]"
  - element: cta_text
    control: "[Original CTA]"
    variant: "[Alternative CTA]"
    hypothesis: "[Why this might convert better]"
  - element: hero_layout
    control: "[centered | split]"
    variant: "[opposite layout]"
    hypothesis: "[Layout impact on conversion]"

CSS Design System (Embedded)

:root {
  /* Typography */
  --font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;

  /* Spacing (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Colors — override per brand */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #1a1a2e;
  --color-text-muted: #64748b;
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-border: #e2e8f0;
  --color-success: #059669;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

/* Button base */
.btn-primary {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; }

Anti-Patterns