第21章 Canvas A2UI —— 实时可视化协作 Workspace

Canvas 是 OpenClaw 的AI+人实时协作画布，让你和 AI 在同一个可视化工作空间一起工作。本章我们介绍 Canvas A2UI（AI to User Interface）的设计理念和使用方法。

什么是 Canvas A2UI

Canvas = 无限画布 + 实时块渲染 + AI 协作：

• 无限画布：你可以在上面放任何内容——文本、表格、图表、图片、代码
• 实时块：每个块是独立可交互的，AI 可以实时更新
• A2UI：AI 自动生成 UI，你直接在上面修改，所见即所得
• 协作：你和 AI 一起编辑，AI 生成，你调整，迭代很快

传统聊天是纯文本线性对话，Canvas 是空间化二维协作。

Canvas 核心概念

Block 块系统

Canvas 内容以块为单位：

每个块独立渲染，AI 可以更新单个块不影响整个画布。

坐标空间

Canvas 是二维无限空间：

• 每个块有 (x, y) 坐标
• 可以自由拖放调整位置
• 支持缩放 zoom
• 支持滚动平移 pan
• 可以分组块，一起移动

实时协作流程

你提出需求 → AI 生成块布局 → 你拖放调整 → AI 修改局部 → 你微调 → 完成

不是一次性生成完，是迭代式协作。

使用场景

1. 脑暴与思维导图

你："帮我脑暴一下新产品的功能列表"
AI：在 Canvas 生成树形节点思维导图
你：把这个节点拖到这里，加上这个想法
AI：重新整理结构
完成 → 导出 PNG / SVG

2. 数据分析

• 导入 CSV 数据
• AI 自动生成统计表格
• AI 生成几个不同维度的图表
• 你调整图表位置和样式
• 最终得到分析报告画布

3. UI 原型设计

• AI 生成页面布局块
• 你拖放调整组件位置
• AI 根据你调整重新生成细节
• 直接得到高保真原型

4. 项目规划

• 生成任务看板
• 你拖动任务到不同状态列
• AI 帮你更新依赖关系
• 实时迭代项目计划

5. 笔记整理

• 零散想法放在画布各处
• 你整理分组，连线表示关系
• AI 帮你提炼大纲
• 最终得到结构化笔记

基本操作

缩放和平移

• 滚轮：缩放画布
• 右键拖拽：平移画布
• 双击：聚焦块，自适应缩放

编辑块

• 单击：选中块
• 双击：进入编辑模式
• 拖拽边缘：调整块大小
• 拖拽标题栏：移动块位置

多选操作

• Shift+点击：多选块
• 框选：鼠标框选区域内所有块
• 选中后可以：
  • 批量移动
  • 批量删除
  • 分组/取消分组

AI 指令

在 Canvas 聊天框输入指令：

• 生成一个产品需求脑图
• 把这个表格转换成柱状图
• 重新排列这几个块，留出空间放新内容
• 帮我把这个模块细化，分解成更详细的步骤

AI 会直接在画布上更新，不用来回翻聊天记录。

协作模式

AI 主导，你调整

1. AI 生成完整初稿布局
2. 你做空间调整——移动块、调整大小、删改
3. AI 理解你的空间调整，再细化内容

优势：AI 做内容生成，你做宏观布局，分工合理。

你主导，AI 补充

1. 你手动放几个关键块
2. 告诉你"在这个区域和那个区域之间补充内容"
3. AI 在你指定位置添加块

优势：你把控结构，AI 填内容。

并发协作

你编辑的时候，AI 可以同时生成：

• AI 在画布下方生成新内容
• 你在上方整理已有内容
• 互不干扰，效率更高

A2UI 设计理念

A2UI = AI 生成 UI 骨架，人类做空间交互调整

为什么这么设计？

AI 擅长

• 内容生成（写文字、写代码、生成数据）
• 理解语义，结构化内容
• 从头开始创建初稿

人类擅长

• 空间布局调整（拖拖拽拽就好）
• 审美判断（这样放好看还是那样放）
• 价值判断（保留这个，删掉那个）
• 创造性跳跃（想到一个新点子直接加上）

A2UI 就是让 AI 做 AI 擅长的，人类做人类擅长的，各自发挥优势。

与传统界面对比

保存和分享

保存

• 自动保存：每次修改实时保存到云端/本地
• 版本历史：保留每次修改，可回滚
• 导出：
  • PNG 图片 —— 分享到社交
  • SVG —— 矢量图，放文档
  • PDF —— 打印 / 分享文档
  • JSON —— 完整数据，导入另一个 Canvas

分享

• 只读链接：生成分享链接，别人可以看不能改
• 可编辑链接：别人可以一起协作编辑
• 嵌入：嵌入到 Notion、网页、文档

技术实现要点

OpenClaw Canvas 技术栈：

• 渲染：Canvas API + SVG 混合渲染
• 实时协作：Operational Transformation 一致性算法
• 网络：WebSocket 实时同步
• 存储：JSON 格式保存块数据，可版本控制
• 客户端：React 前端，支持移动端手势

最佳实践

1. 先布局后细节

1. 让 AI 生成大体块布局框
2. 你调整大小位置
3. 再让 AI 填充每个块的细节

比直接生成所有内容再调整效率高。

2. 分组相关内容

把相关内容放在一起，分组后移动方便：

• 同一主题放一个区域
• 不同主题留出间隔
• 用连线表示依赖关系

3. 善用空白

不要铺满，留白方便后续添加内容。

4. 迭代不要重来

调整时，让 AI 只改你不满意的块，不要重新生成整张画布——保留你已经调好的布局。

常见问题

Q: Canvas 支持多人同时编辑吗？
A: 支持，实时协同编辑，和 Google Docs 一样。

Q: 画布大小有限制吗？
A: 逻辑上无限，实际上你用多少算多少，存在你的存储里。

Q: 可以嵌入到其他应用吗？
A: 支持 iframe 嵌入，API 调用也支持。

Q: 数据存在哪里？
A: 默认存在你自己的 OpenClaw 服务端，完全私有，第三方看不到。

本章小结

• Canvas A2UI 是 AI+人 实时可视化协作 workspace
• 块系统 + 二维空间 + 实时协作 = 灵活高效
• 设计理念：AI 生成内容，人类调整空间布局，分工协作发挥各自优势
• 适合脑暴、数据分析、原型设计、项目规划等空间化任务
• 比纯文本聊天更直观，比传统 UI 更灵活