Canvas Tool
基於 Cursor 官方 Canvases 文件解釋互動式 artifact、開啟方式、迭代方式和 Skill 打包。
📖 本篇術語速查表
| 英文 / 縮寫 | 中文 | 一句話解釋 |
|---|---|---|
| Canvas Tool | 畫布工具 | 在畫布上組織想法 / 內容的能力。 |
| 結構化 | structure | 把零散內容組織成結構。 |
| 協同編輯 | collaborate | 在畫布上和 Agent 共同推進。 |
不想讀完?把下面這段提示詞丟給 AI 幫你跑完——幫你用 Cursor 的 Canvas 工具組織想法、結構化內容。
你是 Cursor Canvas 工具使用顧問,幫我用 Canvas 把零散想法或內容組織成清晰結構。
【角色】
你熟悉 Canvas 工具適合什麼、怎麼把內容結構化、怎麼和 Agent 在畫布上協同。
【輸入】
- 我要組織的內容 / 想法:___
- 期望的結構(大綱 / 流程 / 關係):___
- 是否要 Agent 協助:___
- 後續用途:___
【工作流程】
1. 判斷 Canvas 適不適合這個內容
2. 把內容組織成目標結構
3. 讓 Agent 協助補全 / 整理
4. 給匯出 / 後續使用方式
【輸出規範】
▌一、Canvas 是否適合
▌二、結構組織方式
▌三、Agent 協助方式
▌四、匯出 / 後續使用
【硬約束】
- 結構服務目的,不為畫而畫
- 內容真實,不讓 Agent 編造
- 協同時人把關方向
- 不臆測意圖,不清先問
- 給的結構具體可用
- 適合文字 / 表格的別硬塞畫布Canvases 讓 Cursor 在 chat 旁邊生成可互動 artifact(產物,可獨立開啟 / 編輯 / 重新執行的輸出物件)。官方文件給出的定位是:當結果不適合塞進一長段 Markdown table 或 code block 時,Cursor 可以把 dashboard、analysis、audit、report 這類結果放進獨立檢視裡。
閱讀目標:讀完本章,你應該能判斷什麼時候讓 Cursor 生成 canvas,怎樣審查 canvas 的資料和佈局,以及什麼時候把常用 canvas 流程封裝成 skill。
1. Canvas 適合什麼
Canvas 的核心是“獨立視覺化結果”,不是裝飾。適合這些輸出:
| 輸出型別 | 為什麼適合 Canvas |
|---|---|
| Dashboard | 需要 stats、sections、tables 組合呈現 |
| Analysis | 需要把結論、依據、明細分層展示 |
| Audit | 需要風險等級、問題列表、修復狀態 |
| Report | 需要可重新開啟、編輯、迭代和復跑 |
如果輸出只是 3 條建議,普通 chat 就夠;如果輸出需要佈局、表格、狀態塊和後續迭代,Canvas 更合適。
2. 官方工作流
官方流程可以拆成四步。
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 |
深讀:為什麼大改 Canvas 時不要連續小修
Canvas 是佈局化 artifact。結構錯了時,連續追問“這裡再調一下、那裡再加一列”容易把 source 改得越來越散。
官方也建議:較大的 rework 通常 revert 後重新 prompt 更快。重新 prompt 等於重新定義資料來源、佈局、分割槽和格式規則,比在錯誤結構上補丁更可控。
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 個問題檢查自己是否真正理解:
- 什麼輸出適合 Canvas,什麼輸出只需要普通 chat?
- Canvas 數字看起來不對時,應該讓 Cursor 做什麼?
- 為什麼常見 Canvas workflow 適合打包成 Skill?
透過標準:你能為一個真實審計或報告任務寫出 canvas prompt,並能說明資料來源、佈局、重新整理和驗收方式。
官方來源
- Cursor Canvases —— 官方說明 Canvas 定位、開啟方式、迭代方式和 Skill 打包。
- Cursor Agents Window —— 官方說明可以從 Agents Window new tab menu 開啟 canvas tab。
- Cursor Skills —— 官方說明把可複用工作流封裝為 skills。