Landing Page Converter Skill
name: landing-page-converter
by cameron-jovan · published 2026-03-22
$ claw add gh:cameron-jovan/cameron-jovan-landing-page-converter---
name: landing-page-converter
description: Build high-converting landing pages and product sales pages using proven 10-section conversion frameworks. Includes Hero → Social Proof → Benefits → CTA flow for both lead capture and e-commerce pages.
metadata:
openclaw:
requires:
bins: []
env: []
tags:
- landing-page
- sales-page
- conversion
- copywriting
- marketing
- ecommerce
- funnel
keywords:
- "landing page template"
- "product page"
- "high converting page"
- "sales page generator"
- "conversion framework"
- "ecommerce template"
- "lead capture page"
examples:
- "Create a landing page for a webinar signup"
- "Build a product sales page for Shopify"
- "Design a lead magnet capture page"
- "Generate a high-conversion squeeze page"
---
# Landing Page Converter Skill
Convert any offer into a high-converting landing page or product page using the proven templates from the Jovan Industries conversion framework.
The Two Templates
1. LANDING PAGE Template
Used for: Lead magnets, email captures, webinar signups, free trials
┌─────────────────────────────────────────────────────────┐
│ HERO SECTION │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Main Headline (1 line, punchy, benefit-driven) │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Sub-headline (explain the main benefit) │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ PRIMARY CTA BUTTON (big, contrasting color) │ │
│ └─────────────────────────────────────────────────┘ │
│ [Product/hero image] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ SOCIAL PROOF BAR │
│ "TRUSTED BY 10,000+ [理想Customers]" │
│ [Logo] [Logo] [Logo] [Logo] [Logo] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ PROBLEM SECTION │
│ "Struggling with [PAIN POINT]?" │
│ Describe the problem in customer's words │
│ [Image: person looking frustrated] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ AGITATION SECTION │
│ "Here's why [PAIN POINT] keeps getting worse..." │
│ Make the problem feel more urgent/painful │
│ [Image: problem escalation visuals] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ SOLUTION SECTION │
│ ┌─────────────────────────────────────────────────┐ │
│ │ "Introducing [PRODUCT NAME]" │ │
│ │ │ │
│ │ [Product image - large, clear] │ │
│ └─────────────────────────────────────────────────┘ │
│ List 3-5 key benefits (not features) │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ MECHANICS SECTION │
│ "How it works - 3 simple steps" │
│ Step 1 → Step 2 → Step 3 (with icons/images) │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ TESTIMONIALS SECTION │
│ [★ 5.0] "Changed my life..." │
│ - Name, Title │
│ [★ 5.0] "Best investment..." │
│ - Name, Title │
│ [★ 5.0] "Finally works..." │
│ - Name, Title │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ OFFER SECTION │
│ "Here's what you get:" │
│ ✓ [Benefit 1] │
│ ✓ [Benefit 2] │
│ ✓ [Benefit 3] │
│ + [Bonuses] │
│ [PRIMARY CTA BUTTON] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ RISK REVERSAL │
│ "Your protection:" │
│ ✓ [Risk Reversal 1 - usually money-back] │
│ ✓ [Risk Reversal 2] │
│ ✓ [Risk Reversal 3] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ FINAL CTA SECTION │
│ "Start [DESIRED ACTION] Today" │
│ [Countdown timer if scarcity] │
│ [PRIMARY CTA BUTTON] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ FOOTER │
│ [Links] [Privacy] [Terms] [Contact] │
└─────────────────────────────────────────────────────────┘2. PRODUCT PAGE Template
Used for: Direct product sales, e-commerce, digital products
Build product pages EXCLUSIVELY using this 10-section flow from top to bottom:
┌─────────────────────────────────────────────────────────┐
│ 1. NAV (Top Menu) │
│ [Logo] [Shop] [About] [Blog] [Contact] [Cart 🛒] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 2. BUYBOX (Hero Product Module) │
│ ┌─────────────────────┬───────────────────────────┐ │
│ │ │ ★★★★★ (128 reviews) │ │
│ │ [Product Image] │ PRODUCT NAME │ │
│ │ │ $XX.XX │ │
│ │ │ [Color: ▼] [Size: ▼] │ │
│ │ │ [ADD TO CART] │ │
│ │ │ [Buy Now] │ │
│ └─────────────────────┴───────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 3. SOCIAL PROOF #1 (Testimonials Row 1) │
│ "⭐⭐⭐⭐⭐ Loved by 10,000+ customers" │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ "Quote..." │ │ "Quote..." │ │ "Quote..." │ │
│ │ - Name │ │ - Name │ │ - Name │ │
│ │ [avatar] │ │ [avatar] │ │ [avatar] │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ ↗ ↗ ↗ │
│ [FB] [TW] [IG] [PI] (share icons above) │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 4. SOCIAL PROOF #2 (More Proof / UGC) │
│ "Here's what real customers are sharing..." │
│ [Customer photo 1] [Customer photo 2] │
│ [Customer photo 3] [Customer photo 4] │
│ "Posted on Instagram/Twitter..." │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 5. BENEFITS (Icon-Bulleted List) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ [icon] BENEFIT 1 │ │
│ │ Short description of this benefit │ │
│ ├─────────────────────────────────────────────────┤ │
│ │ [icon] BENEFIT 2 │ │
│ │ Short description of this benefit │ │
│ ├─────────────────────────────────────────────────┤ │
│ │ [icon] BENEFIT 3 │ │
│ │ Short description of this benefit │ │
│ ├─────────────────────────────────────────────────┤ │
│ │ [icon] BENEFIT 4 │ │
│ │ Short description of this benefit │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 6. INGREDIENTS/MATERIALS (Specs Grid) │
│ "What's Inside / Product Specifications" │
│ ┌─────────────┬─────────────┬─────────────┐ │
│ │ [img] │ [img] │ [img] │ │
│ │ Label 1 │ Label 2 │ Label 3 │ │
│ │ ✓ Check │ ✓ Check │ ✓ Check │ │
│ └─────────────┴─────────────┴─────────────┘ │
│ [Full ingredient list + detailed specs] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 7. SOCIAL PROOF #3 (Video / Case Studies) │
│ [▶ Play Video] "See how it works" │
│ ┌─────────────────────────────────────────────────┐ │
│ │ "My Results After 30 Days" │ │
│ │ [Before] → [After] │ │
│ │ - Name, Location │ │
│ └─────────────────────────────────────────────────┘ │
│ [Influencer quote + handle] │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 8. COMPARISON (Table) │
│ ┌───────────┬───────────┬───────────┐ │
│ │ OUR PRODUCT │ Competitor A │ Competitor B │
│ ├──────────────┼───────────┼───────────┼───────────┤ │
│ │ Feature 1 │ ✓ │ ✓ │ ✗ │
│ ├──────────────┼───────────┼───────────┼───────────┤ │
│ │ Feature 2 │ ✓ │ ✗ │ ✓ │
│ ├──────────────┼───────────┼───────────┼───────────┤ │
│ │ Price │ $XX │ $XX │ $XX │
│ ├──────────────┼───────────┼───────────┼───────────┤ │
│ │ Quality │ ★★★★★ │ ★★★ │ ★★ │
│ └──────────────┴───────────┴───────────┴───────────┘ │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 9. FAQ (Accordion) │
│ ▼ Question 1? │
│ Answer text here... │
│ ▶ Question 2? │
│ ▶ Question 3? │
│ ▶ Question 4? │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ 10. CTA (Final Call-to-Action) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ "Ready to experience [BENEFIT]?" │ │
│ │ │ │
│ │ [★ LARGE ADD TO CART BUTTON ★] │ │
│ │ │ │
│ │ 🛡️ Money-back guarantee │ 🚚 Free shipping │ │
│ │ 🔒 Secure checkout │ ⚡ Ships today │ │
│ └─────────────────────────────────────────────────┘ │
│ ────────────────────────────────────────────────── │
│ [Nav] [Shop] [About] [Contact] [Privacy] [Terms] │
└─────────────────────────────────────────────────────────┘Section Breakdown
**1. NAV (Top Menu)**
**2. BUYBOX (Hero Product Module)**
**3. SOCIAL PROOF #1 (Testimonials Row 1)**
**4. SOCIAL PROOF #2 (More Proof / UGC)**
**5. BENEFITS (Icon-Bulleted List)**
**6. INGREDIENTS/MATERIALS (Specs Grid)**
**7. SOCIAL PROOF #3 (Video / Case Studies)**
**8. COMPARISON (Table)**
**9. FAQ (Accordion)**
**10. CTA (Final Call-to-Action)**
How to Use This Skill
Step 1: Gather Content
Before building, collect:
Step 2: Choose Template
Step 3: Map Content to Template
**For Landing Pages:**
1. Hero → Headline, subhead, CTA, hero image
2. Social Proof → Customer count, logos
3. Problem → Pain point in customer's words
4. Agitation → Why problem gets worse
5. Solution → Product intro + benefits
6. Mechanics → How it works (3 steps)
7. Testimonials → Social proof
8. Offer → What's included + bonuses
9. Risk Reversal → Guarantees
10. Final CTA → Urgency + button
**For Product Pages (10-section flow):**
1. Nav → Top horizontal navigation bar with menu links, logo, cart icon
2. Buybox → Central product buy module: image left, title/pricing right, add-to-cart button, variant selectors. Ensure product name is clearly seen, with a social proof callout on top of it
3. Social Proof → First testimonials row: quotes, stars, avatars; social share icons above
4. Social Proof #2 → Second proof block: more testimonials or user-generated content feeds
5. Benefits → Icon-bulleted benefits list with short descriptions under each
6. Ingredients/Materials → Product ingredients or specs grid: images, labels, checkboxes
7. Social Proof #3 → Third proof area: video modal trigger, influencer quotes, or case studies
8. Comparison → Table comparing product vs alternatives: columns for features, pricing, checks
9. FAQ → Expandable questions list addressing common objections
10. CTA → Final urgent call-to-action: large button, guarantee badges, footer nav below
Step 4: Output Format
Output as:
Conversion Principles
Headline Formula
CTA Button Rules
Social Proof Placement
1. Immediately after hero (logo bar)
2. Before offer section (testimonials)
3. Above the fold (star ratings)
Risk Reversal Must-Haves
Example: SoftEditSkin Product Page
**Product**: Ceramide Night Cream
**Price**: $48
**Pain Point**: Dry, irritated skin
HERO:
- Headline: "Wake Up to Soft, Calm Skin"
- Subhead: "The ceramide-rich cream that repairs your barrier overnight"
- CTA: "Add to Cart - $48"
- Image: Product shot with soft lighting
QUICK OVERVIEW:
- ✓ Repairs skin barrier
- ✓ Deep hydration
- ✓ Fragrance-free
- ✓ Ships free
BENEFITS:
- ✓ Ceramide Complex - Locks in moisture for 24hr hydration
- ✓ Shea Butter - Softens without greasiness
- ✓ Niacinamide - Calms redness and irritation
- ✓ Vitamin E - Fights free radicals
HOW TO USE:
1. Apply to clean face nightly
2. Massage in upward strokes
3. Wake up with glowing skin
TESTIMONIALS:
- "My skin has never felt better" - Sarah M.
- "Worth every penny" - Jessica L.
FAQ:
- "How long until I see results?" → "Most see improvement in 7 days"
- "Is it for sensitive skin?" → "Yes, fragrance-free and hypoallergenic"File Structure
landing-page-converter/
├── SKILL.md # This file
├── templates/
│ ├── landing-page.html # Landing page HTML template
│ └── product-page.html # Product page HTML template
└── examples/
├── softedit-skin.md # Example: product page
└── tiny-edit.md # Example: landing pageMore tools from the same signal band
Order food/drinks (点餐) on an Android device paired as an OpenClaw node. Uses in-app menu and cart; add goods, view cart, submit order (demo, no real payment).
Sign plugins, rotate agent credentials without losing identity, and publicly attest to plugin behavior with verifiable claims and authenticated transfers.
The philosophical layer for AI agents. Maps behavior to Spinoza's 48 affects, calculates persistence scores, and generates geometric self-reports. Give your...