关于这个模板
在动手为AI 或 SaaS 产品重建首屏之前，先读 Visual Hero：构图和它背后的规格书都在这里。标题是“Forma's AI understands context, composition, and style like a creative director would”，首屏其余部分都围着它排。字体是 Instrument Serif，字号由简报直接指定，而不是交给一套字阶去推。交付形式是 React 和 Tailwind CSS，收录于 996x720，所以画幅在任何一行代码写下去之前就已经定好。动效是一段循环视频打底，克制到文案依然是主角。写作时让它开着：能迁移到你页面上的，是那份 8,275 字符的简报。下面引用的每一项都是那份简报里的数值，从 996x720 的画幅一直到最小的间距档。
适合谁
- 先从 50px 间距开始，让配色跟着走，因为这版首屏靠的就是间距。
- 这一版首屏服务的是需要一屏证据、证明SaaS的文案能扛住 6.9s 的循环视频的创始人。
- 给要改写一版首屏、标题长度又得和Visual Hero一样的内容负责人用。
包含哪些内容
- 导航条上不留多余. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 996x720 的构图上，自己没有底色，素材因此从它下面通到两边。把这一行控制在单行。
- 能逐项核对的数值. 需求简报钉死 50px 间距，其余交给摆放，这正好和一套会自己长大的比例相反。落回这些数值的重建不用再调就长得像参考。需求简报没写的地方，是故意不写的。
- 一行到底，不做抽屉. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 996x720 的构图上，自己没有底色，素材因此从它下面通到两边。你自己的页面板块更多时，把它们归组，而不是把导航条拉宽。
- 一段片段承担全部. 氛围交给一段 996x720 的 6.9s 片段；需求简报定死了它的裁切方式，文字则原样叠在上面。按 996x720 或更宽的尺寸导出，cover 裁切就继续成立。
动效与交互
只保留一种滚动行为
效果叠在一套已经完成的版式上，而不是由背景层与前景以不同速度移动生成，所以停掉它页面照样读得通。这个效果是装饰性的：关掉它，层级依然成立。这份参考在 996x720 下收录。
不靠滚动库的环境动效
背景片段在 996x720 下以 6.9s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。页面上没有别的东西持续动，所以只有素材在争取注意力。
把 Visual Hero 当规格书读
8,275 个字符的需求简报产出的是一份完整规格。真正承重的部分很短：50px 间距。这个首屏里没有任何一处依赖默认值。
Visual Hero 怎么安排第一次阅读的顺序
严格的顺序会让你以后失去灵活性。在折叠线以上加一个板块，50px 间距就得重新切一遍，因为这条序列是承重的，不是装饰。 SaaS读者先看到主张，再看到选项。
AI 或 SaaS 产品能从这里得到什么
当你给一个SaaS首屏写需求时，最难的是决定首屏拒绝说什么。 Visual Hero 提前回答了这件事：一行展示字，后面跟着导航、公告徽标、数据行、背景片段。 Visual Hero 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。这份参考在 996x720 下收录。
常见问题
Visual Hero 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 996x720 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
重建 Visual Hero 必须用 React 和 Tailwind CSS 吗？
Visual Hero 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Visual Hero 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 996x720 下收录。
