关于这个模板
在动手为AI 或 SaaS 产品重建首屏之前，先读 Cybersecurity Hero：构图和它背后的规格书都在这里。配色控制在 #0A0A0F 打底、浅调 #B04090 承担强调色之内，字体用 Inter。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。动效是300ms 的过渡、cubic-bezier(0.4, 0, 0.2, 1)，克制到文案依然是主角。写作时让它开着：能迁移到你页面上的，是那份 11,920 字符的简报。
适合谁
- 把首屏的结构整段借过来，再逐行对着 440px 断点换文案。
- 给AI 或 SaaS 产品首屏换皮的成长团队，想在卖点文案改动时保住 640x472 的画幅。
- 给要改写一版首屏、标题长度又得和Cybersecurity Hero一样的内容负责人用。
包含哪些内容
- 导航收在一行. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #B04090 操作，全部压在需求简报最小的字阶上。440px 以下链接直接收起，而不是折到第二行。
- 靠展示字号说话. 字体是按职责分配的，不是混着用：Inter 同时承担展示文字和界面文字。注释档位小到能待在数字下面，又不改动页面的节奏。
- 基线上的 logo 带. 客户标识沿着下边缘低对比排开，用的是需求简报里最小的字阶，这层背书因此变成首屏上的肌理，永远不跟标题抢。这一行对齐到构图中其他元素共用的那条基线。低对比、小字号、不加标题。这份参考在 640x472 下收录。
- 需求简报点了名. 尺寸是对着 640x472 的渲染量出来的：20px 圆角、12px 间距、300ms 的过渡、cubic-bezier(0.4, 0, 0.2, 1) 缓动曲线。间距和字号用同一套单位写明，两者可以直接比。数值才是设计，其余只是摆放。
动效与交互
全部动画预算
时长短而统一：300ms缓动是 cubic-bezier(0.4, 0, 0.2, 1)悬停态和按下态因此读起来是一套系统，而不是一堆各自为政的效果。聚焦态和悬停态用同一个时长，键盘和指针的反馈因此一致。
交互只落在控件上
只有控件响应指针（悬停态只给按钮和链接，而不是每张卡片），页面因此有反馈感，又没把每个元素都变成点击目标。状态在需求简报里就写明了，页面不依赖任何悬停特效库。这份参考在 640x472 下收录。
这套构图为什么适合SaaS
Cybersecurity Hero 成立，是因为它的层级是被决定出来的，而不是装饰出来的。需求简报定下了20px 圆角、12px 间距、300ms 的过渡、cubic-bezier(0.4, 0, 0.2, 1) 缓动曲线，所以新文案是落进画幅里，而不是把画幅重新打开。 Cybersecurity Hero 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
这个首屏背后的顺序
首屏一次读下来，主张就已经清楚了。导航、公告徽标、数据行、客户标识行、卡片栅格依次出现，靠20px 圆角、12px 间距分隔，而不是靠装饰性分割线。 SaaS读者先看到主张，再看到选项。
Cybersecurity Hero 里什么在动
把这里的动效和一个滚动驱动的页面比：两者都在动，这一版只在需求简报说的位置动（300ms 的过渡、悬停态与按下态），所以文案始终在前面。这个首屏里没有为动而动的动画。
常见问题
Cybersecurity Hero 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 11,920 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Cybersecurity Hero 必须用 React 和 Tailwind CSS 吗？
Cybersecurity Hero 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Cybersecurity Hero 里 300ms 的过渡是怎么动的？
动效和版式写得一样细：状态切换落在 300ms 区间内缓动是 cubic-bezier(0.4, 0, 0.2, 1)。先复刻构图、再对时长，因为版式立住之后时长更好对。
