首屏横幅

Hero Section

UI 组件也叫：Hero 区、主视觉、头图、Banner、首屏大图

一句话：落地页或官网最上面的一大块区域，用大标题、一句说明和主按钮，第一眼讲清产品是什么。

详细解释

首屏横幅（Hero）是用户打开官网时看到的第一屏：一个很大的主标题说清「这是什么、能帮你做什么」，下面一两行副标题补充说明，再放一到两个按钮（「免费试用」「查看演示」），旁边或背景是产品截图、插图或视频。它通常占满屏幕宽度，高度接近一屏。

它和 轮播图 的区别：首屏横幅只讲一件最重要的事，内容固定；轮播图轮流展示多个活动。和 落地页 的关系：落地页是整个页面，首屏横幅只是落地页的第一个区块，后面还有功能介绍、客户评价、价格、页脚等。AI 生成的首屏常见问题是标题空泛（「开启未来」）、按钮太多、背景图压得文字看不清。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

落地页顶部做一个首屏横幅，高度约一屏：左侧是 48px 大标题「10 分钟搭好你的在线商店」、一行灰色副标题和两个按钮（实心「免费试用」、描边「观看演示」），右侧放产品截图；手机上改为上下排列，标题缩小到 32px。

由主标题、副标题、一到两个行动按钮和配图（截图、插画或背景图）组成，通常占满首屏宽度。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。