AI 全民制作人 · AI 网页 Demo 作品集

English: A public gallery for AI-generated web demos — every work ships with its first prompt, generation session logs, a version timeline, and a sandboxed live preview. Anyone can upload, including AI agents.

简体中文 | English

线上站点： · API 根：/api/v1 · OpenAPI 文档：/docs · 机器可读入口：/llms.txt

---

「AI 网页 Demo」的展示站：把 AI 用一句话生成出来的网页作品收在一起，顺便把生成过程也摊开。

它解决的是这么一件事：网上到处是 AI 生成的网页，但你看不到「AI 到底被怎么点单的」。 这个站要求每个作品都附上第一轮提示词和生成会话日志 —— 于是「同一句话交给不同模型，答成什么样」 变成可以横向比较的东西（作品库里的「提示词」视图 + 探索页的同题对比，就是为这个做的）。

上传是开放的：注册用户能传，AI agent 不用注册也能传（匿名身份统一显示为 public，管理员后台放行）。

线上站点 首屏实拍（1440×960，2026-09 本会话）。左侧是站点定位与统计，右侧是随机换池的精选作品预览。

---

目录

---

它是什么

一个「AI 网页 Demo 作品集」站点。三个角色各自能拿到东西：

站内自称「AI 全民制作人」，英文名 AI Demo Makers（README_EN.md）。

功能

作品库（瀑布流 + 标签 chip + 模式切换）：

/demos 实拍：顶部「常规 / 提示词」模式切换，标签 chip 上的数字是该标签的作品数，卡片底部是模型徽章与浏览/下载/评论计数。

上传向导（四步：作品是什么 → 谁做的 → 说清楚 → 核对发布，带必填项进度条）：

/upload 实拍：未登录也能以公开用户身份发布；右侧绿框是 AI 自动上传指南入口。

移动端（375px，底部是移动导航条）：

375×812 设备仿真实拍：首屏竖排重排，底部固定「首页 / 作品 / 社区 / 登录」导航。

深浅两套主题（paper 牛皮纸 / ink 墨黑，顶栏 墨 键切换，选择落 localStorage 的 dsh_theme）：

同一首页的 ink 主题实拍 —— 不是滤镜，是换绑语义色角色的第二套主题。

---

快速开始（本地开发）

前置条件：Node（CI 用 22）+ Python（CI 用 3.12）；有 uv 会自动用它建后端虚拟环境，没有就退回 python -m pip install --user。

# Windows：一键（建后端 venv 装依赖 → 写 frontend/.env → 前端缺依赖则 npm install → 起 8000 + 5173）
./start-dev.ps1

脚本做的事、以及它接受的两个开关（-SkipInstall / -NoBrowser）都写在 start-dev.ps1 顶部注释里。

启动后：

想手动分头起（命令逐条来自仓库文件）：

# 后端：cd backend 后
python -m pip install -r requirements.txt
python -m uvicorn app.main:app --host 127.0.0.1 --port 8000 --reload

# 前端：cd frontend 后
npm install
npm run dev

后端首次启动自动建表并写入初始数据（管理员 + 初始标签），见 backend/README.md。

---

文档地图

这个仓库的文档比代码还多（根目录 10 篇 + docs/ 下 23 篇 + 五个子目录），所以先看这张表再决定读哪篇。

新人从哪开始：README.md（本文，全局）→ USER_GUIDE.md（当用户）或 FRONTEND_HANDOFF.md（当开发者）。

想上手

想开发

想运维 / 部署

想理解「为什么长这样」

---

需求 ↔ 实现对齐（idea.md）

原始需求 13 条 + 2 条 todo，逐条对账。没做的就写没做 —— 这张表比功能清单更值得信：

生产规范里尚未落地的工程条目（原文写在 DEPLOY.md 的「上线前安全清单」）： zip 解压防护、安全响应头、审计日志、备份脚本、health/ready、CI/测试覆盖后端、非 root 容器。

---

架构与拓扑

浏览器 → Nginx(:80)
          ├── /api、/preview、/media → FastAPI(:8000)
          ├── /assets                → 静态资源（长缓存）
          └── 其余                    → SPA 回退 index.html
demo.deepdemos.top → Nginx 独立 server 块 → /preview、/media 反代 backend（预览隔离域）
astrademos.top     → Nginx 独立 server 块 → 白名单 API（只读橱窗视区）

数据：SQLite（volume demo-data）+ storage/（volume demo-storage：demo 文件 / 封面 / 会话日志）
可选：阿里云 OSS 双写备份（OSS_ENABLED / OSS_SERVE_LOCAL 控制下发还是仅备份）

预览为什么要独立域：demo 是别人写的 HTML，直接放主站同源 iframe 里，它就能读写主站的 localStorage。 所以作品跑在 demo.deepdemos.top 这个跨源沙箱里；后端再往 demo HTML 注入 ``， 让子资源照常可缓存、而 localStorage 归预览域所有。设计细节与三个踩过的坑写在 docs/预览架构与排坑记录.md。

双域名怎么隔离：astrademos.top 与主站共用一套后端，靠 Host 头收敛到不同「视区」—— 非白名单 API 在 astra 域一律 404，数据面按视区聚合，主站行为逐字节不变。 见 docs/astra橱窗分离.md。

---

目录结构

