Cowart

在 AI 辅助创作中，纯文本交互往往难以精准传达视觉意图。Cowart 是一款专为 Codex 设计的本地无限画布插件，它基于强大的 tldraw 库构建，将可视化的构思、标注和图像生成流程无缝集成到 Codex 的工作流中。

不同于传统的云端协作工具，Cowart 坚持本地优先原则。所有画布数据和生成的图片资源均保存在当前用户项目的 canvas/ 目录下，确保数据主权完全掌握在用户手中，同时方便版本控制和项目迁移。

核心功能：从构思到迭代的可视化闭环

Cowart 不仅仅是一个画图板，它是 Codex 的视觉延伸，支持以下关键工作流：

1. 本地无限画布：
   在 Codex 中一键启动本地 Web 服务（默认端口 43217），提供一个流畅的 tldraw 画布。你可以自由拖拽、连线、添加便签，将抽象的创意具象化。
2. AI 图像占位符（Image Holder）：
   在画布中创建特定的“AI Image Holder”，Codex 能够识别这些占位符的比例和位置。只需在对话中描述内容，Codex 即可生成符合尺寸要求的图片并自动填入选中区域，实现“所见即所得”的布局预览。
3. 标注驱动的图片迭代：
   这是 Cowart 最具特色的功能。你可以在画布上的现有图片上进行圈点、箭头标注或文字修改意见，然后截图发送给 Codex。Codex 会智能解析截图中的标注信息，生成一张去除了标注痕迹、但落实了修改意见的“干净”新图，并将其放置在原图旁边。这种非破坏性的迭代方式极大地提升了设计沟通的效率。
4. MCP 工具集成：
   通过 Model Context Protocol (MCP)，Cowart 暴露了 cowart-open-canvas、cowart-image-gen 和 cowart-image-edit 等技能。Codex 可以读取画布的选择状态、插入图片并管理本地资源，实现了 AI 代理与可视化界面的深度双向交互。

安装指南

Cowart 支持自动和手动两种安装方式，推荐将其放入 Codex 的个人插件市场目录以便管理。

方式一：让 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 工具。”

方式二：手动安装

1. 克隆仓库：

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

2. 配置个人市场：
   确保 ~/.agents/plugins/marketplace.json 中包含 Cowart 条目：

   {
     "name": "personal",
     "interface": { "displayName": "Personal" },
     "plugins": [
       {
         "name": "cowart",
         "source": { "source": "local", "path": "./plugins/cowart" },
         "policy": { "installation": "AVAILABLE", "authentication": "ON_INSTALL" },
         "category": "Productivity"
       }
     ]
   }
   

3. 注册并安装：

   codex plugin marketplace add ~
   codex plugin add cowart@personal
   

   注意：安装完成后，建议开启一个新的 Codex 对话以完整加载新的 Skill 和 MCP 工具。

使用流程示例

1. 打开画布：
   在 Codex 中输入：“Open the Cowart canvas for this project.”
   Cowart 将启动本地服务，并在浏览器中打开画布。数据将保存在当前项目目录的 canvas/pages/<page-id>/ 下。
2. 生成新图：
   在画布中创建一个 AI Image Holder 并选中它。
   在 Codex 中描述：“Generate a new image into the selected Cowart AI image holder.”
   Codex 将读取 Holder 属性，生成图片并插入。
3. 标注迭代：
   在画布中对某张图片进行标注（如圈出需要修改的区域）。
   截图该标注画面并发送给 Codex，附带提示：“Use my Cowart annotation screenshot to generate a clean revised image beside the original.”
   Codex 将生成修正后的图片，保留原图作为参考。

本地开发与配置

对于开发者，Cowart 提供了灵活的环境变量配置：

• COWART_PORT：本地服务端口（默认 43217）。
• COWART_PROJECT_DIR：指定画布数据所属的项目目录。
• COWART_CANVAS_DIR：自定义画布数据存储路径（默认为 $COWART_PROJECT_DIR/canvas）。

可以通过脚本直接启动指定项目的画布服务：

./scripts/start-canvas.sh /path/to/user/project

Cowart 通过将可视化的自由性与 AI 的执行能力相结合，为设计师、产品经理和开发者提供了一个全新的协作维度。它让 AI 不再只是文字的处理器，更是视觉创意的共同构建者。