404-page-generator
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePages: 404 Error Page
页面：404错误页面
Guides 404 error page design for UX, conversion recovery, and brand consistency.
When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
用于指导404错误页面的设计，以实现UX优化、转化挽回和品牌一致性。
调用规则：
首次使用时，如果对用户有帮助，可以先用1-2句话介绍该技能覆盖的范围及其重要性，再给出核心输出。后续使用或用户要求跳过介绍时，直接输出核心内容即可。
Initial Assessment
初始评估
Check for product marketing context first: If or exists, read it for brand voice, key pages, and Section 12 (Visual Identity).
.claude/product-marketing-context.md.cursor/product-marketing-context.mdIdentify:
- Site structure: Key pages to link (homepage, popular pages, search)
- Brand tone: Friendly, professional, playful
- Conversion goal: Recover lost visitors, drive to key pages
首先检查产品营销上下文：如果存在或文件，读取其中的品牌语气、核心页面以及第12节（视觉识别）的相关内容。
.claude/product-marketing-context.md.cursor/product-marketing-context.md识别以下信息：
- 站点结构：需要添加链接的核心页面（首页、热门页面、搜索页）
- 品牌语气：友好、专业、活泼等风格定位
- 转化目标：挽回流失访客，引导用户访问核心页面
Best Practices
最佳实践
Clear Error Messaging
清晰的错误提示
- User-friendly: Neutral message explaining the page wasn't found
- Optional 404 display: Can show "404" but avoid blaming the user
- Empathetic tone: Acknowledge the error gracefully; turn frustration into opportunity
- 用户友好：使用中立的表述解释页面未找到，避免生硬措辞
- 可选择显示404标识：可以展示「404」字样，但避免指责用户
- 共情语气：优雅地承认错误，将用户的挫败感转化为访问机会
Navigation and Redirection
导航与重定向
| Element | Purpose |
|---|---|
| Site navigation | Header/footer so users know they're still on your site |
| Search | Help users find what they need |
| Popular pages | Links to homepage, features, pricing, blog |
| Similar URLs | Suggest corrections for common typos |
| Avoid auto-redirect | Unless confident of user intent |
| 元素 | 用途 |
|---|---|
| 站点导航 | 保留页头/页脚，让用户明确知道仍处于你的站点内 |
| 搜索功能 | 帮助用户快速找到所需内容 |
| 热门页面 | 提供指向首页、功能页、定价页、博客的快捷链接 |
| 相似URL建议 | 针对常见拼写错误给出修正后的URL建议 |
| 避免自动重定向 | 除非能100%判断用户意图，否则不要设置自动跳转 |
Design and Branding
设计与品牌规范
- Consistent design: Same header, footer, colors as rest of site (brand-visual-generator)
- Avoid confusion: Users should not think they've left your domain
- Mobile responsive: Test on all devices
- 设计一致性：与站点其他页面使用相同的页头、页脚、配色方案（可配合brand-visual-generator使用）
- 避免用户混淆：不要让用户误以为已经离开了你的站点域名
- 移动端响应式：在所有设备上测试适配效果
Conversion Opportunities
转化机会挖掘
404 pages can drive conversions by:
- Showcasing popular products or features
- Featuring testimonials or social proof
- Offering special promotions or value
- Linking to mobile app or newsletter
404页面可以通过以下方式带来转化：
- 展示热门产品或核心功能
- 呈现用户评价或社交证明内容
- 提供专属促销活动或福利
- 添加移动应用下载链接或newsletter订阅入口
Technical
技术要求
- Track 404s: Monitor broken links, fix or redirect
- Accessibility: Maintain WCAG standards
- HTTP status: Ensure proper 404 response code
- 404错误追踪：定期监控无效链接，及时修复或设置重定向
- 无障碍设计：符合WCAG无障碍标准
- HTTP状态码：确保返回正确的404响应码
Output Format
输出格式
- Copy options (headline, message, CTA)
- Link structure (what to include)
- Design checklist
- SEO: Typically noindex; ensure canonical if needed
- 文案选项（标题、提示信息、CTA按钮文案）
- 链接结构（需要包含的跳转链接清单）
- 设计检查清单
- SEO配置：通常设置为noindex；如有需要确保配置正确的canonical标签
Related Skills
相关技能
- homepage-generator: Primary escape route
- brand-visual-generator: Typography, colors for consistent 404 design
- indexing: noindex for 404 if desired
- title-tag, meta-description, page-metadata: 404 page metadata
- homepage-generator：404页面主要的跳转出口
- brand-visual-generator：为404页面提供统一的字体、配色设计规范
- indexing：可根据需求为404页面设置noindex
- title-tag, meta-description, page-metadata：404页面的元数据配置