# Landing Pages

> Conversion-oriented page structure, CTA design, above-the-fold optimization, page types, and A/B testing for maximum conversion rates.

- **Type:** Skill
- **Install:** `agentstack add skill-flitzrrr-frontend-design-skills-landing-pages`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [flitzrrr](https://agentstack.voostack.com/s/flitzrrr)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [flitzrrr](https://github.com/flitzrrr)
- **Source:** https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/landing-pages

## Install

```sh
agentstack add skill-flitzrrr-frontend-design-skills-landing-pages
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Landing Pages

> Every landing page pursues exactly one primary conversion goal. Multiple competing goals reduce the conversion rate. One goal, one page.

## Scope

Use this skill when you:
- Create a landing page for lead generation or sales
- Design CTA buttons and conversion elements
- Optimize the above-the-fold area
- Strategically place social proof
- Plan A/B tests for landing pages
- Select the right landing page type for a given goal

## Principles

### 1. One Goal, One Page
Every landing page pursues exactly one primary conversion goal. Multiple goals reduce the rate.

### 2. The Landing Page Is Not the Homepage
Homepages inform broadly. Landing pages sell or generate leads — targeted and distraction-free.

### 3. The Visitor Is Pre-Qualified
Anyone who lands on a landing page has already seen an ad or searched for a keyword. The page must deliver on the promise made.

### 4. Trust Before Transaction
No user converts without trust. Social proof, transparency, and professional design are mandatory.

### 5. Mobile-First Is Mandatory
Over half of all visitors arrive on mobile. A page that does not work on a smartphone wastes half its potential.

### 6. Testing Beats Opinions
Whether a CTA button should be red or green is decided by A/B test data, not by a designer.

## Rules

### DO: Choose the Right Landing Page Type

| Type | Goal | Length | Distinguishing Feature |
|---|---|---|---|
| Opt-in Page | Generate leads | Short–medium | Freebie or value exchange |
| Sales Page | Sell product/service | Long | Address all objections |
| Click-Through Page | Advance to next funnel step | Short | Build interest, don't sell |
| Squeeze Page | Capture minimal data | Minimal | Only email field and CTA |
| Webinar/Event Page | Generate registrations | Medium | Date, speaker, countdown |

### DO: Deliver the Core Message Above the Fold
The visible area without scrolling must contain:
1. **Headline:** Clear benefit in one sentence. No wordplay, no riddles.
2. **Subheadline:** Elaboration or objection handling.
3. **Hero Visual:** Image or video that visualizes the benefit.
4. **CTA Button:** Visible, high-contrast, action-oriented.
5. **Trust Element:** At least one social proof element.

### DO: Design Action-Oriented CTA Buttons
- PHRASE as action with benefit: "Start your free trial," "Request a quote."
- NOT: "Submit," "Continue," "Click here."
- VISUALLY stand out from the rest (contrast color).
- On long pages, repeat the CTA after each section.
- Maximum 1 primary CTA type per page.

### DO: Follow the Conversion Structure (Long-Form)
1. **Name the problem** — Show understanding of the pain point.
2. **Present the solution** — Your offer as the answer.
3. **Specify the benefits** — Bullet points with advantages (not features).
4. **Provide social proof** — Testimonials, case studies, ratings.
5. **Address objections** — FAQ section.
6. **Create urgency** — Only when genuine (limitation, countdown).
7. **Repeat the CTA** — Final, prominent call to action.

### DO: Keep Forms Minimal
- Only absolutely necessary data. Every field lowers conversion.
- Opt-in: Ideally email only.
- Sales: Name and email for initial contact.

### DO: Remove or Minimize Navigation
- Landing pages have NO full website navigation.
- Maximum: Logo (linked to main site), legal notice/privacy policy in the footer.

### DON'T: Break the Ad's Promise
- If the ad promises "Free consultation," the page must deliver exactly that.

### DON'T: Use Unrelated Stock Photos
- Generic business stock photos do not build trust.
- Use real photos or meaningful product visualizations.

### DON'T: Offer Multiple Equivalent CTAs
- One goal per page. Period.

### DON'T: Launch Without Testing
- A landing page without an A/B test plan is hope-based marketing.
- Test at minimum: headline variants, CTA text, hero image.

## Patterns

### Problem-Agitation-Solution (PAS)
For sales and lead generation: 1. Name the problem directly, 2. Agitate (what happens if left unsolved), 3. Present your offer as the solution. See `references/conversion-patterns.md` for details.

### Social Proof Sandwich
Social proof in 3 locations: 1. Above the fold (logos, customer count), 2. After the benefits section (testimonials with photo), 3. Above the final CTA (ratings, guarantee).

### Video Landing Page
For products requiring explanation: Auto-play-disabled video (max. 90 sec.) as hero, followed by text summary and CTA below.

### Countdown Urgency
For time-limited offers: Countdown timer above the CTA. ONLY with a real deadline. Fake countdowns permanently destroy trust.

## Anti-Patterns

### Information Overload
Too much text, too many sections, too many visual elements. **Solution:** Every section must serve a function in the conversion flow.

### The Hidden CTA
CTA visually inconspicuous, too small, or only visible after extensive scrolling. **Solution:** CTA above the fold AND after every section. Contrast color, sufficient size.

### The Generic Headline
"Welcome" or "We offer solutions." No user feels addressed. **Solution:** Benefit-oriented headline: "50% more leads in 30 days."

### The Broken Mobile Funnel
Great on desktop, unusable on mobile. 50%+ of traffic cannot convert. **Solution:** Design mobile-first. CTA buttons reachable by thumb.

### A/B Test Without a Hypothesis
Testing random variants. No actionable insights. **Solution:** Every test has a hypothesis: "If we change X, we expect Y, because Z."

## Checklist

- [ ] Exactly one conversion goal defined per page
- [ ] Landing page type selected (opt-in, sales, click-through, etc.)
- [ ] Above the fold: headline, subheadline, hero visual, CTA, trust element
- [ ] CTA button action-oriented and high-contrast
- [ ] Navigation removed or reduced to logo + legal
- [ ] Form fields reduced to minimum
- [ ] Social proof in at least 3 locations
- [ ] FAQ section addressing the most common objections
- [ ] Mobile version separately reviewed and optimized
- [ ] Ad promise and landing page content are aligned
- [ ] Load time under 3 seconds
- [ ] A/B test plan with at least 1 hypothesis
- [ ] Tracking and conversion measurement configured

## Cross-References

- `customer-journey` — The landing page is a central touchpoint
- `design-process` — Landing page creation follows the same process
- `ai-design-workflow` — AI can generate headlines, CTAs, and copy variants
- `website-audit` — Existing landing pages are part of the audit scope
- `usability` — Forms and conversion optimization
- `ui-design` — Visual design of conversion elements

## Source & license

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

- **Author:** [flitzrrr](https://github.com/flitzrrr)
- **Source:** [flitzrrr/frontend-design-skills](https://github.com/flitzrrr/frontend-design-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-flitzrrr-frontend-design-skills-landing-pages
- Seller: https://agentstack.voostack.com/s/flitzrrr
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.