zhongerxin/Cowart · 上手攻略

仓库：zhongerxin/Cowart
链接：https://github.com/zhongerxin/Cowart
分类：engineering · Codex 插件 · 无限画布
作者：Tom
更新：2026-07-06

这是什么

Cowart 是一个面向 Codex（Anthropic 官方 AI 编程 Agent）的原生无限画布 widget 插件。它基于 tldraw 提供可视化画布，集成了 AI 图片生成和标注驱动的图片修订功能。画布数据直接保存在用户当前项目目录下（canvas/ 目录），而非保存在插件本身。

核心定位：让 Codex 在一个真实的可视化工作空间里构思、标注、生成图片并迭代修订——不需要切换到浏览器或 in-app browser，Cowart 以原生 widget 形式直接内嵌在 Codex 对话界面中。

解决什么问题

在 AI 辅助编程/创作的工作流中，有一个常见痛点：Codex 生成图片后，用户需要手动复制到别处查看、标注、再发回给 AI 修改。整个往返过程割裂且无法持久化。

Cowart 把这个闭环做进了 Codex 原生 UI 里： - 无限画布 → 随意拖拽、缩放、组织视觉素材 - AI 图片框 → 在画布上直接触发 Codex 生成图片，按框的位置和比例精准输出 - 标注修订 → 对图片画箭头/写文字标注后，一键让 Codex 去除标注痕迹并生成干净的新图 - 本地持久化 → 画布数据落在当前项目里，随项目走，不丢记录

快速安装

前置条件

已安装 Codex（支持插件系统的版本）
npm 环境

步骤

① Clone 仓库到插件目录：

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

② 确认插件配置文件存在：

cat ~/.codex-plugin/plugin.json   # 确认有内容

③ 编辑 marketplace.json，加入 Cowart 条目：

确保 ~/.agents/plugins/marketplace.json 中有如下条目（或追加到现有列表）：

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

⚠️ 如果 marketplace.json 不存在或结构不同，请参照 Codex 官方插件文档调整路径。

④ 注册 marketplace 并安装插件：

codex plugin marketplace add ~
codex plugin add cowart@personal

⑤ 开启新对话加载插件：

安装后建议开启新的 Codex 对话，让插件的 skill 和 MCP 工具完整加载。

核心用法

打开画布

在 Codex 对话中发送：

Open the Cowart canvas for this project.

Cowart 会通过 cowart-open-canvas 工具打开 Codex 原生 widget，无需启动本地网页服务。

scripts/start-canvas.sh 只保留为本地开发 fallback，普通用户不需要运行。

生成图片

在画布里创建一个 AI 图片框（选中该框类型）
在弹出面板输入 prompt，可选上传一张或多张参考图
点击发送

Cowart 将 prompt、参考图和选中框的尺寸信息发给 Codex → Codex 按框的位置和比例生成图片 → 自动将 AI 图片框替换为普通图片。

标注并修订图片

在画布上对已有图片做箭头和文字标注
选中被标注的图片，点击「按标注修改」
Cowart 导出包含原图+标注的截图，发给 Codex
Codex 读取标注后，去除所有标注痕迹，生成干净的新图放在原图旁边

原图和标注不会被删除或移动，结果是独立的新文件。

手动触发修订

也可以把 Cowart 标注截图直接发给 Codex，走同样的 AI 修订流程。

MCP 工具一览

工具名	功能
`cowart-open-canvas`	打开 Cowart 原生画布 widget
`cowart-image-gen`	接收 prompt + 参考图，生成图片替换选中 AI 图片框；无选中框时插入当前页面
`cowart-image-edit`	根据画布标注截图或用户提供的截图生成修订图

典型适用场景

产品设计稿迭代：在画布上用 AI 生成设计图 → 标注修改意见 → 一键修订，减少设计来回返工
文档插图制作：生成配图后直接在画布上做标记，生成干净版本插入文档
Codex 多模态技能展示：作为 Codex 插件开发的参考范例（tldraw + MCP 集成）
视觉灵感板：把 AI 生成的不同变体放在同一画布上对比挑选

坑与注意

需要新对话加载插件：安装后在同一个对话里可能工具未注册，务必开启新对话
marketplace.json 结构因版本而异：Codex 插件系统仍在活跃开发，~/.agents/plugins/marketplace.json 的格式可能随版本变化，建议对照 Codex 官方文档核验
画布数据路径：数据默认保存在 $COWART_PROJECT_DIR/canvas/，如遇权限问题检查环境变量 COWART_PROJECT_DIR 和 COWART_CANVAS_DIR
本地开发 fallback：普通用户不需要 scripts/start-canvas.sh，该脚本仅供插件本地开发调试
tldraw 依赖：画布能力基于 tldraw v2，版本锁定在 tldraw 包，如遇版本冲突可检查 package.json

与同类对比

方案	画布	AI 图片生成	标注修订	集成方式
Cowart	✅ 原生 tldraw widget	✅ 集成 Codex	✅ 标注→修订闭环	Codex 原生插件
普通 Agent + 外部绘图工具	❌ 无画布	✅	❌ 手动往返	API 调用
Mermaid / Excalidraw 插件	✅ 有限画布	❌	❌	外部服务

Cowart 的差异化在于原生集成：不依赖外部服务、不需要切换标签页，画布和数据都活在 Codex 项目里。

一句话结论

如果你用 Codex 做视觉类创作（设计稿、文档插图、灵感板），Cowart 把「生成→标注→修订」闭环做进了 AI 对话界面，值得一试；它同时也是学习 Codex 插件开发的最佳参考实现之一。

数据来源：GitHub README（2026-07-05）、仓库最近提交（2026-07-05）。版本号、安装路径请以仓库最新 README 为准。