面向 Codex 的原生無限畫布，指哪修改哪

項目簡介

Cowart 係一個專為 Codex 而設嘅原生無限畫布 widget 插件。佢用 tldraw 做底，提供可視化畫布，可以用嚟構思、標註、生成圖片，以及根據標註嘅圖迭代圖片。畫布會由 MCP widget 直接打開，數據默認會保存到當前用戶項目嘅 canvas/ 目錄，而唔係保存到插件倉庫入面。

功能

• 喺 Codex 入面打開一個原生 tldraw 無限畫布 widget；正常使用唔再經網頁瀏覽器或者 in-app browser 打開本地頁面。
• 喺當前項目目錄入面持久化畫布頁面同圖片資源。
• 喺畫布入面創建 AI 圖片框，直接輸入 prompt、選擇參考圖，然後俾 Codex 按揀中咗嘅框嘅位置同比例生成圖片再取代佢。
• 標註好圖片之後，可以喺畫布入面直接提交標註截圖，叫 Codex 根據標註生成乾淨嘅新圖，然後擺喺原圖隔籬。
• 經 Cowart MCP 工具讀取選擇狀態、保存畫布、插入圖片，然後保存到頁面本地資源目錄。

安裝

叫 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 工具。

手動安裝

建議將插件 clone 到 Codex personal marketplace 默認會引用嘅位置：

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

確保 ~/.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"
    }
  ]
}

然後先註冊 personal marketplace，再安裝插件：

codex plugin marketplace add ~
codex plugin add cowart@personal

安裝之後建議開一個新嘅 Codex 對話，等新嘅 skill 同 MCP 工具完整加載。

使用

打開畫布

喺 Codex 入面講：

Open the Cowart canvas for this project.

Cowart 會透過 render_cowart_canvas_widget 打開 Codex 原生 widget，唔需要再啟動本地網頁服務或者手動打開 in-app browser。scripts/start-canvas.sh 淨係保留作為本地開發嘅 fallback。

畫布數據會保存喺當前項目目錄下面：

canvas/pages/<page-id>/cowart-canvas.json
canvas/pages/<page-id>/assets/

生成新圖

1. 打開 Cowart 畫布。
2. 喺畫布入面創建並揀中一個 AI 圖片 框。
3. 喺彈出嘅生成面板入面輸入 prompt，亦可以選擇一張或者多張參考圖，然後㩒發送。

Cowart 會將 prompt、參考圖同揀中咗嘅 AI 圖片 框嘅尺寸資料發送俾 Codex。Codex 會按呢個框嘅位置同比例生成圖片，然後將 AI 圖片 框取代成普通圖片形狀。

根據標註圖生成新圖

1. 喺 Cowart 畫布入面對圖片做標註。
2. 揀中被標註嘅圖片，㩒 按標註修改。
3. Cowart 會導出包含原圖、箭頭同標註文字嘅截圖，並經 widget bridge 發送俾 Codex。

Codex 會讀取截圖入面嘅標註同箭頭，生成冇咗標註痕跡嘅新圖，然後將結果擺喺原圖隔籬。原圖同標註唔會被刪除或者移動。你亦都可以手動將 Cowart 標註截圖發俾 Codex，行同樣嘅修訂流程。

技能

• cowart:cowart-open-canvas：打開 Cowart 原生畫布 widget。
• cowart:cowart-image-gen：接收畫布入面嘅 prompt 同參考圖，用生成圖片取代揀中咗嘅 AI 圖片 框；冇揀中框嗰時亦可以將生成圖插入當前頁面。
• cowart:cowart-image-edit：根據畫布提交或者用戶提供嘅 Cowart 標註截圖生成修訂圖。

本地開發

npm install
npm run dev
npm run build

本地開發嗰時仍然可以直接啟動 Vite 畫布服務，並指定用戶項目目錄：

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

常用環境變量：

• COWART_PORT：本地服務端口，默認 43217。
• COWART_PROJECT_DIR：畫布數據所屬嘅用戶項目目錄。
• COWART_CANVAS_DIR：畫布數據目錄，默認係 $COWART_PROJECT_DIR/canvas。

