Agentic Canvas：與 Claude、ChatGPT 協作的 AI 設計畫布

Reading Time: 2 minutes

AI 代理可以在幾分鐘內建立網站。接著你可能想移動按鈕、比較兩種版面、收集幾張截圖，或自己調整間距。結果又得在新提示詞裡解釋一項視覺變更。有時候直接拖曳比寫提示詞更容易。

因此我們打造了 AgentGrid.io 的 Agentic Canvas。這是一個免費的 AI 設計畫布，你可以與支援 MCP 的代理在同一個真實 HTML 與 CSS 頁面上協作。匯入 HTML、從設計或圖片開始，或請代理建立頁面，接著選取、移動、調整大小並編輯它建立的內容。你可以直接開啟 Agentic Canvas，無須建立帳號。

一個簡單的用法是：匯入 HTML 頁面或圖片，以視覺化方式排列、編輯，請 Claude 或 ChatGPT 改進動畫或互動，然後匯出 HTML。你可以隨時手動調整，不必每次都從頭撰寫提示詞。

開啟 Agentic Canvas →

什麼是 Agentic Canvas？

這是一個讓你與 AI 代理共同設計真實網頁的視覺工作區。畫布有熟悉的畫框、圖層、檢查器與版面控制項，但畫框背後是真實程式碼，而非靜態圖片。透過 MCP 連線的代理能讀取目前的頁面並修改。你可以檢視結果、手動調整，再讓代理接著修改最新設計。

想像一個地方：看得出哪裡需要修改的人，以及能寫程式碼的代理，可以一起處理同一件作品。

Agentic Canvas 視覺設計介面，顯示 Kestrel Labs 即時網頁與檢查器 — 視覺化設計：利用圖層和版面控制項編輯即時網頁。

為什麼我們需要一個給 AI 代理使用的畫布

1. 視覺協作，無需額外提示循環

當你用 Claude 或 ChatGPT 製作登陸頁、產品畫面或行銷素材時，初稿只是起點。你可能想試三種主視覺區塊、縮緊網格，或換一個行動呼籲。當你已經清楚知道要改哪裡，還得在聊天中描述每個視覺決策，實在太慢。

發表插圖：AI 代理透過 MCP 連接至 AgentGrid.io — 透過 MCP 將你慣用的代理連上畫布。

在 Agentic Canvas 中，你可以直接修改。代理接著讀取的是頁面目前的狀態，而不是你對舊版本的口頭描述。代理處理繁重的工作，最後由你親手做決定，再讓代理接續。

代理對話與可編輯 Agentic Canvas 頁面的雙畫面示意圖 — 一起完成作品：代理先建立，你動手完善，再讓代理繼續。

2. 一個收集視覺脈絡的地方

有些想法從靈感板開始，而不是規格文件。收集截圖、參考頁面、圖片與文字，把它們排在畫布上，並加入能說明你想做什麼的素材。AI 代理可以根據眼前的設計工作，不必從冗長的聊天紀錄猜測。

這對品牌設計很重要。一個版面參考、一段文案和一張截圖，可能比另一段描述理想氛圍的文字更快傳達意圖。

3. 為什麼畫布使用真實 HTML 與 CSS

為什麼要用 HTML 和 CSS 打造設計工具？因為程式代理已經擅長讀寫程式碼。對我來說，要代理透過另一種設計格式工作，就像要求以英語為母語的人用英語思考，卻用中文讀寫。多一道轉換可能遺漏細節，也會耗費時間和 token。我先前就提出過：設計就是程式碼。在這裡，這個想法成了字面上的現實。

在 Agentic Canvas 中，畫框就是真實網頁；自動版面對應 CSS flexbox，網格則是 CSS grid。你可以直接編輯按鈕，請代理加入動畫或互動，準備好後再匯出程式碼。即時網頁可以在畫布上執行腳本、顯示滑鼠懸停狀態與響應式效果。這不是日後還得重建的圖片。

網頁與 HTML 程式碼面板示意圖，展示以程式碼為基礎的畫布 — 視覺設計與 HTML 都在同一套工作流程中。

這和傳統的設計畫布有什麼不同？

傳統設計畫布適合構思視覺概念，但成果通常還要經過獨立的實作步驟，才能成為可運作的網頁。Agentic Canvas 是一種 HTML 設計工具：畫框就是真實頁面，因此代理能讀取並修改你正在視覺化編輯的同一份 HTML 與 CSS。這不表示它具備成熟設計工具套件的每一項功能。重點是讓視覺決策與可運作的程式碼並行，無論你是在改進 AI 生成的網站，還是建立新網站。

如何在 Agentic Canvas 上與 Claude 或 ChatGPT 一起設計網站

畫布匯入示意圖，顯示 HTML、Figma、PNG、SVG 與 PDF 檔案卡片 — 從現有的頁面、設計、圖片或文件開始。

