basketikun/infinite-canvas · 上手攻略

仓库：basketikun/infinite-canvas
链接：https://github.com/basketikun/infinite-canvas
分类：agent
作者：Tom
更新：2026-07-12

这是什么

infinite-canvas 是一款面向 AI 创作的开源无限画布工作台。它把画布编排、AI 生图、参考图编辑、对话助手、提示词库和素材管理聚合在同一界面，用节点拖拽的方式组织创作流程，适合连续迭代视觉方案并最终导出成品。

它的核心特点：一是无限画布（多画布项目、节点拖拽缩放、连线、小地图、撤销重做），二是浏览器前台直连 OpenAI 兼容接口做 AI 生图和对话，无需自建后端，三是支持本地 Canvas Agent（通过 MCP 连接 Codex / Claude Code 让 AI Agent 直接操作画布）。

本质上，这是一个以画布为 UI 的 AI 创作工具，适合"想要画图又想控制构图"的创作者，而不是只想要一个文生图 API 的开发者。

解决什么问题

Midjourney 类工具缺少构图控制：纯 Prompt 生成图像很难精确控制布局和风格，infinite-canvas 用节点连线让用户可以"画"出构图逻辑。
创作素材散落各处：提示词、生图记录、参考图、AI 对话内容分散在不同工具里，画布把它们聚在一起。
没有 AI Agent 操作画布的方案：通过 MCP 让 Codex / Claude Code 直接读写画布节点，Agent 不再只返回文字，而是返回可视化方案。
需要低成本部署 AI 生图：浏览器前端直连 OpenAI 兼容接口，不依赖商业生图平台，自己部署后端即可。

快速安装

方式一：Vercel 一键部署（推荐，最快）

在 Vercel 中导入仓库即可，根目录 vercel.json 会自动构建 web/ 前端。AI 请求由浏览器前台直连用户自己的 OpenAI 兼容接口，不需要额外配置服务端。

https://vercel.com/new?template=https://github.com/basketikun/infinite-canvas

方式二：Docker（推荐本地部署）

git clone git@github.com:basketikun/infinite-canvas.git
cd infinite-canvas

# 构建镜像
docker build -t infinite-canvas .

# 运行（默认端口 3000）
docker run --rm -p 3000:3000 infinite-canvas
# 访问 http://localhost:3000

方式三：本地开发（前端热更新）

git clone git@github.com:basketikun/infinite-canvas.git
cd infinite-canvas/web
bun install
bun run dev
# 访问 http://localhost:3000

⚠️ 依赖说明：bun 是必需的前端包管理器（类似 npm），需提前安装：https://bun.sh

方式四：Render 一键部署

点击以下按钮即可在 Render 上部署：

https://render.com/deploy?repo=https://github.com/basketikun/infinite-canvas

核心用法

首次配置

启动后打开右上角配置弹窗，填入：

配置项	说明
Base URL	OpenAI 兼容接口地址，例如 `https://api.openai.com/v1` 或自建的兼容后端
API Key	对应接口的密钥
模型名	使用的模型（需与 Base URL 兼容）

如果使用 New API（newapi / chatgpt2api 等兼容方案），可在「系统设置 → 聊天方式 → 添加聊天设置」填入： https://canvas.best?apiKey={key}&baseUrl={address} 跳转后自动填充 API Key 和 Base URL。

无限画布基础操作

创建画布：多画布项目，节点可自由拖拽、缩放
节点连线：节点之间可以连线表达关系和流程
小地图：右下角小地图导航大型画布
撤销/重做：Ctrl+Z / Ctrl+Y
导入/导出：画布项目可保存导出

AI 生图（核心功能）

浏览器前台直接请求你配置的 OpenAI 兼容接口，支持：

文生图：输入 Prompt 生成图像
图生图：上传参考图，以图生图
参考图编辑：对已有图像进行风格/构图调整
Seedance 2.0：通过火山方舟 Agent Plan 接入

