OpenClaw Canvas 是 macOS 版本独有的功能，让 AI 助手不只能输出文字， 还能在你面前渲染交互式界面、图表和数据可视化。
Canvas 是什么？
Canvas 是 OpenClaw macOS App 提供的一个受控浏览器渲染层：
你的提问（文字）
↓
Claude 生成 HTML/React/图表代码
↓
Canvas 渲染结果
↓
你看到可交互的可视化内容（不只是代码）
与普通聊天回复的区别：
| 普通回复 | Canvas 回复 |
|---|---|
| 返回 Markdown 文字 | 渲染可视化内容 |
| 代码需要自己运行 | 直接在 Canvas 中运行展示 |
| 静态内容 | 可交互（点击、筛选、动画） |
开启 Canvas
Canvas 在 OpenClaw macOS App 中默认可用，但需要开启相关权限：
菜单栏图标 → 设置 → 工具 → Canvas
确认「Canvas」已启用
首次使用时会申请：
- 屏幕录制权限（截取 Canvas 内容时需要）
支持的内容类型
HTML 页面
你：帮我做一个简单的 Pomodoro 番茄钟，要有计时显示和开始/暂停按钮
AI：[在 Canvas 中渲染交互式番茄钟]
已在 Canvas 中展示，可以直接点击「开始」使用。
数据图表（Chart.js / D3.js）
你：把这份 CSV 数据做成折线图，显示每月销售趋势
AI：[读取 CSV 数据，在 Canvas 中渲染交互式折线图]
图表已生成，可以悬停查看具体数值，点击图例切换系列。
React 组件
你：帮我做一个任务管理看板，有待办/进行中/已完成三列，
可以拖拽卡片
AI：[在 Canvas 中渲染 Kanban 看板]
可以拖拽卡片测试布局效果，满意后我把代码集成到你的项目里。
Markdown 渲染
你：把这份技术文档渲染成好看的格式给我看
AI：[在 Canvas 中渲染格式化文档]
通过 SOUL.md 指导 AI 使用 Canvas
在 SOUL.md 中定义何时主动使用 Canvas：
markdown
# SOUL.md
## Canvas 使用规范
当以下情况时，主动在 Canvas 中渲染（不只是给代码）：
- 用户要求数据可视化（图表/报表/仪表盘）
- 需要展示 UI 设计或原型
- 展示计算结果时图形更直观
- 用户说「给我看看」「展示一下」「预览」
在 Canvas 渲染后，同时提供：
1. 可视化结果（Canvas）
2. 如何将其集成到项目中的说明a2ui：自然语言驱动 UI
a2ui（Articulated to UI）是 Canvas 的高级功能， 用自然语言描述界面，AI 直接渲染：
你：做一个天气应用界面：
- 顶部显示城市名和当前温度
- 中间有天气图标和天气描述
- 底部显示未来 5 天预报
- 配色用蓝色系，现代简洁风格
AI：[在 Canvas 中渲染完整的天气 App UI]
UI 原型已生成。需要调整配色、布局或功能吗？
实战案例
案例一：数据可视化仪表盘
你：读取 sales.csv，帮我做一个销售仪表盘，
包含：本月总销售额（大数字显示）、
按产品分类的饼图、每日销售趋势折线图
AI：[读取 CSV → 计算统计数据 → 在 Canvas 中渲染完整仪表盘]
仪表盘已在 Canvas 中渲染。数据说明：
- 本月总销售额：¥2,847,320
- 最畅销产品：A 系列（占比 34%）
- 趋势：最近一周增长 15%
案例二：UI 原型快速验证
你：我想做一个用户注册页面，要有姓名、邮箱、密码、
确认密码四个字段，和一个注册按钮，帮我快速看看效果
AI：[在 Canvas 中渲染注册表单原型]
原型已生成，你可以直接测试表单交互。
如果满意，告诉我用什么框架（React/Vue）实现。
案例三：代码执行结果可视化
你：运行这个排序算法，用动画展示排序过程
AI：[执行代码 → 在 Canvas 中渲染排序动画]
动画演示了冒泡排序的每一步，可以点击「步进」逐步查看。
Canvas vs 直接在浏览器打开
| 对比 | Canvas | 手动在浏览器打开 |
|---|---|---|
| 便捷性 | AI 直接渲染，零操作 | 需要保存文件、手动打开 |
| 迭代速度 | 说「改成蓝色」立即更新 | 需要修改文件再刷新 |
| 安全隔离 | 在 OpenClaw 受控环境中 | 完全开放的浏览器 |
| 适合 | 快速原型、探索 | 最终展示、共享 |
来源：OpenClaw 官方文档 - docs.openclaw.ai/platforms/mac/canvas