【免费下载链接】doopThe open-source alternative to Paper.design. A multiplayer design canvas where humans and AI agents design together, live. MCP built in.项目地址https://gitcode.com/gh_mirrors/doop1/doop点击查看免费下载Doop 是一款开源的 Paper.design 替代品——一个支持多人协作的设计画布让人类与 AI 智能体实时同屏设计MCP 协议开箱即用。本文将带你快速上手 Doop体验 Claude Code、ChatGPT 等 AI 智能体在画布上直播设计的完整流程并介绍共享协作与外部工具集成的实用技巧。一句话介绍设计不再是发提示词再刷新传统用法里AI 设计工具的工作流是粘贴提示词 → 等待 → 刷新页面看结果。而 Doop 把这件事变成了一场直播无限画布 Canvas每个设计都放在可分享的画布/c/id上画布由一个个Frame画板组成画板里渲染的是真实 HTML跑在沙箱 iframe 中真·多人协作实时光标、在线状态、按画板显示的谁在编辑标记、Undo/Redo、钉在元素上的评论和活动流全部通过一个 WebSocket 房间同步MCP 内建内置 MCP 服务器任何 MCP 客户端Claude Code、Codex、ChatGPT、Cursor、OpenCode……连上就能以你的身份直接编辑画布内置 Doop Agent没有自己的智能体也没关系内置 Agent 基于 GPT、Claude、Gemini、DeepSeek、Kimi 或 Qwen 模型运行队列一张卡片或 提及一个角色它会自动开工。快速上手三步启动你的设计画布Doop 支持零配置本地运行内嵌 Postgres无需外部服务也支持 Docker 一键自托管。方式一本地开发模式git clone https://gitcode.com/gh_mirrors/doop1/doop cd doop bun install bun run dev启动后服务地址Web 应用http://localhost:4300API WebSocket MCP 服务器http://localhost:4400方式二Docker 自托管生产构建BETTER_AUTH_SECRET$(openssl rand -hex 32) docker compose up -d应用和 Postgres 会一起跑在 4400 端口编排文件见 docker-compose.yml。不想要 Docker 也可以bun run build bun run start单进程运行设置DATABASE_URL即可切换为真实 Postgres。登录后你会来到 Home 页顶部是 Agent 提示框描述你想要的东西Doop 会创建画布并给 Doop Agent 排设计草稿下方是画布列表侧栏则是工作区与已连接的智能体。 小提醒.env里设置ANTHROPIC_API_KEY可以激活内置 Doop Agent 的免费额度通过 MCP 自己连接的智能体则完全不需要任何密钥。完整的环境变量清单可参考 .env.example。最震撼的部分看着 AI 逐字直播你的设计注册后的第一块画布自带一场欢迎表演Doop Agent 会流式输出一帧欢迎设计你能看到它的状态条、任务面板和画板边缘的脉冲虚线边框——而这一切用的正是真实 Agent 走的那套机制。背后的体验细节非常讲究打字机式流式揭示Agent 的 HTML 立即入库但所有观众看到的是服务器以约 500 字符/秒匀速广播的版本——即使 Agent 一次性塞来大块 HTML也会播放成平滑的实时流中途未写完的标签还会被治愈修复保证画面永远能渲染实时任务旁白Agent 通过set_status汇报我正在做什么例如Sketching a mobile onboarding flow状态出现在左下角的 working-now 条、头像 tooltip 和活动流里任务面板侧边栏 Tasks 标签按智能体分组展示历史任务进行中的任务带脉冲动画和时长计时完成后打勾并记录耗时。想自己导网页、导 GitHub 仓库或把线上 App 的实时页面推到画布上Import 选择器提供了Website / Live app / GitHub repo三种来源右键画板选Export…就能下载 PNG 或 JPG。连接 AI 智能体一条命令接入你顺手的工具Doop 不绑定任何一家模型厂商。顶栏的Connect AI按钮会引导你完成各类连接选择页支持 Claude Code、Claude、ChatGPT、Codex、Cursor 和其他 MCP 客户端以 Claude Code 为例只需一条命令claude mcp add --transport http doop http://localhost:4300/mcp这会触发标准 MCP OAuth 流程浏览器弹出窗口登录 Doop 并授权即可。此后智能体以你的身份工作——任务面板里显示 for 你在线状态里显示你的头像。Codex 用户则用codex mcp add doop --url http://localhost:4300/mcp无头场景n8n、CI 等可以在 Settings → Agent keys 生成一个 agent key作为 Bearer 头直接鉴权。连接完成后让它设计点什么你就会看到这样的画面——左侧是正在被直播的价格区块画板带脉冲边框和 designing 徽章右侧 Agents 面板按时间排列它的每一条任务Agent 怎么懂这套流程三层引导MCP 初始化时下发instructions契约 →get_guide工具加载完整设计手册含截图审查检查点、流式工作流、多人协作礼仪源码见 server/guide.ts→ 工具返回结果时持续推一把提醒它先get_frame_screenshot看一眼自己设计的截图再收尾。工具全集create_frame、append_frame_html、edit_frame_html、generate_image等都列在 README.md 的 MCP tools 一节。团队共享默认私密按需开放和 Figma 一样画布默认私有只有所有者和被邀请的人能打开。点Share可以✉️ 按邮箱邀请协作者已有 Doop 账号的立即加入 单画布开启链接即可编辑恢复甩链接式协作 把画布移入 Workspace——团队成员天然共享其中所有画布支持 owner/admin/member 角色管理。安全模型上通过 MCP 连接的智能体继承的恰好是批准它的那个用户的权限身份链来自 OAuth token——智能体拿不到比主人更多的访问权。集成生态把 Doop 接进你的日常工作流侧栏的Integrations页把 Doop 和你的工具链打通集成能做什么Linear通过 MCP 读取 issue或把一张 issue 委托给 Doop设计完画布并回报结果docs/linear.mdSlack在工作区 Doop 一段 brief它设计好画布后回帖docs/slack.mdMeta Ads用自动化/automations按定时把广告素材拉到画布上Figma / Canva双向导入导出为可编辑 HTML 画板Doop Cloud 功能此外还有几个值得了解的设计设计记忆Design memory把标杆画板钉为示例记录设计决策distiller 会提出可持续生效的风格规则让每个 Agent 都遵守画布内 Pages 组织从图层面板把画板归入命名页面支持 Undo/RedoAgent 也能用set_canvas_pages管理页面iOS / iPad 原生应用SwiftUI 界面 自研 BlitzRust 编写的 HTML/CSS 渲染引擎无 WebKit原生画布与 Web 共用同一套 REST API 和 WebSocket 房间工程在 ios/桌面应用desktop/ 基于 Tauri还内置了连接本地 Claude / Codex 的能力。写给谁看Doop 适合三类人设计师 / 设计团队——想要 Paper.design 的开源替代品、需要自托管和数据可控AI 玩家——手里有 Claude Code、Codex、Cursor 等任意 Agent想让它们边想边画并全程可视独立开发者——AGPL-3.0 开源docker compose up就能起一套带 Postgres 的生产实例社区欢迎 PR见 CONTRIBUTING.md。架构上也非常清晰server/ 是单进程 Node 服务REST WebSocket 房间 MCPshared/types.ts 定义服务端与客户端共享的协议类型src/ 是 React Vite zustand 客户端智能体角色定义在 shared/agents.ts。想深入源码从 README 的 Architecture 一节和 server/mcp.ts 读起即可。总结Doop 的核心价值一句话让 AI 智能体和人类在同一个画布上、用同一套实时通道协作设计。MCP 内建 OAuth 身份继承 流式直播渲染这三点组合起来把AI 生成设计从黑盒变成了可围观、可干预、可迭代的团队工作。一条命令连接你的 Agent剩下的就是看它设计。赞分享【免费下载链接】doopThe open-source alternative to Paper.design. A multiplayer design canvas where humans and AI agents design together, live. MCP built in.项目地址https://gitcode.com/gh_mirrors/doop1/doop点击查看免费下载相关推荐如何在 llama.cpp 里跑通 Qwen3.6-35B-A3B 多模态从命令行到 API 的完整指南如何在 llama.cpp 里跑通 Qwen3.6 35B A3B 多模态从命令行到 API 的完整指南 想在本地跑一个既能看图、又几乎不设防的多模态大模型人工智能大模型多模态计算机视觉AI Agent强化学习GUI 自动化为什么该让 AI 智能体拥有自己的设计画布Doop 彻底颠覆设计协作方式为什么该让 AI 智能体拥有自己的设计画布Doop 彻底颠覆设计协作方式 Doop 是一个开源的多player AI 设计画布被称为Paper.desigHugo AGENTS.md 深度解读写给人类与 AI 智能体的开发规范Hugo AGENTS.md 深度解读写给人类与 AI 智能体的开发规范 AGENTS.md 是 Hugo 仓库为代码贡献者包括 AI 编码智能体制定的行前端CLI模板引擎创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/25 6:45:02 · 阅读 1.2k Doop 深度体验：开源版 Paper.design 如何让人类与 AI 智能体同屏设计
【免费下载链接】doopThe open-source alternative to Paper.design. A multiplayer design canvas where humans and AI agents design together, live. MCP built in.项目地址https://gitcode.com/gh_mirrors/doop1/doop点击查看免费下载Doop 是一款开源的 Paper.design 替代品——一个支持多人协作的设计画布让人类与 AI 智能体实时同屏设计MCP 协议开箱即用。本文将带你快速上手 Doop体验 Claude Code、ChatGPT 等 AI 智能体在画布上直播设计的完整流程并介绍共享协作与外部工具集成的实用技巧。一句话介绍设计不再是发提示词再刷新传统用法里AI 设计工具的工作流是粘贴提示词 → 等待 → 刷新页面看结果。而 Doop 把这件事变成了一场直播无限画布 Canvas每个设计都放在可分享的画布/c/id上画布由一个个Frame画板组成画板里渲染的是真实 HTML跑在沙箱 iframe 中真·多人协作实时光标、在线状态、按画板显示的谁在编辑标记、Undo/Redo、钉在元素上的评论和活动流全部通过一个 WebSocket 房间同步MCP 内建内置 MCP 服务器任何 MCP 客户端Claude Code、Codex、ChatGPT、Cursor、OpenCode……连上就能以你的身份直接编辑画布内置 Doop Agent没有自己的智能体也没关系内置 Agent 基于 GPT、Claude、Gemini、DeepSeek、Kimi 或 Qwen 模型运行队列一张卡片或 提及一个角色它会自动开工。快速上手三步启动你的设计画布Doop 支持零配置本地运行内嵌 Postgres无需外部服务也支持 Docker 一键自托管。方式一本地开发模式git clone https://gitcode.com/gh_mirrors/doop1/doop cd doop bun install bun run dev启动后服务地址Web 应用http://localhost:4300API WebSocket MCP 服务器http://localhost:4400方式二Docker 自托管生产构建BETTER_AUTH_SECRET$(openssl rand -hex 32) docker compose up -d应用和 Postgres 会一起跑在 4400 端口编排文件见 docker-compose.yml。不想要 Docker 也可以bun run build bun run start单进程运行设置DATABASE_URL即可切换为真实 Postgres。登录后你会来到 Home 页顶部是 Agent 提示框描述你想要的东西Doop 会创建画布并给 Doop Agent 排设计草稿下方是画布列表侧栏则是工作区与已连接的智能体。 小提醒.env里设置ANTHROPIC_API_KEY可以激活内置 Doop Agent 的免费额度通过 MCP 自己连接的智能体则完全不需要任何密钥。完整的环境变量清单可参考 .env.example。最震撼的部分看着 AI 逐字直播你的设计注册后的第一块画布自带一场欢迎表演Doop Agent 会流式输出一帧欢迎设计你能看到它的状态条、任务面板和画板边缘的脉冲虚线边框——而这一切用的正是真实 Agent 走的那套机制。背后的体验细节非常讲究打字机式流式揭示Agent 的 HTML 立即入库但所有观众看到的是服务器以约 500 字符/秒匀速广播的版本——即使 Agent 一次性塞来大块 HTML也会播放成平滑的实时流中途未写完的标签还会被治愈修复保证画面永远能渲染实时任务旁白Agent 通过set_status汇报我正在做什么例如Sketching a mobile onboarding flow状态出现在左下角的 working-now 条、头像 tooltip 和活动流里任务面板侧边栏 Tasks 标签按智能体分组展示历史任务进行中的任务带脉冲动画和时长计时完成后打勾并记录耗时。想自己导网页、导 GitHub 仓库或把线上 App 的实时页面推到画布上Import 选择器提供了Website / Live app / GitHub repo三种来源右键画板选Export…就能下载 PNG 或 JPG。连接 AI 智能体一条命令接入你顺手的工具Doop 不绑定任何一家模型厂商。顶栏的Connect AI按钮会引导你完成各类连接选择页支持 Claude Code、Claude、ChatGPT、Codex、Cursor 和其他 MCP 客户端以 Claude Code 为例只需一条命令claude mcp add --transport http doop http://localhost:4300/mcp这会触发标准 MCP OAuth 流程浏览器弹出窗口登录 Doop 并授权即可。此后智能体以你的身份工作——任务面板里显示 for 你在线状态里显示你的头像。Codex 用户则用codex mcp add doop --url http://localhost:4300/mcp无头场景n8n、CI 等可以在 Settings → Agent keys 生成一个 agent key作为 Bearer 头直接鉴权。连接完成后让它设计点什么你就会看到这样的画面——左侧是正在被直播的价格区块画板带脉冲边框和 designing 徽章右侧 Agents 面板按时间排列它的每一条任务Agent 怎么懂这套流程三层引导MCP 初始化时下发instructions契约 →get_guide工具加载完整设计手册含截图审查检查点、流式工作流、多人协作礼仪源码见 server/guide.ts→ 工具返回结果时持续推一把提醒它先get_frame_screenshot看一眼自己设计的截图再收尾。工具全集create_frame、append_frame_html、edit_frame_html、generate_image等都列在 README.md 的 MCP tools 一节。团队共享默认私密按需开放和 Figma 一样画布默认私有只有所有者和被邀请的人能打开。点Share可以✉️ 按邮箱邀请协作者已有 Doop 账号的立即加入 单画布开启链接即可编辑恢复甩链接式协作 把画布移入 Workspace——团队成员天然共享其中所有画布支持 owner/admin/member 角色管理。安全模型上通过 MCP 连接的智能体继承的恰好是批准它的那个用户的权限身份链来自 OAuth token——智能体拿不到比主人更多的访问权。集成生态把 Doop 接进你的日常工作流侧栏的Integrations页把 Doop 和你的工具链打通集成能做什么Linear通过 MCP 读取 issue或把一张 issue 委托给 Doop设计完画布并回报结果docs/linear.mdSlack在工作区 Doop 一段 brief它设计好画布后回帖docs/slack.mdMeta Ads用自动化/automations按定时把广告素材拉到画布上Figma / Canva双向导入导出为可编辑 HTML 画板Doop Cloud 功能此外还有几个值得了解的设计设计记忆Design memory把标杆画板钉为示例记录设计决策distiller 会提出可持续生效的风格规则让每个 Agent 都遵守画布内 Pages 组织从图层面板把画板归入命名页面支持 Undo/RedoAgent 也能用set_canvas_pages管理页面iOS / iPad 原生应用SwiftUI 界面 自研 BlitzRust 编写的 HTML/CSS 渲染引擎无 WebKit原生画布与 Web 共用同一套 REST API 和 WebSocket 房间工程在 ios/桌面应用desktop/ 基于 Tauri还内置了连接本地 Claude / Codex 的能力。写给谁看Doop 适合三类人设计师 / 设计团队——想要 Paper.design 的开源替代品、需要自托管和数据可控AI 玩家——手里有 Claude Code、Codex、Cursor 等任意 Agent想让它们边想边画并全程可视独立开发者——AGPL-3.0 开源docker compose up就能起一套带 Postgres 的生产实例社区欢迎 PR见 CONTRIBUTING.md。架构上也非常清晰server/ 是单进程 Node 服务REST WebSocket 房间 MCPshared/types.ts 定义服务端与客户端共享的协议类型src/ 是 React Vite zustand 客户端智能体角色定义在 shared/agents.ts。想深入源码从 README 的 Architecture 一节和 server/mcp.ts 读起即可。总结Doop 的核心价值一句话让 AI 智能体和人类在同一个画布上、用同一套实时通道协作设计。MCP 内建 OAuth 身份继承 流式直播渲染这三点组合起来把AI 生成设计从黑盒变成了可围观、可干预、可迭代的团队工作。一条命令连接你的 Agent剩下的就是看它设计。赞分享【免费下载链接】doopThe open-source alternative to Paper.design. A multiplayer design canvas where humans and AI agents design together, live. MCP built in.项目地址https://gitcode.com/gh_mirrors/doop1/doop点击查看免费下载相关推荐如何在 llama.cpp 里跑通 Qwen3.6-35B-A3B 多模态从命令行到 API 的完整指南如何在 llama.cpp 里跑通 Qwen3.6 35B A3B 多模态从命令行到 API 的完整指南 想在本地跑一个既能看图、又几乎不设防的多模态大模型人工智能大模型多模态计算机视觉AI Agent强化学习GUI 自动化为什么该让 AI 智能体拥有自己的设计画布Doop 彻底颠覆设计协作方式为什么该让 AI 智能体拥有自己的设计画布Doop 彻底颠覆设计协作方式 Doop 是一个开源的多player AI 设计画布被称为Paper.desigHugo AGENTS.md 深度解读写给人类与 AI 智能体的开发规范Hugo AGENTS.md 深度解读写给人类与 AI 智能体的开发规范 AGENTS.md 是 Hugo 仓库为代码贡献者包括 AI 编码智能体制定的行前端CLI模板引擎创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考