Hero Section
首屏焦点区
The primary above-the-fold spotlight communicating headline value and primary calls to action.
Live Demo
Actually clickableBuild Software with AI Fluency
Turn design patterns into production code without cognitive translation friction.
What you just saw:The first screen of a modern website: a punchy display headline, two explanatory sentences, a high-contrast Free Trial button, and a floating preview of the actual product UI on the right.
What it actually is
The hero is your digital storefront window. Visitors decide within three seconds whether to stay or bounce based on this single viewport. An effective hero avoids visual clutter, clearly stating what the product is, the problem it solves, and the immediate action to take, supported by crisp hierarchy and high-contrast conversion buttons.
Anatomy · What it's made of
Eyebrow眉标微徽章
Announcement badge or category pill above headline
Display H1核心主标题
Dominant value proposition in display typography
Subtitle副说明文案
Explains use cases and customer pain points in 1-2 lines
CTA Group行动号召按钮组
Primary conversion action paired with secondary ghost button
Visual Showcase主视觉载体
Product UI preview mockup, interactive demo, or illustration
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Product landing pages, SaaS homepages, and brand showcases | Yes |
| Major feature launch announcements and marketing campaigns | Yes |
| Portfolio homepages establishing immediate professional identity | Yes |
| Internal enterprise tools or daily administrative dashboards | No |
| Utility-first tools where users need immediate input focus | No |
Forcing oversized heroes on daily SaaS utilities where returning users just want to get to work.
Hardcoding h-screen on mobile where dynamic browser address bars obscure primary CTAs.
Similar Patterns
Don't mix these upHero SectionCurrent
首屏焦点区
The primary above-the-fold spotlight communicating headline value and primary calls to action.
Split Screen
双栏分屏
Divides the screen into equal halves, balancing emotional storytelling with functional utility.
In one line:The primary above-the-fold spotlight communicating headline value and primary calls to action.
Container
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Split Screen
双栏分屏
Divides the screen into equal halves, balancing emotional storytelling with functional utility.
Bento Grid
便当盒网格
Asymmetric modular grid inspired by bento lunchboxes, arranging varied feature tiles cleanly.
Full-Bleed Section
全宽通栏带
Breaks container constraints to stretch edge-to-edge, injecting contrast and spatial pacing.
How to tell AI
Three levels of promptAdd the component name and specifics
Build a SaaS hero: headline "Build AI apps in 5 minutes", two-line subtitle explaining core perks, primary high-contrast CTA "Start Free" alongside ghost button "Docs", paired with a floating dark product mockup below.
Don't just say this to AI
Bad → BetterDon't say this to AI
Put a big headline and image at the top.
Say this instead
Build a modern SaaS hero: min-h-[85vh], centered eyebrow badge, tight H1 (text-5xl tracking-tight), muted subtitle, dual CTA buttons, and a tilted perspective UI screenshot.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.