关于这个模板
Space planet 是一个只靠一份书面简报搭出来的教育首屏，这一页记录的就是那份简报。整套配色是色调 #071227 打底、#FFFFFF 给文字、浅调 #5FD0E1 承担强调色，页面字体是 Poppins。交付形式是一个自包含的 HTML 文件，收录于 1920x1420，所以画幅在任何一行代码写下去之前就已经定好。动效归结起来就是6s 的过渡、cubic-bezier(.22,1.36,1)、一段循环视频打底。当你要做面向教育或社区品牌的首屏、想要一个成品构图而不是一个起点时，就拿它当参照。收录的提示词记录于 1920x1420，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1920x1420 的画幅一直到最小的间距档。
适合谁
- 如果这份参考只是个起点，设计师可以留着 cubic-bezier(.22,1.36,1) 缓动曲线，把首屏其余部分重建。
- 如果你把需求交给模型而不是设计师，就从首屏开始，让提示词兜住一个自包含的 HTML 文件。
- 在用 AI 建站工具的人，希望简报里已经写好了 500px 断点，而不是交给模型自己发挥。
包含哪些内容
- 导航不带底色. 字标、链接和 #5FD0E1 操作共用一条基线，细导航条才不会被看成随手排的。500px 以下链接直接收起，而不是折到第二行。加第六条链接之前，先把收起状态设计好。
- 通栏视频，不做面板. 氛围交给一段 1920x1420 的 6.9s 片段；需求简报定死了它的裁切方式，文字则原样叠在上面。循环短到 6.9s，眼睛会把它读成肌理，而不是一条时间轴。按 1920x1420 或更宽的尺寸导出，裁切才不失真。
- 气质由字体承担. 字体是 Poppins，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。界面文字始终用同一套字，同一字号下不会混进第二种声音。
- 尺寸钉在需求简报里. 版式走的是绝对值，不是比例：100vh 高的板块、72px 间距、6s 的过渡、cubic-bezier(.22,1.36,1) 缓动曲线。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
动效与交互
是循环，不是时间轴
环境动感来自 1920x1420 的 6.9s 循环，而不是滚动特效，页面因此保持平静，文字也更好读。页面上没有别的东西持续动，所以只有素材在争取注意力。
短而互相匹配的时长
过渡在需求简报里写明为 6s使用 cubic-bezier(.22,1.36,1)，控件上的时长就以这个值为准。缓动和时长写在一起（6s），复刻时没法悄悄换成另一种手感。不要把浏览器默认值发上线。
教育或社区品牌能从这里得到什么
克制让你在折叠线以上失去了放证据的空间。这份简报接受这个代价，把首屏全部花在主张上，并固定住100vh 高的板块、72px 间距，这样以后在下面加一个证据板块也不用返工。 Space planet 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Space planet 怎么安排第一次阅读的顺序
请按顺序读这一页：导航、标题、公告徽标、数据行、功能列表。这里的每一个元素在版面上都只负责一件事，浅调 #5FD0E1强调色只花在读者本该去按的那一个元素上，其余任何一个地方都不会分给它一点。教育读者先看到主张，再看到选项。
把 Space planet 当规格书读
这个首屏是量出来的，不是看出来的。100vh 高的板块、72px 间距来自需求简报，版式是照这些档位排的，而不是一点点挪到位的。这个首屏里没有任何一处依赖默认值。
常见问题
能用别的技术栈重建 Space planet 的首屏吗？
Space planet 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
拿到 Space planet 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 29,105 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
复制 Space planet 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 1920x1420 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
