Doop：AI 协作设计画布

项目简介

Doop 是 Paper.design 的开源替代品，一个面向人类和 AI 智能体的多人设计画布。每个设计位于可分享的 Canvas（/c/<id>）中，Canvas 内包含 Frames，也就是在沙箱 iframe 中渲染真实 HTML 的画板。人类在浏览器中编辑，AI 智能体通过内置的 MCP server 编辑，设计会实时流式呈现在画布上。所有协作者都能看到光标、在线状态、画板修改、智能体状态和活动流。

Doop 不绑定单一模型厂商：Claude Code、Codex、ChatGPT、Cursor、OpenCode 等 MCP 客户端都能在同一画布上设计；内置 Doop Agent 可运行在 GPT、Claude、Gemini、DeepSeek、Kimi、Qwen 等模型上。

主要功能

• 与智能体共同设计：连接 Claude Code 或任意 MCP 客户端后，可以看到它在你的画布上绘制草图、以流式方式输出并自行检查设计，光标就在你旁边。
• 内置 Doop Agent：无需连接外部客户端，在卡片里排队或 @mention 一个角色，它就会自行设计。
• Canvas 内页面：在 Layers 面板中新增、重命名、拖动排序页面，页面编辑支持撤销/重做，画板可跨页面移动。
• 可点击原型：在 Prototype 模式或 HTML 中把元素连到其他画板，支持点击、悬停、按下、按键或延时触发，以及导航、覆盖、返回、滚动、链接和过渡效果，可通过 Play 或 /c/<id>/proto 分享。
• 画布编辑器：绘制画板、矩形、圆形、钢笔路径和文本；编辑填充、描边、字体、Flex 布局、圆角、旋转等；支持标尺、参考线、吸附和 8%–1600% 缩放。
• 多人协作：实时光标、在线状态、跟随模式、逐画板编辑指示、撤销/重做、元素或画布评论线程、活动流，这些功能统一通过一个 WebSocket 房间进行。
• 设计记忆：固定示例画板、记录决策，由 distiller 提出可长期遵循的样式规则，供所有智能体使用。
• 默认私有：按邮箱邀请协作者，或分享可查看、评论、编辑的链接；智能体继承对应人类的访问权限。

安装与使用

本地开发需要安装 bun，并确保 Node 在 PATH 中：

git clone https://github.com/kgoedecke/doop && cd doop
bun install
bun run dev

启动后：

• Web 应用：http://localhost:4300
• API + WebSocket + MCP server：http://localhost:4400

也可以用 Docker 自托管生产版本：

BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -d

不想自行部署时，可使用托管版 doop.design。登录后从 Home 开始：描述想要的设计，Doop 会创建画布并为 Doop Agent 排队草稿；也可以打开已有画布、工作区或已连接智能体。顶栏的 Connect AI 会引导连接 Claude Code、Claude、ChatGPT、Codex、Cursor 或其他 MCP 客户端。

注意事项

• 默认数据持久化到 data/pg 中的内嵌 Postgres（PGlite），无需外部服务；设置 DATABASE_URL 可改用真实 Postgres。
• 可选集成（SMTP、图库、对象存储、分析等）在 .env.example 中配置对应变量前会自动降级，不影响基本使用。
• 内置 Doop Agent 需要用户在设置中连接模型账户（ChatGPT 订阅，或 OpenAI、Claude、Gemini、OpenRouter 密钥），或使用服务器的 ANTHROPIC_API_KEY 并通过 RESIDENT_TASK_LIMIT 分配免费任务；通过 MCP 自行连接的智能体不需要额外密钥。
• 项目使用 AGPL-3.0 许可证。

本作品整理自 GitHub 开源项目 kgoedecke/doop，原作者 @kgoedecke，许可证 AGPL-3.0。中文介绍由 AI 根据项目 README 整理，以原仓库为准。