关于这个模板
Aurelion Blog 交给了AI 或 SaaS 产品一个已经做完的首屏，以及做出它的那组数字。整页都建立在白色 #F3F4F4 打底、黑色 #1A1A1A 给文字、黄色 #F3DE58 承担强调色之上。交付形式是 React 和 Tailwind CSS，所以整个博客区可以直接搬进项目，不需要设计交接。动作被收进700ms 的过渡、一段循环视频打底里。当这个博客区需要在新增任何板块之前先定下顺序时，就拿它来用。需求简报钉住的一切（画幅、字号、时长、断点）下面都写出来了，所以你可以照着复刻这个博客区，不用猜它背后的意图。这一页剩下的部分按板块、再按时序和数值把这个博客区拆开，不加任何简报里没有的说法。下面引用的每一项都是那份简报里的数值，从 1400x1080 的画幅一直到最小的间距档。
适合谁
- 这一版博客区服务的是需要一屏证据、证明SaaS的文案能扛住 6.5s 的循环视频的创始人。
- 同时跑好几个项目的工作室负责人，会把这一版博客区当作其他页面照抄的样板。
- 给需要把博客区的范围收进一个迭代、并且不新增任何素材的产品经理用。
包含哪些内容
- 导航是刻意做细的. 顶栏装下字标、四到五个链接和一个染成 #F3DE58 的操作，字号压得很低，不跟页面其他地方抢。链接比字标小一档，#F3DE58 操作是导航条上唯一有分量的元素。
- 每个尺寸都写下来了. 这份清单很短（30px 间距、700ms 的过渡），整套系统因此能靠手一个个核过去。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。换题材，别换档位。
- 视频压在最底层. 需求简报把视频定在 1400x1080、循环 6.5s，每个文字元素都是对着这个画幅摆的。循环短到 6.5s，眼睛会把它读成肌理，而不是一条时间轴。
- 只有一个声音的配色. 配色就是一个底色加一个信号（白色 #F3F4F4 和黄色 #F3DE58），第二个颜色专留给操作。其余一切都落在白色 #F3F4F4 上，高饱和配色才保得住可读性。如果再出现第二个颜色，它必须承载信息。
动效与交互
不靠滚动库的环境动效
环境动感来自 1400x1080 的 6.5s 循环，而不是滚动特效，页面因此保持平静，文字也更好读。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。
只有指针状态，没有别的
每个可交互元素只做一件事（悬停态只给按钮和链接，而不是每张卡片、按需翻页浏览内容的滑块组件），状态才因此可预期。状态用的是页面自己的配色，而不是组件库的默认值。这份参考在 1400x1080 下收录。
Aurelion Blog 里什么在动
时序是明写的：700ms 的过渡、6.5s 的循环视频、逐词出现的标题，全部写进需求简报，而不是靠手感调。这个博客区里没有为动而动的动画。
把这个博客区变成你自己的
模板要求你接受它的版式，这份参考要求你保住版式、把里面的东西全换掉。区别在于：题材在动，30px 间距、700ms 的过渡不动。保住素材的裁切；它和字体承担的工作一样多。
这个博客区怎么重排
需求简报写明了每个宽度下变什么（字阶是流体的，而不是阶梯式的），也就是说移动端是一个决定，而不是把桌面端挤小。对比度靠素材之上的 #F3DE58 强调色守住，视频静音且行内播放。两种状态写在同一份需求简报里。
常见问题
Aurelion Blog 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 5,024 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Aurelion Blog 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 1400x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Aurelion Blog 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
