关于这个模板
Wellness Devicex 是面向健康或身心类产品的一份可用参考：这套落地页已经排好、量好，可以直接照着复刻。配色控制在黑色 #0A0A0A 打底、灰调蓝色 #64748B 承担强调色之内，字体用 Inter。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。需求简报把动效预算花在60ms 的过渡、cubic-bezier(0.77, 0, 0.18, 1)、一段循环视频打底上。如果你要给别人提一版健康落地页的需求，就从这个构图起步，把题材换掉。
适合谁
- 先把 1460x1080 的画幅和 100vh 高的板块、24px 间距从这版落地页里拿走，再考虑别的。
- 这一版落地页服务的是需要一屏证据、证明健康的文案能扛住 4.4s 的循环视频的创始人。
- 用提示词给落地页提需求的人，会把这份 6,903 字符的提示词当作起点。
包含哪些内容
- 一行到底，不做抽屉. 顶栏装下字标、四到五个链接和一个染成 #64748B 的操作，字号压得很低，不跟页面其他地方抢。到了平板断点以下，改由移动端浮层接管。链接比字标小一档，#64748B 操作是导航条上唯一有分量的元素。
- 需求简报点了名. 这些值就是规格本身：100vh 高的板块、24px 间距、60ms 的过渡、cubic-bezier(0.77, 0, 0.18, 1) 缓动曲线，是在 1460x1080 下收录的，而不是从截图里反推的。画幅比例和尺寸记在一起，重建时连比例也一起对。
- 字重按角色写明. 展示行用 Inter 排，字号由需求简报定死，标题因此是构图元素，而不是一段文字。字重按角色分配，层级在搭建时就不用靠猜。没有职责的字号不要加。
- 没有一样是继承来的. 这些值就是规格本身：100vh 高的板块、24px 间距、60ms 的过渡、cubic-bezier(0.77, 0, 0.18, 1) 缓动曲线，是在 1460x1080 下收录的，而不是从截图里反推的。画幅比例和尺寸记在一起，重建时连比例也一起对。搬版式的时候把数值一起搬走。
动效与交互
以毫秒计的时长
这里的动效用毫秒计量：60ms使用 cubic-bezier(0.77, 0, 0.18, 1)这就是全部的动画预算，而且花在状态变化上，不在滚动时间轴上。没有任何东西在等滚动位置，所以一碰页面就有反应。换皮的时候保留这些时长。
滚动编排整个序列
滚动被当成触发器，而不是时间轴：背景层与前景以不同速度移动，节奏由读者自己定。开启减少动态效果后，效果被去掉，但构图的最终状态不变。开着减少动态效果测一遍。这份参考在 1460x1080 下收录。
这个落地页怎么重排
窄屏不是把它整体缩小就能解决的。这份简报把变化交给字体和导航处理：板块高度锁在 100vh、导航收进移动端菜单。控件大到能点，文案在任何宽度下都保持同样的阅读顺序。
把这个落地页变成你自己的
需求简报写明了 Inter 和它旁边的字阶。换成比例相同的字体，构图就能活下来。画幅和字阶都保留，该换的是题材。
这个落地页背后的顺序
把你自己的文案放进这个落地页，顺序依然成立，因为这些元素不能互换：导航、公告徽标、数据行、功能列表、背景片段各自只负责一件事。健康读者先看到主张，再看到选项。这份参考在 1460x1080 下收录。
常见问题
复制 Wellness Devicex 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 6,903 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Wellness Devicex 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
能保留 Wellness Devicex 的过渡、只改时长吗？
入场和状态切换都落在 60ms 这个区间内使用 cubic-bezier(0.77, 0, 0.18, 1)，由状态变化触发而不是滚动库，也从不会拖住文案。
