关于这个模板
把 Wellbeing OS 当作首屏规格书来读：这些数值在页面动手之前就先写下来了。整套配色是深橙色 #2C221C 打底、橙色 #BF9423 承担强调色，页面字体是 Helvetica, Segoe UI, Roboto。交付形式是 React 和 Tailwind CSS，收录于 1460x1080，所以画幅在任何一行代码写下去之前就已经定好。这个页面的动效控制在400ms 的过渡、cubic-bezier(0.16,1,0.3,1)、一段循环视频打底。对于需要在第一屏就显得刻意的健康或身心类产品首屏，它是一份合适的参考。收录的提示词记录于 1460x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1460x1080 的画幅一直到最小的间距档。
适合谁
- 这一版首屏服务的是需要一屏证据、证明健康的文案能扛住 5.8s 的循环视频的创始人。
- 给正在做健康或身心类产品首屏、背后还没有设计系统的独立创始人用。
- 用提示词给首屏提需求的人，会把这份 5,051 字符的提示词当作起点。
包含哪些内容
- 链接只在一个断点收起. 顶栏装下字标、四到五个链接和一个染成 #BF9423 的操作，字号压得很低，不跟页面其他地方抢。到了平板断点以下，改由移动端浮层接管。链接比字标小一档，#BF9423 操作是导航条上唯一有分量的元素。
- 尺寸写在需求简报里，不在一套比例里. 需求简报把数值点了名：160px 间距、400ms 的过渡、cubic-bezier(0.16,1,0.3,1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。间距和字号用同一套单位写明，两者可以直接比。
- 封面帧也算数. 1460x1080 的画幅由一段循环填满，它在文案后面播放，不要任何控件。按 1460x1080 或更宽的尺寸导出，cover 裁切就继续成立。
- 一套字，两个角色. 字体是按职责分配的，不是混着用：Helvetica, Segoe UI, Roboto 同时承担展示文字和界面文字。数字和界面共用同一套字，统计数据与标签因此属于同一套系统。
动效与交互
不靠滚动库的环境动效
环境动感是一段 1460x1080 下的 5.8s 片段，在文案后面安静循环，不响应指针。页面上没有别的东西持续动，所以只有素材在争取注意力。
全部动画预算
需求简报把过渡值钉在 400ms，重建时不能换成一个更慢的默认值。值够短，重建时只要把它拖慢，一眼就能看出来。把你手上的实现对齐这些时长。
这个首屏背后的顺序
营销页面会把证据堆在折叠线以下然后听天由命，这个首屏把导航、数据行、背景片段、页脚直接推到读者面前，其余的先按住不发。健康读者先看到主张，再看到选项。这份参考在 1460x1080 下收录。
这个首屏背后的时序
数一数会动的元素，清单很短：400ms 的过渡、5.8s 的循环视频、悬停态与按下态。这个首屏里没有为动而动的动画。
在 Wellbeing OS 里先改什么
换进你自己的素材时，保住裁切和图层顺序。素材是一段 5.8s 的 1460x1080 循环。正是这个摆放位置让文案保持可读。在重新配色之前，先把文案和素材改完。
常见问题
Wellbeing OS 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 1460x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
重建 Wellbeing OS 必须用 React 和 Tailwind CSS 吗？
Wellbeing OS 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
在客户项目里该怎么处理 Wellbeing OS 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1460x1080 下收录。
