你想用聊天做設計?Anthropic 於 2026 年 4 月 17 日正式推出了 Claude Design,這是一款針對視覺協作與設計開發的全新 AI 工具,其技術核心使用最新模型:Claude Opus 4.7。讓用戶能透過對話直接生成可互動的 App / 網站 prototype、簡報(slides)、著陸頁(Landing page)、行銷素材等。本質上是在實現「從 idea → 視覺成品」的自動化。
Claude Design 實現由「設計 → 開發」一條龍,設計完成後可以:匯出 PPTX / PDF / HTML 或是交給 Claude Code 變成實際產品,把「設計稿 → 實作」的距離縮到極短。也提多人協作,可以分享連結共同編輯,團隊可以一起跟 AI 對話,能夠同步修改設計。Claude Design 的本質是:
- 把「設計工具」變成「AI助理」
- 把「操作介面」變成「對話」
- 把「設計流程」壓縮成幾分鐘
它影響的不只是設計,而是整個產品開發流程。 Claude Design 產品的定位是「互補(Complement)」而非「取代(Replace)」。
目前只有具備 Claude Pro 訂閱的使用者才能試用。

實作練習(以簡報為例)
在 Claude 的 側邊欄位選取:Design。

會先看到一段介紹,右下角可以點選:Skip intro 來跳過。

接著來到 Claude Design 的使用介面,並有四個標籤:Prototype、Slide deck、From template、Other,製作 App 的原型、投影片簡報、由模板設計等各種想要的設計工作都有包含。

以製作簡報為例:
1.先選取:Slide deck。
2.輸入新投影片的專案名稱。
3.點選是否需要使用演講者備註。
4.點選:+ Create。

你可以從實際情境出發,基於真實情境的設計效果更佳。可以指定:設計系統、新增螢幕截圖、附加程式碼庫、拖入 Figma 文件來設計。
用來製作簡報、演講稿也很棒!在此使用提示詞:
設計一份資訊圖表(Infographic)視覺化設計技巧的12頁簡報
點選:Send,就會開始製作。

接下來,會引導你依據資訊圖表設計簡報的脈絡,快速回應幾個關鍵問題。這種方式對設計者而言相當直覺且易於上手,不僅能提升整理思緒的效率,也有助於在短時間內聚焦重點。同時,在回答的過程中,你可以逐步釐清本次製作的核心目的、目標受眾,以及整體的設計理念,讓最終呈現更具一致性與說服力。


點選右下角的:Continue。接下來,就看 Claude Design 表演囉!



整個設計的詳細資訊:

在此,可以線上播放並且更換視覺色彩,下方可以看到連備忘稿也都幫你寫好了。


這個線上簡報可以繼續編輯,可以線上播放。

點選:Share,可以設定是否分享給他人共編。

點選:Export,可以匯出多種格式:
- Download project as zip
- Export as PDF
- Export as PPTX...
- Send to Canva...
- Export as standalone HTML
- Handoff to Claude Code...

例如,Download project as zip,會獲得一個 ZIP 檔,內容是網頁檔。

例如,Export as PDF,Claude Design 是以列印成 PDF 檔的方式來處理。

例如,Export as PPTX...,你可以設定此簡報將用於何處?
- 可編輯 - 自訂字體
適用於已安裝品牌字體的電腦。在確保最佳保真度的同時,提供完全可編輯性。 - 可編輯 - 通用字體(推薦)
使用通用的網頁安全字體,方便廣泛分享。 - 可編輯 - Google 投影片字體
使用 Google 字體,確保上傳到 Google 投影片時完全相容。 - 基於螢幕截圖的 PPTX 格式
以影像形式呈現像素級精細的幻燈片。不可編輯,但與您看到的完全一致。
然後,點選:Generate PPTX。立即會轉換並下載這個 PowerPoint 檔。


例如,Send to Canva...,應該是要傳送到 Canva 繼續編輯,但實測多次時,只能收錯誤訊息,而看不到 Canva 的內容。日後如果連線成功再補畫面。

例如,Export as standalone HTML,這個動作會讓你獲得一個單頁式網頁,但是要由左側的對話欄位中取得。

這個是單機檔案(HTML),直接可以由瀏覽器中開啟。

例如,Handoff to Claude Code...,還可以將這些內容丟給 Clauded Code 繼續編輯。

來自官方的說明裡有提到:
好的提示包括目標(您正在建立的內容)、版面配置(事物應如何排列)、內容(要顯示的資訊)和受眾(誰將使用它)。如果 Claude 需要更多資訊,它也會提出澄清問題。
以下是一些效果良好的提示範例:
- 建立一個顯示月度收入的儀表板,並提供地區和產品線的篩選器。
- 設計一個行動應用程式入門流程,包含 4 個螢幕,引導使用者了解我們的核心功能。為我們的新 API 產品建立登陸頁面,包含英雄區段、程式碼範例和定價。
- 建立一個表單來收集客戶回饋,並根據類別提供條件式問題。
- 為我們的營運團隊設計一個內部工具,以審查和批准內容提交。
可以反覆改進你的設計,第一代是一個起點。真正的價值來自於反覆改進。
聊天最適合影響整體設計的廣泛變更:
- 「讓色彩配置更深色和更簡約。」
- 「重新排列儀表板,使指標位於頂列,圖表位於下方。」
- 「在右側新增設定面板。」
- 「向我展示此頁面的 2–3 個替代版面配置。」
也可以要求 Claude 解釋其設計決策、建議改進或檢視設計的無障礙性。
使用內嵌註解
內嵌註解讓您可以直接點擊畫布上的特定部分並要求進行有針對性的變更。這比在聊天中描述位置更快。好的內嵌註解範例:
- 「讓此按鈕的內邊距更大。」
- 「將此變更為下拉式清單而不是單選按鈕。」
- 「在此處使用主要品牌顏色。」
- 「讓此區段可摺疊。」
如何獲得最佳結果的提示
- 從簡單開始,然後逐層增加複雜性。從核心版面配置和內容開始,然後新增互動、邊界情況和潤飾。Claude 對增量請求反應良好。
- 在您的回饋中要具體。「這看起來不對」很難採取行動。「將表單欄位之間的間距緊縮至 8px」給 Claude 提供了它所需的確切內容。
- 參考您的設計系統。如果您知道您品牌系統中存在某個元件,請按名稱提及它:「使用主要按鈕元件」或「套用卡片版面配置模式。」
- 盡早考慮回應式設計。提及您的設計是否需要在行動、平板電腦和桌面上運作,或僅在其中之一上運作。
- 要求變化。如果您不確定某個方向,請要求 Claude 向您展示 2–3 個選項。比較替代方案比猜測快得多。
- 要求 Claude 提供回饋。Claude 可以檢視您的設計是否具有無障礙性、對比率、資訊層級和一般可用性。將其視為設計協作者,而不僅僅是產生器。
















