关于这个模板
IntelligentX 是面向AI 或 SaaS 产品的一份可用参考：这套首屏已经排好、量好，可以直接照着复刻。配色是白色 #EDEEF5 打底、黑色 #1A1A1A 给文字、亮黄绿色 #9FFF00 承担强调色，字体用 Inter。交付形式是 React 和 Tailwind CSS，收录于 640x462，所以画幅在任何一行代码写下去之前就已经定好。如果你要给别人提一版SaaS首屏的需求，就从这个构图起步，把题材换掉。下面引用的每一项都是那份简报里的数值，从 640x462 的画幅一直到最小的间距档。收录的提示词记录于 640x462，所以这一页引用的每个数值都能追回到它。
适合谁
- 正在做AI 或 SaaS 产品首屏的团队，想要的是量出来的细节（110vh 高的板块、16px 间距），而不是一张可以照抄的截图。
- 用提示词给首屏提需求的人，会把这份 4,182 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和IntelligentX一样的内容负责人用。
包含哪些内容
- 顶栏：字标、链接、一个操作. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #9FFF00 操作，全部压在需求简报最小的字阶上。链接比字标小一档，#9FFF00 操作是导航条上唯一有分量的元素。
- 需求简报点了名. 需求简报钉死 110vh 高的板块、16px 间距，其余交给摆放，这正好和一套会自己长大的比例相反。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。
- 层级交给字体. 字体定在 Inter 上，需求简报给这套字分配了明确的职责，而不是为了花样去混搭。字重、字距和字号档位全部写明，换字体也不会丢掉层级。字重按角色分配，层级在搭建时就不用靠猜。展示行留到最后再排。
- 折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。徽标用 #9FFF00，而标题留在正文色上。
动效与交互
有意做成静止
需求简报里没有动画，页面靠 640x462 的版式撑住，唯一的变化是悬停态和按下态。需求简报里没有动画库，复刻的工作量因此很小。
几乎没有动效
需求简报里没有动画，页面靠 640x462 的版式撑住，唯一的变化是悬停态和按下态。需求简报里没有动画库，复刻的工作量因此很小。动效只留在控件上。
IntelligentX 里什么在动
动画预算写得很清楚：悬停态与按下态。这个首屏里没有任何东西在动却没有对应的数值。这个首屏里没有为动而动的动画。这份参考在 640x462 下收录。
这个首屏背后的顺序
请按顺序读这一页：导航、公告徽标、数据行、表单、背景片段。这里的每一个元素在版面上都只负责一件事，亮黄绿色 #9FFF00强调色只花在读者本该去按的那一个元素上，其余任何一个地方都不会分给它一点。 SaaS读者先看到主张，再看到选项。
在 IntelligentX 里先改什么
需求简报写明了 Inter 和它旁边的字阶。换成比例相同的字体，构图就能活下来。别动的是画幅和字阶。
常见问题
复制 IntelligentX 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 4,182 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 IntelligentX 必须用 React 和 Tailwind CSS 吗？
IntelligentX 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
IntelligentX 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 640x462 下收录。
