Landing Page Design

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:

• One .html file — no separate CSS, JS, or image files
• Embedded CSS via <style> tag in <head>
• No external dependencies — no CDNs, no Google Fonts links, no external scripts
• System font stack — font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif
• Inline SVG only — for icons and simple graphics
• Max file size: 100KB — enforced, no exceptions
• No JavaScript unless absolutely required for a specific interaction (accordion, form validation)

htmlCopy code
<!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:

• Headline: Clear value proposition in <10 words
• Subheadline: Supporting detail in 1-2 sentences
• Primary CTA: Single button, high contrast, action verb
• Visual element: Inline SVG illustration or CSS-only graphic
• Trust signal: One proof point (users count, rating, badge)

htmlCopy code
<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:

2. Social Proof Section

Position immediately after hero to validate the promise.

htmlCopy code
<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.

htmlCopy code
<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.

htmlCopy code
<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.

htmlCopy code
<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.

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

Conversion Optimization (CRO) Principles

CTA Rules

• One primary CTA per page — never compete with yourself
• Above the fold — first CTA visible without scrolling
• Repeated — CTA appears 2-3 times (hero, mid-page, bottom)
• Action verb + benefit: "Start Free Trial" not "Submit"
• High contrast: CTA button must have ≥4.5:1 contrast ratio
• Size: Minimum 44x44px touch target (mobile accessibility)

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

Responsive Design

All pages must work across breakpoints:

cssCopy code
/* 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

• CTA button full-width on mobile
• Font size minimum 16px (prevents iOS zoom)
• Touch targets minimum 44x44px
• Stack columns vertically
• Reduce padding, keep content density

Accessibility Requirements

• Semantic HTML: <header>, <main>, <section>, <footer>
• All images/SVGs: alt text or aria-label
• Color contrast: ≥4.5:1 for text, ≥3:1 for large text
• Focus states: Visible outline on all interactive elements
• Skip link: Hidden "Skip to content" link
• Form labels: Every input has associated <label>
• lang attribute on <html> tag

htmlCopy code
<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

Performance Techniques

• CSS custom properties for theming (reduces duplication)
• prefers-reduced-motion media query for animations
• prefers-color-scheme for dark mode variant (optional)
• Minimal CSS — no unused selectors
• System font stack — zero font loading time

A/B Testing Variants

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

yamlCopy code
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)

cssCopy code
: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

• External font loading (Google Fonts CDN)
• JavaScript frameworks for static content
• Multiple competing CTAs
• Feature lists without benefit framing
• Stock photo placeholders (use SVG or CSS)
• Hamburger menus on landing pages (no nav needed)
• Footer with 20+ links (landing page ≠ website)
• Auto-playing video/audio
• Pop-ups or modals on load