画布助手

选中画布节点，围绕该节点及其上游节点发起 AI 对话，生图结果自动插回画布，形成"对话→生成→编排→再对话"的循环。

本地 Canvas Agent（MCP 集成）

通过本机 Canvas Agent 连接 Codex（OpenAI）或 Claude Code（Anthropic），让 Agent 通过 MCP 协议直接操作当前画布。Agent 不再只返回文字描述，而是： - 在画布上生成节点 - 将生成结果插入画布 - 编排和管理画布结构

Codex App 插件：安装后会自动注册 MCP 并尝试拉起本地 Agent。

提示词库

浏览器前端直连多个 GitHub 开源提示词库项目，结果缓存到 IndexedDB，无网络时也能使用。

数据存储与同步

AI API Key、Base URL、画布内容、素材、生成记录默认保存在浏览器本地（IndexedDB）
可选配置 WebDAV 实现跨设备同步
不需要自建服务器即可使用大部分功能

典型适用场景

场景一：AI 图像创作与构图控制 用画布节点规划画面构图（主体位置、光线方向、背景元素），通过连线表达元素关系，AI 根据构图生成图像，比纯 Prompt 更精确。

场景二：多方案对比 在同一画布上并行生成多版设计方案，通过画布布局直观对比，选定方案后导出，其他方案保留供参考。

场景三：与 Claude Code / Codex 协同创作 通过 MCP 连接本地 Agent，用自然语言指挥 Agent 在画布上生成 UI 设计稿、漫画分镜、产品原型图，Agent 操作结果直接可见可调。

场景四：提示词库与创作流程固化 将常用的提示词方案存入提示词库，每次创作时从库中拖拽组合，形成可复用的创作模板。

坑与注意

项目尚处于开发阶段（官方明确说明）：各种本地存储格式和 API 接口可能在版本更新时破坏兼容性，当前阶段不建议直接用于公网多人协作，更推荐个人本地部署使用。
数据在浏览器本地：没有配置 WebDAV 时，换浏览器或清缓存会导致画布数据丢失，需要定期导出备份。
AI 生图质量依赖你的 API 后端：画布本身不提供生图能力，需要自备 OpenAI 兼容接口（如自己部署的 Stable Diffusion API、New API、chatgpt2api 等）；如果没有合适的生图 API，作者推荐配套使用 chatgpt2api。
跨设备同步需要 WebDAV：目前没有官方云同步服务，需要自己搭建 WebDAV（常见 NAS 或云盘支持）。
AGPL-3.0 许可证：如果你对代码进行修改并网络部署，需要开源修改部分；纯本地使用不受此限制。
国内用户注意：项目托管在 GitHub，Vercel/Render 部署在国内访问可能较慢；建议国内用户优先 Docker 本地部署。

与同类对比

方案	画布	AI 生图	本地 Agent	许可证	成熟度
infinite-canvas	无限画布 + 节点编排	直连 OpenAI 兼容接口	Codex / Claude Code (MCP)	AGPL-3.0	开发中
Figma	专业设计画布	插件接入	无	专有	成熟
ComfyUI	节点式工作流	本地 Stable Diffusion	无	Apache-2.0	成熟
Midjourney	无画布	商业 MJ 接口	无	专有	成熟
Miro	白板协作	插件接入	无	专有	成熟

核心差异：infinite-canvas 是目前唯一将无限画布、AI 生图、MCP Agent 操作三项能力融合在一起的开源方案。ComfyUI 有强大节点工作流但无画布概念；Figma/Miro 有画布但 AI 生图依赖插件且没有 MCP Agent 集成。

一句话推荐结论

如果你需要的不只是文生图 API，而是一个能在画布上可视化编排 AI 创作流程、让 Agent 直接操作视觉方案的工作台，infinite-canvas 是目前开源生态里门槛最低的选择；但由于项目仍处于开发中，生产内容创作建议做好备份，避免因版本迭代丢失工作。