关于这个模板
Forecast Center 展示了为AI 或 SaaS 产品做落地页的一种做法，并把生成它的说明一起公开。配色控制在深蓝色 #04121B 打底、#FFFFFF 给文字之内，字体用 Inter。交付形式是一个自包含的 HTML 文件，收录于 1466x1080，所以画幅在任何一行代码写下去之前就已经定好。动效只限于2.55s 的过渡、cubic-bezier(.16,1.3,1)、一段循环视频打底。写作时让它开着：能迁移到你页面上的，是那份 11,253 字符的简报。
适合谁
- 接手这版落地页的外包团队，需要在第一次提交之前把 cubic-bezier(.16,1.3,1) 缓动曲线钉进仓库里。
- 正在做AI 或 SaaS 产品落地页、需要在报价发出去之前把一个自包含的 HTML 文件落到纸面上的团队。
- 如果构建从一个自包含的 HTML 文件起步，先拾起 100vh 高的板块、14px 间距，栅格定下来之前别碰配色。
包含哪些内容
- 导航条上不留多余. 导航条压在落地页之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 1466x1080 的构图上，自己没有底色，素材因此从它下面通到两边。
- 尺寸写在需求简报里，不在一套比例里. 需求简报把数值点了名：100vh 高的板块、14px 间距、2.55s 的过渡、cubic-bezier(.16,1.3,1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。画幅比例和尺寸记在一起，重建时连比例也一起对。
- 结构交给卡片. 栅格就是结构：面板同样大小，用 Inter 排，排得让视线横向移动，而不是向下。每块面板把一个观点和一个图标配在一起，扫读路径就一直保持横向。
- 链接只在一个断点收起. 导航条压在落地页之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 1466x1080 的构图上，自己没有底色，素材因此从它下面通到两边。一条导航只放一个操作。
动效与交互
是循环，不是时间轴
背景片段在 1466x1080 下以 5.3s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。片段静音且行内播放，所以第一帧不需要任何交互就能看到。拍摄或导出按 1466x1080 或更宽的尺寸。
附了一条更安静的分支
减少动态效果是写进规格的，不是后补的：开启后入场动画和循环视频停下，构图停在最终状态。减少动态效果下交互反馈照常工作，只去掉入场动画。迁移页面时保留减少动态效果分支。这份参考在 1466x1080 下收录。
这个落地页背后的顺序
功能导向的版式在罗列产品能做什么，这一版把读者带向一个决定。这条路径看得见：就在导航、标题、公告徽标、数据行、卡片栅格里，也在100vh 高的板块、14px 间距给它们的间距里。 SaaS读者先看到主张，再看到选项。
这个落地页怎么重排
桌面端构图是照着 1466x1080 解出来的，窄屏版式是设计出来的，不是继承来的：板块高度锁在 100vh、动效带减少动态效果分支。动效带减少动态效果分支，素材带首帧封面，所以自动播放不可用时页面依然能表达自己。直接挤小更省事，但撑不住。
这个落地页背后的数字
这份参考之所以能反复使用，原因就在这里：100vh 高的板块、14px 间距、2.55s 的过渡、cubic-bezier(.16,1.3,1) 缓动曲线。页面里没有任何一处交给默认值，所以替换之后只要保住这些数字，整套构图就跟着保住了。这个落地页里没有任何一处依赖默认值。
常见问题
能用别的技术栈重建 Forecast Center 的落地页吗？
Forecast Center 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Forecast Center 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 11,253 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Forecast Center 的动效是由什么驱动的？
动效和版式写得一样细：状态切换落在 2.55s 区间内缓动是 cubic-bezier(.16,1.3,1)。先复刻构图、再对时长，因为版式立住之后时长更好对。
