PRODUCT LIFECYCLE
404 页面404 / Error Page
把死路变成一次有礼貌的引导：超大错误码 + 一句人话 + 回首页/搜索的出口。
效果预览
404
这个页面找不到了
可能是链接过期，或者内容已经被移动。
搜索内容…回到首页
适合用在哪
URL 不存在、内容已删除、权限不足（403）、服务异常（500）。不同类型的错误码文案要区分。
容易踩的坑
- 错误页用 JS 跳转回首页且无提示，用户不知道链接失效，还会被搜索引擎判为软 404。
- 超大渐变错误码在移动端仍用 96px，挤掉出口按钮，应用 clamp 缩放。
- 403 和 500 也套用「页面找不到了」文案，误导用户去检查链接拼写。
设计提示词 · Prompt
404 页面（404 / Error Page）：居中布局。顶部 44-96px 的超大错误码，用垂直渐变文字（主色到亮紫）做视觉锚点；下面是 12px 加粗的一句人话（「这个页面找不到了」，而不是「404 Not Found」）；再下一行 9.5px 浅灰给一个可能的解释与出路提示。底部一行两个出口：一个搜索框（用户可能是拼错了链接）+ 一个深色的「回到首页」按钮。真正的 404 要返回正确的 HTTP 状态码，不要用 200 伪装。
404 / Error Page: centered layout. At the top, a 44-96px oversized error code in vertical gradient text (primary color to bright purple) as the visual anchor; below it, a 12px bold plain-language sentence ("We can't find this page" rather than "404 Not Found"); then a 9.5px light-gray line offering a possible explanation and a way out. At the bottom, one row with two exits: a search box (the user may have mistyped the link) + a dark "Back to home" button. A real 404 must return the correct HTTP status code — never disguise it as a 200.
常见搭配
同一页面里经常和「404 页面」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-404">
<div class="lc-404__n">404</div>
<b>这个页面找不到了</b>
<p>可能是链接过期，或者内容已经被移动。</p>
<div class="lc-404__f"><i>搜索内容…</i><em>回到首页</em></div>
</div>
</div>