Canvas Skill

• 您希望 AI 智能体将生成的 HTML 页面（仪表盘、游戏、可视化内容）实时推送到您的 Mac、iPhone 或 Android 设备。
• 您正在原型设计交互式 HTML 内容，并需要实时重载功能——保存文件后，已连接的画布将自动更新。
• 您需要智能体在运行中的 WebView 内远程执行 JavaScript（例如，无需完整重载即可更新图表数据）。
• 您希望在智能体工作流中捕获已渲染画布内容的屏幕截图。

• 您未使用 OpenClaw 节点——此技能专为 OpenClaw Mac/iOS/Android 生态系统设计。
• 您需要向公众或非 Tailscale 对等节点提供内容；该服务器仅供本地/局域网/Tailscale 访问使用。
• 您希望嵌入完整浏览器或显示任意外部 URL——canvas 主机仅提供来自已配置本地根目录的文件。

五个独立动作——present、hide、navigate、eval 和 snapshot——赋予智能体对节点显示内容的精细控制能力。只需一个 Canvas Skill，即可呈现 URL、通过导航切换内容、在不刷新页面的情况下运行 JavaScript，或捕获屏幕截图。

当 liveReload: true（默认值）时，canvas 宿主通过 chokidar 监听根目录，并向 HTML 文件中注入一个 WebSocket 客户端。保存任意文件后，所有已连接的画布将立即刷新，从而使 HTML 的迭代生成更加高效。

HTTP 服务器可以绑定到回环地址、局域网接口、Tailscale 接口，或自动选择绑定方式。正确的主机名会通过桥接自动转发至各节点，因此无论网络拓扑如何，内容均可正常加载。

eval 操作允许代理在实时画布 WebView 中执行任意 JavaScript。这支持动态更新——向图表推送新数据、触发动画或读取 DOM 状态——而无需导航到新页面。

snapshot 动作会捕获指定节点上当前画布的截图，并将其返回给代理，从而实现对渲染内容的可视化检查或日志记录。

一个代理生成一个 HTML 仪表板，汇总数据（例如销售指标、系统统计信息），并将其写入 ~/clawd/canvas/dashboard.html。然后它调用 canvas action:present，以你的 Mac 节点为目标，仪表板立即显示在 Canvas Skill 视图中。

将一个独立的HTML5游戏放入Canvas Skill根目录，然后让代理将其呈现在已连接的iPhone节点上。代理随后可以调用 hide 或切换到其他演示，无需在设备上进行任何手动操作。

先呈现一个图表页面，然后使用重复的 eval 操作将新数据点推送到运行中的 JavaScript 上下文。图表无需重新加载页面即可实时更新，适用于监控或实时代理输出等场景。

在开发过程中，保持画布在已连接节点上处于打开状态，并在画布根目录中编辑 HTML 文件。每次保存都会触发自动重载，无需手动刷新或重新运行命令，即可获得即时的视觉反馈。