---
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="/zh-Hant/docs/cursor/official/01-agent-workflow/20-worktrees" />
  <Card title="Skills" description="把常見 Canvas workflow 固化成可複用能力。" href="/zh-Hant/docs/cursor/official/02-context-customization/22-skills" />
</Cards>
