关于这个模板
在动手为AI 或 SaaS 产品重建首屏之前，先读 Power AI：构图和它背后的规格书都在这里。页面自己的标题是“The most powerful AI ever deployed in talent acquisition”，整个构图就是围绕这串字搭的。整套配色是黑色 #000000 打底、黄色 #FCD34D 给文字、靛蓝色 #A855F7 承担强调色，页面字体是 Geist。交付形式是单个组件，收录于 800x604，所以画幅在任何一行代码写下去之前就已经定好。动效是100ms 的过渡，克制到文案依然是主角。写作时让它开着：能迁移到你页面上的，是那份 3,838 字符的简报。下面引用的每一项都是那份简报里的数值，从 800x604 的画幅一直到最小的间距档。
适合谁
- 把首屏的结构整段借过来，再逐行对着单个组件换文案。
- 如果构建从单个组件起步，先拾起固定 220px 的标题字号、82px 间距，栅格定下来之前别碰配色。
- 正在复刻竞品SaaS首屏的团队，想在有人选定框架之前先把单个组件点明。
包含哪些内容
- 顶栏只放一个操作. 这一行的对比只花在一个地方：#A855F7 操作；字标和链接都退回正文色。链接比字标小一档，#A855F7 操作是导航条上唯一有分量的元素。
- 尺寸钉在需求简报里. 尺寸是对着 800x604 的渲染量出来的：固定 220px 的标题字号、82px 间距、100ms 的过渡。画幅比例和尺寸记在一起，重建时连比例也一起对。
- 颜色只配给操作. 颜色是配给的：一个强调色（#A855F7）、一个底色（黑色 #000000），没有第三个值来抢注意力。#A855F7 与黑色 #000000 之间的对比，是强调色在小面积上仍然可读的原因。只留一个强调色，只用给操作。
- 气质由字体承担. 气质来自需求简报里的字号档位和字距：Geist 用收紧的展示字号，然后干净地掉到支撑句。字号越大字距收得越紧，标题行在 220px 范围内才能保持完整。
动效与交互
指针只在有用的地方出现
交互只发生在各自的控件上（悬停态只给按钮和链接，而不是每张卡片），页面其他地方不会跟着动。页面不会弹出模态框，也不劫持滚动；交互始终限制在元素本身。如果一个状态不能确认某个操作，就删掉。这份参考在 800x604 下收录。
节奏交给跑马灯
这条横向长条是标题之外最响的元素：持续运动，当前项用 #A855F7，而且从不要求读者交互。当前项用 #A855F7 标记，而不是靠改字号。
对AI 与 SaaS来说成立的地方
你完全可以把这页重建成一摞分开的卡片，丢掉的只是那个论点。这个首屏读起来是一个决定：导航、标题、数据行、客户标识行、背景片段串成一条序列。它给SaaS读者的是一条通向主张的最短诚实路径。这份参考在 800x604 下收录。
这个首屏背后的时序
时序是明写的：100ms 的过渡、悬停态与按下态、循环跑马灯，全部写进需求简报，而不是靠手感调。这个首屏里没有为动而动的动画。
在 Power AI 里先改什么
可复用的是构图，题材是你自己的。换掉标题，保留字阶（固定 220px 的标题字号），再在你的素材上重新测一遍 #A855F7 强调色。如果新加的元素不能帮助说明产品主张或下一步动作，它就该放到折叠线以下。画幅和字阶都保留，该换的是题材。
常见问题
重建 Power AI 必须用单个组件吗？
Power AI 是用单个组件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Power AI 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 800x604 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
用 Power AI 重建的页面，可以不署名就上线吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x604 下收录。
