Claude Design 完整介紹：現在怎麼用、我推薦的上手方式，跟 Figma、Canva 怎麼分工（2026 更新）

TL;DR：Claude Design 是 Anthropic 的 AI 設計工具，用對話做出原型、一頁式文件、Landing Page 和簡報初稿。2026 年 9 月起它併進 Claude 本體，任何對話、Artifacts 分頁（中文介面叫「成品」）和 Claude Code 都能用，Free 方案也能用，用量和 Claude 共用。原本的 claude.ai/design 獨立版會在 2026-12-14 關閉。它最省時間的是「從想法到第一版」；要印刷、品牌定稿或像素級 UI，還是回到 Figma、Illustrator。用 AI 做設計不是只有生圖一種選擇，我現在最推薦的上手方式是：打開 Claude Code，請它開啟 Claude Design，模型選 Claude Opus 5.5。我把它當效率工具，不是替代品。

這篇原本寫於 2026 年 4 月 Claude Design 剛推出的時候。半年過去，它的入口、方案和匯出方式都變了。這次重新整理，以「現在怎麼用」為主，需要對照的地方才寫「4 月初版時」。功能、方案和價格都在 2026-10-14 對照 Claude 說明中心和官方頁面查過，來源放在文末。

Claude Design 是什麼

一句話：你用文字描述想要的東西，Claude 在對話旁邊的畫布上做出一份能直接改的設計。

它跟 AI 生圖不一樣。生圖給你一張圖，Claude Design 給你的是有結構的設計：可以點的 App 原型、排好版的一頁式提案、Landing Page，或一份簡報初稿。裡面的文字、區塊、元件都還能再改。

Anthropic 在 2026-04-17 以 Anthropic Labs 產品發布它。官方發布文寫，初版用的是 Claude Opus 4.7。現在的說明頁沒有寫固定用哪個模型，所以這篇也不寫死。

4 月初版和現在差在哪

用過獨立版的人要注意：claude.ai/design 會在 2026-12-14 關閉。設計系統可以搬過來，但獨立版裡的對話和留言不會搬，關閉後會刪除，公開連結也會失效。要留的東西請在那之前存好，做法放在下面的搬家段落。

現在從哪裡開始用

現在 Claude Design 是 Claude 裡的一種「範本」。Anthropic 把 Claude 做出來、可以分享的東西叫 artifact，中文介面叫「成品」。Design 是其中一種，另外還有 Slides（簡報）和 Docs（文件）。

• 在對話裡：直接說「把這份提案做成一頁式」，Claude 會在對話旁邊做出來。也可以在訊息框選「輸出」，再選「設計」。
• 在 Artifacts 分頁：側邊欄進去，選 Design 範本開新的。
• 在 Claude Code：直接請它做設計，或輸入 /design 加上需求。這是我現在最推薦的方式，步驟在下一段。
• 手機 App：iOS、Android 也能請它做、看和編輯，但分享設定要回電腦版改。

在 Claude 網頁、桌面版和手機 App 裡，Free、Pro、Max、Team 預設就是開的。Enterprise 方案從 2026-10-15 起預設開啟，之前要由組織擁有者在「組織設定 > 成品」手動打開。在 Claude Code 裡用的話，Claude Code 文件寫要 Pro、Max、Team 或 Enterprise，而且要用 claude.ai 帳號登入。

怎麼開始用：我現在推薦的做法

用 AI 做設計，不是只有生圖一種選擇。我現在最推薦大家這樣開始：

1. 打開 Claude Code。桌面版或終端機都可以，要用 claude.ai 帳號登入，方案要 Pro 以上。官方文件寫 /design 需要 Claude Code v2.1.265 以上，版本太舊先更新。
2. 請它開啟 Claude Design。直接跟它說「幫我開啟 Claude Design，做一張……」，或輸入 /design 再接你的需求。用 Claude Code 桌面版，畫布會直接開在對話旁邊，我的畫面就是這樣；在終端機的話，Claude 會給你畫布的連結，用電腦瀏覽器打開。
3. 模型選 Claude Opus 5.5，努力程度我用「高」。用 /model 選模型，/effort 調努力程度。官方文件寫，Opus 5.5 在 Claude Code 的預設是中等（medium），我自己會調到高。
4. 描述你的設計需求。風格、排版、文案都講清楚。官方建議一段需求要包含目標、版面、內容、受眾；資訊不夠時，Claude 會先反問。
5. 提供你要放的素材。LOGO、圖片這些，直接給它。
6. 產出後用對話調整，文字直接編輯。設計做好會出現在畫布上。要大改就用對話講，要改字直接點文字改。能設定的細節不少，版面、文字樣式、顏色、圓角、陰影都能調。

