关于这个模板
Wellness Hero 展示了为健康或身心类产品做首屏的一种做法，并把生成它的说明一起公开。页面排的是 Inter，字号在需求简报里就已经定死。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。如果你要给别人提一版健康首屏的需求，就从这个构图起步，把题材换掉。收录的提示词记录于 640x468，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 640x468 的画幅一直到最小的间距档。
适合谁
- 给需要把首屏的范围收进一个迭代、并且不新增任何素材的产品经理用。
- 用提示词给首屏提需求的人，会把这份 4,719 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Wellness Hero一样的内容负责人用。
包含哪些内容
- 顶栏：字标、链接、一个操作. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 640x468 的构图上，自己没有底色，素材因此从它下面通到两边。当你需要一条能在喧闹首屏上活下来的导航时，照这个模式抄。
- 样式交给字体. 展示行用 Inter 排，字号由需求简报定死，标题因此是构图元素，而不是一段文字。字重按角色分配，层级在搭建时就不用靠猜。
- 顶栏只放一个操作. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 640x468 的构图上，自己没有底色，素材因此从它下面通到两边。链接控制在四到五个，这一行的尺寸就是照这个定的。
- 公告胶囊. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。消息过期就把它删掉。
动效与交互
不挡路的动效
需求简报里没有动画，页面靠 640x468 的版式撑住，唯一的变化是悬停态和按下态。动效被当作反馈，而不是装饰。
几乎没有动效
需求简报里没有动画，页面靠 640x468 的版式撑住，唯一的变化是悬停态和按下态。动效被当作反馈，而不是装饰。动效只留在控件上。
把 Wellness Hero 当规格书读
这一页上的每一层关系都是可以核对的数值：640x468 画幅。 Wellness Hero 因此是可复刻的，而不只是能被照抄一遍。这个首屏里没有任何一处依赖默认值。
这个首屏背后的顺序
代价是要读者有耐心：可扫读的栅格会立刻交出的细节，这一页先扣着。换来的是一个导航、标题、公告徽标、数据行、背景片段不会被误读的首屏。健康读者先看到主张，再看到选项。这份参考在 640x468 下收录。
把这个首屏变成你自己的
换进你自己的素材时，保住裁切和图层顺序。素材是 640x468 下的一张静帧。正是这个摆放位置让文案保持可读。在重新配色之前，先把文案和素材改完。
常见问题
复制 Wellness Hero 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 4,719 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
不需要。需求简报是规格说明，不是依赖清单。它当初是按 React 和 Tailwind CSS 写的，但同一套构图用你手头现有的工具都能重建。标注技术栈只是让你知道这份参考是怎么做出来的。
在客户项目里该怎么处理 Wellness Hero 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 640x468 下收录。
