Landing Page Builder

SKILL.md

---
name: Landing Page Builder
description: Design high-converting ecommerce landing page structures with headline copy, hero sections, and CTA placement.
---

# Landing Page Builder

Design purpose-built ecommerce landing page structures complete with persuasive headline copy, hero section layouts, benefit-driven body sections, social proof placement, and strategically positioned calls to action that guide visitors toward purchase.

## Quick Reference

| Decision | Strong | Acceptable | Weak |
|---|---|---|---|
| Headline copy | Specific benefit + audience + urgency; A/B variant provided; under 12 words | Clear value proposition; single variant; reasonable length | Generic or clever-but-vague; no testing variant; too long |
| Hero section | Product image/video guidance, subheadline, primary CTA, trust badge row | Product image with CTA button | Text-only or stock photo placeholder |
| Benefit blocks | 3-5 blocks with icons, outcome-focused copy, supporting detail | Benefits listed with descriptions | Feature dump without customer framing |
| Social proof | Reviews, UGC, media logos, before/after — placed at decision points | Customer reviews section exists | Testimonials buried at bottom or absent |
| CTA strategy | Primary + secondary CTAs with micro-copy; sticky mobile CTA; urgency elements | Clear buy button with supporting text | Single generic "Buy Now" with no context |
| Mobile layout | Mobile-first section ordering, thumb-zone CTA, compressed hero | Responsive considerations mentioned | Desktop-only thinking |
| Page flow | Psychological sequence: attention → interest → desire → action with scroll depth logic | Logical section ordering | Random section arrangement |
| Traffic matching | Copy and layout adapted to traffic source intent level | Some mention of traffic source | Same page for all traffic sources |

## Solves

1. **Low conversion rates from paid traffic** — Sending ad clicks to generic product pages or homepages wastes ad spend; dedicated landing pages with message-matched headlines convert 2-5x better than product pages for cold traffic
2. **Headline writer's block** — Most sellers struggle to write headlines that are specific, benefit-driven, and appropriately urgent without being clickbait; structured headline frameworks eliminate guesswork
3. **Poor mobile conversion** — Over 70% of ecommerce traffic is mobile, but most landing pages are designed desktop-first; mobile-optimized section ordering and thumb-zone CTAs recover lost mobile sales
4. **Weak social proof placement** — Reviews and trust signals buried at page bottom don't influence the purchase decision; strategic placement at friction points (price reveal, CTA proximity) multiplies their impact
5. **No testing framework** — Sellers launch one page and hope for the best; structured A/B testing priorities based on highest-impact elements accelerate optimization
6. **Mismatched traffic intent** — A visitor from a Google search "best vitamin C serum for dark spots" needs different messaging than someone who clicked a Facebook ad featuring a lifestyle image; intent-matched copy dramatically lifts conversion
7. **Section ordering guesswork** — Without understanding scroll depth psychology and the attention-interest-desire-action sequence, sections end up in random order that leaks visitors at every scroll

## Workflow

### Step 1: Gather Product and Campaign Context
Collect the product details (name, price, key features, differentiators), target audience demographics and psychographics, traffic source, campaign objective, and any brand voice guidelines. Identify the single most compelling benefit that connects the product to the audience's primary pain point.

**Key inputs:** Product name, description, price point, target audience, traffic source, campaign objective, brand tone

### Step 2: Craft Headline and Subheadline
Using the headline framework reference, create a primary headline (under 12 words) that communicates the core benefit, a subheadline (under 25 words) that adds specificity and addresses the primary objection, and one A/B test variant. Match the urgency and specificity to the traffic source intent level.

**Key outputs:** Primary headline, subheadline, A/B variant, rationale for each

### Step 3: Design Hero Section
Structure the above-the-fold experience: headline placement, subheadline, hero image or video guidance (what to show, angles, context), primary CTA button with micro-copy, and a trust badge row. Specify mobile vs desktop layout differences.

**Key outputs:** Hero section wireframe with copy, image direction, CTA, trust elements