我覺得這應該是最好上手、效果也好的方式。因為它不是生圖模型那種產出，做出來的是一份文字、圖層都能改的設計。尤其 Claude Opus 5.5 出來到現在，我多次使用下來，設計理解上真的比過去好很多。

附圖是我做的一個測試案例，沒有這堂課，大家直接照上面的步驟去試試就很夠了。

做完要交出去，用畫布右上角的匯出。官方文件寫，從 Claude Code 用 /design 做的設計，每個畫板都能匯出成 PNG 或 PDF；完整的匯出選項在下面的匯出與交接。

沒有用 Claude Code 也可以

在 Claude 網頁、桌面版或手機 App，對話裡直接說要做設計，或在訊息框選「輸出」再選「設計」，也可以從 Artifacts 分頁選 Design 範本。接下來一樣是描述需求、給素材、用對話和直接編輯來改。Free 方案也能這樣用。

有自己的品牌規範的話，可以先建好設計系統，之後做的東西都會照著套，做法在下面的設計系統段落。

功能逐項看：哪些還在、哪些改了

1. 輸入：文字、圖片、文件、程式碼

除了打字，你可以丟這些東西給它：

• 截圖、圖片、既有設計、競品畫面、線框圖
• 既有的簡報或文件，請它照那個風格做
• 程式碼 repo 或設計檔，讓它看懂你現有的元件和樣式

4 月發布時，官方還介紹過 Web Capture，可以直接抓網站上的元素，我那時覺得很實用。現在的說明頁沒有再提到這個功能，我沒辦法確認它還在。想讓新頁面跟官網風格一致，現在最穩的做法是截官網畫面上傳，或直接連結網站的程式碼 repo。

2. 設計系統：一次設好，之後每份都套用

我覺得這是 Claude Design 很大的價值。我在週報 #045 寫過：它規劃了一套完整的設計系統，產出時有規範可以遵照，就比較不會做出格式不一致的簡報或圖片。

現在有兩種建法：

• 在對話裡建：給它上傳的檔案、Figma 檔、簡報、Logo、字型，請它整理成設計系統。適合品牌類的規範。
• 在 Claude Code 用 /design-sync：如果你的元件已經寫成 React，它會直接讀 token 和元件。適合產品的設計系統。

要注意兩件事。第一，設計系統目前是 beta，只開放 Pro、Max、Team、Enterprise，Free 方案不能用。第二，官方也寫了，匯入的品質取決於來源；程式碼很亂、檔案不完整，產出也會跟著亂，第一次建好後要自己檢查一輪。

3. 改稿：對話、留言、直接編輯

生成第一版只是起點。改稿有三種方式，看你要改的範圍挑：

• 對話：適合影響整體的修改，例如「整體改深色、更簡約」「給我 2 到 3 個不同版型」。也可以請它解釋設計決定，或幫你檢查無障礙。
• 留言：直接點畫布上的某個元素留言，例如「這顆按鈕內距加大」。比在對話裡描述位置快。
• 直接編輯：在畫布上拖拉、縮放、對齊，直接改文字，或打開屬性面板調顏色和字型。

4 月我覺得蠻聰明的是即時滑桿：Claude 會幫你做出調整間距、顏色的滑桿，拉一拉就看到整體變化，有點像一個小型的 Design Token 控制面板。官方產品頁現在還寫著這個功能。

4. 匯出與交接

做完之後，右上角「匯出」可以選：

• 下載：ZIP、PDF、PPTX、獨立 HTML
• Google 簡報：直接匯出成可編輯的 Google 簡報
• 送到其他工具：Canva、Gamma、Miro、Lovable、Vercel、Wix 等 15 個
• 交給開發：交給 Claude Code、本機的寫程式 Agent，或 Claude Code 網頁版

我覺得最有想像空間的還是「交給 Claude Code」。用 Claude Design 做原型，確認方向後交給 Claude Code，它會從你做好的設計繼續，不用從一張截圖重來。從設計到開發這一段，Anthropic 算是接起來了。

分享的部分，每個設計都有自己的連結，預設只有你看得到。分享時可以設定對方能看、能留言，或能編輯。

5. 進階互動

4 月發布時，官方展示過可以做有語音、影片、Shader、3D 和內建 AI 的原型，讓原型更接近真實產品。現在的說明頁和產品頁沒有再列這些項目，我沒有實測，這裡就不保證每一項都能做。需要這類效果，我會建議做完原型後交給 Claude Code 補。

適合做什麼、不適合做什麼

