关于这个模板
Agent Grove 是面向AI 或 SaaS 产品的落地页参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。配色控制在黑色 #2B2B2B 打底之内，字体用 Geist。交付形式是 React 和 Tailwind CSS，收录于 1484x1080，所以画幅在任何一行代码写下去之前就已经定好。动效预算就是300ms 的过渡、cubic-bezier(0.16,1,0.3,1)、一段循环视频打底。对于需要在第一屏就显得刻意的AI 或 SaaS 产品落地页，它是一份合适的参考。收录的提示词记录于 1484x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1484x1080 的画幅一直到最小的间距档。
适合谁
- 产品市场的人需要落地页在背后有5.4s 的循环视频时依然好读。
- 用提示词给落地页提需求的人，会把这份 7,959 字符的提示词当作起点。
- 给要改写一版落地页、标题长度又得和Agent Grove一样的内容负责人用。
包含哪些内容
- 一条会主动让开的导航. 导航条压在落地页之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 1484x1080 的构图上，自己没有底色，素材因此从它下面通到两边。
- 对着视口量出来的. 版式里没有一样交给感觉：需求简报写明了 24px 间距、300ms 的过渡、cubic-bezier(0.16,1,0.3,1) 缓动曲线，构建必须落回这些值。清单里最小和最大的两个值，划定了这套构图的取值范围。
- 折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Geist 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。一枚徽标，一条信息。
- 顶栏只放一个操作. 导航条压在落地页之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 1484x1080 的构图上，自己没有底色，素材因此从它下面通到两边。这条导航只有几个元素，不用组件库也能重建。
动效与交互
短而互相匹配的时长
时长短而统一：300ms缓动是 cubic-bezier(0.16,1,0.3,1)悬停态和按下态因此读起来是一套系统，而不是一堆各自为政的效果。反馈要读成一次回应而不是一段动画，靠的就是这组短时长。反馈的时间要卡准。
环境动效交给循环
整个环境层就是一段 5.4s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。拍摄或导出按 1484x1080 或更宽的尺寸。
Agent Grove 怎么安排第一次阅读的顺序
代价是要读者有耐心：可扫读的栅格会立刻交出的细节，这一页先扣着。换来的是一个导航、标题、公告徽标、数据行、卡片栅格不会被误读的首屏。 SaaS读者先看到主张，再看到选项。这份参考在 1484x1080 下收录。
这个落地页背后的数字
具体数字会过时：适合 1484x1080 的值不一定适合你的画幅。需求简报还是写明了24px 间距、300ms 的过渡，因为写出来的值比没写出来的值好改。这个落地页里没有任何一处依赖默认值。
这个落地页背后的时序
动效是一张短清单，不是一套系统。需求简报点名了300ms 的过渡、5.4s 的循环视频、悬停态与按下态，页面其余部分都不动。这个落地页里没有为动而动的动画。
常见问题
复制 Agent Grove 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 7,959 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Agent Grove 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Agent Grove 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1484x1080 下收录。
