关于这个模板
Contact Cybernetic 留住了自己的决策链：生成这个首屏的需求简报有 6,423 个字符。“). Inside, display an acknowledgment banner reading” 就是整套版式要承载的那一行。配色是白色 #F1F3F1 打底、深绿色 #1C2E1E 给文字，字体用 Inter。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。动效只限于1s 的过渡。写作时让它开着：能迁移到你页面上的，是那份 6,423 字符的简报。
适合谁
- 要找代理公司提案的创始人，会用 640x458 的画幅当第一轮的验收标准。
- 给按轮次结算、想在第一次修改前就谈定字号从 21px 到 76px、23px 间距的代理公司用。
- 给要改写一版首屏、标题长度又得和Contact Cybernetic一样的内容负责人用。
包含哪些内容
- 链接只在一个断点收起. 一短行链接加一个操作压在首屏上，尺寸按字号从 21px 到 76px、23px 间距控住，导航条因此永远不会跟它背后的构图抢。导航条悬在 640x458 的构图上，自己没有底色，素材因此从它下面通到两边。链接控制在四到五个，这一行的尺寸就是照这个定的。
- 胶囊只装那一件新事. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。一枚徽标，一条信息。
- 能逐项核对的数值. 尺寸是收录时就在需求简报里写下的（字号从 21px 到 76px、23px 间距、1s 的过渡），重建因此可以逐项核对，而不是大约像。清单短到审核的人能一个元素一个元素地核。
- 折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。让它待在标题上方，不要挪到旁边。
动效与交互
只有指针状态，没有别的
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。按下态和悬停态一样写明，轻点一下和点击得到的确认是一样的。几个可靠的状态，胜过一长串特效。这份参考在 640x458 下收录。
短而写明的时长
动画预算小而明确：1s只用在状态变化上，不用在入场动画上。缓动和时长写在一起（1s），复刻时没法悄悄换成另一种手感。
这个首屏怎么重排
流体字阶的代价是对具体尺寸的控制更少。换来的是展示字始终成比例，这也是21px 到 76px 的 clamp会写进需求简报的原因。随视口改变的是尺度，不是顺序。
Contact Cybernetic 怎么安排第一次阅读的顺序
这类页面通常把行动按钮埋在一整片功能栅格下面。这一版把导航、标题、公告徽标、数据行、背景片段放成固定序列，行动点留在首屏里，而不是滚过三屏之后才出现。 SaaS读者先看到主张，再看到选项。这份参考在 640x458 下收录。
这个首屏背后的数字
认定字号从 21px 到 76px、23px 间距、1s 的过渡，是用灵活性换可重复性。这正是这份参考的意义：同一个页面换到另一个品牌上，不用再猜一轮。这个首屏里没有任何一处依赖默认值。
常见问题
Contact Cybernetic 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 6,423 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
能用别的技术栈重建 Contact Cybernetic 的首屏吗？
Contact Cybernetic 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
能保留 Contact Cybernetic 的过渡、只改时长吗？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 1s 这个区间内。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
