Landing Page Builder

---
name: landing-page-builder
description: "Use when building landing pages. Structure, copy, CRO."
version: 1.0.0
author: Hermes Agent
license: MIT
platforms: [linux, macos, windows]
metadata:
  hermes:
    tags: [landing-page, conversion, design, html-css, copywriting]
    related_skills: [conversion-rate-optimization, website-architecture-planner]
---

# Landing Page Builder

## Overview
Design high-converting landing pages: goal definition, section structure, copywriting per section, layout recommendations, trust signal placement, form optimization, mobile responsiveness, and page speed optimization. Outputs complete HTML/CSS or detailed spec.

## When to Use
- "Create a high-converting landing page for [offer]"
- "Design a landing page for my product launch"
- "Optimize my current landing page"

## Landing Page Structure
### The Proven Formula (top to bottom)
1. **Hero**: Headline (main promise) + Subheadline (supporting benefit) + Primary CTA + Supporting image/video
2. **Social Proof**: Logo bar of recognizable brands, testimonial, or impressive stat
3. **Problem/Agitation**: 1-2 paragraphs naming the pain your audience feels
4. **Solution**: How your offer solves it (features as benefits)
5. **How It Works**: 3-step visual explainer (icon + short text per step)
6. **Benefits/Features**: 3-column grid or list with dual columns (feature → benefit)
7. **Testimonials**: 2-3 real quotes with photos, names, and results
8. **Guarantee/Risk Reversal**: "100% money-back" / "Free trial, no credit card"
9. **FAQ**: 5-7 common objections answered before they're asked
10. **Final CTA**: Same promise + CTA as hero, often with urgency/scarcity

## Copy by Section

### Hero Headline Formulas
- **Outcome-focused**: "Get [result] in [timeframe] without [pain point]"
- **Audience-specific**: "The [product] for [specific audience] who [desire]"
- **Big promise**: "[Number] [people/businesses] [achieved result] using [product]"
- **Question**: "Struggling with [pain]? [Solution] is here."
- **Command**: "Stop [pain]. Start [gain]."

### CTA Button Copy
| Weak | Strong |
|------|--------|
| Submit | Get My Free Guide |
| Click Here | Start My 14-Day Trial |
| Learn More | See How It Works |
| Sign Up | Create My Account → |

## Trust Signals
| Signal | Placement | Why It Works |
|--------|-----------|-------------|
| Logo bar (as seen in...) | Below hero | Familiarity transfer |
| Testimonial with photo | Mid-page | Social proof with face |
| Rating/Review count | Near CTA | Social validation |
| Money-back guarantee | Above final CTA | Risk reversal |
| Security badges | Near form/purchase button | Safety reassurance |
| Press mentions | Sidebar or footer | Third-party authority |

## Form Optimization
- **Fields**: Name + Email minimum. Each extra field drops conversion 10-15%
- **Button**: Action-oriented, first-person ("Send me the guide" not "Submit")
- **Privacy reassurance**: "We'll never share your email. Unsubscribe anytime."
- **Placement**: Above the fold + inline (not popup) for highest conversion
- **Multi-step**: Only for high-commitment offers (webinars, demos, purchases)

## Mobile Responsiveness
- Headlines: ≤30 chars on mobile (shorter line breaks kill readability)
- CTAs: Full-width, min 48px tall (thumb targets)
- Images: Stack vertically, no horizontal scroll
- Form: Single column, large input fields

## Common Pitfalls
1. **Too many CTAs** — one primary CTA per page; secondary links kill focus
2. **No social proof** — a page without testimonials or logos looks untrustworthy
3. **Burying the lead** — the hero must clearly state what you're offering
4. **Design over copy** — a functional ugly page converts better than a beautiful confusing one
5. **No mobile test** — 60%+ of traffic is mobile; test on an actual phone

## Verification Checklist
- [ ] Hero has: headline, subheadline, CTA, supporting visual
- [ ] Social proof placed near top (logos/testimonials/stats)
- [ ] Copy follows proven structure (problem→solution→benefits→FAQ→CTA)
- [ ] CTA button uses action-oriented, first-person copy
- [ ] Form has minimum required fields (name + email) + privacy line
- [ ] Mobile responsive (stack layout, thumb-friendly buttons)
- [ ] Trust signals placed: logo bar, testimonials, guarantee, security badges
- [ ] Page speed checked (image optimization, minimal scripts)