关于这个模板
把 Wellness Balance 当作首屏规格书来读：这些数值在页面动手之前就先写下来了。“Discover our new plant-based supplements for daily balance and clean energy” 就是整套版式要承载的那一行。配色控制在白色 #ECEDEC 打底、白色 #FEFDF9 给文字之内，字体用 DM Sans。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。动效是0.8s 的过渡、cubic-bezier(0.16, 1, 0.3, 1)，克制到文案依然是主角。把它当作面向健康或身心类产品做首屏的需求简报：它要经得起复刻，而不只是第一眼好看。
适合谁
- 这个首屏要服务的，是需要让 640x472 画幅撑过三轮客户修改的代理公司。
- 接手这版首屏的市场人员，会用字号从 28px 到 35px、110px 间距检查改稿有没有保住原来的尺度。
- 用提示词给首屏提需求的人，会把这份 7,840 字符的提示词当作起点。
包含哪些内容
- 顶栏：字标、链接、一个操作. 导航只有一行，下面没有二级。到了平板断点以下，改由移动端浮层接管。导航条悬在 640x472 的构图上，自己没有底色，素材因此从它下面通到两边。加底色之前，先把自己的素材垫在导航条下面测一遍。
- 间距档位是写明的. 这里没有一样东西是靠眼睛估的。规格钉死了字号从 28px 到 35px、110px 间距、0.8s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线，剩下的版式都从这些值推导出来。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 这里扫读胜过细读. 栅格替你把阅读顺序排好了：每块面板分量相同、各讲一个观点，用 DM Sans 的小字号排，结构始终看得见。面板内的小标题比自己那块正文高一档，而不是比页面标题低一档。用间距分开面板，别给它们描边。
- 链接只在一个断点收起. 导航只有一行，下面没有二级。到了平板断点以下，改由移动端浮层接管。导航条悬在 640x472 的构图上，自己没有底色，素材因此从它下面通到两边。当你需要一条能在喧闹首屏上活下来的导航时，照这个模式抄。
动效与交互
载入时页面自己搭起来
入场负责让页面“到达”，跑完之后构图不再变化：标题逐词出现。把这段手法去掉，内容还在，版式也不会挪位。这份参考在 640x472 下收录。
有悬停态，但要克制
交互层很小，也很好预期：按需翻页浏览内容的滑块组件。其他部分都不动，重心因此留在构图上。状态很简单，因此能直接搬进任何组件体系。这份参考在 640x472 下收录。
对健康来说成立的地方
代价是信息密度：这个首屏在首屏上说得比功能导向的版式更少。换来的是阅读顺序，导航、标题、数据行、卡片栅格、页脚做完了更长页面才会摊开做的事。 Wellness Balance 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。这份参考在 640x472 下收录。
在 Wellness Balance 里先改什么
先改文案，别先改颜色。把“Discover our new plant-based supplements for daily balance and clean energy”重写成一句说你自己产品的话，再用 DM Sans 按需求简报里的字号排。可复用的是构图，换一个品牌它照样成立。
这个首屏背后的时序
你完全可以给这套构图挂一个预设库，结果只会更吵，不会更好。需求简报把预算留在0.8s 的过渡、逐词出现的标题上。这个首屏里没有为动而动的动画。
常见问题
Wellness Balance 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 7,840 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Wellness Balance 有多少地方依赖 React 和 Tailwind CSS？
Wellness Balance 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Wellness Balance 里有多少东西是动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 0.8s 这个区间内缓动是 cubic-bezier(0.16, 1, 0.3, 1)。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