先講結論：拿來討論方向的東西很適合，要直接交付的東西不適合。

跟 Figma、Canva、Gamma 怎麼分工

我的看法是：Claude Design 解決的是「從零到一」那段路。它不負責把東西做完，而是把第一版做出來，再交給下一個工具。

Canva 和 Gamma 的方案與價格，我在 2026 AI 簡報工具怎麼選整理過，這裡就不重複。

發布文裡，Canva 共同創辦人也說，會讓 Claude Design 的草稿送進 Canva 後變成可編輯、可協作的設計。兩邊比較像接力，不是互相取代。

身為設計師，我怎麼看 Claude Design

坦白說，第一眼看到這個功能，心裡是有點複雜的。這不是第一次有人說「AI 要取代設計師了」。但用了一段時間後，我覺得事情沒那麼極端。

Claude Design 產出的東西，品質大概是「中上」。拿來做原型、Pitch Deck、快速驗證，品質完全夠用。但如果你需要精緻的品牌設計、像素級的 UI 調整，或要建一套完整的設計系統，它目前還做不到。

我自己覺得比較正確的心態是：把它當成效率工具，而不是替代品。

過去最簡單的設計流程也要經過：溝通需求、出 Wireframe、確認方向、設計稿、修改。有了 Claude Design，前面「溝通需求到出 Wireframe」這段可以快很多。客戶甚至可以自己先做一版給我看，我就能更精準理解他要什麼。

我在週報 #045 也寫過：什麼都直接用「取代」來說，有點粗暴了。設計師的工作不只是把圖生出來。同一個工具，讓設計師來操作，產出的品質通常還是比較好，細節上的專業程度會有差。

官方發布文裡，Brilliant 的設計師說，他們最複雜的頁面在其他工具要 20 多次 Prompt，在 Claude Design 只要 2 次；Datadog 的 PM 說，以前要來回一週的流程，現在一次對話就能做出原型。這些數字說的是「從想法到初版」的速度，不是「從想法到最終交付」。最後的品質，還是要專業設計師把關。

比較可惜的地方：自由度不如 Claude 本體

2026 年 4 月我實際用獨立版下來，有一個明顯的感受：它的自由度比 Claude 本體低不少。

在 Claude 裡做設計相關的東西，我可以很輕鬆地：

• 指定開源中文字型，例如 Noto Sans TC、思源黑體、jf open 粉圓
• 串接 Unsplash、Pexels 這類圖庫 API 抓情境照
• 接其他第三方 API 擴充內容來源
• 自己寫客製邏輯產生特定樣式

這些在 Claude Design 的環境裡相對受限。它有自己的框架和資源庫，好處是快、視覺一致，壞處是想偏離這個框架做客製化時比較卡。

現在我推薦 Claude Design，是因為它最方便。但我自己更多是用 Figma，比較習慣，會透過 MCP 把 AI 串進 Figma，而且要用自己買的字體也比較方便。MCP 是讓 AI 連接其他工具的標準做法，Figma 有官方的 Figma MCP server。所以如果你很在意字體，或習慣在 Figma 裡收尾，可以考慮這條路。

我現在的搭配方式

既然自由度有限，最划算的用法就是：在 Claude Design 完成初稿，再交給 Claude Code 做後續編輯。

• Claude Design 負責：把想法快速變成有結構的視覺初稿、套用設計系統、做出能用的原型。
• Claude Code 接手：客製字型、串外部 API、調整程式邏輯、部署上線。

這樣就能同時拿到 Claude Design 的速度，和 Claude Code 的彈性。

工具我不會綁死一個，是看任務挑。做簡報我會用 Claude Design 和 Codex；做圖卡和設計，現階段我用 Claude Opus 5.5，在 Claude Design 或 Figma 裡做都有。這是現在的選擇，下一階段誰更強還不一定。付費的話，AI 工具我只月繳、不年繳。

我之前在 Generative AI 年會分享過 Claude Design 搭配 GPT Image 2 的應用經驗（週報 #048）。

6 個使用技巧

這些是我實際用過之後整理的，有些是操作建議，有些是設計師背景才會特別在意的細節。

1. 需求越具體，結果越好

不要只說「幫我做一個 App 介面」，要給它脈絡：「幫我設計一個任務管理 App 的首頁，目標用戶是自由工作者，風格極簡，主色用深綠色，要有今日待辦清單跟完成率統計。」

這段剛好涵蓋官方建議的四件事：目標、版面、內容、受眾。條件越多，它越能收斂方向，你來回改的次數會少很多。

2. 用截圖給它看參考，比用文字形容有效

