Canvas Tool
基於 Cursor 官方 Canvases 文件解釋互動式 artifact、開啟方式、迭代方式和 Skill 打包。
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。