关于这个模板
Fun 404 Page 交给了教育或社区品牌一个已经做完的首屏，以及做出它的那组数字。标题是“Oops, something went wrong!”，404 页其余部分都围着它排。整套配色是亮橙色 #FF8233 打底，页面字体是 Inter。交付形式是 React 和 Tailwind CSS，收录于 1664x1248，所以画幅在任何一行代码写下去之前就已经定好。这个页面的动效控制在500ms 的过渡、cubic-bezier(0.16,1,0.3,1)、一段循环视频打底。借结构，不借题材：这个404 页和它那组数字可以原样搬到你的品牌上。收录的提示词记录于 1664x1248，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1664x1248 的画幅一直到最小的间距档。
适合谁
- 需要先看数字的设计师：22vh 高的板块、200px 间距，全部引自需求简报。
- 同时跑好几个项目的工作室负责人，会把这一版404 页当作其他页面照抄的样板。
- 给需要把404 页的范围收进一个迭代、并且不新增任何素材的产品经理用。
包含哪些内容
- 顶栏：字标、链接、一个操作. 导航条就是一行文字加一个操作，尺寸按 22vh 高的板块、200px 间距定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 1664x1248 的构图上，自己没有底色，素材因此从它下面通到两边。
- 这里扫读胜过细读. 栅格替你把阅读顺序排好了：每块面板分量相同、各讲一个观点，用 Inter 的小字号排，结构始终看得见。每块面板内部排法一致，栅格因此能按形状扫。宁可删一块面板，也别缩字号。
- 数值一路带进构建. 这份清单很短（22vh 高的板块、200px 间距、500ms 的过渡、cubic-bezier(0.16,1,0.3,1) 缓动曲线），整套系统因此能靠手一个个核过去。因为数值是固定的，替换只改样子，不改节奏。
- 一个素材元素承担整体情绪. 一段静音循环视频按 1664x1248、10s 铺满画幅，以 cover 裁切，文案叠在它上面。需求简报不允许在视频上压叠加层，所以画面不会被压灰。自动播放不可用时，1664x1248 的封面帧撑住构图，版式不会塌。
动效与交互
时长以需求简报为准
动画预算小而明确：500ms使用 cubic-bezier(0.16,1,0.3,1)只用在状态变化上，不用在入场动画上。写明的时长只覆盖状态变化，反馈正是这套动效里被规格管住的部分。
交互只落在控件上
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。可交互目标大到能点，指针处理在这些目标上保持一致。这份参考在 1664x1248 下收录。
这个404 页怎么重排
文案一长，先崩的是窄屏版式。这里由40px 到 200px 的 clamp吸收掉变化，字阶是流体的，而不是阶梯式的、板块高度锁在 22vh、导航收进移动端菜单。宽度改变的是测量值，不是阅读路径。
Fun 404 Page 怎么安排第一次阅读的顺序
这份需求简报有 6,085 个字符，把阅读顺序明写出来：导航、公告徽标、数据行、卡片栅格、背景片段，中间用22vh 高的板块、200px 间距隔开。教育读者先看到主张，再看到选项。
在 Fun 404 Page 里先改什么
先换内容，再回头检查画幅。22vh 高的板块、200px 间距、500ms 的过渡、cubic-bezier(0.16,1,0.3,1) 缓动曲线就是换文案时要护住的那几个值。在碰颜色之前，先重写那行展示字。
常见问题
为什么 Fun 404 Page 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 6,085 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Fun 404 Page 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 1664x1248 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Fun 404 Page 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