已經有網站或喜歡的參考設計，直接截圖上傳，比你用文字描述「我想要像 XXX 那樣的風格」有效得多。4 月我會用 Web Capture 做這件事，現在說明頁沒有再提這個功能，用截圖或連結程式碼 repo 最穩。

3. 初稿完成後交給 Claude Code 做進階編輯

做完原型後，用匯出選單裡的「交給 Claude Code」，就能進一步客製：串 API、改字型、加動態效果、部署上線。從 Claude Code 這邊也能用 /design 把設計匯入你的程式碼庫。

4. 中文不要用斜體，記得手動調整

這是設計師才會特別在意的地方：AI 做簡報或設計時，很常把中文設成斜體。

中文字型沒有真正的斜體字形設計，強制傾斜只是把字形變形，看起來糊糊的，也會破壞字的結構。我在週報 #045 也提醒過非設計師朋友，中文不要亂用斜體跟加粗。建議產出後手動改回正體，或直接在需求裡加一句：「中文內容一律使用正體，不要套用斜體。」

5. 直接要求文字對比符合 WCAG

AI 做出來的設計常有一個問題：底色跟文字顏色太接近，看起來還可以，實際上對比不夠，閱讀很吃力。

解法是用網頁無障礙規範 WCAG 當基準。WCAG 是 W3C 訂的國際規範，等級分 A、AA、AAA。文字對比的要求是：AA 一般文字至少 4.5:1，AAA 至少 7:1。可以直接在需求裡寫：

文字對比至少符合 WCAG AA（一般文字 4.5:1），能做到 AAA（7:1）更好。做完後幫我列出每段文字的對比值。

W3C 自己也說，不建議把整個網站都硬性要求 AAA，因為有些內容做不到。所以先守住 AA，主要內文再盡量拉高。官方說明頁也寫，你可以請 Claude 幫你檢查對比和無障礙。這個習慣養成之後，用任何工具做設計都會更嚴謹。

6. 請 AI 從 GitHub 安裝開源字型

預設字型不夠用，可以直接請 AI 去 GitHub 抓開源字型：

幫我從 GitHub 抓 justfont/open-huninn-font 安裝進來，把標題都改用這個字型。

幾個好用的繁中開源字型：

• jf open 粉圓（justfont/open-huninn-font）：SIL OFL 1.1 授權，可商用，但不能單獨拿字型來賣
• Noto Sans CJK（notofonts/noto-cjk）：Google 的中日韓字型
• 思源黑體（adobe-fonts/source-han-sans）：Adobe 的開源黑體

這招搭配 Claude Code 接手更有感，可以直接把字型下載、整合進專案。我在週報 #044 也寫過，做圖卡時明確指定字型和字重，畫面會好看很多。

用過獨立版的人：12/14 前要做的事

如果你 4 月以後在 claude.ai/design 做過東西，先處理這幾件：

1. 搬設計系統。在 Claude 打開 Artifacts 分頁，點橫幅上的「Migrate team design systems」。一次會搬組織裡所有設計系統，不用每個人各搬一次。
2. 看搬家結果。搬不過去的會列出原因，例如檔案太大。可以回獨立版修好再搬一次。
3. 存好對話和留言。獨立版裡跟 Claude 的對話、專案上的留言都不會搬，關閉後會刪除。
4. 換掉公開連結。獨立版專案的公開連結，關閉後就打不開了。

專案本身目前還留在獨立版，Artifacts 分頁會列出最多 60 個，點開還是在獨立版打開。官方說專案怎麼搬到 Claude，之後會再公布。

限制與注意

• 用量和 Claude 共用。Claude Design 沒有自己的額度，跟聊天、Claude Code 用同一池。專案越複雜、程式碼越大、改越多次，用得越快。用完要等額度重置，除非你有開額外用量。
• Free 方案不能建設計系統。設計系統目前是 beta，只開放 Pro 以上。
• 沒有版本紀錄。想換方向又不想弄丟現在的版本，先跟它說「把目前的版本存起來，換一個完全不同的做法」。
• 留言偶爾會沒被讀到。遇到時把意見直接貼進對話。
• 多人同時編輯還很基本。兩個人以上同時改，可能不穩定。
• 程式碼庫太大會卡。官方建議很大的 repo 從 Claude Code 連結，用 /design-sync 同步。
• 設計精度比不上 Figma。不適合直接當最終交付的設計稿。
• 中文常被套上斜體。產出後檢查，或在需求裡寫清楚。
• 變動很快。這篇半年內入口、方案、匯出都改過一輪，用之前回官方說明頁看一次。

相關資源

