关于这个模板
在动手为电商品牌重建404 页之前，先读 Skybridge 404：构图和它背后的规格书都在这里。颜色只用了蓝色 #1165B4 打底、白色 #E7E1D8 给文字，正文排的是 Geist Mono。交付形式是 React 和 Tailwind CSS，所以整个404 页可以直接搬进项目，不需要设计交接。这个页面的动效控制在一段循环视频打底。当这个404 页需要在新增任何板块之前先定下顺序时，就拿它来用。需求简报钉住的一切（画幅、字号、时长、断点）下面都写出来了，所以你可以照着复刻这个404 页，不用猜它背后的意图。这一页剩下的部分按板块、再按时序和数值把这个404 页拆开，不加任何简报里没有的说法。收录的提示词记录于 1456x1080，所以这一页引用的每个数值都能追回到它。
适合谁
- 把404 页的结构整段借过来，再逐行对着 640px 断点换文案。
- 自己写404 页文案的产品团队，需要每一行都守住展示级字号当初按长度定下的上限。
- 产品市场的人需要404 页在背后有4.7s 的循环视频时依然好读。
包含哪些内容
- 一行到底，不做抽屉. 导航条就是一行文字加一个操作，尺寸按 100vh 高的板块、40px 间距定，所以它读起来是一条细带，而不是一整条色块。标签短到能在 640px 下一行放下，当前项用字重标出，而不是加一个胶囊底。当你需要一条能在喧闹首屏上活下来的导航时，照这个模式抄。
- 视频是背景，不是一块面板. 视频落在 1456x1080 构图的最底层，文字排在它之上，两者之间什么都没有。循环短到 4.7s，眼睛会把它读成肌理，而不是一条时间轴。
- 靠展示字号说话. 气质来自需求简报里的字号档位和字距：Geist Mono 用收紧的展示字号，然后干净地掉到支撑句。行高跟着字号档位走，而不是一个全局值。
- 量出来的，不是估的. 这些值就是规格本身：100vh 高的板块、40px 间距、640px 断点，是在 1456x1080 下收录的，而不是从截图里反推的。清单短到审核的人能一个元素一个元素地核。
动效与交互
有悬停态，但要克制
交互层很小，也很好预期：悬停态只给按钮和链接，而不是每张卡片。其他部分都不动，重心因此留在构图上。按下态和悬停态一样写明，轻点一下和点击得到的确认是一样的。这份参考在 1456x1080 下收录。
首屏由画布撑起
首屏由浏览器生成，而不是作为一张图片发过来：一块 WebGL 画布。渲染自带颜色，所以它周围的配色保持安静。这份参考在 1456x1080 下收录。
这个404 页怎么重排
窄屏不是把它整体缩小就能解决的。这份简报把变化交给字体和导航处理：字阶是流体的，而不是阶梯式的、版式在 640px 处切换、板块高度锁在 100vh。移动端是一个决定，不是退而求其次。
这个404 页背后的时序
你完全可以给这套构图挂一个预设库，结果只会更吵，不会更好。需求简报把预算留在悬停态与按下态、4.7s 的循环视频、实时画布上。这个404 页里没有为动而动的动画。
Skybridge 404 怎么安排第一次阅读的顺序
在这里，顺序就是设计。导航、数据行、背景片段的摆放让主张先于证据落地，100vh 高的板块、40px 间距定下两者之间的距离。电商读者先看到主张，再看到选项。
常见问题
这条 Skybridge 404 条目是怎么组织的？
页面上引用的内容全部出自收录的 7,104 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Skybridge 404 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 1456x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能用别的技术栈重建 Skybridge 404 的404 页吗？
Skybridge 404 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
