关于这个模板
Bloom AI 展示了为AI 或 SaaS 产品做首屏的一种做法，并把生成它的说明一起公开。标题是“Innovating the spirit of bloom AI”，首屏其余部分都围着它排。配色控制在深蓝色 #030E1A 打底、灰调绿色 #AAD9C3 给文字、绿色 #2E5648 承担强调色之内，字体用 Poppins。实现用的是 React、Lucide icons；里面的每个尺寸都写了下来，这正是它可复用的原因。写作时让它开着：能迁移到你页面上的，是那份 3,900 字符的简报。收录的提示词记录于 800x564，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 800x564 的画幅一直到最小的间距档。
适合谁
- 如果这个首屏有三个人要改，就给内容负责人 50px 间距，而不是一张截图。
- 给要改写一版首屏、标题长度又得和Bloom AI一样的内容负责人用。
- 这个首屏面向的是已经熟悉 React、Lucide icons、只差把绿色 #2E5648强调色写下来的团队。
包含哪些内容
- 导航收在一行. 导航条上只有字标、板块链接和一个 #2E5648 按钮，尺寸按 50px 间距定，永远不会长成第二个页头。链接比字标小一档，#2E5648 操作是导航条上唯一有分量的元素。
- 一套字，克制着用. 气质来自需求简报里的字号档位和字距：Poppins 用收紧的展示字号，然后干净地掉到支撑句。换字体是可行的，但比例必须扛得住这次替换。没有职责的字号不要加。
- 间距档位是写明的. 这些值就是规格本身：50px 间距，是在 800x564 下收录的，而不是从截图里反推的。清单短到审核的人能一个元素一个元素地核。
- 折叠线之上的徽标. 公告就是标题上方那枚 #2E5648 胶囊，字号压得比支撑文案还小，所以它读起来是标签，不是第二个标题。徽标用 #2E5648，而标题留在正文色上。
动效与交互
交互层就是这些控件
交互层是刻意做小的：悬停态只给按钮和链接，而不是每张卡片。交互状态不会推动版式，指针底下不会有东西跳。悬停时不要给版式加动画。这份参考在 800x564 下收录。
不挡路的动效
需求简报里没有动画，页面靠 800x564 的版式撑住，唯一的变化是悬停态和按下态。需求简报里没有动画库，复刻的工作量因此很小。动效只留在控件上。
Bloom AI 里什么在动
野心太大的动效通常会让首屏失去可读性。这份简报把悬停态与按下态控制得足够短，文字从来不用等它。这个首屏里没有为动而动的动画。这份参考在 800x564 下收录。
AI 或 SaaS 产品能从这里得到什么
数一数这个首屏里的决定，它们都能追回到同一份文件：3,900 个字符，写明了 800x564 的画幅、字体和节奏。它给SaaS读者的是一条通向主张的最短诚实路径。
Bloom AI 怎么安排第一次阅读的顺序
把这一页的顶部和一个典型的SaaS落地页首屏放在一起比：两边都有标题和行动点，但这里的导航、公告徽标、数据行、卡片栅格、背景片段是固定排序的，而不是用同样的权重互相抢。 SaaS读者先看到主张，再看到选项。这份参考在 800x564 下收录。
常见问题
复制 Bloom AI 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 800x564 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Bloom AI 有多少地方依赖 React、Lucide icons？
这份参考恰好是用 React、Lucide icons 构建的，但版式里没有一处依赖这个选择：间距、字体和动效数值换到你正在用的工具里照样成立。
Bloom AI 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x564 下收录。
