关于这个模板
Stellar AI 展示了为AI 或 SaaS 产品做首屏的一种做法，并把生成它的说明一起公开。标题是“Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time”，首屏其余部分都围着它排。配色控制在白色 #FFFFFF 打底、深蓝色 #101117 给文字之内，字体用 Inter。交付形式是 React 和 Tailwind CSS，收录于 800x708，所以画幅在任何一行代码写下去之前就已经定好。需求简报把动效预算花在0.1s 的过渡上。写作时让它开着：能迁移到你页面上的，是那份 3,973 字符的简报。
适合谁
- 如果动效必须砍掉，这版首屏照样读得通，靠固定 80px 的标题字号、30px 间距撑起层级。
- 给要改写一版首屏、标题长度又得和Stellar AI一样的内容负责人用。
- 这个首屏适合会拿标题做 A/B 测试、又不去碰 Inter 的成长团队。
包含哪些内容
- 导航是刻意做细的. 导航条就是一行文字加一个操作，尺寸按固定 80px 的标题字号、30px 间距定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 800x708 的构图上，自己没有底色，素材因此从它下面通到两边。
- 折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。这里只有一条公告，徽标因此像一条新闻。让它待在标题上方，不要挪到旁边。
- 量出来的，不是估的. 尺寸是收录时就在需求简报里写下的（固定 80px 的标题字号、30px 间距、0.1s 的过渡），重建因此可以逐项核对，而不是大约像。间距和字号用同一套单位写明，两者可以直接比。
- 用一行客户标识代替一句自夸. 客户标识沿着下边缘低对比排开，用的是需求简报里最小的字阶，这层背书因此变成首屏上的肌理，永远不跟标题抢。 logo 用同一个尺寸展示，标识带才不会跟标题抢。这份参考在 800x708 下收录。
动效与交互
状态变化也有时长
时长短而统一：0.1s悬停态和按下态因此读起来是一套系统，而不是一堆各自为政的效果。缓动和时长写在一起（0.1s），复刻时没法悄悄换成另一种手感。
交互区域刻意做小
交互层是刻意做小的：悬停态只给按钮和链接，而不是每张卡片、在原位切换内容的标签页或手风琴。状态用的是页面自己的配色，而不是组件库的默认值。指针效果只留在控件上。这份参考在 800x708 下收录。
这个首屏背后的顺序
如果你的页面现在以功能开头，就该照这个顺序改：导航、公告徽标、数据行、客户标识行、卡片栅格放前面，支撑细节跟在后面，固定 80px 的标题字号、30px 间距定下两者的距离。 SaaS读者先看到主张，再看到选项。
这个首屏做对了什么
大多数SaaS页面在首屏不够有力时选择再加一个板块。这一版反过来做减法：导航、公告徽标、数据行、客户标识行、卡片栅格，就按这个顺序，没有任何重复主张的东西。它给SaaS读者的是一条通向主张的最短诚实路径。这份参考在 800x708 下收录。
把 Stellar AI 当规格书读
几乎每个决定都是一个可以核对的数值：固定 80px 的标题字号、30px 间距、0.1s 的过渡。字体固定用 Inter，所以替换必须保持同样的比例。素材是 800x708 下的一张静帧。这个首屏里没有任何一处依赖默认值。
常见问题
Stellar AI 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 800x708 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Stellar AI 有多少地方依赖 React 和 Tailwind CSS？
Stellar AI 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
用 Stellar AI 重建的页面，可以不署名就上线吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x708 下收录。
