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 ` tag in `
• 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)

  
  
  
  
  
  
  
  [Page Title]
  
    /* ALL CSS embedded here */
  

  

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

[Value proposition — benefit, not feature] [How it works in one sentence] [Action Verb] — [Benefit] [Trust signal: "Used by 10,000+ teams" or "★★★★★ 4.9/5"]

**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.

```html

  
  Trusted by
  [Company names or inline SVG logos]

  
  
    
      "[Specific result achieved]"
      — [Name], [Title] at [Company]
    
  

  
  
    [Number][Label]
  

3. Features / Benefits Section

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

  [Section headline — outcome-focused]
  
    
      [Inline SVG or CSS icon]
      [Benefit headline]
      [1-2 sentences explaining the benefit]
    
    
  

4. How It Works (Optional)

3-step process. Reduces cognitive load.

  How it works
  
    [Step 1][Brief explanation]
    [Step 2][Brief explanation]
    [Step 3][Brief explanation]
  

5. CTA Section (Repeat)

Repeat the primary CTA with urgency or additional proof.

  [Restate value proposition differently]
  [Urgency or additional benefit]
  [Same CTA text as hero]
  [Risk reversal: "No credit card required" / "Cancel anytime"]

6. Footer

Minimal. Don't distract from conversion.

  © [Year] [Brand]. [Optional: Privacy | Terms]

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, , , , `

• 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 ``
• lang attribute on `` tag

  Skip to content
  ...
  ...
  ...

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

• 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:

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

• 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: melgarafael
• Source: melgarafael/growthOS
• License: MIT

Install and usage instructions live in the source repository linked above.