By 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
- Page purpose: Single offer? Lead gen? Product launch?
- Audience + context: Who's landing here, and from where (ad, organic, referral)?
- Proof + assets: What testimonials, logos, screenshots, videos are available?
- 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
- Match message to source: Ad copy → landing page headline consistency
- Make the next step obvious: One primary CTA per section
- Write benefit-first: "Save 10 hours/week" not "Automated workflow engine"
- Use specificity: Numbers, names, results over vague claims
- Reduce risk: Free trial, money-back, no CC required
- 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.