Claude Code 终于能画图给你看了——而且是白板那种

Claude Code 对话框里，AI 画图这事终于不抽象了——claude-canvas 这个 Skill 直接给它装了一块白板。

它解决了什么问题

Claude Code 很强大，但再怎么输出，它也只能在终端里扔文字。让你选「哪个布局更好」，它给你一段文字描述；让你看系统架构，它给你 ASCII 流程图——全靠脑补。

claude-canvas 直接在浏览器里开一块共享画布。Claude 在上面画线框图、架构图、用户旅程图，你可以直接在浏览器里点选、打字、甚至手绘回应，Claude 自动把你的反馈接回来继续干活。

不需要你敲任何命令。装好之后，Claude 自己知道什么时候该开画布、什么时候该问你问题。

怎么工作的

装好 Skill 后，Claude Code 会自动带一个配套的 CLI 工具。核心逻辑：

• 自动触发：Claude 判断「这里用图说话更清楚」，自动开浏览器 tab 画给你看
• Visual Q&A：Claude 画好几个方案，你在浏览器里点选答案，Claude 拿了就走
• DSL 格式：Claude 用一套紧凑的绘图语言（比 JSON 少 3-5 倍 token）来描述图形，节省上下文
• 手绘风格：内置 Rough.js，所有图都长得像白板草图，自然不生硬
• 导出：PNG / SVG / JSON 随便导

适用场景

• 架构评审：让 Claude 画出几种微服务拆分方案，你点选，它继续细化
• UI 布局对比：给 AI 看几个线框草图，问「哪个更符合你的直觉」，不用来回贴截图
• 流程对齐：多人 Code Review 时，Claude 画流程图，你直接在图上标注意见
• 数据流可视化：说「帮我画一下这个 ETL 流程」，出来直接是可交互的图

安装方式

npm install -g claude-canvas
claude-canvas setup

就两步，之后用 Claude Code 正常干活就行。遇到适合用图的场景，Claude 自己会开画布。

我的感觉

这个 Skill 的核心价值不是「让 AI 画图」，而是把 AI 的视觉输出变成可交互的对话节点。以前是「AI 说，你脑补」，现在是「AI 画，你点击，AI 继续」——闭环了。

适合经常需要做技术设计、技术评审，或者跟产品/设计同学对齐方案的团队。

GitHub：uditalias/claude-canvas

GitHub: https://github.com/uditalias/claude-canvas