項目地址

https://github.com/zhongerxin/Cowart

項目簡介

Cowart 是一個面向 Codex 的原生無限畫布 widget 插件。它基於 tldraw 提供可視化畫布，用於構思、標註、生成圖片和根據標註圖迭代圖片。畫布由 MCP widget 直接打開，數據默認保存到當前用戶項目的 canvas/ 目錄，而不是保存到插件倉庫裏。

功能

• 在 Codex 中打開一個原生 tldraw 無限畫布 widget；正常使用不再通過網頁瀏覽器或 in-app browser 打開本地頁面。
• 在當前項目目錄中持久化畫布頁面和圖片資源。
• 在畫布中創建 AI 圖片框，直接輸入 prompt、選擇參考圖，並讓 Codex 按選中框的位置和比例生成圖片後替換它。
• 標註好圖片後，可從畫布裏直接提交標註截圖，讓 Codex 根據標註生成乾淨的新圖並放到原圖旁邊。
• 通過 Cowart MCP 工具讀取選擇狀態、保存畫布、插入圖片，並保存到頁面本地資源目錄。

安裝

讓 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 工具。

手動安裝

推薦把插件 clone 到 Codex personal marketplace 默認會引用的位置：

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

確保 ~/.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"
    }
  ]
}

然後先註冊 personal marketplace，再安裝插件：

codex plugin marketplace add ~
codex plugin add cowart@personal

安裝後建議開啓一個新的 Codex 對話，讓新的 skill 和 MCP 工具完整加載。

使用

打開畫布

在 Codex 中說：

Open the Cowart canvas for this project.

Cowart 會通過 render_cowart_canvas_widget 打開 Codex 原生 widget，不需要再啓動本地網頁服務或手動打開 in-app browser。scripts/start-canvas.sh 只保留為本地開發 fallback。

畫布數據會保存在當前項目目錄下：

canvas/pages/<page-id>/cowart-canvas.json
canvas/pages/<page-id>/assets/

生成新圖

1. 打開 Cowart 畫布。
2. 在畫布裏創建並選中一個 AI 圖片 框。
3. 在彈出的生成面板裏輸入 prompt，也可以選擇一張或多張參考圖，然後點擊發送。

Cowart 會把 prompt、參考圖和選中 AI 圖片 框的尺寸信息發送給 Codex。Codex 會按這個框的位置和比例生成圖片，然後把 AI 圖片 框替換成普通圖片形狀。

根據標註圖生成新圖

1. 在 Cowart 畫布中對圖片做標註。
2. 選中被標註的圖片，點擊 按標註修改。
3. Cowart 會導出包含原圖、箭頭和標註文字的截圖，並通過 widget bridge 發送給 Codex。

Codex 會讀取截圖裏的標註和箭頭，生成去掉標註痕跡的新圖，並把結果放在原圖旁邊。原圖和標註不會被刪除或移動。你也可以手動把 Cowart 標註截圖發給 Codex，走同樣的修訂流程。

技能

• cowart:cowart-open-canvas：打開 Cowart 原生畫布 widget。
• cowart:cowart-image-gen：接收畫布內 prompt 和參考圖，用生成圖片替換選中的 AI 圖片 框；沒有選中框時也可以把生成圖插入當前頁面。
• cowart:cowart-image-edit：根據畫布提交或用戶提供的 Cowart 標註截圖生成修訂圖。

本地開發

npm install
npm run dev
npm run build

本地開發時仍可以直接啓動 Vite 畫布服務，並指定用戶項目目錄：

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

常用環境變量：

• COWART_PORT：本地服務端口，默認 43217。
• COWART_PROJECT_DIR：畫布數據所屬的用戶項目目錄。
• COWART_CANVAS_DIR：畫布數據目錄，默認是 $COWART_PROJECT_DIR/canvas。

項目地址

https://github.com/zhongerxin/Cowart