AI Canvas 是一个 Codex 插件 marketplace。它让 Codex 可以打开本地无限画布，生成图片，读取你在画布上的箭头、文字、圈选标注，并把修改后的新版本自动放到旧图右侧。

你可以把它理解成：

Codex 里的 AI 画图白板。

普通用户不需要理解 MCP、holder、run metadata 或本地文件路径。你只需要说需求、打开画布、标注修改意见、点击按钮。

codex plugin marketplace add https://github.com/binghe1980/AI-Canvas --ref main
codex plugin add ai-canvas-codex-plugin@ai-canvas

安装后重启 Codex，或新开一个对话，然后输入：

@AI Canvas 打开 AI 画布，帮我做一张拉面广告。

git clone https://github.com/binghe1980/AI-Canvas.git
cd AI-Canvas/ai-canvas-codex-plugin
npm run setup
cd ..
codex plugin marketplace add .
codex plugin add ai-canvas-codex-plugin@ai-canvas

完整安装、更新和排错说明：

• 安装指南 INSTALL.md

flowchart LR
  A["告诉 Codex<br/>生成一张广告图"] --> B["AI Canvas 打开<br/>本地画布"]
  B --> C["Codex 创建图片框<br/>并生成图片"]
  C --> D["图片插入画布"]
  D --> E["用户画标注<br/>箭头 + 文字 + 圈选"]
  E --> F["点击<br/>按标注修图"]
  F --> G["Codex 读取标注<br/>并编辑图片"]
  G --> H["新版放到右侧<br/>旧图保留"]
  H --> E

一分钟日常使用：

1. 在 Codex 里说你想要什么图。
2. 打开 Codex 返回的本地画布链接。
3. 在图片上画箭头、写文字、圈出区域。
4. 第一次改图前说：@AI Canvas 开启自动修图模式。
5. 每批标注完成后，在画布上点 按标注修图。
6. 在画布上对比旧版和新版，继续迭代。

@AI Canvas 打开 AI 画布，帮我做一张小红书封面。

@AI Canvas 生成一张竖版拉面广告，品牌叫拉面一番，要高级食物摄影风格。

@AI Canvas 开启自动修图模式。

@AI Canvas 按我画布上的标注修改。

• 插件说明 README
• 安装指南 / Installation Guide
• 中文小白使用说明
• 自然语言工作流
• English README

.agents/plugins/marketplace.json
ai-canvas-codex-plugin/
  .codex-plugin/plugin.json
  .mcp.json
  skills/
  packages/
    canvas-app/
    mcp-server/
    shared/

Codex 会读取仓库根目录的 .agents/plugins/marketplace.json，这个 marketplace 指向 ./ai-canvas-codex-plugin。

• 画布服务运行在本机 127.0.0.1，默认端口 43218。
• 画布状态和生成资源默认保存在当前工作区的 .ai-canvas/，除非设置了 AI_CANVAS_HOME。
• 本地运行数据、临时 QA 数据、依赖目录、日志和环境变量文件都被 Git 忽略。
• 插件不包含托管后端，它是一个本地 Codex 插件工作流。

cd ai-canvas-codex-plugin
npm run setup
npm run typecheck
npm run test
npm run validate:plugin

手动预览画布服务：

NODE_ENV=production node packages/canvas-app/dist/server/server.js \
  --port 43218 \
  --workspace-root "<your workspace>"

打开：

http://127.0.0.1:43218/

MIT. See LICENSE.