README.md

metadata

title: 404 页面设计工坊
emoji: 🚧
colorFrom: red
colorTo: gray
sdk: docker
pinned: false
short_description: 可视化设计并导出带有小游戏的创意 404 页面

404 页面设计工坊 (Error Page Studio)

English | 中文

404 页面设计工坊 是一款专为独立开发者、创作者和初创公司设计的可视化工具，帮助你快速生成美观、有趣且能留住用户的 404 错误页面。

不再让你的用户面对枯燥的 "Not Found" —— 用创意和游戏挽回流失的流量！

✨ 核心功能

• 🎨 多种主题风格：

  • **Modern (现代)**：简洁大气，适配大多数 SaaS 产品。
  • **Retro (复古)**：极客风格，终端字体，致敬经典。
  • **Minimal (极简)**：极致留白，专注于核心信息。

• 👻 创意插画：

  • 内置幽灵 (Ghost)、机器人 (Robot)、心碎 (Broken Heart) 等纯 CSS/SVG 插画，无需外部资源。

• 🎮 嵌入式小游戏：

  • **贪吃蛇 (Snake)**：一键开启。当用户迷路时，让他们玩把游戏冷静一下（有效降低跳出率！）。
  • 游戏代码完全内嵌，无需额外依赖。

• ⚡️ 实时预览：

  • 支持桌面端 (Desktop) 和移动端 (Mobile) 尺寸切换预览。
  • 所见即所得。

• 📦 一键导出：

  • 生成单文件 HTML。
  • 所有 CSS、JS、SVG 全部内联 (Inlined)。
  • 0 依赖，直接丢到你的 Nginx/Apache/Vercel 的 public 目录即可使用。

🚀 快速开始

在 Hugging Face Spaces 运行

本项目已适配 Hugging Face Spaces (Docker SDK)。

本地运行

1. 克隆项目：

git clone https://github.com/your-username/error-page-studio.git
cd error-page-studio

2. 安装依赖：

pip install -r requirements.txt

3. 启动服务：

python app.py

4. 访问：http://localhost:7860

Docker 运行

docker build -t error-page-studio .
docker run -p 7860:7860 error-page-studio

🛠 技术栈

• Frontend: Vue 3 (CDN), Tailwind CSS (CDN)
• Backend: Flask (Python 3.9)
• Export Engine: Jinja2 Template Rendering
• Deployment: Docker

📝 为什么要关注 404 页面？

404 页面是用户体验中常被忽视的一环。一个好的 404 页面应该：

1. 安抚用户情绪（幽默、美观）。
2. 提供解决方案（返回首页按钮）。
3. 留住用户（小游戏、彩蛋）。