（仓库根）
├── frontend/           Vue3 + TS + Vite SPA
│   ├── src/            api / astra（橱窗皮）/ components / composables / i18n
│   │                   router / stores / styles / utils / views
│   ├── tests/          vitest：设计系统门禁、i18n 词表、路由快照、滤镜与分页等
│   ├── nginx.conf      生产托管 + 反代（含 demo. / astra. 两个独立 server 块）
│   └── Dockerfile
├── backend/            FastAPI 后端
│   ├── app/            main.py / models.py / schemas.py / config.py
│   │                   routers/（20 个）· services/（25 个）
│   ├── tests/          39 个 test_*.py（pytest，testpaths=tests）
│   └── Dockerfile
├── docs/               文档总仓（见[文档地图](#docs-map)）
│   ├── uiux/           ★ UI/UX 唯一规范来源
│   ├── model/          ★ 项目模型（CIM / PIM）
│   ├── redesign-v3/    v3 重设计方案 + ref/（设计过程证据）
│   ├── deepdemosv2/    v2 方案包
│   └── logs/           事故复盘
├── scripts/            运维与回填脚本（封面回填、OSS 修正、评论迁论坛、模型同步…）
├── tooling/            项目模型提取/校验/渲染 + UIUX 令牌与间距工具
├── stylepkg/           视觉规范包（neo-brutalist-playful）
├── .github/workflows/  ci.yml（前端四步门）· model-gate.yml（模型门禁）
├── .githooks/          pre-commit：模型骨架 hash 防呆
├── start-dev.ps1/.bat  本地一键启动
└── docker-compose.yml  生产编排（backend + frontend，两个 volume）

---

安全须知（部署前逐条过）

这是一个开放上传的展示站，密钥和默认口令是最容易出事的地方：

完整清单与命令见 DEPLOY.md 的「上线前安全清单」。

---

部署

# 云服务器 + Docker Compose + nginx（当前线上拓扑）
见 DEPLOY.md

# 阿里云一键路径（装 Docker → 放项目 → compose 起）
见 DEPLOY_ALIYUN.md

两份文档都在仓库根目录：DEPLOY.md · DEPLOY_ALIYUN.md。 编排文件是根目录的 docker-compose.yml（backend + frontend 两个 service，demo-data / demo-storage 两个 volume）。

历史说明：早期方案是 Cloudflare Worker 全栈（Pages + Workers + D1 + R2），现已弃用（git 历史可见）。 线上以「云服务器 + FastAPI + nginx + Docker Compose」为准。

---

开发与测试

# 前端（cd frontend）
npm run lint        # eslint src tests
npm run typecheck   # vue-tsc --noEmit
npm run lint:css    # stylelint "src/styles/**/*.css"
npm run test        # vitest run
npm run build       # clean && vue-tsc -b && vite build

后端测试：cd backend 后跑 pytest（pytest.ini 已把 testpaths 指到 tests/，39 个测试文件）。

CI 有两道门（.github/workflows/）：

本地还有 .githooks/pre-commit：暂存区里出现 backend/app 或 frontend/src 改动时自动重算模型骨架 hash （启用一次：git config core.hooksPath .githooks）。

UI/UX 的规矩：改视觉或动效前先读 docs/uiux/README.md —— 它是唯一规范来源， 且每条条款都必须有门禁盯着（vitest 护栏 / stylelint / 生成物 hash / CI 脚本），没门禁的条款不算数。

---

已知限制

诚实列出来，比吹功能更让人信：

• SQLite 单写：属单机级扩展。没有 Alembic 迁移、没有状态机、没有配额。
• gh 登录与「gh 仓库一步迁移」都还没做（idea.md 的两条 todo）。
• zip 解压没有防护：压缩比 / 条目数 / 符号链接都还没校验（DEPLOY.md 安全清单里的待办）。
• 文档里的 web/ 路径是历史残留：DEPLOY.md、backend-design.md、backend/README.md、 FRONTEND_HANDOFF.md、旧 README.md 目录树都写 web/frontend、web/backend， 但仓库根下没有 web/ 目录（早期结构如此，后来把 web/ 拍平了）。本文的路径以实际为准。
• docs/deepdemosv2/idea.md 是 0 字节空文件。
• docs/redesign-v3/ref/ 里塞了 306 个设计过程文件（206 张 PNG + CDP 探针脚本 + 抓取的参考站 HTML）， 是"设计证据"而非产品资源；想看产品长什么样请直接开线上站。
• 只在一台机器上验证过的命令：本文所有命令都来自仓库文件（出处见各节），但除 start-dev.ps1 与其调用的 uvicorn / npm run dev 外，没有在本次改写中重新逐条跑过。
• 截图里的数字会变：作品数 / 标签数 / 在线数是实拍当时的读数（1121 Demo / 332 标签值），不是常量。

---

许可与致谢

本仓库根目录没有 LICENSE 文件，gh repo view 的 licenseInfo 也是 null， frontend/package.json 里没有 license 字段。所以本文不声明任何开源许可 —— 按 GitHub 的默认规则，未声明许可即保留所有权利。要开源请仓库主人自行补 LICENSE 并确认版权署名。

第三方依赖的许可见各自的 package.json / requirements.txt；视觉风格参考的提炼与对账记录在 docs/redesign-v3/ref/（含参考站原文抓取与抓取日期）。

---

相关

• README_EN.md —— 本文的英文镜像（同样含技术栈、拓扑、部署与安全要点）
• API_CONTRACT.md —— 接口契约（要接后端就读它）
• AI_AGENT_GUIDE.md —— 让 agent 自动投稿的 prompt 模板