首屏Hero
你可能会说
网站最上面那块太空了，想要大图加大字那种，一眼知道我们是干嘛的。
网页开头用来说明页面重点并引导下一步的主要区域Hero 通常紧接在 Header 或 Navbar 下面。它可以由标题、补充说明、主要行动和产品画面组成，但没有固定组件清单；真正要看的是这些内容是否共同说明当前页面最重要的价值。客户标志、功能列表和定价通常属于后续区块，不因为靠近首屏就都算 Hero。
你可以这样告诉 AI Agent
请重做官网首屏：标题直接说明产品为谁解决什么问题，补充说明讲清结果，突出一个主要 CTA，并用真实产品画面提供证据。不要把功能、定价和 FAQ 全塞进首屏；用 5 秒扫读测试能否复述产品价值。
这个网页里，哪一块是 Hero？
点击网页中的一个区域。选择后会显示它的名称，并说明它与 Hero 的区别。
先观察整个页面Hero 通常紧接在顶部导航下面，是当前页面最主要的介绍区域。
你可以这样告诉 AI Agent
帮我修改这个 Hero。只调整标题、说明、按钮和产品画面，其他区域不要动。改完后告诉我具体改了什么。
组成结构 · Anatomy
把想法变成网页，只需一句话
描述你想要的页面，AI 帮你生成、修改和发布。
免费开始 →
说明当前页面最重要的价值
补充适用对象、问题或使用方式
页面需要用户行动时，给出清楚的下一步
用产品截图或插画帮助理解
常见变体 · Variants
居中型Centered
内容较少，重点是一个主要行动
左文右图Split
需要同时说明价值和展示产品画面
产品截图型Screenshot
产品界面本身能帮助用户理解
典型使用场景
SaaS 产品官网首屏
新 · AI 数据分析
让每一份报表，自己开口说话
上传表格，AI 自动生成图表和结论，减少重复整理。
开始免费试用预约演示 →
个人作品集开场
你好，这是一份个人作品集
独立产品设计师 · 专注 SaaS 与效率工具，展示产品设计和协作过程
App 下载落地页
山行 · 记录每一次出发
离线地图、轨迹记录、海拔曲线，徒步爱好者的口袋向导。
App Store
▶ Google Play
活动报名页头部
延伸阅读 · 权威出处
快速练习
一位第一次访问的用户打开产品官网，需要马上知道产品解决什么问题以及下一步做什么。首屏怎样组织更有效？
ANS 原创方法