### Step 4: Build Benefit Blocks
Create 3-5 benefit blocks that translate product features into customer outcomes. Each block includes an icon suggestion, a benefit headline (outcome-focused), supporting detail (2-3 sentences), and optional proof point. Order by importance to the target audience.

**Key outputs:** Ordered benefit blocks with copy and icon suggestions

### Step 5: Place Social Proof Sections
Design social proof placement for maximum impact: customer review highlights near the CTA, UGC or before/after images in the mid-page, media mentions or certification logos, and a detailed reviews section. Specify review selection criteria (which reviews to feature and why).

**Key outputs:** Social proof sections with placement rationale and selection criteria

### Step 6: Structure Page Flow and CTAs
Assemble all sections into a complete page flow following the AIDA psychological sequence. Place primary and secondary CTAs at decision points. Add urgency or scarcity elements where appropriate. Specify sticky mobile CTA behavior.

**Key outputs:** Complete section-by-section page blueprint with CTA strategy

### Step 7: Create Testing Roadmap
Prioritize A/B testing opportunities by expected impact: headline variants, hero image variations, CTA copy and color, social proof placement, and price presentation. Provide specific test hypotheses and success metrics.

**Key outputs:** Prioritized testing roadmap with hypotheses and KPIs

## Example 1: DTC Vitamin C Serum Launch (Facebook Ads → Direct Purchase)

**Input:**
- Product: HydraGlow Vitamin C Serum, 30ml, $29.99
- Audience: Women 25-40, concerned about dull skin and dark spots, active on Instagram
- Traffic: Facebook/Instagram Ads (cold traffic, awareness stage)
- Objective: Direct purchase
- Brand tone: Clean, clinical but approachable

**Hero Section:**

| Element | Content |
|---|---|
| Headline | "Visibly Brighter Skin in 14 Days — Or Your Money Back" |
| Subheadline | "Our 20% Vitamin C formula fades dark spots and evens skin tone without irritation. Join 12,000+ women who made the switch." |
| A/B Headline | "The Dark Spot Serum Dermatologists Actually Recommend" |
| Hero Image Direction | Close-up of woman applying serum, natural lighting, visible skin texture (not overly retouched). Show the product bottle in bottom-right corner. |
| Primary CTA | "Try It Risk-Free — $29.99" with micro-copy: "Free shipping · 60-day guarantee · Cancel anytime" |
| Trust Row | "As seen in" logos (Allure, Byrdie, Refinery29) + "12,847 5-star reviews" + "Dermatologist tested" badge |

**Complete Page Flow:**

| Section | Purpose | Scroll Depth |
|---|---|---|
| 1. Hero | Capture attention, communicate core promise | 0-15% |
| 2. Problem Agitation | "Tired of serums that promise results but..." — identify with frustration | 15-25% |
| 3. Solution Introduction | Product as the answer, 3 key differentiators | 25-35% |
| 4. Before/After Gallery | Visual proof with real customer photos (with permission) | 35-45% |
| 5. Benefit Blocks (3) | Fades dark spots · Evens skin tone · Hydrates without greasiness | 45-55% |
| 6. How It Works | 3-step routine (cleanse, apply, moisturize) with timeline | 55-65% |
| 7. Ingredient Spotlight | Key ingredients with clinical backing, "free from" list | 65-72% |
| 8. Review Highlights | 3 featured reviews addressing top objections | 72-80% |
| 9. FAQ Accordion | Skin type, routine, results timeline, guarantee details | 80-88% |
| 10. Final CTA Block | Urgency offer + guarantee reminder + CTA | 88-100% |

**Mobile Adaptations:**
- Hero image crops to product-only on mobile (face image too small on phone)
- Sticky bottom CTA bar appears after scrolling past hero section
- Benefit blocks stack vertically with larger icons
- Before/after gallery becomes horizontal swipe carousel
- FAQ accordion starts collapsed (desktop shows first 3 open)

## Example 2: Seasonal Promotion Page (Email + Google Ads → Limited-Time Offer)

