Cowart：开源无限画布Codex插件，本地AI生图与标注迭代绘图工具

一、Cowart是什么

Cowart 是开源、面向 Codex AI 智能体的本地无限画布插件，底层基于 tldraw 无限画布 SDK 开发，主打本地离线运行、数据本地持久化、MCP 工具联动 AI 绘图迭代。

该插件深度嵌入 Codex 工作流，无需切换第三方绘图软件，可直接在画布内完成思路梳理、草图标注、AI 生图、标注迭代修图全流程；所有画布、图片资源全部存储在用户本地项目目录，不上传云端，兼顾创意效率与数据隐私安全，当前最新版本为 0.1.2。

二、功能特色

1. 本地离线无限画布

内置完整 tldraw 画布能力，启动本地网页服务（默认端口43217，访问地址 http://127.0.0.1:43217/），支持无限缩放、手绘标注、形状框选、图片粘贴等白板基础操作，全程本地运行，断网也可正常编辑画布。

2. 项目级本地持久化存储

画布数据独立绑定当前项目，自动存储至项目根目录 canvas/ 文件夹：

• 画布配置文件：canvas/pages/<page-id>/cowart-canvas.json

• 图片素材资源：canvas/pages/<page-id>/assets/
  数据保存在用户项目内，而非插件仓库，切换项目自动隔离画布内容，不会互相污染。

3. AI 一键生成画布图像

画布内置专属 AI image holder 占位框，选中框后向 Codex 发送自然语言指令，AI 将自动匹配占位框长宽比例生成图片，并直接填充至框内，无需手动导入导出图片。

4. 标注截图迭代修图

支持在原图上绘制箭头、文字标注修改需求，截图后发送给 Codex，工具自动识别标注信息，生成去除所有标注痕迹的干净修订图，原图、标注素材完整保留，并排展示新旧版本，方便对比迭代。

5. MCP 工具与三大内置技能

配套 Cowart MCP 工具链，打通画布与 Codex 双向数据互通，内置3个标准化技能，可直接通过自然语言调用：

1. cowart:cowart-open-canvas：一键启动当前项目画布服务

2. cowart:cowart-image-gen ：AI 生成图片填充选中占位框

3. cowart:cowart-image-edit：基于标注截图生成修订图片

6. 完善本地开发与自定义配置

支持自定义端口、项目目录、画布存储路径，提供完整开发/打包脚本，修复粘贴图片刷新、依赖缺失、服务启动不稳定等问题，文档完整，新手可快速部署。

三、技术细节

1. 底层技术栈

• 画布核心：tldraw/tldraw 开源无限白板 SDK

• 前端构建：Vite + Node.js

• 插件规范：Codex 标准 .codex-plugin 插件体系、MCP 协议

• 依赖库：@tiptap/pm 富文本配套依赖

2. 存储架构逻辑

采用项目隔离存储机制，每个项目独立一套画布文件与资源目录，通过环境变量区分画布归属，避免多项目画布数据混淆；文件采用 JSON 序列化存储画布图层、标注、图片引用，图片二进制资源本地磁盘保存。

3. 服务启动机制

画布独立后台服务，默认绑定本地回环地址 127.0.0.1，仅本机可访问，保障隐私；支持 Shell 脚本指定项目目录启动，通过环境变量自定义核心参数：

• COWART_PORT：画布服务端口，默认43217

• COWART_PROJECT_DIR：绑定的用户项目根目录

• COWART_CANVAS_DIR：画布数据存储目录，默认项目下 canvas 文件夹

4. 插件安装运行流程

插件遵循 Codex Personal Marketplace 本地插件规范，分为自动一键部署、手动源码编译部署两种模式；安装完成后需新建 Codex 对话加载 MCP 工具与技能，修复图片粘贴竞态刷新、依赖缺失等运行异常。

5. 版本迭代优化（0.1.2 更新）

1. 重构插件技能体系，完善插件元数据与前端资源

2. 新增画布实时同步、MCP 图片插入工具

3. 修复粘贴图片刷新异常、服务启动不稳定问题

4. 补齐缺失 @tiptap/pm 依赖，同步依赖锁文件

5. 完善安装、技能使用官方文档，优化启动依赖校验逻辑

四、应用场景

1. 程序员产品需求梳理
   产品、开发在画布绘制页面原型、功能流程图，标注修改需求，直接让 Codex 根据草图生成 UI 效果图、前端参考图，无需切换 Figma、Excalidraw。

2. AI 创意内容迭代设计
   设计师、自媒体创作者用占位框规划画面构图，文字描述画面风格一键生图；对生成图片标注调整细节，自动产出无标注优化版本，快速多轮迭代画面。

3. 技术架构草图绘制
   绘制系统架构、接口流程图，标注模块优化点，截图后交由 Codex 生成标准化高清架构图，保留原始手绘思路同时输出干净成品图。

4. 本地隐私敏感绘图工作
   企业内部需求、涉密草图、私有项目素材，全部本地存储不上传云端，适合对数据隐私有严格要求的研发、设计团队。

5. Codex 本地自动化工作流
   开发者基于 MCP 技能二次开发，将画布绘图、AI 生图能力嵌入自动化脚本，实现草图→AI绘图→本地素材归档一站式自动化流程。

