关于这个模板
Alertix 是面向AI 或 SaaS 产品的首屏参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。它以“Stay Ahead With *Cutting-Edge*”开场，给这句话整个版心，而不是把它缩进一张卡片里。整页都建立在深蓝色 #0A0F14 打底、灰调青绿色 #C3DFE8 给文字、蓝色 #1D1D6D 承担强调色之上。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。需求简报把动效预算花在一段循环视频打底上。把它当作面向AI 或 SaaS 产品做首屏的需求简报：它要经得起复刻，而不只是第一眼好看。下面引用的每一项都是那份简报里的数值，从 1932x1400 的画幅一直到最小的间距档。
适合谁
- 在这版首屏上继续加块的内部小组，需要把 120px 间距原样带进新块里。
- 产品市场的人需要首屏在背后有7.9s 的循环视频时依然好读。
- 给要改写一版首屏、标题长度又得和Alertix一样的内容负责人用。
包含哪些内容
- 导航不带底色. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #1D1D6D 操作，全部压在需求简报最小的字阶上。链接比字标小一档，#1D1D6D 操作是导航条上唯一有分量的元素。
- 数值一路带进构建. 版式走的是绝对值，不是比例：120px 间距。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 通栏视频垫在文字后面. 一段静音循环视频按 1932x1400、7.9s 铺满画幅，以 cover 裁切，文案叠在它上面。需求简报不允许在视频上压叠加层，所以画面不会被压灰。自动播放不可用时，1932x1400 的封面帧撑住构图，版式不会塌。按 1932x1400 或更宽的尺寸导出，裁切才不失真。
- 量出来的，不是估的. 版式走的是绝对值，不是比例：120px 间距。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。需求简报没写的地方，是故意不写的。
动效与交互
是循环，不是时间轴
环境动感是一段 1932x1400 下的 7.9s 片段，在文案后面安静循环，不响应指针。页面上没有别的东西持续动，所以只有素材在争取注意力。
交互限制在局部
页面只在能被操作的地方给出回应：悬停态只给按钮和链接，而不是每张卡片，除此之外什么都不动。状态很简单，因此能直接搬进任何组件体系。这份参考在 1932x1400 下收录。
把这个首屏变成你自己的
直接替换是有上限的：如果你的产品需要另一套层级，120px 间距会跟你作对。这种情况先改顺序，再改数值。保住素材的裁切；它和字体承担的工作一样多。
这个首屏怎么重排
和把板块藏起来的移动端版式比，这一版把板块留住、只改它们的形状：导航收进移动端菜单。宽度改变的是测量值，不是阅读路径。这份参考在 1932x1400 下收录。
Alertix 怎么安排第一次阅读的顺序
请按顺序读这一页：导航、背景片段。这里的每一个元素在版面上都只负责一件事，蓝色 #1D1D6D强调色只花在读者本该去按的那一个元素上，其余任何一个地方都不会分给它一点。 SaaS读者先看到主张，再看到选项。
常见问题
Alertix 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 3,245 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
复制 Alertix 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 1932x1400 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Alertix 有多少地方依赖 React 和 Tailwind CSS？
Alertix 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
