Design · How to use a skill

design-landing-page-hero

Designs a high-converting landing page hero section with a clear headline, subhead, primary call to action, social proof and product visual, then the home page sections below it (benefits, services, testimonials, FAQ, final CTA). Use when the user wants a homepage, landing page, above-the-fold section, hero banner, or a marketing page that converts.

Version 1.1 · Updated 2026-10-31

View raw SKILL.md

Install in Claude Code, Cursor or Codex (optional)

Only for AI coding tools that read skill folders. Run one line in a terminal, in your project folder. It downloads this skill's text files from TheSkillVault and nothing else; you can read them first with “View raw SKILL.md”.

Claude Code (all your projects)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/design-landing-page-hero/raw' -o ~/'.claude/skills/design-landing-page-hero/SKILL.md'

Cursor (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/design-landing-page-hero/raw' -o '.cursor/skills/design-landing-page-hero/SKILL.md'

Codex and other Agent Skills tools (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/design-landing-page-hero/raw' -o '.agents/skills/design-landing-page-hero/SKILL.md'

Or connect the whole library over MCP

Add TheSkillVault to Cursor or add this to your app's MCP settings (read-only; help):

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Design a landing page hero and home page

When to use

  • Building or redoing the top of a marketing or product homepage.
  • Filling in the rest of a small-business home page once the hero works (step 7). In the Standard Website path, read docs/website-brief.md for the copy and the main call to action, and write the result to app/page.tsx.

Steps

  1. Write the copy first:
  • Headline (6-10 words): the outcome for the customer, not the feature.
  • Subhead (1-2 lines): who it is for and how it works.
  • One primary CTA with a verb ("Start free trial"), optional secondary ("See how it works").
  1. Layout: two columns on desktop (copy left, visual right), stacked on mobile with the CTA visible without scrolling.
  2. Hierarchy: headline text-4xl md:text-6xl font-bold tracking-tight, subhead muted text-lg, generous spacing (py-20 md:py-32), max text width ~60ch.
  3. Visual: a real product screenshot or short loop beats stock art. Add width/height and priority loading to avoid layout shift.
  4. Social proof just under the CTA: logos, a star rating or "Trusted by 1,200 teams".
  5. Check contrast (WCAG AA), tap target size (44px), and that it loads under 2.5s LCP.
  6. Below the hero, in this order, each section its own component in components/home/ and imported into app/page.tsx:
  • Benefits: 3 short points, each an outcome for the customer.
  • Services or offer: one card per service with a one-line summary and a link to its detail (or to /services).
  • Social proof: 2-3 testimonials with a name and suburb or company, or review stars. Use real quotes only.
  • How it works: 3 numbered steps from first contact to done.
  • FAQ: 4-6 questions using <details>/<summary>, so it works without JavaScript.
  • Final CTA band: repeat the one main action with a button to /contact.

Gotchas

  • More than one primary button splits attention.
  • Carousels in the hero hurt conversion; pick the single strongest message.
  • One <h1> per page (the hero headline); every section below starts with an <h2>.
  • Don't invent testimonials, client logos or numbers; leave a clear placeholder until the owner supplies real ones.

Example prompt

"Make the top of my homepage look professional and get more signups."

Licence: CC BY 4.0. Attribution when you reuse it: From TheSkillVault, https://theskillvault.ai, CC BY 4.0