前言¶

改页面布局或 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