关于这个模板
Intelligent Performance 展示了为AI 或 SaaS 产品做落地页的一种做法，并把生成它的说明一起公开。它以“Built for Intelligent Performance”开场，给这句话整个版心，而不是把它缩进一张卡片里。颜色只用了中性 #ECECEB 打底、#222222 给文字、红色 #FF6796 承担强调色，正文排的是 Inter。交付形式是一个自包含的 HTML 文件，收录于 1920x1418，所以画幅在任何一行代码写下去之前就已经定好。动效预算就是08s 的过渡、cubic-bezier(.16,1.3,1)、一段循环视频打底。写作时让它开着：能迁移到你页面上的，是那份 26,839 字符的简报。收录的提示词记录于 1920x1418，所以这一页引用的每个数值都能追回到它。
适合谁
- 如果这份参考只是个起点，设计师可以留着 cubic-bezier(.16,1.3,1) 缓动曲线，把落地页其余部分重建。
- 这个落地页面向的是已经熟悉一个自包含的 HTML 文件、只差把一个自包含的 HTML 文件写下来的团队。
- 在用 AI 建站工具的人，希望简报里已经写好了 767px 断点，而不是交给模型自己发挥。
包含哪些内容
- 一条会主动让开的导航. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #FF6796 操作，全部悬在落地页之上，自己没有底色。767px 以下链接直接收起，而不是折到第二行。
- 通栏视频，不做面板. 背景就是一段 1920x1418 的 3.5s 循环，按 cover 裁切、不加任何色罩。其余一切都浮在它上面的一层。循环短到 3.5s，眼睛会把它读成肌理，而不是一条时间轴。
- 要面板，不要段落. 栅格替你把阅读顺序排好了：每块面板分量相同、各讲一个观点，用 Inter 的小字号排，结构始终看得见。每块面板内部排法一致，栅格因此能按形状扫。阅读顺序就按面板顺序来。
- 每种宽度都有明确行为. 字阶顶部是流体的（16px 到 14px 的 clamp），其余档位固定，视口收窄时画幅依然保持成构图。因为字阶是钳制过的，标题行在断点之间从来不会跳变。
动效与交互
入场动作即签名
入场动效只集中在一个元素上：每一行从裁切窗口里升起。页面加载时，其他东西都已经就位。结束时的状态就是一张静帧该有的构图，所以没有东西依赖动画跑完。这份参考在 1920x1418 下收录。
短而互相匹配的时长
悬停、按下和聚焦都在 08s 内完成，界面因此显得即时。缓动和时长写在一起（08s），复刻时没法悄悄换成另一种手感。
Intelligent Performance 怎么安排第一次阅读的顺序
把你自己的文案放进这个落地页，顺序依然成立，因为这些元素不能互换：导航、标题、数据行、卡片栅格、功能列表各自只负责一件事。 SaaS读者先看到主张，再看到选项。这份参考在 1920x1418 下收录。
这个落地页怎么重排
固定一套桌面端字阶会更省事。需求简报加了16px 到 14px 的 clamp，正是它让展示字在各个宽度之间保持比例。两种状态写在同一份需求简报里。
Intelligent Performance 里什么在动
页面让人坐不住，通常是因为入场太多。这一版把清单压得很短：08s 的过渡、3.5s 的循环视频、遮罩式逐行揭示。这个落地页里没有为动而动的动画。
常见问题
重建 Intelligent Performance 必须用一个自包含的 HTML 文件吗？
Intelligent Performance 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
复制 Intelligent Performance 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 1920x1418 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Intelligent Performance 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1920x1418 下收录。
