Doop Skill：AI 与人类并肩协作的多人实时设计画布

总结

Doop 是 Paper.design 的开源替代品——一个多人实时设计画布，人类设计师和 AI Agent 在同一个 Canvas 中并肩协作，实时看到彼此的光标、操作和设计流。内置 MCP Server，Claude Code 等 Agent 可直接连接画布、用自然语言驱动设计迭代，无需切换工具或刷新页面等待结果。截至 2026-08-28 约 426 星，是近期设计工具领域增长最快的开源项目之一。

功能与原则

Doop 提供了一个基于真实 HTML 渲染的多人协作画布，每个 Canvas 包含多个 Frame（画板），AI Agent 通过内置 MCP 协议直接操作 Frame、流式推送设计结果，人类协作者在同一画布上实时观察并反馈。其核心理念是「用 Agent 而非提示词刷新」：连接一次，Agent 自主草图、流式构建、自我审查，全程可见。

核心设计原则：
– 所见即所得的实时协作：光标、存在信号、Frame 编辑状态、Agent 状态、活动流全部通过 WebSocket 实时同步
– 设计记忆（Design Memory）：可固定示范 Frame、捕获决策，并让 AI 提炼出持久的设计风格规则，后续所有 Agent 自动遵循
– MCP 原生集成：Doop Agent 和外部 MCP Client（Claude Code 等）均可连接，同一套画布，多种 Agent 入口
– 默认私密：通过邮箱邀请协作者，或按 Canvas 开关链接分享；Agent 继承其人类用户的精确权限
– 一键自托管：docker compose up，零配置（嵌入式 Postgres），无需外部服务

认可度

• GitHub Star：约 426 星（截至 2026-08-28），出生于 2026-08-22，上线约 6 天即进入 GitHub Trending
• 定位：开源替代 Paper.design，Trending 期间受到设计 + AI 开发者社区双重关注
• 社媒讨论：在 X/Twitter、HN、Product Hunt 均有较高讨论热度，被多个 AI 设计社区推荐

链接

GitHub：https://github.com/kgoedecke/doop

官网（托管版）：https://doop.design

原作者

kgoedecke（GitHub username）——独立开发者，专注于 AI 原生设计工具生态，Doop 是其 Paper.design 开源替代方案的开源实现。

介绍

Doop 是一个多人实时设计画布，核心差异在于将 AI Agent 深度嵌入设计流程本身。传统设计工具中，AI 辅助通常是「输入提示词 → 等待图片生成 → 刷新页面看结果」的割裂体验；Doop 则让 AI Agent 和人类设计师共处同一画布，实时推送设计流，每一步操作都有可见状态。

每个 Canvas 包含多个 Frame（画板），Frame 在沙箱 iframe 中渲染真实 HTML，而非静态图片。这意味着 AI 生成的「设计」是可直接查看、标注、继续编辑的 HTML 片段，而非黑盒图片。设计团队可以在同一个 Frame 上分工协作，AI 做初稿，人类做细节调整，所有修改都在同一视图下完成。

Doop 还内置了一个 Doop Agent 服务端——无需连接外部 MCP Client，在 Doop 内部就可以派发设计任务（通过看板卡、@角色提及、评论反馈），Agent 自动接单执行，适合设计团队内部的自动化工作流。

特点

• AI 直接操作画布：通过 MCP 协议，Claude Code（或其他 MCP Client）连接后可直接创建 Frame、流式推送设计内容，设计师实时观察
• 内置 Doop Agent：无需外部 Agent Client，在 Doop 看板中即可派发设计任务，Agent 自动完成并推送结果到画布
• 真实多人协作：WebSocket 驱动的实时光标、存在信号、编辑状态、活动流；支持评论、撤销/重做、元素级标注
• 设计记忆与风格提炼：可固定示范 Frame 并让 AI 提炼风格规则，后续所有设计自动遵循，减少风格漂移
• 一键自托管：一行 Docker 命令完成部署，嵌入式 Postgres，零外部依赖；也提供托管版 doop.design

使用方法

安装部署（自托管）

git clone https://github.com/kgoedecke/doop && cd doop
npm install
npm run dev
# Web app: http://localhost:4300
# API + WebSocket + MCP: http://localhost:4400

生产环境（Docker）：

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

连接 Claude Code（外部 MCP Client）

claude mcp add --transport http doop http://localhost:4300/mcp

触发标准 MCP OAuth 流程：浏览器窗口打开 → 用户授权 → Agent 连接成功，可直接对话要求设计。

连接后让 Agent 设计

在画布 /c/<canvas_id> 上设计一个落地页 hero 区，包含标题、副标题和一个行动按钮。

Agent 会创建 Frame、流式推送 HTML 内容，人类在画布上实时看到渲染结果。

Doop Agent 内部派发（无需外部 Client）

• 看板队列设计任务
• @提及一个角色（UX、Copy、Brand、Accessibility）
• 在元素评论中 @Doop Agent 反馈

使用场景与人群

适用场景：
– 设计团队与 AI 协作做 UI 设计、品牌素材
– 产品经理快速生成线框图，与设计师实时迭代
– AI 原生设计工作流搭建（MCP + Agent 驱动设计）
– 设计系统维护（用 Design Memory 固化风格规则）

目标用户：
– UI/UX 设计师（需要 AI 辅助但不想割裂工作流）
– 前端/全栈开发者（用 Claude Code 直接在画布上生成 UI）
– AI 产品经理（快速原型验证，人机协作）
– 设计 AI 研究者（多 Agent 设计协作框架研究）

输入与输出案例

案例 1：Claude Code 设计落地页

输入（给 Agent）：

在画布 /c/abc123 上设计一个 SaaS 产品落地页 hero 区，要求：主标题、副标题、行动按钮（Get Started），暗色主题。

输出：
Agent 在 Canvas 上新建 Frame，Frame 内流式渲染真实 HTML（暗色背景、H1 标题、副标题文本、蓝色按钮），设计师在画布上实时看到每个元素的推送过程，可随时评论标注或要求修改。

案例 2：Doop Agent 看板派发

输入（设计师在评论中 @UX）：

帮我把这个 Frame 的移动端适配重新做一版，参考之前固定的 mobile-spec Frame。

输出：
Doop Agent 自动接单，参考 Design Memory 中的 mobile-spec 风格规则，在新 Frame 中推送适配后的移动端 HTML，设计师无需切换工具或等待外部 AI 调用完成。

GitHub: https://github.com/kgoedecke/doop