关于这个模板
Aetheris Voyage 是面向旅行品牌的一份可用参考：这套首屏已经排好、量好，可以直接照着复刻。页面自己的标题是“Venture Past Our Sky Across the Universe”，整个构图就是围绕这串字搭的。颜色只用了黑色 #181719 打底、灰调橙色 #ECD9C1 给文字，正文排的是 Instrument Serif。交付形式是 React 和 Tailwind CSS，收录于 800x570，所以画幅在任何一行代码写下去之前就已经定好。需求简报把动效预算花在100ms 的过渡、一段循环视频打底上。把它当作面向旅行品牌做首屏的需求简报：它要经得起复刻，而不只是第一眼好看。收录的提示词记录于 800x570，所以这一页引用的每个数值都能追回到它。
适合谁
- 产品市场的人需要首屏在背后有8.8s 的循环视频时依然好读。
- 用提示词给首屏提需求的人，会把这份 10,190 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Aetheris Voyage一样的内容负责人用。
包含哪些内容
- 导航条落在页面栅格上. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x570 的构图上，自己没有底色，素材因此从它下面通到两边。
- 字和画幅共用一套档位. 字体和间距在这里共用同一份清单：10px 间距、100ms 的过渡。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。
- 顶栏：字标、链接、一个操作. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x570 的构图上，自己没有底色，素材因此从它下面通到两边。一条导航只放一个操作。
- 一段片段承担全部. 800x570 的画幅由一段循环填满，它在文案后面播放，不要任何控件。循环短到 8.8s，眼睛会把它读成肌理，而不是一条时间轴。
动效与交互
滚动驱动构图
滚动揭示是页面上唯一一种滚动行为，这个效果在构图里有明确的位置。它只是几行代码，不是一个滚动库，复刻因此很轻。这份参考在 800x570 下收录。
不靠滚动库的环境动效
环境动感来自 800x570 的 8.8s 循环，而不是滚动特效，页面因此保持平静，文字也更好读。页面上没有别的东西持续动，所以只有素材在争取注意力。
Aetheris Voyage 怎么安排第一次阅读的顺序
旅行读者落到一屏内容上时，是先扫再读的。这套版式回应了这一点：导航、标题、公告徽标、数据行、卡片栅格的尺寸就是为扫读定的，10px 间距、100ms 的过渡让每一站彼此分明。旅行读者先看到主张，再看到选项。
这个首屏怎么重排
窄屏不是把它整体缩小就能解决的。这份简报把变化交给字体和导航处理：字阶是流体的，而不是阶梯式的。控件大到能点，文案在任何宽度下都保持同样的阅读顺序。这份参考在 800x570 下收录。
把这个首屏变成你自己的
模板要求你接受它的版式，这份参考要求你保住版式、把里面的东西全换掉。区别在于：题材在动，10px 间距、100ms 的过渡不动。你的强调色要过和参考强调色同样的对比度测试。
常见问题
Aetheris Voyage 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 800x570 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Aetheris Voyage 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
用 Aetheris Voyage 重建的页面，可以不署名就上线吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x570 下收录。
