关于这个模板
Mind AI 交给了健康或身心类产品一个已经做完的首屏，以及做出它的那组数字。颜色只用了 #F6EAF2 打底、#000000 给文字、靛蓝色 #A069C9 承担强调色，正文排的是 Questrial。交付形式是一个自包含的 HTML 文件，收录于 1920x1414，所以画幅在任何一行代码写下去之前就已经定好。动效是4.042s 的过渡、cubic-bezier(.16,1.3,1)、一段循环视频打底，克制到文案依然是主角。写作时让它开着：能迁移到你页面上的，是那份 37,004 字符的简报。下面引用的每一项都是那份简报里的数值，从 1920x1414 的画幅一直到最小的间距档。
适合谁
- 要给这次构建估工时的产品经理，会把 cubic-bezier(.16,1.3,1) 缓动曲线读成工作范围。
- 给必须在不做原型的前提下向客户解释 520px 表现的工作室用。
- 正在复刻竞品健康落地页的团队，想在有人选定框架之前先把一个自包含的 HTML 文件点明。
包含哪些内容
- 导航条上不留多余. 顶栏装下字标、四到五个链接和一个染成 #A069C9 的操作，字号压得很低，不跟页面其他地方抢。在 520px 以下，链接收进一个全屏浮层。520px 以下链接直接收起，而不是折到第二行。
- 视频是背景，不是一块面板. 一个 5s 的素材撑起整个首屏，页面上没有第二个素材元素要对齐。自动播放不可用时，1920x1414 的封面帧撑住构图，版式不会塌。按 1920x1414 或更宽的尺寸导出，裁切才不失真。
- 字阶是钳制的，不是分档跳的. 字号用 14px 到 28px 的 clamp 来处理，而不是写死档位，标题行在各个断点之间因此保持比例，不会跳变。因为字阶是钳制过的，标题行在断点之间从来不会跳变。
- 量出来的，不是估的. 这份清单很短（字号从 14px 到 28px、100vh 高的板块、16.0rem 圆角、75px 间距），整套系统因此能靠手一个个核过去。清单短到审核的人能一个元素一个元素地核。
动效与交互
不靠滚动库的环境动效
整个环境层就是一段 5s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。
是渲染出来的，不是画出来的
做视觉的是那块实时画布：一块 WebGL 画布。需求简报里没有图片替换，所以场景属于首屏渲染的一部分。这份参考在 1920x1414 下收录。
这个落地页怎么重排
流体字阶和阶梯式字阶在宽屏上看起来差不多。把视口收窄，差别就出来了：一边是14px 到 28px 的 clamp，一边是固定跳档。窄屏下没有丢掉任何重要的东西。
这个落地页做对了什么
大多数健康页面都是因为做加法而失败：更多板块、更多渐变、更多主张。 Mind AI 走的是反方向。构图停留在#F6EAF2上，只有操作用靛蓝色 #A069C9，这已经足够显得刻意。 Mind AI 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
这个落地页背后的顺序
把这一页的顶部和一个典型的健康落地页首屏放在一起比：两边都有标题和行动点，但这里的导航、标题、公告徽标、数据行、功能列表是固定排序的，而不是用同样的权重互相抢。健康读者先看到主张，再看到选项。这份参考在 1920x1414 下收录。
常见问题
能用别的技术栈重建 Mind AI 的落地页吗？
Mind AI 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Mind AI 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 1920x1414 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能保留 Mind AI 的过渡、只改时长吗？
动效和版式写得一样细：状态切换落在 4.042s 区间内缓动是 cubic-bezier(.16,1.3,1)。先复刻构图、再对时长，因为版式立住之后时长更好对。
