README.md

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

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

[English](./README_EN.md) | 中文

**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. 克隆项目：
```bash
git clone https://github.com/your-username/error-page-studio.git
cd error-page-studio
```

2. 安装依赖：
```bash
pip install -r requirements.txt
```

3. 启动服务：
```bash
python app.py
```

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

### Docker 运行

```bash
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. **留住用户**（小游戏、彩蛋）。