前言¶

改頁面佈局或 HTML 報告時，常見做法是截圖發對話、用文字描述「這裏往左一點」。Agent 只能靠 OCR 或 Vision 猜箭頭指向哪裏，改完還要人工對照源文件。若能把網頁放進可縮放畫布、用結構化標註寫清修改意圖，再讓 Agent 讀標註直接改源文件，審閱鏈路會短很多。下面介紹 SkillHub 上的 cowart-canvas-opencode（座標 @user_bda4ca23/cowart，當前版本 3.1.0），它把這條鏈路封裝成可複用的 Agent Skill，並附帶本地 tldraw 畫布與 REST API。

這是什麼¶

cowart-canvas-opencode 是社區發佈的 design-media 類 Skill（發佈者 user_bda4ca23，來源 community）。官方簡介將其定位爲 Cowart 無限畫布標註系統：支持 HTML/圖片截圖自動嵌入畫布、標註箭頭，並由 AI 讀取標註（含 OCR 識別目標內容的場景說明）；適用於頁面佈局審閱、報告校對、設計反饋等需要視覺標註的工作流。Skill 內說明其基於 codex 靈感，面向 opencode 等宿主；畫布實現基於 tldraw，本地服務默認監聽 http://127.0.0.1:43217。

Skill 文檔強調的核心閉環是：HTML/網頁 → 畫布 → 標註 → 讀標註 → 改源文件；並包含編輯器模式（HTML 快速編輯後一鍵插入畫布）及 REST API 參考。常見觸發詞包括：畫布、標註、截圖審閱、讀標註、編輯器模式、插入畫布等。

核心功能¶

以下能力均來自 Skill 包內 SKILL.md（3.1.0）及 SkillHub 頁面說明，可按需選用。

本地無限畫布（tldraw）¶

• 通過啓動腳本拉起 Vite + React 前端，在瀏覽器中操作無限畫布。
• 畫布數據保存在項目目錄下的 canvas/；可用 daemon 模式後臺運行。

標註與讀標註¶

• 使用畫布上的「標註」工具畫箭頭並寫入修改說明；文字保存在 tldraw shape 的 props.richText，Skill 要求優先用腳本/API 讀取，畫布開啓時禁止用 OCR 替代。
• 用戶說「讀 Cowart 標註」時，Agent 應執行 scripts/read_annotations.py（支持 --json）。

編輯器模式¶

• 頂欄切換到「編輯器」：三欄佈局（預覽 + Inspector），可導入/粘貼 HTML，點選元素改樣式，切換視口預覽響應式。
• 「插入畫布」會清洗臨時屬性、保存 HTML（POST /api/cowart-upload-html），並將預覽截圖作爲圖片 shape 插入畫布，便於回到畫布模式繼續標註。

REST API 與輔助腳本¶

本地服務提供畫布快照、選中狀態、視圖狀態、SSE 事件、HTML 上傳等接口，例如：

另有 insert_image.py、screenshot_to_cowart.py 等腳本，用於向畫布插入圖片或從截圖導入。

環境與插件目錄¶

• 前置條件：Node.js 22+、npm。
• 定製版 Cowart 前端建議放在 ~/plugins/cowart（分發包解壓後的 cowart/ 目錄）；Skill 本體（SKILL.md 與 scripts/）需放到當前 Agent 的 skills 目錄。

SkillHub 標籤標明 requires_api_key=false，安裝 Skill 本身不強制 API Key；若使用宿主自帶的圖片生成能力，仍取決於你本地配置。

安裝與啓用¶

通過 SkillHub CLI（推薦）¶

SkillHub 安裝頁給出的提示爲：參照 SkillHub 安裝文檔，安裝座標 @user_bda4ca23/cowart。

先確認 CLI 是否已安裝：

command -v skillhub && skillhub --version

未安裝時可按官方文檔執行一鍵安裝腳本。安裝 Skill 時必須用 --dir 指向當前 Agent 的 skills 目錄（例如 Cursor 常用 ~/.cursor/skills/，Codex 常用 ~/.codex/skills/ 或項目下 .agents/skills/），否則默認落到 ./skills/ 可能不會被識別：