五、使用方法

（一）两种安装方式

方式1：Codex 自动安装（推荐新手）

直接向 Codex 发送完整指令：

请从 https://github.com/zhongerxin/cowart.git 安装 Cowart Codex 插件。请 clone 仓库到 ~/plugins/cowart，确认 .codex-plugin/plugin.json 存在，把插件加入 personal marketplace，先运行 codex plugin marketplace add ~，再运行 codex plugin add cowart@personal。安装后请校验插件，并告诉我是否需要开启一个新对话来加载新技能和 MCP 工具。
发送后 Codex 自动完成克隆、注册、安装，新建对话即可加载全部功能。

方式2：手动源码安装

1. 创建插件目录并克隆源码

mkdir -p ~/plugins
git clone https://github.com/zhongerxin/cowart.git ~/plugins/cowart
cd ~/plugins/cowart

2. 安装依赖并打包编译

npm install
npm run build

3. 配置本地插件市场文件 ~/.agents/plugins/marketplace.json，写入 cowart 插件配置条目

4. 终端执行注册与安装命令

codex plugin marketplace add ~
codex plugin add cowart@personal

5. 重启 Codex 对话，加载画布工具与技能

（二）基础操作流程

1. 打开项目画布
   在 Codex 输入指令：Open the Cowart canvas for this project.，自动启动本地画布服务，浏览器打开画布页面。

2. 空白占位框生成AI图片
   画布拖拽创建 AI image holder 框并选中，发送指令：Generate a new image into the selected Cowart AI image holder.，AI 自动生成适配尺寸图片填充框内。

3. 标注截图迭代修图
   在画布图片上绘制箭头、文字标注修改需求，截图发送至 Codex，输入指令：Use my Cowart annotation screenshot to generate a clean revised image beside the original.，AI 生成无标注新版图片并排展示，原图不改动。

（三）本地开发调试命令

npm install # 安装开发依赖
npm run dev # 开发热更新模式
npm run build # 生产打包
# 指定项目目录启动画布服务
./scripts/start-canvas.sh /path/to/user/project

六、竞品对比

选取 DrawAUI、Claude Design、tldraw 独立网页版 三款同类 AI 画布工具，从核心定位、运行方式、Codex 适配、本地存储、MCP 集成、价格六大维度对比：

竞品核心差异总结

1. Cowart 唯一专门适配 Codex 智能体，打通 MCP 工作流，所有数据本地保存，隐私性更强；

2. DrawAUI 侧重草图转代码，缺少标注迭代修图、项目隔离存储能力；

3. Claude Design 闭源付费，仅适配 Claude，无法接入 Codex，不支持本地离线独立存储；

4. 独立 tldraw 仅基础白板功能，无内置 AI 生图、标注修图技能，需自行对接大模型。

七、常见问题解答

Q：安装后调用打开画布指令没有反应怎么办？

A：插件安装完成后必须新建 Codex 对话，旧对话不会自动加载新增的 MCP 工具与技能；同时检查是否执行 npm run build 完成打包，未编译会导致插件功能失效。

Q：画布生成的图片保存在哪个文件夹？可以手动导出吗？

A：图片资源统一存放于当前项目 canvas/pages/<page-id>/assets/，可直接进入文件夹复制图片文件，画布 JSON 文件可备份迁移至其他设备。

Q：能否修改画布默认端口43217，端口被占用如何处理？

A：可配置环境变量 COWART_PORT 自定义端口，启动画布服务前设置该变量即可更换端口；也可使用 ./scripts/start-canvas.sh 脚本附加端口参数启动。

Q：切换不同项目后画布内容会混在一起吗？

A：不会，Cowart 采用项目隔离存储机制，每个项目拥有独立 canvas 目录，切换项目时自动加载对应画布数据，互不干扰。

Q：Cowart 是否支持多人在线协作画布？

A：当前版本仅支持本地单人画布编辑，未内置多人实时协作能力，核心面向单人本地创意、研发绘图场景。

Q：运行时报缺失 @tiptap/pm 依赖如何解决？

A：进入插件根目录执行 npm install 重新安装全部依赖，0.1.2 版本已修复依赖缺失问题，若手动克隆旧版本需手动安装该依赖包。

Q：标注截图生成修订图时原图会被覆盖删除吗？

A：不会，AI 生成的干净修订图会自动放在原图侧边，原图、所有标注图层完整保留，不会修改、删除原始画布内容。

八、相关链接

• GitHub仓库地址：https://github.com/zhongerxin/cowart

九、总结

Cowart 是一款专为 Codex AI 智能体打造的开源本地无限画布插件，依托 tldraw 成熟白板能力实现离线本地绘图、项目隔离式素材存储，通过原生 MCP 工具链打通画布与 AI 交互链路，提供一键AI生图、标注截图迭代修图两大核心创意能力，全程数据保存在本地项目文件夹保障隐私安全；相比同类AI画布工具，它拥有独有的 Codex 原生适配、免费开源无订阅、完整本地持久化三大优势，适配程序员、产品、设计师的本地创意绘图与需求迭代场景，配套完善的自动/手动安装流程与开发调试脚本，文档清晰、运行稳定，是 Codex 用户本地草图、AI绘图、需求标注的轻量化高效解决方案。