关于这个模板
Pet Diagnostics 留住了自己的决策链：生成这个落地页的需求简报有 18,711 个字符。配色是 #101010 打底、奶油色 #EEF0D0 给文字，字体用 Inter。交付形式是一个自包含的 HTML 文件，收录于 2336x1080，所以画幅在任何一行代码写下去之前就已经定好。动效预算就是一段循环视频打底。当你要做面向健康或身心类产品的落地页、想要一个成品构图而不是一个起点时，就拿它当参照。下面引用的每一项都是那份简报里的数值，从 2336x1080 的画幅一直到最小的间距档。收录的提示词记录于 2336x1080，所以这一页引用的每个数值都能追回到它。
适合谁
- 给必须在不做原型的前提下向客户解释 820px 表现的工作室用。
- 写你自己的标题，然后用一个自包含的 HTML 文件在测量值不变的前提下重建这版落地页。
- 这个页面服务的是正用一个自包含的 HTML 文件重建健康或身心类产品落地页、想找外观背后那组数字的前端开发者。
包含哪些内容
- 顶栏：字标、链接、一个操作. 一条细导航压在落地页上，字标在左，链接用 Inter 排，整套构图因此先读成内容、再读成界面。在 820px 以下，链接收进一个全屏浮层。820px 以下链接直接收起，而不是折到第二行。
- 素材垫在文字后面. 素材是一段 7.1s 的片段，按 cover 裁进 2336x1080 的画幅，任何宽度下都不会出现黑边。按 2336x1080 或更宽的尺寸导出，cover 裁切就继续成立。
- 字阶是钳制的，不是分档跳的. 宽度变化由字体自己消化：12px 到 16px 的 clamp 让标题从手机一路撑到桌面，不需要另做一套移动端构图。移动端菜单属于同一份需求简报，所以收起来的状态也是设计过的。
- 顶栏只放一个操作. 一条细导航压在落地页上，字标在左，链接用 Inter 排，整套构图因此先读成内容、再读成界面。在 820px 以下，链接收进一个全屏浮层。820px 以下链接直接收起，而不是折到第二行。你自己的页面板块更多时，把它们归组，而不是把导航条拉宽。
动效与交互
是循环，不是时间轴
环境动感是一段 2336x1080 下的 7.1s 片段，在文案后面安静循环，不响应指针。片段短到能循环而不露接缝，这比它的分辨率更重要。
有悬停态，但要克制
页面只在能被操作的地方给出回应：悬停态只给按钮和链接，而不是每张卡片，除此之外什么都不动。状态用的是页面自己的配色，而不是组件库的默认值。这份参考在 2336x1080 下收录。
把这个落地页变成你自己的
可复用的是构图，题材归你。保住字号从 12px 到 16px、92vh 高的板块，把文字、素材和品牌标识换掉。你的强调色要过和参考强调色同样的对比度测试。
这份健康需求简报为什么站得住
这一页只有一个承诺，字号从 12px 到 16px、92vh 高的板块把它固定在原处。折叠线以下的东西都不用再承担一次主张。 Pet Diagnostics 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Pet Diagnostics 里什么在动
短小的动效预算让你在第一帧上失去戏剧性。换来的是可读性，也意味着悬停态与按下态、7.1s 的循环视频不用任何动画库就能移植。这个落地页里没有为动而动的动画。
常见问题
重建 Pet Diagnostics 必须用一个自包含的 HTML 文件吗？
Pet Diagnostics 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Pet Diagnostics 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 2336x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
用 Pet Diagnostics 重建的页面，可以不署名就上线吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 2336x1080 下收录。