skillhub install @user_bda4ca23/cowart --dir ~/.cursor/skills/

將上述路徑換成你實際使用的 Agent skills 目錄即可。OpenClaw / opencode 等變體請按各自文檔中的 skills 路徑替換。

下載 Zip 包¶

SkillHub 提供 3.1.0 的 Zip 下載地址：

https://api.skillhub.cn/api/v1/download?slug=@user_bda4ca23/cowart

解壓後按 Skill 內「安裝」節：把包內的 cowart/ 移到 ~/plugins/cowart，執行 npm install，並把 SKILL.md 與 scripts/ 複製到宿主 skills 目錄。若本地已有帶編輯器模式的舊版 ~/plugins/cowart，文檔建議直接複用並先備份 canvas/，避免覆蓋丟失數據。

典型用法¶

1. 打開畫布¶

用戶說「打開 Cowart 畫布」時，在插件目錄執行：

~/plugins/cowart/scripts/start-canvas.sh --daemon

等待 Vite 輸出本地 URL 後，在瀏覽器打開 http://127.0.0.1:43217。停止服務可用 lsof -ti :43217 | xargs kill，或 daemon 模式下 kill $(cat ~/plugins/cowart/cowart.pid)。

2. 審閱並回流修改¶

1. 將 HTML 報告或截圖拖入畫布。
2. 用標註工具畫箭頭並寫修改文字。
3. 對 Agent 說「讀 Cowart 標註」。
4. Agent 運行讀標註腳本，根據結果修改對應 HTML/報告源文件，並提示用戶刷新。

讀標註示例（路徑需按你實際的 skills 安裝位置調整）：

python3 ~/.cursor/skills/cowart-canvas/scripts/read_annotations.py
python3 ~/.cursor/skills/cowart-canvas/scripts/read_annotations.py --json

3. 編輯器模式插入畫布¶

1. 在編輯器模式導入或粘貼 HTML，用 Inspector 改樣式。
2. 點擊「插入畫布」，HTML 寫入 public/preview.html，預覽圖進入畫布。
3. 回到畫布模式標註 → 讀標註 → 改源文件。

若插入因跨域資源導致 canvas 污染失敗，Skill 建議改用「導出」HTML 再手動處理。

4. 通過 API 查看選中（供 Agent 自動化）¶

curl -s http://127.0.0.1:43217/api/selection

用於確認是否選中 AI 圖片 holder 或需要操作的 shape，再配合圖片生成與 insert_image.py 等步驟。

適用場景與注意¶

適合誰：需要在本地可視化審閱網頁/HTML 報告、用箭頭+文字留下可機器讀取的修改意見，並讓 Coding Agent 改源文件的開發者或設計協作場景。

限制與注意：

• 依賴本機 Node 環境與常駐畫布服務（43217 端口）；端口占用時需先釋放再啓動。
• 多宿主下 Skill 可能以 cowart-canvas、cowart-canvas-opencode 等名稱安裝，內容以包內主 SKILL.md 爲準。
• 畫布打開時務必走 API/腳本讀標註，避免 OCR 誤讀；服務不可用時 Skill 文檔給出了 Vision 截圖、直接 curl API、或由用戶口述需求的降級順序。
• 編輯器「插入畫布」對引用跨域 https 資源頁面可能失敗，需導出 HTML 或去掉外部資源。

SkillHub 頁面（截至資料抓取）顯示該 Skill 評分 100000、下載約 1403 次；具體數字以 SkillHub 實時頁面爲準。

結尾¶

cowart-canvas-opencode 把「可視化標註」和「改源文件」接成一條可腳本化的本地流水線：tldraw 畫布 + REST API + 讀標註腳本，並附帶 HTML 編輯器模式便於快速改版再插入畫布。若你在 opencode、Cursor 或 OpenClaw 等環境中做頁面審閱，可從 SkillHub 安裝或下載 Zip，再按文檔配置 ~/plugins/cowart 與 skills 目錄。

• SkillHub 頁面：https://www.skillhub.cn/skills/user_bda4ca23/cowart
• API 座標頁：https://api.skillhub.cn/user_bda4ca23/cowart
• 安裝說明：https://skillhub.cn/install/skillhub.md