Cowart：为 Codex 打造的本地无限画布，让 AI 编程看见你的想法
此项目建立的初衷
AI 编程工具发展到今天，已经能读懂代码、修改文件、运行命令。但有一个问题一直没被很好解决：AI 怎么理解你的视觉意图？
你做了一个 UI 设计，想让 AI 帮你实现。你截了一张图，画了几个箭头和标注，想告诉 AI「这里改成圆角」「这个颜色换成蓝色」「这个按钮移到右边」。但你只能用文字描述这些改动，AI 看不到你的标注，也看不到你的草图。
Cowart 填补的正是这个缺口。
它是为 Codex 打造的本地无限画布插件，基于 tldraw 实现。你可以在画布上自由绘制、标注、创建图片占位符，然后让 Codex 根据画布上的视觉信息生成或修改图片。
这不是又一个白板工具。它是一个让 AI 编程助手「看见」你想法的桥梁。
一、AI 编程的视觉短板
回顾一下 AI 编程工具的演进路径：
- 代码补全阶段：AI 根据上下文猜测下一行代码
- 聊天问答阶段：开发者把代码贴进对话框，AI 解释、生成、修改
- Agent 化阶段：AI 进入项目目录，读取文件、执行命令、持续工作
每一步都在让 AI 更深入地理解代码。但这些工具都默认一个假设：你用文字和代码跟 AI 沟通。
现实是，很多开发场景需要视觉沟通。
- 你想让 AI 生成一张 banner 图，但不知道怎么用文字描述构图
- 你做了一个线框图，想让 AI 根据布局生成对应的 UI 组件
- 你在截图上画了修改意见，想让 AI 看懂这些箭头和标注
- 你在头脑风暴，想在画布上快速草绘，让 AI 根据草图生成迭代版本
目前的做法是什么？你截图 → 用文字描述截图内容 → AI 根据文字理解 → 生成结果。信息在「视觉→文字→视觉」的转换中丢失了大量细节。
Cowart 的思路是：直接让 AI 读取画布上的视觉信息，跳过文字转述这一步。
二、Cowart 是什么？
一句话：Cowart 是一个运行在本地的无限画布，通过 MCP 工具与 Codex 深度集成。
拆开来看：
- 无限画布：基于 tldraw，你可以在上面自由绘制、拖拽、标注
- 本地运行：画布服务跑在你自己的机器上，默认端口 43217
- 数据本地化：所有画布数据和图片资源保存在你当前项目的
canvas/目录，不上传到任何地方 - MCP 集成：通过 Model Context Protocol，Codex 可以读取画布状态、插入图片、保存资源
它的核心工作流是这样的：
- 在 Codex 对话中说「Open the Cowart canvas for this project」
- 本地画布在浏览器中打开
- 在画布上创建 AI image holder（图片占位符），或者对已有图片做标注
- 告诉 Codex 要做什么——生成新图、根据标注修改图、或者把图片插入到项目中
三、三个核心能力
1. 画布驱动的图片生成
传统的 AI 图片生成是纯文字驱动的：你写 prompt，AI 生成图片。
Cowart 加了一层视觉控制。你可以在画布上创建一个 AI image holder，它带有明确的尺寸和比例。然后告诉 Codex 在这个 holder 里生成图片。Codex 会读取 holder 的属性，按比例生成，直接插入到画布中。
这意味着你可以先在画布上规划好构图——哪里放 hero 图、哪里放产品截图、哪里放图标——然后让 AI 按照你的布局逐个填充。视觉规划在先，AI 执行在后。
2. 标注驱动的图片迭代
这是 Cowart 最实用的功能。
流程是这样的：
- 在画布上放一张已有的图片
- 用 tldraw 的标注工具在图上画箭头、写文字、画圈
- 截图，把截图发给 Codex
- 说：「Use my Cowart annotation screenshot to generate a clean revised image beside the original」
Codex 会读懂你标注的含义——箭头指向哪里、文字说了什么、哪些部分需要修改——然后生成一张去掉标注痕迹的新图，放在原图旁边。原图和标注保持不动。
这个流程解决了 AI 图片迭代中最头疼的问题：怎么让 AI 理解你对图片的具体修改意见？
以前你需要写一大段文字描述「把左上角的 logo 放大两倍，把背景色从灰色改成白色，把底部的文字往上移 20 像素」。现在你直接在图上画出来，AI 就能看懂。
3. 项目级的资产持久化
Cowart 的画布数据不是存在插件仓库里的，而是存在你当前项目的 canvas/ 目录下：
canvas/pages/<page-id>/cowart-canvas.json
canvas/pages/<page-id>/assets/这意味着画布是项目的一部分。你的构思、标注、生成的图片，都跟着项目走。换一台电脑、换一个开发者，只要项目在，画布就在。
这对于需要保留设计迭代过程的项目尤其有价值——你可以看到每一次标注、每一个版本、每一个修改意见。
四、技术架构
Cowart 的架构设计体现了「简单但有效」的原则：
- 前端：tldraw 无限画布，跑在本地 Vite 开发服务器上
- 通信层：MCP 工具让 Codex 可以读写画布状态
- 数据层：JSON + 本地文件系统，没有数据库依赖
- 集成方式：Codex 插件，通过
.codex-plugin/plugin.json声明技能和工具
MCP 工具包括：
cowart:cowart-open-canvas：打开本地画布cowart:cowart-image-gen：生成图片插入到选中的 holdercowart:cowart-image-edit：根据标注截图生成修订图
这种设计让 Cowart 既是一个独立的可视化工具，又是一个深度集成的 AI 编程辅助工具。
五、为什么需要 Cowart？
你在做需要视觉沟通的项目。 UI 设计、产品原型、营销素材、文档配图——这些场景都需要你跟 AI 进行视觉层面的沟通。文字描述永远不如直接在图上标注来得精确。
你希望 AI 的图片生成更可控。 通过画布上的 holder 控制比例和位置，比纯 prompt 控制要直观得多。你不需要反复调整 prompt 来让 AI 生成正确尺寸的图片。
你需要快速迭代视觉方案。 标注 → 截图 → AI 生成修订图的流程，比「写 prompt → 生成 → 不满意 → 改 prompt → 再生成」要快得多。你在图上画一个箭头就表达了修改意图，AI 立刻执行。
你的数据敏感，不想上传到第三方。 所有画布数据都在本地，图片资源也在本地。Cowart 不收集任何数据，不调用外部服务，不上传你的草图和标注。
你在用 Codex 做开发。 Cowart 是 Codex 的原生插件，安装后直接在对话中使用，不需要切换工具或复制粘贴。
六、安装和使用
让 Codex 自动安装
把这段话发给 Codex：
请从 https://github.com/zhongerxin/cowart.git 安装 Cowart Codex 插件。
请 clone 仓库到 ~/plugins/cowart，确认 .codex-plugin/plugin.json 存在，
把插件加入 personal marketplace，然后运行 codex plugin add cowart@personal。
安装后请校验插件，并告诉我是否需要开启一个新对话来加载新技能和 MCP 工具。手动安装
mkdir -p ~/plugins
git clone https://github.com/zhongerxin/cowart.git ~/plugins/cowart
cd ~/plugins/cowart
npm install
npm run build配置 marketplace.json 后安装：
codex plugin add cowart@personal日常使用
在 Codex 中说：
Open the Cowart canvas for this project.画布会在浏览器中打开（默认 http://127.0.0.1:43217/）。
生成图片：
Generate a new image into the selected Cowart AI image holder.根据标注修改图片：
Use my Cowart annotation screenshot to generate a clean revised image beside the original.七、哪些情况不一定需要
- 如果你只需要纯文字的代码生成和修改，不需要视觉沟通，Codex 本身就够了
- 如果你不需要在图片上做标注迭代，传统的 prompt 驱动方式可能更直接
- 如果你对 tldraw 不熟悉，需要先学习画布操作
- 目前 Cowart 还比较新（v0.1.3），功能在快速迭代中，可能缺少一些高级特性
八、总结
AI 编程工具正在补齐它们的短板。
先是代码理解，然后是项目上下文，再然后是命令执行。现在，Cowart 开始补齐「视觉理解」这块拼图。
它不是要替代你的设计工具，而是要让 AI 编程助手具备「看图说话」的能力——而且是双向的：你可以在画布上画出你的想法，AI 可以在画布上呈现它的理解。
当 AI 不只是能读懂代码，还能看懂你的草图和标注，人机协作的效率会再上一个台阶。
这就是 Cowart 的价值所在。
