关于这个模板
AI Runtime 是面向AI 或 SaaS 产品的落地页参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。配色是中性 #28282A 打底、浅调 #C8C8C8 给文字，字体用 Inter。交付就是 React：一个页面，没有插件，你和设计之间不隔任何构建工具链。动效是0.85s 的过渡、cubic-bezier(0.22, 1, 0.36, 1)、一段循环视频打底，克制到文案依然是主角。写作时让它开着：能迁移到你页面上的，是那份 9,593 字符的简报。
适合谁
- 在交接说明里写上 1472x1080 画幅，下一次构建就不必再从页面里倒推。
- 给按轮次结算、想在第一次修改前就谈定 100vh 高的板块、28px 间距的代理公司用。
- 产品市场的人需要落地页在背后有6.9s 的循环视频时依然好读。
包含哪些内容
- 链接在前，操作在后. 导航条压在落地页之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 1472x1080 的构图上，自己没有底色，素材因此从它下面通到两边。
- 每个尺寸都写下来了. 需求简报把数值点了名：100vh 高的板块、28px 间距、0.85s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。每个值对应一件事：一个字号档位、一段间距、一个圆角或一次过渡。
- 证据就一行. 数字用 Inter 排，字号更靠近标题，而不是更靠近正文。数字是文字，所以它们沿用页面的响应式行为，而不是自己缩放。每个数字配一个短标签。
- 导航收在一行. 导航条压在落地页之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 1472x1080 的构图上，自己没有底色，素材因此从它下面通到两边。加第六条链接之前，先把收起状态设计好。
动效与交互
尊重减少动态效果
动效层自带开关：在 prefers-reduced-motion 下入场动画和循环视频会被去掉。关掉动效后布局完全一样，所以没有东西依赖动画。这份参考在 1472x1080 下收录。
不靠滚动库的环境动效
整个环境层就是一段 6.9s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。片段短到能循环而不露接缝，这比它的分辨率更重要。拍摄或导出按 1472x1080 或更宽的尺寸。
这个落地页怎么重排
这个落地页先按 1472x1080 构图，再为窄屏重排一次。字阶是流体的，而不是阶梯式的、板块高度锁在 100vh、导航收进移动端菜单，所以手机版是一个决定，而不是把宽屏挤小。两种状态写在同一份需求简报里。
这个落地页背后的顺序
营销页面会把证据堆在折叠线以下然后听天由命，这个落地页把导航、标题、公告徽标、数据行、客户标识行直接推到读者面前，其余的先按住不发。 SaaS读者先看到主张，再看到选项。这份参考在 1472x1080 下收录。
这份SaaS需求简报为什么站得住
和模板化的首屏相比，差别在于少了什么：没有卡片栅格、没有轮播、也没有第二个行动号召，只有导航、标题、公告徽标、数据行、客户标识行，按100vh 高的板块、28px 间距定尺寸。它给SaaS读者的是一条通向主张的最短诚实路径。
常见问题
AI Runtime 背后的提示词到底有多长？
简报是从页面上收录下来的，共 9,593 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 AI Runtime 必须用 React 吗？
这份参考恰好是用 React 构建的，但版式里没有一处依赖这个选择：间距、字体和动效数值换到你正在用的工具里照样成立。
AI Runtime 里有多少东西是动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 0.85s 这个区间内使用 cubic-bezier(0.22, 1, 0.36, 1)。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
