关于这个模板
404 Planet 展示了为AI 或 SaaS 产品做404 页的一种做法，并把生成它的说明一起公开。页面自己的标题是“This page seems to have”，整个构图就是围绕这串字搭的。配色是深蓝色 #01010C 打底、灰调青绿色 #D1ECF4 给文字、蓝色 #0D214E 承担强调色，字体用 Helvetica, Arial。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。动效预算就是200ms 的过渡。对于需要在第一屏就显得刻意的AI 或 SaaS 产品404 页，它是一份合适的参考。
适合谁
- 这个404 页要服务的，是需要让 640x468 画幅撑过三轮客户修改的代理公司。
- 需要先看数字的设计师：字号从 80px 到 260px、10px 间距，全部引自需求简报。
- 用提示词给404 页提需求的人，会把这份 7,598 字符的提示词当作起点。
包含哪些内容
- 导航不带底色. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #0D214E 操作，全部悬在404 页之上，自己没有底色。链接比字标小一档，#0D214E 操作是导航条上唯一有分量的元素。
- 尺寸写在需求简报里，不在一套比例里. 需求简报钉死字号从 80px 到 260px、10px 间距、200ms 的过渡，其余交给摆放，这正好和一套会自己长大的比例相反。因为数值是固定的，替换只改样子，不改节奏。
- 导航是刻意做细的. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #0D214E 操作，全部悬在404 页之上，自己没有底色。链接比字标小一档，#0D214E 操作是导航条上唯一有分量的元素。链接控制在四到五个，这一行的尺寸就是照这个定的。
- 数字用展示字号. 一行数据落在折叠线之上，用 Helvetica, Arial 的最高一档字号排，#0D214E 只留给那些承担主张的数字。数字带 #0D214E 强调色，周围一切都留在正文色上。
动效与交互
控件共用一个时长
状态变化的时长写明为 200ms，所以控件上的反馈是一个设计过的值，不是浏览器默认值。反馈要读成一次回应而不是一段动画，靠的就是这组短时长。
交互区域刻意做小
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。按下态和悬停态一样写明，轻点一下和点击得到的确认是一样的。这份参考在 640x468 下收录。
把 404 Planet 当规格书读
复刻通常从一张截图加一个猜测开始。这里从 7,598 个字符的规格开始：画幅、间距和动效都在第一行代码之前就写下来了。这个404 页里没有任何一处依赖默认值。
这个404 页背后的时序
套一个预设动画包上线会更快。需求简报偏偏写明了200ms 的过渡、悬停态与按下态，页面因此读起来是被写出来的，而不是被摆出来的。这个404 页里没有为动而动的动画。
这个404 页怎么重排
桌面端构图是照着 640x468 解出来的，窄屏版式是设计出来的，不是继承来的：导航收进移动端菜单。动效带减少动态效果分支，素材带首帧封面，所以自动播放不可用时页面依然能表达自己。自动播放和动效都做了诚实的兜底，所以它们不可用时页面依然能表达自己。
常见问题
404 Planet 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 7,598 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
404 Planet 有多少地方依赖 React 和 Tailwind CSS？
404 Planet 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
404 Planet 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 7,598 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
