---
title: "Canvas Tool"
description: "基于 Cursor 官方 Canvases 文档解释交互式 artifact、打开方式、迭代方式和 Skill 打包。"
verifiedAt: "2026-05-09"
---

Canvases 让 Cursor 在 chat 旁边生成可交互 artifact（产物，可独立打开 / 编辑 / 重新运行的输出对象）。官方文档给出的定位是：当结果不适合塞进一长段 Markdown table 或 code block 时，Cursor 可以把 dashboard、analysis、audit、report 这类结果放进独立视图里。

> [!NOTE]
> **阅读目标**：读完本章，你应该能判断什么时候让 Cursor 生成 canvas，怎样审查 canvas 的数据和布局，以及什么时候把常用 canvas 流程封装成 skill。

## 1. Canvas 适合什么

Canvas 的核心是“独立可视化结果”，不是装饰。适合这些输出：

| 输出类型 | 为什么适合 Canvas |
| --- | --- |
| Dashboard | 需要 stats、sections、tables 组合呈现 |
| Analysis | 需要把结论、依据、明细分层展示 |
| Audit | 需要风险等级、问题列表、修复状态 |
| Report | 需要可重新打开、编辑、迭代和复跑 |

如果输出只是 3 条建议，普通 chat 就够；如果输出需要布局、表格、状态块和后续迭代，Canvas 更合适。

## 2. 官方工作流

官方流程可以拆成四步。

```mermaid
flowchart TD
  Prompt["请求 dashboard / analysis / audit / report"] --> Decide["Cursor 判断是否更适合 Canvas"]
  Decide --> Build["生成 canvas"]
  Build --> Reference["在 chat 中插入引用卡片"]
  Reference --> Review["用户打开、审查、编辑或继续迭代"]
  Review --> Save["保存到 workspace canvas list"]
  Save --> Reopen["以后重新打开或用新数据 rerun"]
```

每个 canvas 都会进入 workspace 的 canvas list。你不需要每次重新跑同一个报告，可以回到过去的 canvas 继续看、改或用新数据刷新。

## 3. 打开 Canvas

官方列出三个入口：

| 入口 | 操作 |
| --- | --- |
| Cursor response | Cursor 创建 canvas 后，response 末尾会出现一张 card，点击打开 |
| Command Palette | 在 palette 里运行 **Open Canvas**，它位于 View 下 |
| Agents Window | 在 Agents Window 的 new tab menu 中直接打开 canvas tab |

## 4. 怎么迭代

Canvas 的迭代方式和普通文档不一样。官方建议优先让 Cursor 修改，而不是手工一点点改。

| 问题 | 更稳的做法 |
| --- | --- |
| Layout 不合适 | 直接告诉 Cursor 需要怎样改 sections、stats、tables |
| 数字看起来过期或不对 | 让 Cursor rerun 底层 query，或 show its work |
| 需要大改结构 | Revert 后用更具体 prompt 重新生成 |
| 只有很小的视觉或文案调整 | 可以手动编辑 source code |

<details>
<summary>深读：为什么大改 Canvas 时不要连续小修</summary>

Canvas 是布局化 artifact。结构错了时，连续追问“这里再调一下、那里再加一列”容易把 source 改得越来越散。

官方也建议：较大的 rework 通常 revert 后重新 prompt 更快。重新 prompt 等于重新定义数据源、布局、分区和格式规则，比在错误结构上补丁更可控。
</details>

## 5. 用 Skill 固化 Canvas

官方文档说明，常见 canvas workflow 可以打包成 Skills，让 Cursor 每次生成一致的布局。

一个 canvas skill 通常包含：

| 组成 | 写什么 |
| --- | --- |
| Trigger description | 什么时候触发，比如 quarterly revenue report、dependency audit |
| Layout instructions | 包含哪些 sections、stats、tables |
| Data sources and queries | 用 SQL query、API call 或 shell command 取什么数据 |
| Formatting rules | 单位、日期范围、排序规则和字段格式 |

一旦 skill 建好，团队成员用很短的 prompt 就能重新生成相同形状的 canvas，并用新数据刷新。

## 6. 验收清单

商业项目里看 canvas，重点不是“看起来像报告”，而是这些点：

- 数据来源是否明确。
- 统计口径是否写清。
- 排序、单位、日期范围是否一致。
- 能不能重新打开和 rerun。
- 大改时是否能 revert 后重建。
- 结果是否适合沉淀成 skill。
- 是否避免把敏感数据、密钥、客户信息直接放进可分享 canvas。

## 本章自检

完成本章后，用这 3 个问题检查自己是否真正理解：

1. 什么输出适合 Canvas，什么输出只需要普通 chat？
2. Canvas 数字看起来不对时，应该让 Cursor 做什么？
3. 为什么常见 Canvas workflow 适合打包成 Skill？

通过标准：你能为一个真实审计或报告任务写出 canvas prompt，并能说明数据源、布局、刷新和验收方式。

## 官方来源

- [Cursor Canvases](https://cursor.com/docs/agent/tools/canvas.md) —— 官方说明 Canvas 定位、打开方式、迭代方式和 Skill 打包。
- [Cursor Agents Window](https://cursor.com/docs/agent/agents-window.md) —— 官方说明可以从 Agents Window new tab menu 打开 canvas tab。
- [Cursor Skills](https://cursor.com/docs/skills.md) —— 官方说明把可复用工作流封装为 skills。

## 接下来去哪

<Cards>
  <Card title="Worktrees" description="继续学习用隔离 checkout 跑并行 Agent。" href="/docs/cursor/official/01-agent-workflow/20-worktrees" />
  <Card title="Skills" description="把常见 Canvas workflow 固化成可复用能力。" href="/docs/cursor/official/02-context-customization/22-skills" />
</Cards>
