关于这个模板
Planor 是面向AI 或 SaaS 产品的首屏参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。整套配色是橙色 #634635 打底、白色 #E5E7EB 给文字，页面字体是 Inter。交付形式是一个自包含的 HTML 文件，收录于 1964x1402，所以画幅在任何一行代码写下去之前就已经定好。这个页面的动效控制在0.2s 的过渡、一段循环视频打底。写作时让它开着：能迁移到你页面上的，是那份 3,036 字符的简报。下面引用的每一项都是那份简报里的数值，从 1964x1402 的画幅一直到最小的间距档。收录的提示词记录于 1964x1402，所以这一页引用的每个数值都能追回到它。
适合谁
- 在用 AI 建站工具的人，希望简报里已经写好了一个自包含的 HTML 文件，而不是交给模型自己发挥。
- 先从固定 58px 的标题字号、30px 间距开始，让配色跟着走，因为这版首屏靠的就是间距。
- 正在复刻竞品SaaS首屏的团队，想在有人选定框架之前先把一个自包含的 HTML 文件点明。
包含哪些内容
- 链接在前，操作在后. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 1964x1402 的构图上，自己没有底色，素材因此从它下面通到两边。当你需要一条能在喧闹首屏上活下来的导航时，照这个模式抄。
- 能逐项核对的数值. 版式里没有一样交给感觉：需求简报写明了固定 58px 的标题字号、30px 间距、0.2s 的过渡，构建必须落回这些值。清单里最小和最大的两个值，划定了这套构图的取值范围。
- 顶栏：字标、链接、一个操作. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 1964x1402 的构图上，自己没有底色，素材因此从它下面通到两边。加底色之前，先把自己的素材垫在导航条下面测一遍。
- 间距档位是写明的. 版式里没有一样交给感觉：需求简报写明了固定 58px 的标题字号、30px 间距、0.2s 的过渡，构建必须落回这些值。清单里最小和最大的两个值，划定了这套构图的取值范围。先量，再调。
动效与交互
环境动效交给循环
整个环境层就是一段 6.4s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。自动播放被拦截时有首帧封面顶上，所以动效是加分项，而不是必需品。
时长写进了需求简报
规格里每一次状态变化都带着时长：0.2s没有一处留给浏览器默认值，所以页面读起来是被设计过的，而不是被加了动画。缓动和时长写在一起（0.2s），复刻时没法悄悄换成另一种手感。
Planor 怎么安排第一次阅读的顺序
这个首屏有一条写明的阅读路径。导航先确立产品身份，并给回访者一条熟悉的路。视线从这里出发，依次经过导航、标题、背景片段，一屏内容才不会读成一张清单。 SaaS读者先看到主张，再看到选项。这份参考在 1964x1402 下收录。
这个首屏怎么重排
流体字阶的代价是对具体尺寸的控制更少。换来的是展示字始终成比例，这也是58px 到 30px 的 clamp会写进需求简报的原因。宽度改变的是测量值，不是阅读路径。
把这个首屏变成你自己的
如果你的品牌配色更重，先对着画幅测一轮再定。撑住页面的是橙色 #634635，所以更暗的强调色需要比参考更高的对比。在重新配色之前，先把文案和素材改完。
常见问题
为什么这条条目还要标注一个自包含的 HTML 文件？
Planor 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Planor 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 1964x1402 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
在客户项目里该怎么处理 Planor 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1964x1402 下收录。
