关于这个模板
这是 Real-Time Alerts 的登录页，连同生成它的那份需求简报一起发布，而不是只给一张截图。它以“Built for fast-moving teams”开场，给这句话整个版心，而不是把它缩进一张卡片里。配色是中性 #797979 打底、深调 #2F2A27 给文字，字体用 Eloquia。交付形式是一个自包含的 HTML 文件，所以整个登录页可以直接搬进项目，不需要设计交接。这个页面的动效控制在3500ms 的过渡、cubic-bezier(.2.7.3,1)、一段循环视频打底。从收录的需求简报起步，然后改这个登录页，而不是从零重建。下面引用的每一项都是那份简报里的数值，从 1738x1080 的画幅一直到最小的间距档。收录的提示词记录于 1738x1080，所以这一页引用的每个数值都能追回到它。
适合谁
- 接手这版登录页的外包团队，需要在第一次提交之前把 cubic-bezier(.2.7.3,1) 缓动曲线钉进仓库里。
- 这个登录页服务的是那些得向没参加启动会的人解释一个自包含的 HTML 文件的团队。
- 如果你把需求交给模型而不是设计师，就从登录页开始，让提示词兜住 370px 断点。
包含哪些内容
- 数值一路带进构建. 尺寸是写明的，不是继承来的：固定 16px 的标题字号、100vh 高的板块、26px 圆角、10px 间距。换字体或换文案，这些关系依然成立。清单里最小和最大的两个值，划定了这套构图的取值范围。
- 通栏视频，不做面板. 1738x1080 的画幅由一段循环填满，它在文案后面播放，不要任何控件。循环短到 4.9s，眼睛会把它读成肌理，而不是一条时间轴。
- 证据就一行. 数字用 Eloquia 排，字号更靠近标题，而不是更靠近正文。数字和界面共用同一套字体，所以它们属于这个页面，而不是打断它。
- 对着视口量出来的. 尺寸是写明的，不是继承来的：固定 16px 的标题字号、100vh 高的板块、26px 圆角、10px 间距。换字体或换文案，这些关系依然成立。清单里最小和最大的两个值，划定了这套构图的取值范围。看着没道理的那些值，照留。
动效与交互
快到像是刻意安排的
需求简报把过渡值钉在 3500ms，重建时不能换成一个更慢的默认值。写明的时长只覆盖状态变化，反馈正是这套动效里被规格管住的部分。反馈的时间要卡准。
持续的水平运动
一条跑马灯横穿构图、无限循环，用 Eloquia 排，所以即使没有滚动动画的地方，页面也有动感。这条长条是装饰性的，暂停或删掉都不影响布局。
这个登录页背后的顺序
首屏一次读下来，主张就已经清楚了。标题、公告徽标、数据行、卡片栅格、表单依次出现，靠固定 16px 的标题字号、100vh 高的板块分隔，而不是靠装饰性分割线。 SaaS读者先看到主张，再看到选项。
把这个登录页变成你自己的
代价是辨识度。 Real-Time Alerts 的东西留得太多，页面读起来就是别人的；保住数字、换掉内容，它就是你的。该换掉的是题材。这份参考在 1738x1080 下收录。
把 Real-Time Alerts 当规格书读
大多数参考只给你结果、把数字留下。这一份反过来：固定 16px 的标题字号、100vh 高的板块、26px 圆角、10px 间距和页面一起公开，所以结果能被复现，而不是被大致模仿。这个登录页里没有任何一处依赖默认值。
常见问题
重建 Real-Time Alerts 必须用一个自包含的 HTML 文件吗？
Real-Time Alerts 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
拿到 Real-Time Alerts 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 21,771 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Real-Time Alerts 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 1738x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
