Guides hero section design for conversion and first impressions. The hero is where users spend ~80% of initial viewing time; first impressions form in milliseconds.
When invoking
On
first use
, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On
subsequent use
or when the user asks to skip, go directly to the main output.
Initial Assessment
Check for product marketing context first:
If
.claude/product-marketing-context.md
or
.cursor/product-marketing-context.md
exists, read it for value proposition, audience, and Section 12 (Visual Identity).
Identify:
Page type
Homepage, landing, product, pricing
Primary goal
Signup, trial, purchase, learn more
Platform
Web, mobile, both
Core Components (Four Essentials)
Headline (H1)
6–10 words max; instantly communicate core value and benefit. Answer "What's in it for me?" within seconds.
Subheading
Clear, concise explanation reinforcing why the product/service is valuable.
Primary CTA
Single, prominent action button visible without scrolling. One per hero to avoid choice overload.
Visual
High-quality image, video, or animation that amplifies the message.
Optional but Effective
Trust cues
1–3 elements (reviews, logos, statistics)
Secondary CTA
For users not ready for primary action
Layout Types
Hero is a
Spotlight layout
—single focus, primary element with secondary around it. Choose layout by content balance and conversion goal.
Layout
Structure
Best for
Split (50/50)
Text left, visual right (or vice versa); equal weight
Product, SaaS; clear value + demo
Split (75/25)
Text dominant; smaller image column
Copy-heavy; trust-first
Split (25/75 "Signpost")
Small image beside primary content
Minimal visual; emphasis on headline
Centered
Text + CTA centered; visual full-width or stacked
Brand, landing; single CTA
Full-width image
Image background; overlay text
Emotional; lifestyle, brand
Responsive
Split layouts stack vertically on mobile (text above image); centered maintains center. Mobile-first; ensure CTA above fold on small screens.
Alignment
Axis
Options
Use
Horizontal
Left, center, right
Left align for text-heavy; center for minimal
Vertical
Top, center, bottom
Center for full-viewport hero; top for short hero
Best Practices
3-Second Rule
The hero must answer three questions within 3 seconds:
What is this?
Why should I care?
What should I do next?
~80% of users never scroll beyond the hero; make an immediate impact.
Messaging
No guessing required; message must be instantly clear.
Single primary CTA to avoid choice overload.
Action-oriented, benefit-focused copy.
Emotional intent first
Evoke emotion (trust, excitement, confidence) before users read the headline. Avoid generic phrases ("Welcome to Our Website") or overly clever wordplay.
Visuals
Fast-loading; avoid heavy assets that delay LCP
Brand-aligned; use typography and colors from brand-visual-generator
Support the message; don't distract
Frontend aesthetics
For motion (staggered reveals, hover), spatial composition, and backgrounds—see
brand-visual-generator
Frontend Aesthetics
Technical
Mobile-first design
Lightweight for quick loading
Ensure LCP (Largest Contentful Paint) optimization
SEO Considerations
Headline often contains
; include primary keyword
Hero content in initial HTML; avoid JS-only rendering
Image optimization
: Alt text, format (WebP), LCP, responsive—see
image-optimization
UX Guidelines
Hierarchy
Headline > Subheading > CTA
Visual should complement, not compete with, text
Accessibility
Requirement
Practice
Contrast
Text over images: >=4.5:1; use overlay if needed
Touch targets
CTA >=44x44px
Keyboard
CTA keyboard-accessible; visible focus indicator
Screen readers
Proper heading order; image alt text;
aria-label
for icon-only buttons
Reduced motion
Respect
prefers-reduced-motion
for animations
Interaction
CTA has
cursor-pointer
; hover uses color/opacity (not scale) to avoid layout shift
Testing
A/B test headline, CTA copy, and visuals
Measure bounce rate, conversion rate, time to first interaction
Output Format
Hero structure
(headline, subheading, CTA, visual)
Copy suggestions
Technical
checklist (LCP, accessibility, image optimization)
Testing
recommendations