关于这个模板
这是 Scalable 的首屏，连同生成它的那份需求简报一起发布，而不是只给一张截图。“New Feature: Zapier Integration” 就是整套版式要承载的那一行。配色是深靛蓝色 #2B1F36 打底。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。动效预算就是一段循环视频打底。这份参考是给这样的AI 或 SaaS 产品用的：希望首屏在动手构建之前就已经定下来。下面引用的每一项都是那份简报里的数值，从 1920x1592 的画幅一直到最小的间距档。收录的提示词记录于 1920x1592，所以这一页引用的每个数值都能追回到它。
适合谁
- 这一版首屏服务的是需要一屏证据、证明SaaS的文案能扛住 10.5s 的循环视频的创始人。
- 用提示词给首屏提需求的人，会把这份 8,462 字符的提示词当作起点。
- 在前端用 React 和 Tailwind CSS 复刻这一页的开发者，希望过渡是被写明的，而不是靠猜。
包含哪些内容
- 导航是刻意做细的. 导航只有一行，下面没有二级。导航条悬在 1920x1592 的构图上，自己没有底色，素材因此从它下面通到两边。
- 导航条落在页面栅格上. 导航只有一行，下面没有二级。导航条悬在 1920x1592 的构图上，自己没有底色，素材因此从它下面通到两边。你自己的页面板块更多时，把它们归组，而不是把导航条拉宽。
- 循环就是背景板. 首屏就是一段 1920x1592 的视频，其余一切都排在它上面。自动播放不可用时，1920x1592 的封面帧撑住构图，版式不会塌。
- 折叠线之上的徽标. 一条公告由标题上方的一枚胶囊承担，没有别的元素来抢这个位置。它的位置让标题继续占住构图的正中。一枚徽标，一条信息。这份参考在 1920x1592 下收录。
动效与交互
环境动效交给循环
环境动感来自 1920x1592 的 10.5s 循环，而不是滚动特效，页面因此保持平静，文字也更好读。自动播放被拦截时有首帧封面顶上，所以动效是加分项，而不是必需品。
交互层就是这些控件
交互层很小，也很好预期：内容在下方移动时保持原位的吸顶元素、在原位切换内容的标签页或手风琴。其他部分都不动，重心因此留在构图上。按下态和悬停态一样写明，轻点一下和点击得到的确认是一样的。这份参考在 1920x1592 下收录。
把这个首屏变成你自己的
可复用的是构图，题材归你。保住1920x1592 画幅，把文字、素材和品牌标识换掉。在碰颜色之前，先重写那行展示字。
Scalable 怎么安排第一次阅读的顺序
功能导向的版式在罗列产品能做什么，这一版把读者带向一个决定。这条路径看得见：就在导航、标题、公告徽标、数据行、卡片栅格里，也在1920x1592 画幅给它们的间距里。 SaaS读者先看到主张，再看到选项。
Scalable 里什么在动
代价是：这里没有任何东西的动画值得你回头看第二眼。值得看的是阅读顺序，吸顶元素、10.5s 的循环视频只用来确认状态，不做装饰。这个首屏里没有为动而动的动画。
常见问题
Scalable 的设计是从哪来的？
这份参考收录自 sceneai.art，素材归他们所有。用你自己的文案、图像和配色重建构图，任何取自该站的元素在上线前都要先核对来源站条款。
Scalable 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 8,462 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Scalable 必须用 React 和 Tailwind CSS 吗？
这份参考恰好是用 React 和 Tailwind CSS 构建的，但版式里没有一处依赖这个选择：间距、字体和动效数值换到你正在用的工具里照样成立。