本文功能、方案與價格於 2026-10-14 對照 Claude 說明中心與官方頁面查核，之後可能變動。

小結

1. Claude Design 現在是 Claude 裡的 Design 範本，對話、Artifacts 分頁、Claude Code、手機都能用，Free 也能用，用量共用。
2. 它最擅長的是從想法到第一版：原型、一頁式、Landing Page、簡報初稿。
3. 我最推薦的上手方式：打開 Claude Code，輸入 /design 或請它開啟 Claude Design，模型選 Claude Opus 5.5、努力程度高，描述風格、排版、文案，再給 LOGO 和圖片。
4. 改稿看範圍：大改用對話，改元件用留言，調視覺直接動手。
5. 做完用匯出交出去：PDF、PPTX、Google 簡報、HTML，或送到 Canva、Gamma，交給 Claude Code 開發。
6. 要交付的東西回到 Figma、Illustrator；要客製的交給 Claude Code。
7. 用過獨立版的人，12/14 前把設計系統搬過來，對話和留言自己存。

它不會取代設計師，但會讓「先有一版能討論」這件事快很多。我會建議你自己玩一次，用一個真的要做的小東西試，比看任何介紹都有感。

---

常見問題 FAQ

Claude Design 是免費的嗎？

Free 方案在 Claude 網頁和 App 就能用，但用量和 Claude 其他功能共用，額度用完要等重置。設計系統，以及在 Claude Code 用 /design，目前要 Pro、Max、Team 或 Enterprise。付費的話，Pro 月繳每月 US$20。Enterprise 方案從 2026-10-15 起預設開啟。

在 Claude Code 怎麼開啟 Claude Design？

輸入 /design 再加上需求，或直接跟它說「幫我開啟 Claude Design，做一張……」。需要 Claude Code v2.1.265 以上、Pro 以上方案，並用 claude.ai 帳號登入。模型我會選 Claude Opus 5.5，努力程度調到高。

用 Claude Design 跟用 AI 生圖做設計差在哪？

生圖模型給你一張圖，字和版面很難再改。Claude Design 做出來的是一份設計，文字可以直接點來改，版面、顏色、圓角、陰影也能在右側面板調，還能匯出 PDF、PPTX 或交給 Claude Code。這也是我覺得它比較好上手、效果也好的原因。

claude.ai/design 還能用嗎？

可以用到 2026-12-14，之後會導到 Claude。設計系統可以從 Artifacts 分頁搬過來；獨立版裡的對話和留言不會搬，關閉後會刪除，公開連結也會失效。

Claude Design 會取代 Figma 嗎？

不會。Claude Design 解決的是從想法到初版的速度，適合做原型和探索方向。像素級 UI、元件庫和設計系統的長期維護，還是 Figma 比較適合。兩個是接力，不是取代。

Claude Design 跟 Canva 有什麼不同？

Canva 強在模板、品牌套件和延伸成各種尺寸的素材；Claude Design 強在用對話把想法變成有結構的設計，還能交給 Claude Code 開發。做完可以直接用「送到 Canva」接著改。

做簡報要用 Design 還是 Slides？

要做一整份簡報，可以直接用 Claude 的 Slides 範本，它能逐頁編輯、直接在 Claude 裡簡報，匯出 PowerPoint、PDF 或 Google 簡報。一頁式提案、原型、Landing Page 用 Design 範本，做完一樣能匯出 PPTX。

設計師需要擔心被取代嗎？

短期內不用太擔心。它的產出適合快速驗證和初版，精緻的品牌設計、完整的設計系統、使用者體驗的深度思考，還有把 Claude Design 用好，都需要專業設計師。我會建議把它當成加速流程的效率工具。

Claude Design 支援中文嗎？

可以用中文描述需求，也能做中文的設計。要注意兩件事：中文常被套上斜體，要手動改回來；想用特定的中文字型，交給 Claude Code 接手，或像我一樣用 Figma 串 MCP 收尾，會比較好處理。正式用之前，文字、字型和版面都要自己校對一次。

---

關於作者｜Kevin Kuo

Kevin Kuo / 郭政佑是 凱文設計 Kevin Design 與 創作邦 CreatorHome 的內容創作者，長期整理 AI 工具、設計方法、創作者工作流與個人品牌經營。

更多公開介紹可參考 Kevin on CreatorHome、Kevin Design AI Guide。

---

延伸閱讀：2026 AI 簡報工具怎麼選｜週報 #044：想用 Claude 做出好看的圖卡？｜Figma Config 2026 重點功能｜2026 AI 設計素材工具｜我現在在用的工具｜什麼是 AI Agent？