Hero Section
首屏焦点区
页面首屏核心展示区，用大标语、副标题、行动按钮与主视觉锁定用户第一眼。
Live Demo
真的可以点用直觉构建现代人机界面
将模糊的交互设想转化为精准的高质量代码，消灭自然语言与工程落地的鸿沟。
你刚才看到的这个：打开官网第一屏：顶部一行醒目的宣传标语大字，下方两行清晰的价值解释，一个高亮的主按钮「免费开始」，右侧浮动着精致的软件界面预览截图。
它到底是什么
Hero 是整个网站的「橱窗门面」。用户在 3 秒钟内就会根据 Hero 决定是继续浏览还是关闭标签页。一个优秀的 Hero 绝不是堆砌杂乱元素，而是清晰传达「我们是什么、为你解决什么问题、现在能做什么」，并以精准的视觉层级和强烈的行动号召（CTA）驱动转化。
Anatomy · 它由什么组成
Eyebrow眉标微徽章
发布动态或分类小标签
Display H1核心主标题
大字号、一句话价值主张
Subtitle副说明文案
补充使用场景与解决的痛点
CTA Group行动号召按钮组
主操作高亮 + 次操作幽灵按钮
Visual Showcase主视觉载体
产品模型、截图或 3D 插画
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 产品官网、SaaS 落地页、品牌宣传首页 | 用 |
| 重磅功能发布或重大营销活动专题页 | 用 |
| 个人作品集主页的第一屏定位介绍 | 用 |
| 日常高频使用的后台管理系统内页（浪费垂直空间） | 不用 |
| 纯工具型效率产品（打开就该直接展示输入框或工作台） | 不用 |
在日常高频工具或后台仪表盘里放巨大 Hero，强迫用户每次都往下滚动才能干活。
死板写死 100vh 高度，这在移动端会被手机浏览器动态缩放的底栏遮挡主要 CTA。
Similar Patterns
别搞混Hero Section当前
首屏焦点区
页面首屏核心展示区，用大标语、副标题、行动按钮与主视觉锁定用户第一眼。
Split Screen
双栏分屏
将屏幕水平切分为左右两半，一侧负责沉浸式品牌传达，另一侧承载核心交互。
一句话区分：页面首屏核心展示区，用大标语、副标题、行动按钮与主视觉锁定用户第一眼。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
构建首屏 Hero 区：H1 标题「5 分钟构建 AI 应用」，副标题两行解释核心优势，主 CTA「立即免费体验」高亮按钮配次 CTA「查看文档」，下方配产品半浮动深色预览图。
不要只对 AI 说
Bad → Better不要这样对 AI 说
首页顶部放个大图大字。
改成这样说
构建 SaaS 首屏 Hero：min-h-[85vh]，居中排列 eyebrow 徽章、紧凑 H1 (text-5xl tracking-tight)、灰阶副标题、主次 CTA 按钮组，底部配 1 度斜切视差产品截图。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。