Doop 是一个用 TypeScript 构建的开源多人设计画布，定位为 Paper.design 的开源替代品。它允许人类设计师和 AI Agent 在同一个 Canvas 中实时协作，支持浏览器编辑、实时光标/在线状态、评论、活动流，以及通过内置 MCP Server 让 Claude Code 或其他 MCP 客户端直接创建和修改设计稿。每个设计以 Canvas 为单位，内部包含多个 Frame，Frame 使用沙箱 iframe 渲染真实 HTML。项目支持本地零配置启动、Docker 自托管和云端部署。
适用领域
AI 设计工具 / 多人协作白板/画布 / MCP Server / 前端设计与原型工具 / 实时协作应用 / AI Agent 工作流 / 自托管 SaaS / HTML/CSS 原型生成
配置难度
中高。普通前端开发者可以较快本地运行，但若要深入二次开发，需要理解 TypeScript 全栈应用、WebSocket 实时协作、MCP 协议、OAuth、Postgres/PGlite、Docker 部署和浏览器截图服务。生产级自托管也需要一定后端和 DevOps 经验。
商业价值
对国内团队而言，Doop 的价值在于提供一个可自托管、可二次开发的 AI 设计协作底座。它可以用于构建面向设计师和产品团队的 AI 原型工具、企业内部设计协作平台、AI Agent 驱动的 UI 生成工作流，或作为 MCP 应用案例进行技术验证。相比完全依赖商业 SaaS，自托管能增强数据控制能力；但商业化落地需要重点评估 AGPL-3.0 合规、产品成熟度、模型接入成本和团队运维能力。
01
技术亮点
- 内置 MCP Server，可以让 Claude Code 或其他 MCP 客户端通过 OAuth 授权后直接操作设计画布
- 真正的实时多人协作：光标、在线状态、Frame 编辑状态、评论和活动流都通过 WebSocket 同步
- AI Agent 的设计过程是实时流式展示，而不是传统的提示词提交后等待刷新
- Frame 渲染真实 HTML，并在沙箱 iframe 中展示，适合生成网页原型和 UI 方案
- 支持服务端平滑打字机式 reveal，即使 AI 一次性提交大量 HTML，也能在画布中以流式方式呈现
- 权限模型较完整：账户登录、私有 Canvas、按邮箱邀请协作者、按 Canvas 开启链接共享
- 开发体验友好：npm run dev 可零配置启动，PGlite 本地持久化，无需一开始配置外部数据库
- 支持 Docker 生产部署，适合自托管
- AGPL-3.0 开源，便于研究和二次开发
- 设计记忆、示例 Frame 固定、设计规则沉淀等功能适合长期团队协作
02
目标用户
- 希望使用 AI 辅助做 UI/网页设计的产品团队
- 前端开发者和独立开发者
- 设计师与设计团队
- 需要自托管设计协作工具的企业或创业团队
- 正在构建 MCP/AI Agent 工作流的开发者
- 希望研究实时协作、WebSocket、Canvas 编辑器、AI 设计产品的技术团队
03
配置要求
- 开发环境可以零配置运行，默认使用嵌入式 Postgres/PGlite，数据保存在 data/pg
- 生产环境必须设置 BETTER_AUTH_SECRET，建议使用长随机字符串
- 生产环境需要设置 BETTER_AUTH_URL，例如 https://doop.example.com，用于 OAuth URL 生成
- 生产部署建议配置 DATABASE_URL 使用真实 Postgres；PGlite 只适合单实例、带持久化卷的小规模部署
- 可选配置 TRUSTED_ORIGINS，用逗号分隔允许的来源
- 如需邮件验证和找回密码，需要配置 SMTP_HOST 等 SMTP 相关环境变量
- Frame 截图依赖 Chrome/Chromium，若自动检测失败需要设置 CHROME_PATH
- 如需集成 Anthropic、图库、对象存储、分析等能力，可根据 .env.example 配置对应环境变量
- Docker 部署时健康检查接口为 GET /healthz
04
适用场景
- 让 Claude Code 等 AI Agent 在设计画布中实时生成网页/UI 原型
- 多人同时编辑设计画布，查看彼此光标、在线状态、Frame 修改和活动记录
- 创建 HTML/CSS 驱动的可视化设计稿或 Landing Page 原型
- 通过 MCP 工具链让 AI Agent 创建 Frame、追加 HTML、截图复查并迭代设计
- 自托管一个私有 AI 设计协作平台，避免将设计数据完全托管到第三方 SaaS
- 作为学习项目研究 MCP OAuth、AI Agent 协作、WebSocket 实时同步、PGlite/Postgres 持久化等架构
05
部署与配置
- 克隆仓库：git clone https://github.com/kgoedecke/doop && cd doop
- 安装依赖：npm install
- 开发模式启动：npm run dev
- 访问 Web 应用：http://localhost:4300
- 访问 API、WebSocket、MCP Server：http://localhost:4400，开发环境中 Web 端会代理 /api、/ws、/mcp
- 连接 Claude Code：claude mcp add --transport http doop http://localhost:4300/mcp
- Docker 方式启动生产环境：BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -d
- 非 Docker 生产构建：npm run build && npm start
06
风险与注意事项
- 许可证为 AGPL-3.0，如果用于商业闭源产品或网络服务，需要特别注意开源合规要求
- 项目星标约 296，生态和社区成熟度仍处于早期阶段，生产使用前需要充分评估稳定性
- AI Agent 生成 HTML/CSS 的质量依赖模型能力和提示词/工具使用方式，结果可能不稳定
- Frame 渲染和截图依赖浏览器环境，部署环境中的 Chromium、字体、沙箱权限可能带来兼容问题
- PGlite 仅适合开发或单实例轻量部署，正式环境必须配置真实 Postgres 和持久化策略
- 多人实时协作、WebSocket、OAuth、MCP、截图服务等组合带来较高运维复杂度
- AI Agent 通过用户授权执行操作，虽然继承用户权限，但仍需要关注误操作、权限边界和审计
- 自托管时如果开启链接共享，需要额外注意设计数据泄露风险
- README 中提到的部分可选集成需要额外环境变量，实际能力可能取决于部署者配置
2026-08-25
第28名
新收录 · github_search
