关于这个模板
在动手为AI 或 SaaS 产品重建首屏之前，先读 Infrastructure：构图和它背后的规格书都在这里。“Ready to elevate your digital infrastructure?” 就是整套版式要承载的那一行。配色是深靛蓝色 #010002 打底、白色 #DAD6DB 给文字、蓝色 #0F2F65 承担强调色。交付形式是 React 和 Tailwind CSS，收录于 2076x1498，所以画幅在任何一行代码写下去之前就已经定好。动效预算就是4s 的过渡、一段循环视频打底。写作时让它开着：能迁移到你页面上的，是那份 2,467 字符的简报。收录的提示词记录于 2076x1498，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 2076x1498 的画幅一直到最小的间距档。
适合谁
- 产品市场的人需要首屏在背后有8s 的循环视频时依然好读。
- 给要改写一版首屏、标题长度又得和Infrastructure一样的内容负责人用。
- 如果你的品牌只有两个颜色，市场团队该决定哪一个占 #0F2F65 的位置、哪一个占 #010002 的位置。
包含哪些内容
- 导航收在一行. 字标、链接和 #0F2F65 操作共用一条基线，细导航条才不会被看成随手排的。链接比字标小一档，#0F2F65 操作是导航条上唯一有分量的元素。
- 对着视口量出来的. 版式走的是绝对值，不是比例：10px 间距、4s 的过渡。间距和字号用同一套单位写明，两者可以直接比。
- 素材垫在文字后面. 背景就是一段 2076x1498 的 8s 循环，按 cover 裁切、不加任何色罩。其余一切都浮在它上面的一层。自动播放不可用时，2076x1498 的封面帧撑住构图，版式不会塌。
- 能逐项核对的数值. 版式走的是绝对值，不是比例：10px 间距、4s 的过渡。间距和字号用同一套单位写明，两者可以直接比。数值才是设计，其余只是摆放。
动效与交互
短而互相匹配的时长
需求简报把过渡值钉在 4s，重建时不能换成一个更慢的默认值。缓动和时长写在一起（4s），复刻时没法悄悄换成另一种手感。
是循环，不是时间轴
环境动感是一段 2076x1498 下的 8s 片段，在文案后面安静循环，不响应指针。片段静音且行内播放，所以第一帧不需要任何交互就能看到。
这个首屏怎么重排
没有一套单独的移动端设计要维护。字阶是流体的，而不是阶梯式的，同一套层级贯穿到底。重排之后，任何宽度下行动点都够得着。这份参考在 2076x1498 下收录。
在 Infrastructure 里先改什么
把新文案按需求简报写明的展示字号排（10px 间距、4s 的过渡），剩下的字阶会自己跟上，不用重做设计。画幅和字阶都保留，该换的是题材。
把 Infrastructure 当规格书读
复刻走样时，最先崩的是间距。 Infrastructure 把10px 间距、4s 的过渡和构图一起公开，就是为了避开这一点。这个首屏里没有任何一处依赖默认值。
常见问题
Infrastructure 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 2076x1498 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Infrastructure 有多少地方依赖 React 和 Tailwind CSS？
Infrastructure 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
在客户项目里该怎么处理 Infrastructure 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 2076x1498 下收录。
