Landing Page (High‑Conversion) — Web Design Skill

SkillMedia

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.

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the Landing Page (High‑Conversion) skill

What this skill tells your AI

The instructions your AI receives, as published by bidewio/better-openclaw in skills/landing-page-design/SKILL.md and read by ahel’s review.

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.

Signals

GitHub stars
58
Forks
6
Last commit
Aug 2026
Advanced
Item type
skill
Key
landing-page-design-bidewio
Source
github.com/bidewio/better-openclaw