关于这个模板
Sentinel AI 用一份收录下来的需求简报，解决了面向AI 或 SaaS 产品做首屏时的问题。它以“We implement security correctly”开场，给这句话整个版心，而不是把它缩进一张卡片里。颜色只用了黑色 #000000 打底、灰调绿色 #8EB992 承担强调色，正文排的是 Sora。交付形式是 React 和 Tailwind CSS，收录于 800x594，所以画幅在任何一行代码写下去之前就已经定好。动作被收进0.7s 的过渡、cubic-bezier(0.16, 1, 0.3, 1)里。写作时让它开着：能迁移到你页面上的，是那份 5,940 字符的简报。收录的提示词记录于 800x594，所以这一页引用的每个数值都能追回到它。
适合谁
- 给要改写一版首屏、标题长度又得和Sentinel AI一样的内容负责人用。
- 如果你只有一个下午，就把这版首屏围绕 #8EB992 重新调色，800x594 和栅格留在原处。
- 先重新调 #8EB992 并对着 #000000 再核一遍，然后才动底下的布局。
包含哪些内容
- 导航条落在页面栅格上. 链接在同一行、同一个字号上排开，#8EB992 操作收在行尾右侧，视线正好在导航结束的地方停下。链接比字标小一档，#8EB992 操作是导航条上唯一有分量的元素。
- 能逐项核对的数值. 尺寸是对着 800x594 的渲染量出来的：20px 间距、0.7s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线。清单短到审核的人能一个元素一个元素地核。换字体、换文案可以，别换字阶。
- 样式交给字体. 气质来自需求简报里的字号档位和字距：Sora 用收紧的展示字号，然后干净地掉到支撑句。注释档位小到能待在数字下面，又不改动页面的节奏。
- 清单，而不是卡片墙. 每一项都是一行文字加一个 #8EB992 标记，这份清单读起来因此像一份规格，而不是一组营销面板。所有项共用一个字号和一种标记，长清单也扫得动。
动效与交互
快到像是刻意安排的
控件在 0.7s 内完成变化，快到手指刚碰上去页面就回应，而不是等一下才动。缓动和时长写在一起（0.7s），复刻时没法悄悄换成另一种手感。要改缓动就全局统一改。
有悬停态，但要克制
交互层很小，也很好预期：悬停态只给按钮和链接，而不是每张卡片。其他部分都不动，重心因此留在构图上。反馈只限在控件上，所以控件周围的构图保持静止。在触屏设备上把这些状态过一遍。这份参考在 800x594 下收录。
这个首屏背后的数字
几乎每个决定都是一个可以核对的数值：20px 间距、0.7s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线。字体固定用 Sora，所以替换必须保持同样的比例。素材是 800x594 下的一张静帧。这个首屏里没有任何一处依赖默认值。
Sentinel AI 怎么安排第一次阅读的顺序
导航先确立产品身份，并给回访者一条熟悉的路。页面的顺序是刻意安排的。标题占主标题字号，支撑句说明产品能做什么，灰调绿色 #8EB992强调色标记主操作，下一步从不会有疑问。除此之外没有别的东西抢注意力：第一个决策点之前没有卡片栅格，这正是首屏在SaaS类项目里不显沉重的原因。 SaaS读者先看到主张，再看到选项。
这份SaaS需求简报为什么站得住
5,940 个字符的需求简报，产出的是一屏没有填充内容的首屏。里面的数值都是明写的（20px 间距、0.7s 的过渡），所以换了文案，构图照样读得通。 Sentinel AI 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
常见问题
Sentinel AI 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 800x594 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Sentinel AI 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Sentinel AI 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x594 下收录。
