关于这个模板
在动手为AI 或 SaaS 产品重建首屏之前，先读 Zyphor：构图和它背后的规格书都在这里。“Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive” 就是整套版式要承载的那一行。颜色只用了深蓝色 #0B0C10 打底，正文排的是 Inter。交付形式是 React 和 Tailwind CSS，收录于 1930x1400，所以画幅在任何一行代码写下去之前就已经定好。动效归结起来就是一段循环视频打底。对于需要在第一屏就显得刻意的AI 或 SaaS 产品首屏，它是一份合适的参考。下面引用的每一项都是那份简报里的数值，从 1930x1400 的画幅一直到最小的间距档。
适合谁
- 在这版首屏上继续加块的内部小组，需要把 20px 间距原样带进新块里。
- 产品市场的人需要首屏在背后有7.2s 的循环视频时依然好读。
- 给要改写一版首屏、标题长度又得和Zyphor一样的内容负责人用。
包含哪些内容
- 链接只在一个断点收起. 导航只有一行，下面没有二级。到了平板断点以下，改由移动端浮层接管。导航条悬在 1930x1400 的构图上，自己没有底色，素材因此从它下面通到两边。加底色之前，先把自己的素材垫在导航条下面测一遍。
- 尺寸写在需求简报里，不在一套比例里. 这里没有一样东西是靠眼睛估的。规格钉死了 20px 间距，剩下的版式都从这些值推导出来。清单里最小和最大的两个值，划定了这套构图的取值范围。
- 字阶就是样式系统. 这里字体就是那套样式系统：Inter 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。只要字号和字重留在需求简报放的位置，换字体就是安全的。一套职责清楚的字，好过两套互相打架的字。
- 一行到底，不做抽屉. 导航只有一行，下面没有二级。到了平板断点以下，改由移动端浮层接管。导航条悬在 1930x1400 的构图上，自己没有底色，素材因此从它下面通到两边。这条导航只有几个元素，不用组件库也能重建。
动效与交互
只有指针状态，没有别的
只有控件响应指针（悬停态只给按钮和链接，而不是每张卡片），页面因此有反馈感，又没把每个元素都变成点击目标。状态很简单，因此能直接搬进任何组件体系。这份参考在 1930x1400 下收录。
入场动作即签名
标题不是整块淡入：标题逐词出现。这正是它和静帧的区别，因为叙事是由文字出现的顺序完成的。它只是几个过渡，而不是一整个动画库，所以迁移成本很低。只留一个元素，再多页面就开始表演了。这份参考在 1930x1400 下收录。
把 Zyphor 当规格书读
这份参考之所以能反复使用，原因就在这里：20px 间距。页面里没有任何一处交给默认值，所以替换之后只要保住这些数字，整套构图就跟着保住了。这个首屏里没有任何一处依赖默认值。
这个首屏怎么重排
这里的响应式指的是尺度变、顺序不变。导航收进移动端菜单，阅读顺序还留在需求简报放的位置上。窄屏版式是一个决定，而不是把宽屏挤小，层级在窄屏上依然成立。这份参考在 1930x1400 下收录。
Zyphor 怎么安排第一次阅读的顺序
一屏、一个行动，中间是导航、背景片段。需求简报把这个顺序钉死，而不是把首屏交给一摞板块自己决定。 SaaS读者先看到主张，再看到选项。这份参考在 1930x1400 下收录。
常见问题
Zyphor 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 3,562 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
拿到 Zyphor 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 3,562 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
重建 Zyphor 必须用 React 和 Tailwind CSS 吗？
Zyphor 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
