关于这个模板
Aesthetic Onboarding 留住了自己的决策链：生成这个登录页的需求简报有 3,133 个字符。页面自己的标题是“Welcome back”，整个构图就是围绕这串字搭的。配色是亮橙色 #F09819 打底、深蓝色 #0C0C0E 给文字、亮青绿色 #00C6FF 承担强调色。交付形式是 React 和 Tailwind CSS，收录于 1894x1378，所以画幅在任何一行代码写下去之前就已经定好。动效只限于一段循环视频打底。当AI 与 SaaS的登录页必须扛住一次文案改动、又不能重做设计时，它最有用。下面引用的每一项都是那份简报里的数值，从 1894x1378 的画幅一直到最小的间距档。收录的提示词记录于 1894x1378，所以这一页引用的每个数值都能追回到它。
适合谁
- 接手这版登录页的市场人员，会用 80px 间距检查改稿有没有保住原来的尺度。
- 这一版登录页服务的是需要一屏证据、证明SaaS的文案能扛住 5.4s 的循环视频的创始人。
- 给正在做AI 或 SaaS 产品登录页、背后还没有设计系统的独立创始人用。
包含哪些内容
- 尺寸钉在需求简报里. 版式是对着一组固定值（80px 间距）解出来的，首屏在任何宽度下因此都保持成构图。因为数值是固定的，替换只改样子，不改节奏。看着没道理的那些值，照留。
- 通栏视频，不做面板. 1894x1378 的画幅由一段循环填满，它在文案后面播放，不要任何控件。按 1894x1378 或更宽的尺寸导出，cover 裁切就继续成立。
- 该放证据的地方放数字. 统计数字是当字体来处理的：数字用展示字号，标签用需求简报里最小的字阶，颜色只走 #00C6FF 或正文色，而不是找一张彩色卡片垫着。数字带 #00C6FF 强调色，周围一切都留在正文色上。别给数字加框。
- 只有一个声音的配色. 不是 #00C6FF 的一切都落在亮橙色 #F09819 上，强调色因此读成信号，而不是装饰。其余一切都落在亮橙色 #F09819 上，高饱和配色才保得住可读性。底色保持安静。
动效与交互
不靠滚动库的环境动效
背景片段在 1894x1378 下以 5.4s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。片段短到能循环而不露接缝，这比它的分辨率更重要。拍摄或导出按 1894x1378 或更宽的尺寸。
交互区域刻意做小
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。每个状态只改一个属性，反馈因此保持清楚。如果一个状态不能确认某个操作，就删掉。这份参考在 1894x1378 下收录。
这个登录页背后的顺序
“Welcome back”从第一帧起就在做这件事。注意力是被引导的，而不是散开的：视线先落在主标题那一行，然后是支撑文案，最后是行动。需要社会证明时，它是一条长条或一行，而不是一整面客户评价墙。这个顺序就是设计本身。 SaaS读者先看到主张，再看到选项。
这个登录页怎么重排
流体字阶的代价是对具体尺寸的控制更少。换来的是展示字始终成比例，这也是10px 到 80px 的 clamp会写进需求简报的原因。扛过重排的是层级。
这套构图为什么适合SaaS
大多数SaaS页面在首屏不够有力时选择再加一个板块。这一版反过来做减法：标题、数据行、卡片栅格、背景片段、页脚，就按这个顺序，没有任何重复主张的东西。 Aesthetic Onboarding 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。这份参考在 1894x1378 下收录。
常见问题
Aesthetic Onboarding 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 1894x1378 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能用别的技术栈重建 Aesthetic Onboarding 的登录页吗？
Aesthetic Onboarding 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
在客户项目里该怎么处理 Aesthetic Onboarding 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1894x1378 下收录。
