30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度如果你正在用 AI 生成图片大概率经历过这样的场景为了一个满意的效果你需要在 Midjourney、Stable Diffusion WebUI、ComfyUI 等不同工具间反复横跳在 Discord、浏览器标签页、本地文件夹里来回切换。好不容易找到一张不错的参考图想基于它微调风格却发现提示词Prompt需要重新构思参数要重新设置生成的图片散落在各处难以形成连贯的创作流。这背后是一个被忽视的“创作流”问题AI 绘画工具越来越强大但创作过程本身却依然割裂。素材管理、提示词工程、多轮迭代、方案对比这些环节的切换成本正在消耗着创作者最宝贵的注意力和灵感。今天要介绍的开源项目infinite-canvas无限画布正是为了解决这个问题而生。它不是一个单纯的 AI 生图工具而是一个面向 AI 创作的“一站式工作台”。它的核心价值在于将画布编排、AI 生图、参考图编辑、对话助手、提示词库和素材沉淀全部整合在同一个可视化界面中。你可以把它理解为一个专为 AI 视觉创作设计的“Figma Notion AI 助手”综合体。这篇文章将带你深入体验 infinite-canvas。我们不止会介绍它是什么更重要的是剖析它如何重构 AI 创作的工作流解决哪些具体痛点以及它是否适合你。我会从环境部署、核心功能实操、与本地 Agent 的联动到实际项目中的使用建议和避坑指南提供一个完整的、可落地的技术实践指南。1. 这篇文章真正要解决的问题为什么我们需要一个“无限画布”式的 AI 创作工作台这要从当前 AI 绘画工作流的几个典型痛点说起痛点一创作流程的割裂感。构思阶段你可能在笔记软件里写提示词生成阶段切换到生图工具筛选和修改阶段又要在文件管理器和图片查看器之间切换。这种上下文切换极大地打断了创作的心流状态。痛点二迭代与版本管理的缺失。当你对一张图不满意调整提示词或参数重新生成后新旧版本之间缺乏直观的关联。你很难回溯“我是从哪张图开始经过哪些调整才得到最终结果的” 这对于探索性创作和方案对比极为不利。痛点三提示词与素材的孤岛。成功的提示词往往散落在聊天记录或文本文件中与最终生成的图片分离。同样收集的参考图、灵感素材也独立于创作环境之外。当你想复用某个成功的“配方”或风格时需要花费额外精力去查找和重建上下文。痛点四缺乏结构化的创作规划。对于稍复杂的项目比如设计一套 UI 组件、创作一个漫画分镜或规划一个游戏场景你需要一个能容纳多元素、并能体现它们之间关系的空间。传统的生图工具是“单次任务”导向的缺乏对项目级、多图关联创作的支持。infinite-canvas 瞄准的正是这些痛点。它试图将 AI 创作从一个“离散的生成动作”升级为一个“连续的可视化创作流程”。它的画布不仅是放置图片的地方更是组织想法、关联迭代、沉淀知识的工作平面。这篇文章适合以下读者AI 绘画爱好者与创作者希望提升创作效率管理复杂项目。UI/UX 设计师、概念艺术家需要利用 AI 进行快速原型设计和灵感探索。产品经理与内容创作者需要可视化地规划和呈现想法。对 AI 应用开发感兴趣的开发者希望学习如何将 AI 能力与前端交互深度结合的开源案例。2. 基础概念与核心原理在深入实操之前我们先厘清 infinite-canvas 的几个核心概念这有助于理解它的设计哲学。2.1 什么是“无限画布”Infinite Canvas这里的“画布”并非指 Photoshop 中固定尺寸的画布。它更接近于 Miro、Figma 或 Excalidraw 中的无限缩放、自由排布的工作平面。在这个平面上你可以自由放置节点图片、文本、形状、链接等都可以作为节点。建立连接用线条将相关节点连接起来形成思维导图或流程图直观展示创意之间的关联。无限缩放与平移既能宏观浏览整个项目全貌也能放大聚焦于某个细节进行编辑。在 infinite-canvas 中这个画布成为了承载整个 AI 创作流程的容器。2.2 核心功能模块如何协同工作infinite-canvas 将多个功能模块无缝集成在画布上下文中画布编排作为底层基础提供节点的增删改查、拖拽、缩放、连线、分组、图层管理等功能。AI 创作集成在画布上你可以直接对任何节点如图片、文本调用 AI 能力。例如选中一张参考图右键选择“图生图”选中一段描述文本右键选择“文生图”。生成的结果会作为新节点自动插入画布并与源节点保持连接关系形成清晰的迭代链路。画布助手Canvas Assistant这是一个围绕当前画布上下文工作的 AI 对话助手。你可以选中一个或多个节点然后向助手提问例如“为这个角色设计一套不同颜色的服装”或“基于这个场景生成一个更奇幻的版本”。助手能理解你选中的内容并将生成的结果直接放回画布。提示词库Prompt Library项目内置了从多个开源项目抓取的提示词库并缓存在内存中。你可以在生成图片时从库中搜索和引用优质提示词也可以将自己成功的提示词保存到本地库中形成个人知识沉淀。素材管理所有在画布上生成的、上传的图片都会在项目内进行管理避免散落各处。2.3 技术架构与生态兼容性技术栈前端基于现代 Web 技术栈Next.js, React, TypeScript, Tailwind CSS保证了良好的开发体验和性能。后端逻辑主要在前端处理通过浏览器直接连接 AI API。关键设计浏览器前台直连 AI API。这是一个重要特点意味着你的 API Key 和生成请求是从你的浏览器直接发送到你配置的 AI 服务提供商infinite-canvas 的服务端如果部署了不中转这些敏感数据和请求提升了隐私性和可控性。生态兼容兼容 OpenAI API 格式。这是其强大之处。你不仅可以使用 OpenAI 的官方接口还可以接入任何提供了 OpenAI 兼容接口的服务例如各类开源模型部署如使用text-generation-webui或OpenAI-Forward搭建的本地服务。第三方聚合平台如chatgpt2api、grok2api、newapi等。云服务商提供的兼容接口。Agent 扩展通过Canvas Agent和MCPModel Context Protocol协议可以与本地 AI 编码助手如 Codex、Claude Code联动让 AI 助手能“看到”并操作你的画布实现更高级的自动化创作。理解了这些概念我们就能明白infinite-canvas 的本质是一个以可视化画布为交互中心聚合了多种 AI 能力与创作工具的前端应用。接下来我们开始动手部署和体验。3. 环境准备与前置条件在开始部署 infinite-canvas 之前你需要准备好以下环境。项目提供了多种部署方式我们将以最通用的本地 Docker 部署和Vercel 一键部署为例。3.1 基础环境要求操作系统Windows 10/11, macOS, 或 Linux 发行版如 Ubuntu 20.04。本文演示以 macOS/Linux 命令行环境为主Windows 用户可使用 WSL2 或 Git Bash 获得类似体验。Node.js 环境可选用于本地开发如果你计划从源码运行或开发需要 Node.js 18 和 Bun 或 npm/yarn。项目推荐使用 Bun。Docker 环境推荐这是最简单、最一致的部署方式。确保已安装 Docker 和 Docker Compose。检查安装在终端运行docker --version和docker-compose --version。AI 模型 API 访问权限这是项目运行的核心依赖。你需要准备一个可用的OpenAI 兼容 API。选项A付费稳定OpenAI 官方 API Key支持 GPT-4V, DALL-E 3 等。选项B开源自托管在本地或服务器部署一个提供 OpenAI 兼容接口的模型服务如text-generation-webui(oobabooga) 或vLLM。你需要知道其 API 的 Base URL例如http://localhost:5000/v1和可选的 API Key。选项C第三方平台使用chatgpt2api等提供的转发服务请注意相关服务条款和成本。Git用于克隆代码仓库。3.2 获取项目代码打开终端使用 Git 克隆项目仓库git clone gitgithub.com:basketikun/infinite-canvas.git # 或使用 HTTPS # git clone https://github.com/basketikun/infinite-canvas.git cd infinite-canvas进入项目目录后你会看到主要的项目结构。核心的前端应用代码位于web/目录下。4. 核心流程拆解两种主流部署方式infinite-canvas 提供了灵活的部署选项。对于大多数想快速上手的用户我推荐Docker 部署对于希望零运维、快速体验的用户可以选择Vercel 部署。4.1 方式一使用 Docker 快速部署推荐这是最省心、环境最干净的方式。项目根目录已经提供了Dockerfile和docker-compose.yml。步骤 1构建 Docker 镜像在项目根目录infinite-canvas/下执行docker build -t infinite-canvas .这个过程会基于Dockerfile安装所有依赖并构建前端应用可能需要几分钟时间。步骤 2运行容器构建完成后使用以下命令启动容器docker run --rm -p 3000:3000 infinite-canvas--rm容器停止后自动删除避免积累无用容器。-p 3000:3000将宿主机的 3000 端口映射到容器的 3000 端口。步骤 3访问应用打开浏览器访问http://localhost:3000。你应该能看到 infinite-canvas 的界面。使用 Docker Compose更优雅的管理项目也提供了docker-compose.yml可以更方便地管理服务。直接运行docker-compose up这同样会在后台启动服务并监听 3000 端口。使用docker-compose down来停止服务。4.2 方式二从源码运行适合开发者如果你想了解内部机制或进行二次开发可以从源码运行。步骤 1进入前端目录并安装依赖cd web # 项目推荐使用 bun如果你没有安装 bun可以使用 npm 或 yarn bun install # 或 # npm install # 或 # yarn install步骤 2启动开发服务器bun run dev # 或 # npm run dev # 或 # yarn dev开发服务器通常会在http://localhost:3000启动并支持热重载。4.3 方式三一键部署到 Vercel最快捷对于不想管理服务器的用户Vercel 是最佳选择。项目已配置好vercel.json。访问 Vercel 官网 并登录支持 GitHub 账号登录。点击 “Add New…” - “Project”。从你的 GitHub 仓库列表中选择infinite-canvas项目。在配置页面框架预设Framework Preset会自动识别为 Next.js。根目录Root Directory保持为.或手动设置为web根据vercel.json配置它会自动构建web/目录。点击 “Deploy”。Vercel 会自动完成构建和部署并为你分配一个*.vercel.app的域名。重要提醒部署到 Vercel 后你的画布数据、素材和配置默认保存在浏览器的LocalStorage中。这意味着数据在本地换设备或清除浏览器数据会丢失。考虑私有化部署如果需要在团队间共享或持久化存储建议使用 Docker 部署在自己的服务器上并关注项目后续是否增加后端存储支持。5. 首次配置与核心功能实操成功部署并打开应用后我们来进行最关键的一步配置 AI API并体验核心工作流。5.1 配置 AI API 连接这是使用所有 AI 生成功能的前提。在应用界面右上角找到并点击设置齿轮图标。在设置面板中找到AI 服务配置或API 配置相关区域。你需要填写两个核心信息Base URL你的 OpenAI 兼容 API 的地址。例如 OpenAI 官方https://api.openai.com/v1例如本地部署的 text-generation-webuihttp://localhost:5000/v1例如第三方转发服务https://api.chatgpt2api.com/v1API Key对应服务的 API 密钥。如果是本地部署且未设置鉴权此处可能留空或填写任意字符请以具体服务要求为准。点击保存或测试连接。如果配置正确通常界面会有成功提示。针对 “New API” 的自动配置 如果你使用的服务商提供了特定的配置链接格式如某些聚合平台infinite-canvas 支持一种便捷的自动配置方式。在系统设置 - 聊天方式 - 添加聊天设置中填入格式如下的链接https://canvas.best?apiKeyYOUR_API_KEYbaseUrlYOUR_BASE_URL然后访问此链接它会跳转到你的部署地址并自动弹出配置弹窗填充信息。如果你自己部署了可以将https://canvas.best替换成你自己的部署地址。5.2 核心功能体验一个完整的创作流程让我们通过一个简单的场景——“设计一个赛博朋克风格的咖啡杯图标”——来串联核心功能。步骤 1创建画布与初始构思进入应用默认会有一个空白画布。你可以在画布中央单击右键选择“添加文本节点”。在文本节点中输入你的初步想法“一个赛博朋克风格的咖啡杯图标带有霓虹灯线条和科技感材质”。步骤 2使用画布助手进行文生图选中你刚创建的文本节点。在画布右侧或底部找到画布助手Canvas Assistant的对话输入框。输入指令“根据这个描述生成一张概念图。”或者直接点击助手提供的快捷操作按钮如“生成图片”。画布助手会理解你选中的文本内容作为上下文调用你配置的 AI 绘图模型如 DALL-E 3 或 Stable Diffusion 的对应接口。生成的结果图片会自动作为一个新节点插入画布并且通常会用一条线连接到源文本节点。这直观地记录了“从想法到初稿”的链路。步骤 3基于参考图进行迭代图生图对第一版生成的图片不满意你可以直接右键点击这个图片节点。在右键菜单中选择“图生图”或类似选项。系统会打开一个侧边栏或弹窗允许你上传另一张参考图或直接以当前图片为参考并修改提示词。例如你可以补充提示词“增加一些蒸汽朋克的齿轮元素背景改为暗色调城市夜景。”再次生成新的图片节点会与上一版图片节点连接形成迭代分支。步骤 4使用提示词库优化在生成图片的配置界面寻找提示词库Prompt Library的入口可能是一个搜索图标或标签页。你可以搜索关键词如cyberpunk,icon,product design查找社区共享的优质提示词。点击某个提示词可以将其内容插入到你的提示词输入框中作为灵感参考或直接使用。步骤 5组织与呈现你可以自由拖拽所有节点将它们排列成清晰的逻辑结构。例如将核心创意文本放在中间不同迭代版本的图片呈放射状排列在四周。使用连线功能明确标注出“最终选定稿”、“废弃方案”、“风格A”、“风格B”等关系。利用画布的缩放和平移你可以构建一个从宏观概念到细节迭代的完整视觉故事板。5.3 代码示例理解项目结构针对开发者对于开发者了解项目结构有助于定制化开发。以下是web目录的核心结构概览web/ ├── app/ # Next.js 13 App Router 核心目录 │ ├── api/ # API routes (用于提示词库缓存等) │ ├── canvas/ # 画布相关页面 │ ├── globals.css # 全局样式 │ └── layout.tsx # 根布局组件 ├── components/ # 可复用的 React 组件 │ ├── canvas/ # 画布相关组件节点、连线、小地图等 │ ├── ai/ # AI生成相关组件配置面板、生成历史等 │ └── ui/ # 基础UI组件 ├── lib/ # 工具函数和核心逻辑 │ ├── stores/ # Zustand 状态管理 │ ├── api/ # 前端 API 调用封装 │ └── utils/ # 通用工具函数 ├── public/ # 静态资源 └── package.json一个关键的状态管理示例位于lib/stores/useCanvasStore.ts简化概念// 概念性代码展示画布状态管理的思路 import { create } from zustand; interface Node { id: string; type: text | image | shape; content: string; x: number; y: number; } interface CanvasState { nodes: Node[]; selectedNodeId: string | null; addNode: (node: OmitNode, id) void; updateNode: (id: string, updates: PartialNode) void; deleteNode: (id: string) void; setSelectedNode: (id: string | null) void; // ... 其他画布操作 } export const useCanvasStore createCanvasState((set) ({ nodes: [], selectedNodeId: null, addNode: (node) set((state) ({ nodes: [...state.nodes, { ...node, id: Date.now().toString() }] })), updateNode: (id, updates) set((state) ({ nodes: state.nodes.map((n) (n.id id ? { ...n, ...updates } : n)), })), deleteNode: (id) set((state) ({ nodes: state.nodes.filter((n) n.id ! id), })), setSelectedNode: (id) set({ selectedNodeId: id }), }));这个 Store 管理了画布上所有节点的状态为画布助手提供了“当前选中节点”的上下文使得 AI 能针对特定节点进行操作。6. 运行结果与效果验证部署并配置成功后如何验证所有功能运行正常请按以下清单检查基础访问浏览器打开http://localhost:3000或你的部署域名页面正常加载无 JavaScript 错误打开浏览器开发者工具 Console 面板查看。画布交互在画布空白处点击拖拽可以平移视图。使用鼠标滚轮可以缩放画布。右键菜单可以创建文本、图片等节点。创建节点后可以拖拽移动、缩放节点。AI 配置验证进入设置正确填入 Base URL 和 API Key 后保存。尝试创建一个文本节点选中后使用画布助手发送一条简单文本消息如“你好”。如果配置的 AI 聊天模型可用你应该能收到回复。这验证了基础的 API 连通性。文生图功能验证创建一个文本节点输入“a cute cat”。选中该节点在画布助手输入框输入“generate an image”或点击相关按钮。观察网络请求开发者工具 Network 面板。应能看到向你的 Base URL 发送的POST /v1/images/generations或类似请求。如果成功画布上会出现一个新的图片节点显示生成的猫咪图片。数据持久化验证创建几个节点并简单排版。刷新浏览器页面。画布状态节点位置、内容应该被保留因为默认存储在浏览器 LocalStorage。提示词库验证在文生图或对话界面找到提示词库入口。应能显示分类或列表点击提示词可以插入到输入框。如果以上步骤均成功恭喜你infinite-canvas 已经在你的环境中正常运行。7. 常见问题与排查思路在部署和使用过程中你可能会遇到一些问题。下表列出了常见问题及其解决方法问题现象可能原因排查方式解决方案访问localhost:3000失败1. 容器未启动或端口被占用。2. 防火墙阻止。1. 运行docker ps查看容器状态。2. 运行lsof -i:3000(macOS/Linux) 或netstat -ano | findstr :3000(Windows) 检查端口占用。1. 确保docker run或docker-compose up命令执行成功。2. 更换端口如-p 8080:3000然后访问localhost:8080。页面加载但白屏或JS错误1. 前端构建失败。2. 浏览器缓存问题。3. 依赖安装不完整。1. 查看 Docker 构建日志或浏览器 Console 错误信息。2. 检查web目录下node_modules是否完整。1. 尝试清除浏览器缓存或使用无痕模式。2. 对于 Docker重建镜像docker build --no-cache -t infinite-canvas .3. 对于源码运行删除node_modules和package-lock.json/yarn.lock重新bun install。AI 生成图片失败提示 API 错误1. Base URL 或 API Key 配置错误。2. 后端服务不支持图片生成如只部署了聊天模型。3. 额度不足或模型不可用。1. 在设置页面检查配置。2. 使用curl或 Postman 直接测试你的 API 端点curl -X POST YOUR_BASE_URL/images/generations -H “Authorization: Bearer YOUR_KEY” -H “Content-Type: application/json” -d ‘{“model”: “dall-e-3”, “prompt”: “test”, “n”:1, “size”:”1024x1024}’1. 确保 Base URL 指向正确的/v1端点。2. 确认你的 API 服务支持图像生成模型如 DALL-E, Stable Diffusion 的对应接口。3. 检查账户余额或模型访问权限。画布助手不响应或无法理解上下文1. 选中的节点类型不被助手支持。2. 助手调用的模型配置有误。3. 提示词构造逻辑问题。1. 查看浏览器 Network 面板确认请求是否发出及响应内容。2. 尝试先与助手进行简单的纯文本对话测试基础功能。1. 确保选中了有效的文本或图片节点再调用助手。2. 检查设置中“聊天方式”或“助手模型”的配置确保指向一个可用的聊天模型如 GPT-4。3. 查阅项目 Issue 或文档看是否有已知的上下文处理限制。提示词库为空或加载失败1. 用于抓取提示词的 Next.js API route 运行失败。2. 网络问题导致无法访问 GitHub 等源。1. 查看浏览器 Console 和 Network 面板中关于/api/prompts等请求的报错。2. 检查 Docker 容器或服务器日志。1. 如果是本地开发检查app/api/下的路由是否正常。2. 提示词库是锦上添花的功能不影响核心生图。可以暂时忽略或手动管理自己的提示词。数据在浏览器刷新后丢失数据默认仅保存在浏览器 LocalStorage 中。检查浏览器 Application 面板下的 LocalStorage。这是当前设计的局限。如需持久化需要关注项目后续更新或考虑自行开发后端存储集成。目前重要项目建议定期使用画布的“导出”功能备份。Docker 构建速度慢或失败1. 网络问题导致依赖下载超时。2. Dockerfile 中某些步骤失败。查看 Docker 构建命令的完整输出日志找到失败的具体行。1. 为 Docker 配置镜像加速器。2. 尝试在Dockerfile所在目录先执行docker build --no-cache --progressplain .获取更详细日志。3. 可以尝试先在本机web/目录下执行bun install和bun run build再调整 Dockerfile 直接复制构建产物。8. 最佳实践与工程建议将 infinite-canvas 有效融入你的工作流需要注意以下实践和建议8.1 项目规划与画布组织一画布一项目为每个独立的创作项目如“游戏角色设计”、“官网 Banner 图探索”、“插画系列”创建单独的画布。利用画布的“项目”或“多画布”功能进行管理。建立视觉叙事流利用画布的空间关系讲故事。将初始灵感文本/参考图放在左侧将不同的探索分支不同风格、不同迭代向右或向下排列最终将选定的方案放在显眼位置。使用连线、箭头和文本标注说明决策点。善用分组与图层对于复杂构图将相关的节点分组。虽然当前版本可能没有显式的图层管理但通过空间排列前景在上背景在下和分组也能实现类似效果。8.2 AI 生成策略提示词工程在画布内完成不要在其他地方写好提示词再粘贴过来。直接在画布的文本节点中构思和修改提示词。将成功的提示词节点作为“配方”保存并连接到其生成的优秀图片节点上。迭代链路可视化每次使用“图生图”或基于某个节点生成新内容时系统会自动创建连线。不要删除这些连线它们是宝贵的创作过程记录方便你回溯和比较不同路径的效果。结合多模型优势如果你能访问多个 AI API例如一个擅长理解复杂指令的 GPT-4 用于对话和优化提示词一个特定的 SD 模型用于生成特定风格可以在 infinite-canvas 的设置中配置多个“聊天方式”在不同任务中切换使用。8.3 数据管理与备份定期导出备份目前数据主要存储在浏览器中。养成习惯定期使用画布的导出Export功能将整个画布状态保存为 JSON 文件。关注存储演进开源项目在快速迭代。关注项目的 Releases 和 Issues看是否有添加数据库如 SQLite、PostgreSQL或云存储支持的规划。对于团队使用私有化部署并连接持久化数据库是未来方向。素材管理生成的图片虽然缓存在浏览器 IndexedDB 或 LocalStorage但空间有限。对于最终确定的优质素材建议使用画布提供的下载功能保存到本地文件系统进行归档。8.4 安全与成本控制API Key 安全由于是前端直连你的 API Key 会存储在浏览器中。切勿在公开或不受信任的电脑上使用也避免将部署了此工具的公网服务暴露给不信任的人。理想情况是在本地或内网使用。生成成本意识AI 生图尤其是高质量模型可能产生费用。在画布上肆意批量生成前先在小尺寸或低步数下测试效果。利用画布的“预览”或“快速生成”功能如果支持进行低成本探索。8.5 扩展与集成探索 Canvas Agent如果你是开发者可以尝试设置本地的 Canvas Agent。这需要安装相应的 Codex 插件并配置 MCP 服务器。这能让你的 AI 编程助手直接“看到”画布内容并执行诸如“将所有这些图标节点排列整齐”、“为这个系列的所有图片生成描述文本”等自动化操作潜力巨大。二次开发项目采用 AGPL-3.0 协议这意味着如果你修改并部署了它的服务需要开源你的修改。你可以 Fork 项目定制 UI、添加新的节点类型、集成内部 AI 服务或特定的工作流打造属于自己团队的专业创作平台。infinite-canvas 代表了一种趋势AI 工具正从单一功能点向整合的、以工作流为中心的“创作环境”演进。它可能还不是一个完美的产品但其设计理念——将碎片化的创作动作整合到一个连贯的可视化空间——为 AI 时代的创意工作者提供了一个极具启发性的范式。对于开发者而言它的开源代码也是一个宝贵的学习案例展示了如何用现代 Web 技术栈Next.js, React, Zustand构建复杂的、状态驱动的交互式应用并深度集成多种 AI 能力。你可以用它来管理你的下一个设计项目也可以借鉴其思路构建属于你自己的“无限画布”。 30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度