关于这个模板
Equilibrium 是面向AI 或 SaaS 产品的一份可用参考：这套首屏已经排好、量好，可以直接照着复刻。配色是深蓝色 #0F1118 打底、灰调橙色 #CDBAB2 给文字，字体用 Geist。交付形式是 React 和 Tailwind CSS，所以整个首屏可以直接搬进项目，不需要设计交接。当你要做面向AI 或 SaaS 产品的首屏、想要一个成品构图而不是一个起点时，就拿它当参照。
适合谁
- 接手这版首屏的外包团队，需要在第一次提交之前把 640x472 画幅钉进仓库里。
- 需要先看数字的设计师：72px 间距，全部引自需求简报。
- 用提示词给首屏提需求的人，会把这份 4,787 字符的提示词当作起点。
包含哪些内容
- 顶栏只放一个操作. 一条细导航压在首屏上，字标在左，链接用 Geist 排，整套构图因此先读成内容、再读成界面。到了平板断点以下，改由移动端浮层接管。导航条悬在 640x472 的构图上，自己没有底色，素材因此从它下面通到两边。
- 每个尺寸都写下来了. 需求简报钉死 72px 间距，其余交给摆放，这正好和一套会自己长大的比例相反。每个值对应一件事：一个字号档位、一段间距、一个圆角或一次过渡。换字体、换文案可以，别换字阶。
- 一条会主动让开的导航. 一条细导航压在首屏上，字标在左，链接用 Geist 排，整套构图因此先读成内容、再读成界面。到了平板断点以下，改由移动端浮层接管。导航条悬在 640x472 的构图上，自己没有底色，素材因此从它下面通到两边。字标占的位置不超过它那行字需要的宽度。
- 胶囊只装那一件新事. 一枚徽标只说一件事：胶囊用 Geist 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。
动效与交互
交互限制在局部
反馈只限在悬停态只给按钮和链接，而不是每张卡片上，版式其余部分是一套固定的构图。看起来能点的控件就真的能点，不会出现假的暗示。这份参考在 640x472 下收录。
几乎没有动效
这里没有滚动库：640x472 的构图保持不动，只有会回应你的元素在动。只有响应指针的元素会动。不需要滚动时间轴。
这个首屏怎么重排
宽屏下构图是密的，窄屏下导航收进移动端菜单。两种状态需求简报都写了。窄屏下没有丢掉任何重要的东西。这份参考在 640x472 下收录。
把这个首屏变成你自己的
先改文案和素材，再改颜色，最后才动版式。640x472 的画幅和 Geist 的字阶是撑住整页的东西，所以要在它们周围做替换，而不是从它们中间穿过去。该换掉的是题材。
这个首屏背后的顺序
这里没有任何东西跟第一个决定抢位置。支撑素材等在折叠线以下，页面顶部只由导航、公告徽标、数据行、背景片段承担。 SaaS读者先看到主张，再看到选项。这份参考在 640x472 下收录。
常见问题
Equilibrium 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 640x472 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Equilibrium 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Equilibrium 里有多少东西是动的？
动效和版式写得一样细：状态切换落在不足一秒区间内。先复刻构图、再对时长，因为版式立住之后时长更好对。这份参考在 640x472 下收录。