從現有素材開始。 開啟畫布並貼上 HTML，從 Figma 複製貼上，加入圖片或設計，或從代理產生的頁面開始。匯入指南列出了支援的起點。
連接你的代理。 在畫布中選擇「AI 代理」，再選擇「新增代理」。按照連接指南，連接 Claude、ChatGPT 或其他支援 MCP 的用戶端。代理工作時，請保持畫布分頁開啟。
一起完成第一版。 請代理製作版面或互動，然後在畫布上檢視即時成果。
親手調整設計。 移動元素、變更顏色、調整畫框大小並手動微調版面，然後請代理從最新版本繼續。
準備好後匯出或分享。 不必發佈，也能匯出 HTML 或其他支援格式。如果想取得託管連結，可以透過 AgentGrid.io 分享或發佈。這個雲端步驟可自行選擇，但需要帳號。

畫布匯出選項與 AgentGrid.io 分享對話框示意圖 — 匯出檔案，或選擇在 AgentGrid.io 託管並分享。

哪些是本地的，哪些則需要帳號？

你可以免費在瀏覽器中開始設計，無須註冊。檔案儲存在該裝置的該瀏覽器中，不會自動跨裝置備份。想在瀏覽器之外保存作品，請匯出副本。連接外部代理時，代理可讀取畫布，而且需要網路連線；「本機」不代表「離線」。透過 AgentGrid.io 分享或發佈是可選步驟，需要帳號。

筆記型電腦上的本機畫布檔案示意圖，附免費標籤 — 本地檔案會保留在這個裝置的瀏覽器中，直到你選擇分享為止。匯出你想保留的工作備份。

我相信下一代設計工具不該迫使我們在視覺掌控權與能動手建構的代理之間做選擇。代理應該能使用作品原本的語言，而我們仍能直接抓取畫面上的元素並加以修改。

開啟 Agentic Canvas，試著和你的代理一起設計。 若想快速了解流程，觀看發表展示並探索功能。

關於 Agentic Canvas 的常見問題

Agentic Canvas 免費嗎？需要帳號嗎？

是的，設計畫布免費。你可以在瀏覽器開啟它，無須帳號就能開始設計。只有選擇透過 AgentGrid.io 分享或發佈時，才需要 AgentGrid.io 帳號。

哪些 AI 代理能與 Agentic Canvas 協作？

Claude、ChatGPT、Claude Code、Codex、Cursor 等支援 MCP 的代理，都可以讀取並修改已開啟的畫布。選擇「AI 代理」，再選擇「新增代理」，依照步驟連接。代理工作時，請保持畫布分頁開啟。

我可以直接在畫布上編輯 AI 生成的網站嗎？

可以。匯入 HTML 頁面或網站資料夾，然後在畫布上移動元素、調整大小並加以完善。畫框是真實的 HTML 與 CSS，因此代理可以接續你的視覺修改，而不是重建靜態模型。

可以匯入現有 HTML 頁面或網站嗎？

可以。將 HTML 貼入畫布，或把網站資料夾及其 ZIP 檔拖曳到 Home。你也可以從 Figma 選取範圍或圖片開始。

我的畫布檔案儲存在哪裡？有備份嗎？

檔案儲存在你使用的瀏覽器和裝置上，不會自動備份到雲端。換一個瀏覽器或裝置就看不到它們。請匯出重要作品的副本；若需要雲端備份與版本紀錄，也可以選擇透過 AgentGrid.io 分享。

關閉分頁後，我的 AI 代理還能在畫布上工作嗎？

不行。連接的代理讀取或修改設計時，畫布分頁必須保持開啟。之後你仍可在同一個瀏覽器中開啟本機儲存的檔案。

連接代理後，它也能存取我的 AgentGrid.io 工作空間嗎？

不能。連接畫布只讓代理處理已開啟的畫布檔案。若要讓代理存取 AgentGrid.io 產物，必須另外設定。

我可以不發佈就匯出嗎？

可以。不必分享或發佈，就能匯出 HTML、PNG、SVG 或 PDF。你也可以將 HTML 交給程式代理，在其他地方繼續開發。

分享和發佈是一回事嗎？

不是。透過 AgentGrid.io 分享，可以讓你指定的人員與代理存取；發佈則會將設計放上公開網址。兩者都不是必要步驟，而且都需要 AgentGrid.io 帳號。

Agentic Canvas：與 AI 代理一起設計2 min read

Reading Time: 2 minutes認識 Agentic Canvas：免費的 AI 設計畫布，讓你與 Claude、ChatGPT 等支援 MCP 的代理在真實 HTML 與 CSS 網頁上協作。可視覺化編輯、匯出程式碼或分享。

什麼是 Agentic Canvas？