ChatGPT 使用畫布功能 ( ChatGPT Canvas )
進行寫作、創作、筆記或程式開發時，可能會需要一個能夠持續編輯又能與 AI 協作的空間，而 ChatGPT 所推出的「畫布」功能，可以讓使用者與 AI 對話的同時，進行即時預覽、撰寫與修改內容，這篇教學會介紹 ChatGPT 的「畫布 Canvas」功能，以及運用 ChatGPT 畫布所實現的一些簡單範例。
目前許多 AI 工具 ( Gemini、Poe AI 等 ) 也都有提供畫布工具，功能也都類似，可以用同樣的做法自行測試。
快速導覽：
認識 ChatGPT 畫布 ( ChatGPT Canvas )
ChatGPT 畫布 ( ChatGPT Canvas ) 是一種結合 AI 對話與編輯功能的創作環境，可以讓使用者在與 ChatGPT 對話的同時，於右側畫布中預覽結果並及時編輯內容，甚至可以編輯程式碼、展示網頁結果與分享網頁，過程中可隨時要求 ChatGPT 提供修改建議、內容擴充或技術支援。
使用畫布時，除了可以直接透過對話要求 ChatGPT 使用畫布呈現結果 ( 例如「使用畫布呈現...」或「呈現網頁結果...」)，也可以直接點擊 ChatGPT 輸入欄位的「畫布」，當輸入欄位中出現「藍色畫布」文字，就表示要用畫布呈現描述的內容。
下方範例使用 ChatGPT 展示一個簡單網頁，網頁內容是九九乘法表表格。
ChatGPT 畫布特色和功能
ChatGPT 畫布有下列幾點特色：
- *雙欄工作介面**：左側與 ChatGPT 即時互動，右側呈現結果、可編輯文件或程式碼。
- AI 輔助創作：ChatGPT 會根據內容提供建議、改寫、補充、重組等操作。
- 內容儲存時限長：畫布內容可隨時存取與更新，適合長期使用。
- 多格式支援：支援純文字的腳本、報告、小說等，也支援 HTML、React、Python 等程式碼開發與預覽。
ChatGPT 畫布有許多很特別的功能，下方列出主要支援功能：
- 撰寫與編輯長篇文字 ( 報告、小說、腳本等 )。
- 即時預覽 HTML ( 支援互動，如按鈕點擊、表單輸入、分享 )。
- 使用 Tailwind CSS、shadcn/ui、lucide-react 等 UI 庫元件。
- 在 Python 畫布執行程式碼並取得輸出結果。
- 段落潤飾、翻譯、內容重組與自動補全。
ChatGPT 畫布不支援功能：
- 無法使用
fetch()或axios呼叫外部 API。- 不支援
<iframe>內嵌第三方網站或媒體。- 無法使用瀏覽器的暫存功能 ( localStorage、sessionStorage、Cookies 等 )。
關於 ChatGPT 畫布的分享功能
透過 ChatGPT 畫布產生預覽網頁後，點擊網頁上方的「分享」按鈕，點擊「建立連結」之後，就可以產生一段預覽網址，並將這短預覽網址分享給別人。
分享時也可以設定瀏覽網址的權限，權限分成「公開」和「只有自己」兩種，雖然使用者可透過 ChatGPT 畫布內建的「分享功能」，將內容以連結形式分享給他人觀看，但仍然會有一些需要注意的事項或限制，下方列出一些分享 ChatGPT 畫布的重點：
- 生成方式：點選畫布右上角的「分享」按鈕，會將產生一組獨立網址。
- 有效時間：分享的網址預設可持續有效 30 天，若之後畫布內容有更新，需再次產生新連結，不會影響原本內容，如果需長期保留內容，建議將內容匯出備份，就能在自己的開發環境中編輯使用。
- 限制事項：
- 分享連結為唯讀，無法編輯內容。
- 分享的畫布無法執行互動或程式碼 ( 如 Python 執行或內嵌其他網頁 )。
- 無法查看和 ChatGPT 的對話或修改紀錄。
ChatGPT 畫布範例：世界時鐘網頁
這個範例會和 ChatGPT 不斷對話，透過 ChatGPT 快速做出一個「世界時鐘」的網頁，在網頁上呈現多國目前的時間，第一個步驟先讓 ChatGPT 根據下列提示詞，做出一個呈現六個地點時間的簡單網頁。
請做一個「世界時鐘」的網頁，呈現「台灣、日本、紐約、倫敦、巴黎、雪梨」這六個地方的目前的時間
一個簡單的網頁通常都會比較單調，透過添加其他指令，就能讓 ChatGPT 協助美化版面，下方是美化指令的寫法：
請做一個「世界時鐘」的網頁，呈現「台灣、日本、紐約、倫敦、巴黎、雪梨」這六個地方的目前的時間，並按照下方說明設計版面：
- 使用 AM 和 PM
- 名稱使用中英文
- 使用 emoji 的方式，加入各國的國旗
- 六個區域的配的都不同，標題和內容為同色系但不同色
- 配色可參考 bootstrap 相關配色
- 扁平化設計，不需要陰影，強調邊框等線條
如果還是無法產生滿意的版面，也可提供 ChatGPT 相關圖片輔助，使其更了解需求，下方範例提供了一張圓餅圖的參考圖，搭配一些提示詞，就能產生漂亮的世界時鐘。
注意，同樣的範例提示詞會產生類似但不同的結果，需要再額外自行調整。
請將時鐘的呈現方式，改成圓形並用圓餅圖的方式呈現，並參考圖片的配色
ChatGPT 畫布範例：新聞數據轉圖表
運用 ChatGPT 的畫布功能，可以將原本枯燥乏味的純文字新聞數據，轉換成可視化的圖表，如此一來也更能方便閱讀，下方範例使用內政部的最新消息內容，透過 ChatGPT 產生具有圖表說明的網頁。
參考這個網站，使用網頁並用兩個圓餅圖，分別呈現「居留縣市別」中的「移工」和「外籍配偶」當中各都市人數分布的比例，網站：https://www.moi.gov.tw/News_Content.aspx?n=2905&s=327319
如果要轉換圖表，只需要輸入「請用同一個長條圖的方式呈現數據」就能將其轉換成長條圖。
ChatGPT 畫布範例：短篇小說共同編輯
除了進行編輯和設計網頁，也可以運用 ChatGPT 畫布的「互動」功能，和 ChatGPT「雙向協作」文章，不需要一直透過提示詞一來一往的對話，下方例子會先透過提示詞，請 ChatGPT 邊排出一個短篇笑話的大綱。
規劃一個短篇笑話的大綱，笑話主題是：踩到大便
當 ChatGPT 在畫布中產生內容之後，除了可以透過左側的聊天欄位和 ChatGPT 互動，也可以自行手動修改右側畫布裡的內容，下方範例在畫布中，手動修改了一些內容，將「失去導航的 GPS」改成「失去網路的 GPT」。
自行修改內容之後，可以再次透過「聊天」的方式，請 ChatGPT 根據修改後的內容，重新調整指定段落的文字，如此一來一往，就如同和另外一個人共同編輯文字，實現雙向協作的功能。
我已經修改了開場，請幫我修改高潮笑點的內容
小結
畫布是 ChatGPT 專為創作與技術應用打造的互動式工具，結合 AI 的智慧與使用者自己的創意，不但可以提升工作效率，更能促進靈感的實現，不論是寫作者、設計師或開發者，ChatGPT 的畫布都能成為創作過程中的得力助手，讓想法具體化、流程更有條理。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～