Canvas 是 ChatGPT 的一部分,它讓 AI 走出狹小的聊天窗口,進入一個可與您共享的可編輯工作區——非常適合草稿、程式碼、迭代編輯和協作潤飾。本文融合了最新的產品新聞和實用操作指南,讓您可以開啟 Canvas,像專業人士一樣進行編輯,並將其整合到實際工作流程中。敬請期待具體的步驟、範例提示和可貼到 Canvas 中並立即進行迭代的程式碼片段。
什麼是 ChatGPT 畫布?
Canvas 是 ChatGPT 內部一個可編輯的並排工作區,專為需要多個聊天回應的專案而設計:長篇寫作、迭代程式碼編輯、文件和渲染輸出。 Canvas 不會在聊天氣泡中接收單一回复,而是提供一個即時文檔,供您和助理共同編輯——具有版本控制、就地編輯以及適用於起草和重構的工具。 OpenAI 宣布此功能是用於編寫和編碼專案的全新介面。
為什麼 Canvas 很重要
- 它消除了僅限聊天的工作流程的“剪切和粘貼”摩擦:工作直接在可編輯的畫布上進行。
- 它是為迭代而構建的:有針對性的編輯、可恢復的版本和上下文提示使更改保持精確。
- 它連接起草和可運行程式碼——您可以將程式碼、文件和渲染輸出放在一起。
如何使用 ChatGPT Canvas — 建立、編輯和迭代(逐步說明)
以下是啟動 Canvas 會話、推送編輯以及使用 Canvas 編寫程式碼或文字的實用、逐步工作流程。
快速先決條件(開始之前)
- 一個有效的 ChatGPT 帳戶(Canvas 的可用性取決於您的計劃和當前的推出情況;請檢查您的 ChatGPT UI)。
- 使用支援的平台:Web 應用程式和 Windows 均支援 Canvas;請關注 OpenAI 說明頁面以了解 macOS/行動版本的推出。
- 如果團隊需要協作/共享,請檢查企業/教育或團隊設定的共享控制。
開啟畫布(建立步驟)
- 開啟 ChatGPT(網路或支援的桌面應用程式)。
- 選擇啟用 Canvas 的模型 — 在許多 UI 中,它被標記為 “帶有畫布的 GPT-4o” or “GPT 與 Canvas”。選擇此模型會告訴 ChatGPT 在您的輸入需要時開啟 Canvas UI。
- 開始新的草稿或要求使用 Canvas。 輸入提示,表示您想要建立文件或專案:例如“幫我寫一篇關於 X 的 1200 字的文章並在 Canvas 中開啟它”,或貼上現有文件並說“在 Canvas 中編輯它”。如果 Canvas 沒有自動出現,請輸入「使用 Canvas」或選擇 Canvas 圖示(如果存在)。
- Canvas 以並排工作區開啟。 左側保留您的聊天記錄;右側變為可編輯的畫布區域,顯示您的草稿或程式碼區塊。現在您可以在線上操作文件了。
範例:可靠地開啟 Canvas 的提示
I want to draft a technical tutorial on "How to set up GitHub Actions for CI". Create a new document in Canvas with headings, code blocks, and a sample workflow file. Start with an outline.
將其貼到選定的 Canvas 模型中 — ChatGPT 應該在 Canvas 工作區中顯示可編輯的草稿。
在 Canvas 內編輯(如何進行更改、復原和最佳化)
Canvas 支援多種編輯範例:
1)使用自然語言進行就地編輯
輸入一條新訊息,指導助手如何更改畫布:例如,「將簡介縮短為 3 個句子」或「重構範例函數以使用 async/await」。 AI 將直接修改畫布並提供差異或更新的文字。
2)手動編輯
您可以直接在畫布上點擊,像任何文件編輯器一樣進行編輯。這非常適合您想要保留的細微調整,而無需諮詢助理。
3)替換/插入/擴充命令
使用提示進行手術改變:
- “用 4 句話的總結取代第 2 段。”
- “在第二個程式碼區塊後插入一個使用範例。”
這些命令使編輯保持範圍和可追蹤性。
4)版本歷史與恢復
Canvas 會保留編輯的版本,以便您可以根據需要還原到先前的狀態。使用 Canvas 工具列或功能表可以存取歷史記錄和快照。這對於在不丟失早期草稿的情況下進行實驗至關重要。
5)共享與協作
對於團隊/企業/教育用戶,Canvas 資源可以像聊天一樣共享——從工具列共享渲染後的程式碼、文件或 Canvas 本身。這樣,團隊成員就可以在適當的存取控制下開啟同一個可編輯的資源。
實際範例和程式碼片段(可複製貼上)
以下是一些實用的小例子,您可以將其貼到 Canvas 中嘗試編輯、重構或渲染程式碼。
範例 A — 要重構的程式碼片段(JavaScript)
將其貼到 Canvas 中,然後提示:“重構此功能以使其更具可讀性並添加單元測試。”
// sample.js - small utility to fetch JSON with retries
async function fetchJson(url, retries = 3) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error('bad status');
return await res.json();
} catch (err) {
if (retries > 0) {
await new Promise(r => setTimeout(r, 1000));
return fetchJson(url, retries - 1);
}
throw err;
}
}
export default fetchJson;
您可以在 Canvas 中給出的範例編輯提示:
Refactor this code: add JSDoc comments, increase delay exponentially with each retry, and export a named function. Also provide a small Jest test file.
範例 B — 一個小的 React 元件(貼上,然後提示轉換為 TypeScript)
// Greeting.jsx
import React from 'react';
export default function Greeting({ name }) {
return (
<div className="p-4 rounded shadow">
<h2>Hello, {name}!</h2>
<p>Welcome to the demo Canvas project.</p>
</div>
);
}
提示想法:
- “將其轉換為 TypeScript 並新增 prop 類型。”
- “讓元件從 /api/greeting 獲取問候訊息並顯示載入狀態。”
範例 C — 文件編輯提示(寫作用例)
將您的草稿貼到 Canvas 中並詢問:
Tighten the prose, improve transitions, and produce a 200-word summary for the top of the article. Also add two inline citations and a recommended reading list.
實際用例和工作流程
Canvas 在許多場景下都非常有用。以下是一些個人和團隊正在使用的特定工作流程。
1)起草和編輯長篇內容(部落格文章、報告)
工作流程:
- 打開畫布並貼上您的草稿。
- 要求 ChatGPT 重組為標題和副標題。
- 對部分使用“縮短”/“擴展”操作來調整長度和音調。
- 將最終副本匯出到您的 CMS。
為什麼選擇 Canvas?在模型編輯時保持整篇文章可見,以便您可以順利接受更改。
2)開發人員工作流程-快速原型設計與除錯
工作流程:
- 將失敗的程式碼片段貼到 Canvas 中。
- 詢問:「運行它並顯示錯誤」(或「解釋這個回溯」)。
- 接受建議的修復並重新測試。
- 迭代重構或優化。
為什麼選擇 Canvas?它比在聊天和外部編輯器之間切換更快——尤其是在偵錯小腳本或建立文件程式碼片段時。
3)教育/解釋工作流程
學生和老師可以將文章、程式碼或數學證明貼到 Canvas 中,並要求提供逐步解釋、簡化說明或測驗題目。 Canvas 可讓您突出顯示部分內容,以便提供有針對性的回饋。
4)專案草案+團隊交接(與專案配對)
將 Canvas 與 ChatGPT Projects 配對,即可將正在進行的專案的簡介、參考文件和畫布草稿集中保存。專案充當資料夾;Canvas 是專案內部的即時工作文件。此配對有助於組織整個計劃中的多個畫布。
端到端 Canvas 工作流程範例(場景)
目標: 將粗略的 README + 範例腳本轉變為完善的庫入門頁面和 CI 測試。
- 開啟 ChatGPT,選擇 帶有畫布的 GPT-4o.
- 將您的 README.md 貼到 Canvas 中;貼上
sample.js從上面的程式碼區塊中。 - 提示:“重寫 README 以方便用戶入門;添加入門程式碼片段,並產生運行 Jest 的 GitHub Actions 工作流程。”
- 直接在 Canvas 中查看編輯;要求更改:「將入門指南縮短至 6 行」或「新增故障排除常見問題解答」。
- 透過詢問「新增模擬獲取和測試重試行為的 Jest 測試」來為範例模組產生測試。
- 匯出 README.md、sample.js 和測試文件,提交到程式碼庫,並連接持續整合 (CI)。如果使用團隊/企業版,請共用 Canvas,以便審查者查看可編輯的工件。
最後提示——提示和快速備忘單
提示縮短部分
Shorten the selected paragraph to 40–60 words, keep tone professional, and remove passive voice.
提示重構程式碼
Refactor the code block to be modular; export two functions, add JSDoc, and include a small Jest unit test.
提示轉換為其他格式
Convert the current Canvas document into a 3-slide presentation outline (title + 2 slides), with speaker notes under each slide.
結束語
Canvas 將對話從聊天氣泡中移出,進入一個共享的可編輯工作區,這對於迭代寫作和編碼尤其有用。自推出以來,OpenAI 一直在穩步改進 Canvas,並增加了團隊共享和平台支持,使其無論對個人創作者還是協作團隊都適用。如果您將 Canvas 與規範的提示、小規模的迭代編輯以及現有的審核流程結合,則可以顯著加快草稿→審核→發布的循環。
首先,探索 ChatGPT 模型,例如 GPT-5 專業版 的能力 游乐场 並諮詢 API指南 以獲得詳細說明。造訪前請確保您已經登入CometAPI並取得API金鑰。 彗星API 提供遠低於官方價格的價格,幫助您整合。
準備出發了嗎? → 立即註冊 CometAPI !
