关于这个模板
在动手为AI 或 SaaS 产品重建首屏之前，先读 Organic Odyssey：构图和它背后的规格书都在这里。它以“An odyssey through delicate living forms”开场，给这句话整个版心，而不是把它缩进一张卡片里。颜色只用了黑色 #000000 打底，正文排的是 Geist。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。动效归结起来就是300ms 的过渡。写作时让它开着：能迁移到你页面上的，是那份 4,802 字符的简报。
适合谁
- 给AI 或 SaaS 产品首屏换皮的成长团队，想在卖点文案改动时保住 640x470 的画幅。
- 给要改写一版首屏、标题长度又得和Organic Odyssey一样的内容负责人用。
- 整套构图服务的是会换掉标题、需要 Geist 的各字重维持同一节奏的内容团队。
包含哪些内容
- 导航条落在页面栅格上. 一条细导航压在首屏上，字标在左，链接用 Geist 排，整套构图因此先读成内容、再读成界面。到了平板断点以下，改由移动端浮层接管。导航条悬在 640x470 的构图上，自己没有底色，素材因此从它下面通到两边。
- 量出来的，不是估的. 这里没有一样东西是靠眼睛估的。规格钉死了 20px 间距、300ms 的过渡，剩下的版式都从这些值推导出来。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。搬运页面时保留这些写明的数值。
- 链接只在一个断点收起. 一条细导航压在首屏上，字标在左，链接用 Geist 排，整套构图因此先读成内容、再读成界面。到了平板断点以下，改由移动端浮层接管。导航条悬在 640x470 的构图上，自己没有底色，素材因此从它下面通到两边。链接控制在四到五个，这一行的尺寸就是照这个定的。
- 一套字一个职责. 这里字体就是那套样式系统：Geist 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。字重按角色分配，层级在搭建时就不用靠猜。
动效与交互
揭示就是记忆点
第一帧是刻意不完整的：按字符逐个计时，而不是整块淡入，而构图的其他部分已经就位。入场只作用在点名的那些元素上，版式其余部分从不动。这份参考在 640x470 下收录。
状态变化也有时长
状态变化的时长写明为 300ms，所以控件上的反馈是一个设计过的值，不是浏览器默认值。缓动一改，时长必须跟着重新看一遍。把你手上的实现对齐这些时长。
这个首屏怎么重排
和把板块藏起来的移动端版式比，这一版把板块留住、只改它们的形状：导航收进移动端菜单。直接挤小更省事，但撑不住。这份参考在 640x470 下收录。
这个首屏背后的顺序
功能导向的版式在罗列产品能做什么，这一版把读者带向一个决定。这条路径看得见：就在导航、标题、数据行、背景片段里，也在20px 间距、300ms 的过渡给它们的间距里。 SaaS读者先看到主张，再看到选项。
把 Organic Odyssey 当规格书读
第一个数字是字体：20px 间距、300ms 的过渡。间距由它推出来，页面上其他一切都在和这两个值对齐。这个首屏里没有任何一处依赖默认值。
常见问题
Organic Odyssey 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 4,802 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
能用别的技术栈重建 Organic Odyssey 的首屏吗？
Organic Odyssey 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Organic Odyssey 里 300ms 的过渡是怎么动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 300ms 这个区间内。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