**Input:**
- Product: Premium Bamboo Sheet Set, Queen, $89 (marked down from $149)
- Audience: Homeowners 30-55, interested in home upgrades and better sleep
- Traffic: Email list (warm) + Google Search "best bamboo sheets" (high intent)
- Objective: Direct purchase during Summer Sleep Sale
- Brand tone: Warm, premium, trustworthy

**Hero Section:**

| Element | Content |
|---|---|
| Headline | "Sleep 3°F Cooler Tonight — Summer Sale: 40% Off" |
| Subheadline | "Thermoregulating bamboo sheets loved by 8,000+ hot sleepers. Queen set just $89 (reg. $149). Sale ends Sunday." |
| A/B Headline | "The Sheet Set That Ended My Night Sweats — Now 40% Off" |
| Hero Image Direction | Lifestyle bedroom shot: made bed with sheets visible, morning light, person stretching/waking. Overlay countdown timer in top-right. |
| Primary CTA | "Claim Your Set — $89" with countdown timer and micro-copy: "Free shipping · 100-night trial · 47 sets left at this price" |
| Trust Row | "4.8/5 from 8,247 reviews" + "100-night trial" + "OEKO-TEX certified" + "Free returns" |

**Traffic-Specific Adaptations:**

| Element | Email Traffic (Warm) | Google Search (High Intent) |
|---|---|---|
| Headline emphasis | Sale/discount + familiar brand | Product benefit + credibility |
| Hero image | Lifestyle (brand reinforcement) | Product close-up (what they're buying) |
| Social proof priority | "Join X customers" (community) | Star rating + review count (validation) |
| CTA copy | "Claim Your Set" (exclusive feel) | "Shop the #1 Rated Bamboo Sheets" (authority) |
| Urgency type | Countdown timer (sale ending) | Stock scarcity ("47 sets left") |
| Page length | Shorter (they know the brand) | Longer (need more convincing) |

## Common Mistakes

1. **Writing clever headlines instead of clear ones** — "Sleep Like Royalty" tells the visitor nothing specific. "Sleep 3°F Cooler Tonight" communicates a tangible outcome. Clarity converts; cleverness confuses.

2. **Burying the price** — Visitors who scroll looking for the price and can't find it leave. Show the price near the first CTA, ideally with anchoring (original price crossed out, savings amount highlighted).

3. **Using one page for all traffic sources** — A Google searcher for "best bamboo sheets" has high purchase intent and needs validation. A Facebook ad clicker has low intent and needs education. Same product, radically different landing pages.

4. **Ignoring mobile scroll behavior** — Desktop visitors might read 70% of a page; mobile visitors often read only 40%. Front-load the most persuasive elements and use a sticky mobile CTA to catch early deciders.

5. **Feature-focused benefit blocks** — "Contains 20% L-Ascorbic Acid" is a feature. "Visibly fades dark spots in 14 days" is a benefit. Customers buy outcomes, not ingredients.

6. **Generic social proof** — "Great product! 5 stars" tells visitors nothing. Feature reviews that address specific objections: "I was skeptical about the price, but after 2 weeks my dark spots actually faded."

7. **No above-the-fold CTA** — Some visitors are ready to buy immediately (especially from retargeting or email traffic). Not having a CTA visible without scrolling loses these high-intent visitors.

8. **Skipping the FAQ section** — FAQs address objections that prevent purchase without requiring the visitor to contact support. Common ecommerce FAQ topics: shipping, returns, materials, sizing, and when to expect results.

9. **Identical desktop and mobile layouts** — Mobile isn't just smaller desktop. Rethink image choices (product close-ups over lifestyle), interaction patterns (swipe carousels over grids), and section ordering (social proof earlier on mobile).

## Resources

- [Output Template](references/output-template.md) — Complete landing page blueprint format with section-by-section structure
- [Headline Frameworks](references/headline-frameworks.md) — Proven headline formulas with ecommerce examples for every traffic type
- [Conversion Checklist](assets/conversion-checklist.md) — Pre-launch audit checklist covering copy, layout, mobile, trust, and technical requirements