Doop

人和AI Agent一起设计的开源实时画布

免费增值

AI图像/设计

更新于2026年11月13日

产品简介

Doop（doop.design）是一款面向人类设计师与 AI Agent 共同工作的开源多人实时设计画布，同时提供专为 Claude Code、Codex、ChatGPT、Cursor、Kimi、Qwen 等 MCP 客户端设计的「设计 MCP 服务」。传统设计工具通常把 AI 当成「输入提示词、等待出图、再刷新查看」的外挂能力，Doop 则把 Agent 变成画布上的第一公民：每个 Canvas 由多个 Frame 组成，Frame 以沙箱 iframe 渲染真实 HTML，人类在浏览器里直接编辑，Agent 通过内置 MCP 服务流式创建、修改、截图自查并持续推送设计结果。多人协作状态下，光标、在线状态、Frame 编辑、Agent 任务状态、评论与活动流全部实时同步。Doop 由 Kevin Goedecke 开发，基于 TypeScript、React、Express 与 Postgres 构建，采用 AGPL-3.0 开源协议，提供 doop.design 托管版与 Docker 自托管方案，定位为 Paper.design 的开源替代，适合把「代码 Agent」接入「可视化设计工作流」的团队使用。

主要功能

实时多人画布与真实 HTML 渲染：画布承载多个 Frame 画板，每个画板在沙箱环境中渲染可执行 HTML，人类与 Agent 同屏观察布局、样式与交互效果，避免只看到静态预览图。
设计专用 MCP 服务与 Agent 流式构建：通过 /mcp 端点暴露 20 余个设计工具，Agent 可创建画板、分块追加 HTML、读取布局、截图自查，设计内容随写作过程逐段出现在画面上。
Agent 自我审查与元素级精准修改：无头渲染器为 Agent 返回画板截图，Agent 可检查间距、对比度与溢出问题；支持悬停选中具体元素、只修改单个卡片或按钮，不必整页重生成。
画布记忆与可继承的设计规范：可固定示例画板、记录颜色与圆角偏好、沉淀品牌规则与排版约定，后续加入的 Agent 自动读取上下文，保持多轮与多 Agent 之间风格一致。
评论即任务与中途反馈闭环：在任意元素或任务上留言，评论会转为画布上的开放请求，Agent 在下一次工具调用时接收并修改，人类无需切回终端重复描述需求。
内置图像生成与素材工具调用：Agent 可直接使用图库搜索、开源图标、品牌 Logo、图片上传与 AI 生图能力，把背景图、插画、产品图直接放入对应画板区域。
多格式导入导出与代码仓库衔接：支持粘贴 URL、导入 HTML、Figma、Canva、PSD 与 GitHub 仓库，导出 PNG、PDF、HTML 或实时图片链接，并可从画板生成真实 HTML/CSS 与 Pull Request。
一键自托管与身份绑定协作：Docker 加 Postgres 可本地部署，MCP 连接使用 OAuth 登录，Agent 以当前用户身份操作画板，编辑记录、任务与评论均带归属与权限控制。

使用方法

打开 doop.design 注册或登录，新建一个 Canvas 画布，进入多人设计工作区。
在 Claude Code 等终端执行连接命令：claude mcp add --transport http doop https://doop.design/mcp。
在 Agent 环境运行 /mcp，选择 doop，浏览器弹窗登录并批准授权，完成 MCP 服务绑定。
向 Agent 下达设计任务，例如「设计定价页」或「重做 Hero 区」，Agent 会在画布新建 Frame 并流式写入 HTML。
在画布上观察 Agent 光标与任务状态，对具体元素留言，例如「卡片间距再紧凑一点」或「只保留一个强调色」。
等待 Agent 调用截图工具自查并迭代修改，确认后导出图片、HTML，或连接仓库生成前端代码与 PR。
需要私有部署时，使用 Docker Compose 启动 Doop 与 Postgres，把 Agent 指向自建实例的 /mcp 地址。

产品价格

托管版 Beta 免费：Doop 在 Beta 期间对托管版提供免费使用，可创建画布、连接 Agent、使用基础生图与协作能力，不强制额外购买独立 AI 订阅。
自带模型与订阅：不要求提交 Doop 专属 API Key，Agent 继续运行在用户已有的 Claude、ChatGPT、Codex 等模型与账号体系上，仅按原模型渠道计费。
开源自托管免费：代码以 AGPL-3.0 开源，可免费自托管全部画布、MCP 服务与数据；官方页面展示过简单定价入口，但当前未公开完整付费档位，正式商业套餐可能随 Beta 结束调整。
免费额度限制：托管免费层默认包含少量常驻 Agent 任务额度，超出后需接入自有模型后端或 API Key，具体配额以官网登录后账单页为准。

应用场景

落地页与营销站点快速原型设计：让 Claude Code 或 Codex 在画布上边写边渲染 Hero、定价表、功能区与 CTA，市场与产品人员实时看结构并直接批注修改点。
设计评审与多 Agent 协同改稿：UX、文案、品牌、无障碍、视觉打磨等专项 Agent 同处一个画板，分别处理信息层级、微文案、配色规范与对比度问题，减少来回截图沟通。
前端开发的可视化交付流程：开发者把仓库页面导入画布，Agent 生成可编辑 HTML 变体并产出 PR，设计意图不再依赖标注稿，降低设计与代码之间的信息损耗。
品牌规范沉淀与多轮一致性控制：把已通过的颜色、圆角、字体与排版决策写入画布记忆，后续任意新 Agent 加入都继承同一套视觉规则，适合长期运营多个页面与子品牌。
可嵌入的实时素材与 OG 图生产：每个 Frame 拥有实时渲染链接，可用于文档、社媒、博客封面与 PR 预览图，设计更新后嵌入位置自动同步最新画面。
独立开发者与小型团队低成本搭建界面：借助开源自托管与 MCP 工作流，小团队无需采购重型设计系统，也能让编码 Agent 直接产出可审查、可导出、可上线的前端界面。