Doop

这是什么？适合谁？

Doop（kgoedecke/doop）是 Paper.design 的开源替代品——一个多人在线设计画布，人类与 AI Agent 可以在同一画布上协同设计。

核心价值：不像 Figma 的「AI 插件」模式（AI 是辅助），也不像纯 AI 生成工具（人只是旁观者），Doop 让人类和 AI Agent 在同一画布上「并肩工作」——双方都可以创建、修改、评论设计元素。

适合人群：

• 设计师：想与 AI Agent 实时协作，而不是「生成 → 不满意 → 重新生成」的循环
• 产品团队：需要多人 + AI 同时在设计稿上工作的场景
• 自由职业者：Paper.design 的免费替代方案
• 开源社区：想自建设计协作平台

不适合：只需要 AI 生成图片的用户（用 Midjourney/DALL-E）；单人设计不需要协作的用户；需要专业设计工具全部功能的用户（Figma 功能更全）。

使用前提：Node.js 18+；现代浏览器（Chrome/Firefox/Edge）；AGPL 许可需注意商用限制。

准备工作

1. Node.js 18+：运行服务端
2. 现代浏览器：Chrome 90+ / Firefox 90+ / Edge 90+
3. LLM API Key（可选）：如需 AI Agent 协作功能
4. 成本：Doop 开源免费（AGPL 3.0）；如需商用闭源衍生，需联系作者获取商业许可
5. 时间预算：部署 5 分钟；上手使用 10 分钟

快速上手（3 步）

第一步：部署

git clone https://github.com/kgoedecke/doop.git
cd doop
npm install && npm run build
npm start

访问 http://localhost:3000

第二步：创建画布

1. 点击「New Canvas」
2. 命名画布（如「App Redesign v2」）
3. 邀请协作者（通过链接分享）

第三步：与 AI 协作

1. 点击「Add AI Agent」按钮
2. 配置 AI Agent 的角色（如「UI 审查员」「配色建议师」）
3. AI Agent 加入画布，开始协同工作

初级用法

画布操作

• 拖拽：移动元素
• 缩放：滚轮缩放画布
• 评论：在任意位置添加评论，人类和 AI 均可回复
• 图层：左侧图层面板管理元素层级

AI Agent 角色

导出

# 导出为 PNG
# 导出为 SVG
# 导出为 PDF（含评论）

高级玩法

自定义 AI Agent

// agents/custom-agent.js
export default {
  name: 'Brand Guardian',
  onElementCreated: (element) => {
    // 检查元素是否符合品牌规范
  },
  onDesignReview: (canvas) => {
    // 全局设计审查
  }
};

设计系统集成

将设计系统（Design Tokens）导入 Doop，AI Agent 自动检查设计是否符合规范：

# design-tokens.yaml
colors:
  primary: '#3B82F6'
  secondary: '#10B981'
spacing:
  unit: 8

版本控制

# 保存画布版本
doop snapshot save "v1.0 - Initial design"

# 对比版本差异
doop diff v1.0 v2.0

小技巧

1. 快捷键：按 Space 拖动画布，Ctrl+Z 撤销
2. AI 提示词：给 AI Agent 提供具体的审查标准（如「检查按钮间距是否 ≥ 8px」）
3. 模板库：从社区模板库快速启动设计
4. 离线模式：AI Agent 功能需要网络，但基础画布可离线使用
5. 多人光标：实时看到其他协作者的鼠标位置

常见踩坑

踩坑 1：AI Agent 建议过于笼统

现象：AI Agent 说「这个设计可以更好」，但不给具体建议

原因：AI Agent 的提示词不够具体

解决：为 AI Agent 提供具体的审查清单（如「检查：1. 按钮颜色对比度 ≥ 4.5:1 2. 字体大小 ≥ 14px」）

踩坑 2：多人编辑冲突

现象：两个用户同时修改同一元素

原因：实时协作的冲突解决不完善

解决：Doop 使用 CRDT 算法自动合并，复杂冲突会提示用户手动选择

踩坑 3：AGPL 许可限制

现象：想将 Doop 集成到闭源 SaaS 产品中

原因：AGPL 3.0 要求网络使用也需开源

解决：联系作者获取商业许可；或仅将 Doop 作为独立服务使用（不修改源码）

踩坑 4：性能问题

现象：大型画布（100+ 元素）操作卡顿

原因：Canvas 渲染性能瓶颈

解决：使用图层分组减少渲染元素；关闭不必要的 AI Agent

踩坑 5：AI Agent 消耗过多 Token

现象：AI Agent 频繁分析画布导致 API 费用高

原因：AI Agent 的审查频率过高

解决：在 Agent 设置中调整审查间隔（如每 5 分钟一次而非实时）

常见问题 FAQ

Q1: Doop 和 Figma 有什么区别？

A: Figma 是专业设计工具，功能全面但 AI 能力是插件形式。Doop 的设计理念是「人机协同画布」——AI Agent 是一等公民，可以主动参与设计而非被动等待指令。Figma 适合专业设计师，Doop 适合想要 AI 深度参与设计流程的团队。

Q2: AGPL 许可对我有什么影响？

A: 如果你修改了 Doop 的源码并通过网络提供服务，你必须开源你的修改。如果你只是部署使用而不修改源码，AGPL 没有额外限制。对于 SaaS 产品，建议联系作者获取商业许可。

Q3: 支持哪些 AI 模型？

A: 支持 OpenAI（GPT-4o）、Anthropic（Claude）、DeepSeek。通过 API Key 配置。

Q4: 可以自托管吗？

A: 可以。Doop 设计为完全自托管，所有数据存储在你的服务器上。

Q5: 和 Paper.design 相比如何？

A: Paper.design 是商业产品，功能更完善但需要付费。Doop 是开源替代品，核心的人机协同画布功能已实现，但部分高级功能（如设计系统管理、高级权限控制）仍在开发中。

进阶学习建议

掌握 Doop 基础后，建议深入：

1. 设计系统工程化：将 Design Tokens 与 AI Agent 的审查规则联动，实现「设计系统自动执行」——设计师拖拽元素，AI Agent 实时检查是否符合设计规范。
2. 多 Agent 设计评审：让多个 AI Agent 扮演不同角色（品牌顾问、无障碍专家、性能优化师）同时评审设计，模拟真实的设计评审会。结合 TabTin（多 Agent 协作空间）实现更复杂的协同场景。
3. 设计决策追溯：将 Doop 的设计历史导出为结构化数据，分析「设计决策的演变过程」——为什么这个按钮从蓝色变成了绿色？AI Agent 的建议起到了什么作用？

参考链接

• 官方仓库
• Paper.design
• AGPL 3.0 License

最后更新：2026-08-26 · 作者：MagicNetWorld · 基于公开资料整理，AI 辅助生成