画布 (Huabu)

一个本地无限画布插件，配合 MiniMax Code（Mavis）使用。

把项目里的设计草图、AI 出图、批注、改图迭代都放到同一块画布上，随时画、随时标、随时让 AI 改。整个画布数据存在你自己电脑上的项目目录里，不上云。

基于 Cowart 的开源代码移植而来，针对 MiniMax Code 的本地运行模型做了适配。

截图

画布 UI（运行时实拍）：

无限画布嵌在 MiniMax Code 右侧 FilePanel。顶部页面切换，右侧颜色 / 填充 / 笔刷大小面板，底部工具栏（标注 / 选择 / 手 / 图片 / HTML / AI 出图 / 画笔 / 橡皮 / 文字），左上角菜单按钮 + 撤销重做。

典型使用场景示意：

标题区用文字、色块（红/蓝/绿/黄）展示调色盘；紫色虚线框是 AI 图片 占位框，Mavis 会按尺寸自动出图替换；红色箭头 + 文字"把这里改成红色"是用户标注，Mavis 读懂后会出新版本图放到旁边。

---

它做什么

场景	怎么用
打开画布	对 Mavis 说"打开 huabu 画布"或"@Huabu"，右侧 FilePanel 里会弹出无限画布
在画布上画草图、加文字、贴图、画箭头	用底部工具栏（画笔 / 文字 / 图片 / 标注）
让 AI 生图并放到画布上	"在画布里生成一张产品图"——选一个 AI 图片 占位框，Mavis 自动按尺寸出图替换
按标注改图	在画布上画箭头、写"把这里改成红色"之类的标注，截图发给 Mavis，自动出新版图放到旁边

---

它长什么样

画布是 tldraw 的无限画布，右侧 FilePanel 全屏呈现：

• 顶部：页面切换、画布菜单
• 左侧：工具栏（选择 / 手 / 画笔 / 文字 / 形状 / 图片插入 / 标注 / AI HTML / AI Slides 占位）
• 右侧：颜色 / 笔触 / 笔刷大小选择
• 底部：缩放控制、撤销重做、复制粘贴
• 中部：可缩放、可平移的无限白板

所有内容都存到当前项目目录下的 canvas/ 子目录里，不联网（除非你主动触发 AI 出图，此时会调用 MiniMax 官方接口）。

---

安装

前置条件

• macOS（Linux/Windows 未测试）
• Node.js 18+
• MiniMax Code（Mavis）桌面版
• 一个 MiniMax API Key（用于 AI 出图/改图功能），通过以下任一方式提供：
  • 环境变量 MINIMAX_API_KEY
  • ~/.config/mavis/api_key 文件
  • 插件数据目录 secrets.json

安装步骤

把整个项目目录软链接（或复制）到：

ln -s "$(pwd)" ~/.minimax/plugins/huabu

或者：

cp -R . ~/.minimax/plugins/huabu

重启 MiniMax Code，huabu 插件就会出现在 Local Plugin 列表里。

---

使用

第一次打开

在 MiniMax Code 对话里：

@Huabu 打开画布

或者：

打开 huabu 画布

右侧 FilePanel 会弹出画布。第一次打开是空白页，可以开始画。

落盘位置

画布所有数据写到当前项目目录下：

<your-project>/
└── canvas/
    ├── pages/
    │   └── <page-id>/
    │       ├── cowart-canvas.json      ← tldraw 快照
    │       └── assets/                  ← 图片资产
    ├── cowart-canvas.json               ← 当前页快照（汇总）
    ├── cowart-view-state.json           ← 相机/缩放
    └── cowart-selection.json            ← 当前选中的形状

切换项目或关闭 Mavis 后再打开，数据都会保留。

AI 出图

在画布里放一个 AI 图片 占位框（顶部菜单 → Insert → AI 图片），告诉 Mavis：

在画布里生成一只橘猫

Mavis 会按占位框尺寸生成图片，替换占位框。

按标注改图

在已有图片上画箭头、写"把这里改成红色"，截图发给 Mavis：

[截图] 按我的标注改图

Mavis 会读懂标注，调用 image-01 出新图，放在原图右边。

---

项目结构

.
├── .minimax-plugin/
│   └── plugin.json          ← MiniMax Code 插件清单
├── icon.png / icon-dark.png ← 插件图标
├── servers.mcp.json         ← MCP server 注册
├── scripts/
│   └── start-mcp.mjs        ← MCP server 启动器
├── mcp/
│   ├── lib/                 ← MCP server 源码（canvas storage、widget resource 等）
│   └── generated/           ← 构建产物（MCP bundle + widget HTML + manifest）
└── skills/
    ├── huabu-open-canvas/   ← Skill：打开画布
    ├── huabu-image-gen/     ← Skill：AI 出图
    └── huabu-image-edit/    ← Skill：按标注改图

---

依赖

• tldraw — 画布 UI
• MCP SDK — 与 MiniMax Code 通信
• MiniMax image-01 API — AI 出图 / 改图

---

开发

构建产物 mcp/generated/ 是预编译的（用上游 Cowart 的构建脚本生成）。重新构建：

# 重新跑上游构建脚本生成 mcp/generated/
# 参考 https://github.com/zhongerxin/Cowart 的 scripts/build-release-artifacts.mjs

---

隐私与遥测

本仓库已脱敏：

• 作者信息 → Huabu Maintainers
• Google Analytics measurement ID → 空（不会上报）
• PostHog endpoint → 空（不会上报）
• 个人主页 URL → 占位

如果你想让画布继续遥测到自己的 GA / PostHog，可以在插件数据目录创建：

// ~/.minimax/plugins/huabu/.codex-plugin/analytics.json
{ "apiSecret": "<your GA4 api secret>" }

// ~/.minimax/plugins/huabu/.codex-plugin/posthog.json
{ "projectToken": "<your PostHog project token>" }

---

License

MIT — 继承自上游 Cowart。