landing-page-design

name	landing-page-design
description	Design high-conversion landing pages with structure, section order, layout types (classic hero, long-form, minimal, comparison), conversion strategies, SEO/AEO guidance, and copywriting templates.
metadata	{"openclaw":{"emoji":"🚀","source":"https://github.com/MengTo/Skills"}}

Landing Page (High‑Conversion) — Web Design Skill

Before you design/write

1. Page purpose: Single offer? Lead gen? Product launch?
2. Audience + context: Who's landing here, and from where (ad, organic, referral)?
3. Proof + assets: What testimonials, logos, screenshots, videos are available?
4. Constraints: Brand guidelines, tech stack, timeline?

Core structure

Above the fold (must)

• Headline: Benefit-first, specific, not clever
• Subheadline: Who it's for + how it helps
• CTA: Clear, contrasting, action-oriented
• Social proof: Logos or "Trusted by X users"
• Visual: Product screenshot, illustration, or hero video

Mid page (argument)

• Benefits section: 3-4 benefits with icons/illustrations
• How it works: 3-step process or visual flow
• Social proof expanded: Testimonials, case studies, metrics
• Feature highlights: Key differentiators

Bottom (objection handling)

• FAQ: Top 3-5 objections addressed
• Final CTA: Restate offer + urgency
• Trust signals: Security badges, guarantees, press logos

Layout types

• A) Classic hero + sections: Most common, works for most products
• B) Long-form story (sales page): For complex offers needing education
• C) Minimal conversion page: For ads, single CTA, minimal distraction
• D) Comparison landing page: When competing directly with alternatives

High‑conversion strategies

1. Match message to source: Ad copy → landing page headline consistency
2. Make the next step obvious: One primary CTA per section
3. Write benefit-first: "Save 10 hours/week" not "Automated workflow engine"
4. Use specificity: Numbers, names, results over vague claims
5. Reduce risk: Free trial, money-back, no CC required
6. Objection handling is a section: Not just a footer afterthought

Copywriting templates

• Headline formulas: "[Benefit] without [pain]", "[Number] [audience] use [product] to [outcome]"
• Subheadline rules: Expand the headline, add context, stays under 2 lines
• CTA rules: Action verb + benefit ("Start saving time", "Get your free report")
• Benefit bullets: Start with outcome, then mechanism

SEO + AEO checklist

• Unique title tag with primary keyword
• Meta description with CTA
• H1 = headline, proper heading hierarchy
• Alt text on all images
• Schema markup (FAQ, Product, Organization)

Tips for AI Agents

• Always ask about the single offer and target audience before designing.
• Confirm whether this is for organic or paid traffic — affects indexing strategy.
• Default to classic hero layout unless told otherwise.
• Never generate a landing page without a clear CTA.