关于这个模板
Health Portal 展示了为健康或身心类产品做落地页的一种做法，并把生成它的说明一起公开。“Trusted Dentist in West New York” 就是整套版式要承载的那一行。配色是白色 #F9F8F9 打底、深橙色 #1D110C 给文字、红色 #990A09 承担强调色。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。动作被收进2000ms 的过渡、cubic-bezier(0.16,1,0.3,1)里。对于需要在第一屏就显得刻意的健康或身心类产品落地页，它是一份合适的参考。
适合谁
- 这个落地页要服务的，是需要让 640x472 画幅撑过三轮客户修改的代理公司。
- 给必须在不做原型的前提下向客户解释 767px 表现的工作室用。
- 用提示词给落地页提需求的人，会把这份 16,908 字符的提示词当作起点。
包含哪些内容
- 顶栏：字标、链接、一个操作. 顶栏装下字标、四到五个链接和一个染成 #990A09 的操作，字号压得很低，不跟页面其他地方抢。在 767px 以下，链接收进一个全屏浮层。标签短到能在 767px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 顺序由栅格定. 本该放一整段文案的地方，这一页放了一组面板，落地页因此扫得完。每块面板把一个观点和一个图标配在一起，扫读路径就一直保持横向。这份参考在 640x472 下收录。
- 字阶是钳制的，不是分档跳的. 宽度变化由字体自己消化：180px 到 200px 的 clamp 让标题从手机一路撑到桌面，不需要另做一套移动端构图。视口变窄时，字体的角色不变，只是尺寸变。窄屏版式要设计，不要硬挤。
- 能逐项核对的数值. 需求简报把数值点了名：200px 间距、2000ms 的过渡、cubic-bezier(0.16,1,0.3,1) 缓动曲线、767px 断点。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。每个值都能对着收录的提示词核一遍，重建因此是可验证的，而不是大约像。
动效与交互
全部动画预算
动画预算小而明确：2000ms使用 cubic-bezier(0.16,1,0.3,1)只用在状态变化上，不用在入场动画上。数值足够短，读起来是反馈，而不是动画。要改缓动就全局统一改。
入场就是签名动作
第一帧是刻意不完整的：各个板块进入视口时依次揭示，而构图的其他部分已经就位。入场只作用在点名的那些元素上，版式其余部分从不动。关掉动效测一遍。这份参考在 640x472 下收录。
把 Health Portal 当规格书读
第一个数字是字体：200px 间距、2000ms 的过渡。间距由它推出来，页面上其他一切都在和这两个值对齐。这个落地页里没有任何一处依赖默认值。
这个落地页背后的顺序
首屏一次读下来，主张就已经清楚了。导航、标题、公告徽标、数据行、卡片栅格依次出现，靠200px 间距、2000ms 的过渡分隔，而不是靠装饰性分割线。健康读者先看到主张，再看到选项。
这套构图为什么适合健康
当你给一个健康落地页写需求时，最难的是决定首屏拒绝说什么。 Health Portal 提前回答了这件事：一行展示字，后面跟着导航、标题、公告徽标、数据行、卡片栅格。 Health Portal 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。这份参考在 640x472 下收录。
常见问题
Health Portal 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 16,908 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
能用别的技术栈重建 Health Portal 的落地页吗？
Health Portal 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
能保留 Health Portal 的过渡、只改时长吗？
动效和版式写得一样细：状态切换落在 2000ms 区间内使用 cubic-bezier(0.16,1,0.3,1)。先复刻构图、再对时长，因为版式立住之后时长更好对。
