关于这个模板
Portal 用一份收录下来的需求简报，解决了面向AI 或 SaaS 产品做首屏时的问题。配色是中性 #F2F2EE 打底、深调 #192837 给文字、深调 #7342E2 承担强调色，字体用 Helvetica Now Display。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。需求简报把动效预算花在0.3s 的过渡上。写作时让它开着：能迁移到你页面上的，是那份 5,718 字符的简报。
适合谁
- 在用 AI 建站工具的人，希望简报里已经写好了 640x474 画幅，而不是交给模型自己发挥。
- 先从 100vh 高的板块、24px 间距开始，让配色跟着走，因为这版首屏靠的就是间距。
- 如果你的团队已经在跑一套设计系统，这个首屏就是该不该把唯一的高饱和色花在 #7342E2 上的例子。
包含哪些内容
- 导航不带底色. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #7342E2 操作，全部悬在首屏之上，自己没有底色。链接比字标小一档，#7342E2 操作是导航条上唯一有分量的元素。字标占的位置不超过它那行字需要的宽度。
- 数值一路带进构建. 需求简报把数值点了名：100vh 高的板块、24px 间距、0.3s 的过渡。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。落回这些数值的重建不用再调就长得像参考。搬运页面时保留这些写明的数值。
- 一套字，两个角色. 字体定在 Helvetica Now Display 上，需求简报给这套字分配了明确的职责，而不是为了花样去混搭。字重、字距和字号档位全部写明，换字体也不会丢掉层级。字体和固定字号配对使用，展示行和界面文字因此始终是一家人。一套字，职责清楚。
- 先文案，后装饰. 首屏的排法是让文案先落地：层级由字体承担，640x474 的画幅撑住构图，其余数值保持安静。页面在 640x474 下就是一套完整构图，所以文案变了它依然立得住。折叠线以上不该有装饰物。
动效与交互
快到像是刻意安排的
需求简报把过渡值钉在 0.3s，重建时不能换成一个更慢的默认值。缓动和时长写在一起（0.3s），复刻时没法悄悄换成另一种手感。时长是设计的一部分，不是收尾工序。
交互层就是这些控件
交互只发生在各自的控件上（悬停态只给按钮和链接，而不是每张卡片），页面其他地方不会跟着动。悬停态和聚焦态写在一起，指针和键盘拿到的信息因此一样。这份参考在 640x474 下收录。
Portal 怎么安排第一次阅读的顺序
营销页面会把证据堆在折叠线以下然后听天由命，这个首屏把导航、公告徽标、功能列表、背景片段直接推到读者面前，其余的先按住不发。 SaaS读者先看到主张，再看到选项。这份参考在 640x474 下收录。
这个首屏背后的数字
具体数字会过时：适合 640x474 的值不一定适合你的画幅。需求简报还是写明了100vh 高的板块、24px 间距，因为写出来的值比没写出来的值好改。这个首屏里没有任何一处依赖默认值。
AI 或 SaaS 产品能从这里得到什么
Portal 是面向AI 或 SaaS 产品的首屏参考，回应的正是这类受众真正遇到的问题。配色保持克制（中性 #F2F2EE 和深调 #7342E2），字体用 Helvetica Now Display，所以构图里没有任何东西依赖借来的潮流。要给别人写构建需求时，这部分最值得抄：一个用主标题字号说出的承诺，支撑细节全部压在它下面。它给SaaS读者的是一条通向主张的最短诚实路径。
常见问题
Portal 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 5,718 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Portal 里 0.3s 的过渡是怎么动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 0.3s 这个区间内。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
Portal 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 5,718 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
