本頁內容

難度
初階
所需時間
20–30 分鐘(第一個專案)
你需要準備
Claude Design(claude.ai/design 或 Claude Desktop 側邊欄) · 簡報/品牌素材(可選:logo、品牌色、現有簡報或 PDF) · Claude Code(可選:交接原型或同步設計系統)
開始之前
- Claude Pro、Max、Team 或 Enterprise 付費方案;Claude 免費方案不包括 Claude Design;Enterprise 預設關閉,要由管理員開啟
- 桌面或手提電腦的瀏覽器,或 Claude Desktop app;Claude Design 只在網頁和桌面提供,手機用不到
- 所在地屬 Anthropic 官方支援國家/地區(見文首方格;截至 2026-09-15 香港不在名單內)
- 只放可以上載的素材副本;不要上載客戶機密或未獲授權的個人資料
Claude Design 是 Anthropic 推出的設計工具:你在對話框描述想要的簡報、互動原型或一頁式文件,Claude 就在旁邊的畫布(canvas)做出第一版,之後你可以用對話、留言或直接拖拉逐步修改,最後匯出 PDF、PPTX、HTML,或者交給 Claude Code 變成真正的程式。本文按 Anthropic 現行官方文件,講清楚邊個方案有、點樣計用量、官方七步流程,再用三個香港中小企示例示範簡報、landing page 同推廣單張的做法。
支援地區(2026 年 9 月 15 日核對):Claude Design 屬 Claude 付費方案功能,而 Anthropic 只在官方名單上的國家/地區提供 Claude.ai 服務。截至 2026-09-15,香港並不在 Anthropic 官方支援國家/地區名單(涵蓋 Commercial API 及 Claude.ai)。名單會變,訂閱或付款前請自行重查。本文只介紹官方功能和步驟,不提供 VPN、外地地址、借用電話或身份等任何規避方法;香港用家請先讀 Claude 香港訂閱指南。
一句答案:Claude Design 包含在 Claude Pro、Max 5x、Max 20x、Team 和 Enterprise 方案(Enterprise 要由管理員開啟),Claude 免費方案沒有;現時屬 Beta(測試版)。在電腦瀏覽器打開 claude.ai/design,或者在 Claude Desktop 側邊欄進入,建立專案,講清楚目標、版面、內容和受眾,Claude 就會在右邊 canvas 做出設計;滿意後按右上角「Export」匯出或分享。它與 chat、Claude Code、Cowork 共用同一組用量上限,手機用不到。
資料核對日期:2026 年 9 月 15 日。Claude Design 仍屬 beta,產品頁亦寫明官方會經常推出改進,功能名稱、匯出選項和介面都可能改變;本文每個步驟都附官方來源,畫面與本文不同時,以 Anthropic 官方〈Get started with Claude Design〉為準。本文沒有附任何截圖,所有 prompt 均為示例。
Claude Design 係咩?
Claude Design 是 Anthropic Labs 的產品。按 官方 release notes,它在 2026 年 4 月 17 日與 Claude Opus 4.7 同日推出,讓你和 Claude 協作製作設計、原型、簡報和一頁式文件等視覺成品;推出公告當時稱它為 research preview。2026 年 6 月 17 日,Anthropic 在官方 blog〈Claude Design now stays on brand for daily work〉宣布一輪大更新:重做設計系統匯入、推出新編輯器、與 Claude Code 同步、改為共用用量上限、增加匯出目的地,以及在 Claude Desktop 側邊欄加入入口。當時官方已稱它為 beta;現行 Claude Design 產品頁和 Help Center 說明亦一樣,官方繁體中文版的寫法是「以測試版形式提供」。官方沒有公布由 research preview 轉為 beta 的確切日期。
Beta 和 research preview 有甚麼分別?按 Anthropic〈Available beta and research preview features〉的定義,research preview 屬較早期、讓用家搶先試用的功能,正式推出前較大機會大幅改動;beta 則發展得較成熟,已穩定到可以日常使用,但官方仍會按用家的使用情況繼續調整。簡單講:可以用來做正式工作,但要預計介面和功能仍會變。
畫面:左邊 chat、右邊 canvas
官方說明指 Claude Design 有兩個主要區域:左邊是聊天介面,右邊是畫布。你在 chat 描述想要的東西,Claude 在 canvas 產生一個可以運作的設計;之後透過對話、內嵌留言(inline comments)和直接在 canvas 編輯,反覆修改到滿意為止。
可以做甚麼?官方列出的六類成品
| 類型 | 官方產品頁的描述 | 本文示例 |
|---|---|---|
| 原型(Prototypes) | 把靜態 mockup 變成可以分享、可以給真人測試的互動原型 | 實作二:活動報名 landing page |
| 線框圖及 mockup | 畫出功能流程,再交給 Claude Code 開發或交給設計師細修 | — |
| 設計探索 | 幾分鐘內產生十幾個方向,再在你慣用的工具收窄 | 實作二:要求 2–3 個版面 |
| 簡報(Pitch decks) | 由粗略大綱變成完成、符合品牌的簡報,可匯出 PPTX | 實作一:公司簡介簡報 |
| 市場推廣素材 | Landing page、社交媒體素材和宣傳視覺,交設計師潤飾 | 實作二 |
| 文件 | 製作履歷或一頁式文件(one-pager),匯出 PDF | 實作三:推廣單張 |
輸入方面,產品頁列明可以從程式碼庫、網頁擷取(web capture),或 DOCX、PPTX、XLSX 檔案匯入;官方說明亦提到可以上載截圖、圖片、現有簡報或文件作參考,以及從 GitHub、設計檔或本機程式碼庫引入設計系統。
邊個方案用得到?點計用量?(2026 年 9 月 15 日核對)
Claude 官方價格頁的方案比較中,Claude Design 一行寫明 Free「No」、Pro「Yes」、Max 5x「Yes」、Max 20x「Yes」;Pro 方案卡亦寫明「Includes Claude Design」。Team(2 至 150 人)、Enterprise(自助及經銷售團隊)三欄同樣是「Yes」。
| 方案 | 官方美元標價 | 包括 Claude Design? | 要留意 |
|---|---|---|---|
| Free | US$0 | 不包括 | — |
| Pro | US$20/月(月繳);年繳折合 US$17/月(US$200 一次過預繳) | 包括 | Fable 模型要用 usage credits(見下文) |
| Max 5x | US$100/月 | 包括 | 每個 session 用量為 Pro 的 5 倍;只提供月繳 |
| Max 20x | US$200/月 | 包括 | 每個 session 用量為 Pro 的 20 倍;只提供月繳 |
| Team(2–150 人) | 按 seat 計,見官方價格頁 | 包括 | 用量計入每位成員的 seat 上限 |
| Enterprise | 見官方價格頁 | 包括,但預設關閉 | 管理員要在 Organization settings > Capabilities 的 Anthropic Labs 下開啟 |
以上是 Anthropic 官方美國美元標價,來源為 Claude 官方價格頁及 Max 方案說明(2026-09-15 核對),不包括適用稅項,Anthropic 可隨時調整價格和方案;Max 價格是網頁訂閱價,手機 app 內購買的價錢可能不同。5x、20x 是相對 Pro 的用量級別,不是固定訊息數或設計數量;任何第三方或本站列出的港幣價,都不是 Anthropic 官方香港價格。想比較 Pro 和 Max 的整體取捨,請看 Claude Pro vs Max 方案比較。
用量:同 chat、Claude Code、Cowork 共用一組上限
這是 Claude Design 推出以來最大的規則變動,官方在 2026 年 6 月 17 日的 blog 宣布,並表示大部分人會因此有更多空間做設計。現行官方說明寫明:
- 共用額度:Claude Design 計入與 Claude 其他功能相同的用量上限,設計工作與 chat、Claude Code、Cowork 共用同一個額度池,沒有獨立的 Claude Design 額度要追蹤。
- 舊規則已取消:Claude Design 以前有自己的每週額度,與其他用量分開;現在所有 Claude Design 活動都計入方案的共用上限。網上較早期的介紹如仍寫「獨立每週額度」,已經過時。
- 甚麼會用得多:連接大型程式碼庫,或者反覆修改很多次的複雜專案,會消耗較多用量。
- 用到上限點算:Claude Design 會暫停到你的額度重設為止;如果你已啟用 usage credits,就可以在方案內含用量用完後繼續工作(按用量另外收費)。
- Team 和按 seat 計的 Enterprise:按官方管理員指南,Claude Design 會計入每位成員的 seat 用量上限,包括 session 和每週上限;管理員可以為需要更多用量的成員購買 usage credits。
- 按用量計費的 Enterprise:同一份指南寫明,Claude Design 的用量會按標準 API 價格從組織的用量計費,與其他介面一樣;組織、群組和個人的支出上限同樣適用。
官方沒有公布每個方案可以做幾多份簡報或原型。因為額度共用,如果你同一日大量用 Claude Code 寫程式,留給 Claude Design 的用量亦會相應減少。五小時 session、每週上限和減少浪費的方法,請看 Claude Pro、Max 用量限制指南。
Fable 模型:官方說明列明 Claude Design 可以使用 Fable 5 和 Fable 5.1;Pro 方案要用 usage credits 才可使用;Max 可把最多 50% 的每週用量上限用在 Fable 模型而不另收費,用到之後可以用 usage credits 繼續,或改用其他模型。詳細規則見 Claude Fable 5/5.1 方案規則。
開始之前:入口、裝置同素材
- 入口:在電腦瀏覽器打開
claude.ai/design,或者在 Claude Desktop app 的側邊欄進入。 - 裝置:官方已知限制寫明 Claude Design 只在網頁和桌面提供,手機用不到。
- 公司帳戶:Enterprise 預設關閉 Claude Design,見不到入口就問管理員;官方管理員指南亦建議公司先由設計師建立設計系統,再逐步開放給其他同事。
- 準備素材(可選):公司 logo、品牌色、一份你喜歡的現有簡報或 PDF、參考網站的截圖。素材越完整,Claude 越容易做出「似你公司」的成品。
- 大型 repo:官方 Academy 教學提醒,連接非常大的程式碼庫可能令瀏覽器變慢或不穩定。如果是 monorepo,或者有超過 100 人同時參與開發的程式碼庫,官方建議只連結包含相關元件的 package 或資料夾,而不是整個 repo。附加資料夾時亦要避開
.git、node_modules/這類檔案數量極多的資料夾(官方指 Chrome 處理巨大檔案樹時較吃力)。非常大的 repo 可改由 Claude Code 連結,或用下文的/design-sync。
上載前先想清楚:客戶機密、未公開的財務數字、員工或客戶個人資料,除非公司政策容許,否則不要放進任何 AI 工具。分享截圖或設計連結前,亦要遮蓋電郵、帳戶名稱、客戶資料和付款資料。
官方七步流程
按官方說明,一個 Claude Design 專案的典型流程是:
- 建立專案;
- 附加或匯入你想 Claude 使用的設計系統;
- 加入相關背景資料(截圖、程式碼庫);
- 描述你想做的東西;
- 檢視 Claude 在 canvas 產生的內容;
- 透過 chat 修改、直接在 canvas 編輯,或留下 inline comment;
- 滿意後匯出或分享。
步驟 1:建立專案
在 Claude Design 首頁建立新專案。如果你所在的組織已發佈設計系統,新專案會自動沿用它的品牌色、字體和元件,毋須再上載品牌素材;個人用家未設定設計系統時,Claude 會用預設風格,成品仍然可用,只是不會自動跟你的品牌。
步驟 2:附加或匯入設計系統
設計系統是 Claude Design 從你的程式碼、簡報或品牌素材抽取出來的一套顏色、字體、元件和版面規則。官方說明列出的帶入方式有四種:GitHub repo、設計檔、直接上載,或在 Claude Code 用 /design-sync 由本機程式碼庫轉換上載;一個專案可以帶入一個或多個設計系統。Claude 會用設計系統的真實元件建構,並在你看到成品前自行對照設計系統修正。個人用家第一次試用可以先跳過這一步,Claude 會改用預設風格;如果你打算長期用來做公司簡報或網頁,建議先按下文「設定品牌設計系統」一節建立。
步驟 3:加入背景資料
官方說明指,你提供越多背景資料,輸出就越好,而且可以在專案任何時間加入:
- 截圖、圖片或現有素材:現有設計、競爭對手產品、線框圖或靈感圖片的截圖;亦可以附上一份現有簡報或文件,叫 Claude 參考它的設計風格。適合「整成咁嘅樣」這類要求。
- 程式碼庫和現有設計檔:連結程式碼 repo,Claude 就會了解你現有的元件、架構和樣式,令原型一開始就更接近可以上線的程度。按官方 Academy 原型教學,可以用「Import」按鈕從 GitHub 匯入,或附加本機資料夾。
步驟 4:寫 prompt:目標、版面、內容、受眾
官方說明指,你毋須是設計師也可以做出好成品,關鍵是講清楚四樣東西:
| 要素 | 要講乜 | 例子(示例) |
|---|---|---|
| 目標(goal) | 你想做甚麼、做來做乜 | 「做一份公司簡介簡報,令客戶願意約第二次會議」 |
| 版面(layout) | 東西應該點排 | 「8 頁,每頁一個重點,大字標題、少字多圖表」 |
| 內容(content) | 要顯示甚麼資料 | 「三項服務、合作流程、聯絡方式;不要自行加入數字」 |
| 受眾(audience) | 誰會看或使用 | 「第一次見面的香港中小企老闆」 |
資料不足時,Claude 亦會主動問你問題。官方的其他提示包括:先做核心版面和內容,再逐步加入互動、特殊情況和細節;早點講明成品要適合手機、平板定桌面;如果你知道品牌系統內有某個元件,直接講它的名稱。
步驟 5:檢視 canvas
Claude 會在右邊 canvas 產生第一版。官方說明形容第一版只是起點,真正的價值在於之後的反覆修改。先看整體結構和資訊次序是否正確,再處理顏色和細節。
步驟 6:修改:chat、inline comment 定直接編輯?
| 方法 | 適合 | 例子(示例) |
|---|---|---|
| Chat | 影響整體的結構性改動、加新段落、需要解釋背景的要求 | 「整體顏色改深色、簡約啲」「俾我睇 2–3 個唔同版面」 |
| Inline comment | 點選 canvas 上某個元件,做針對性修改 | 「呢個按鈕 padding 大啲」「呢度改用品牌主色」 |
| 直接編輯 | 快速的視覺調整:直接拖動、改變大小、對齊元素 | 把相片拉大、對齊兩個方塊 |
產品頁亦提到,你可以直接修改文字,或使用 Claude 為你建立的調整滑桿(adjustment sliders)微調間距和顏色。修改意見越具體越好:官方的例子是,「呢個唔啱眼」很難跟進,「把表格欄位之間的距離收窄至 8px」就清楚得多。你亦可以叫 Claude 解釋它的設計決定、建議改善,或者檢查設計的無障礙程度。
已知問題:官方說明指 inline comment 間中會在 Claude 讀取之前消失;如果你發現留言沒有被處理,官方建議直接把意見貼到 chat。另外,留言偶爾不會在頁面顯示,但仍可以打開留言檢視(comments view)找到。
保存版本:想試一個完全不同的方向、又不想失去目前的成果,可以跟 Claude 講:「Save what we have and try a completely different approach.」(或者中文「幫我儲存目前的版本,然後試一個完全不同的方向」)。官方說明指 Claude 會儲存目前的專案並告訴你存在哪裏,之後在對話中可以隨時參考較早的版本。
步驟 7:匯出或分享
檢視專案時,按右上角的「Export」按鈕選擇匯出格式(見下文「匯出格式對照表」)。你亦可以用分享連結在組織內分享專案,權限分為只可檢視、可留言和可編輯。

實作一:用 Claude Design 做簡報
按官方 Claude Academy 簡報教學,Claude Design 的簡報是以互動 HTML 形式在 canvas 呈現,你在對話中修改時可以即時看到變化;如果組織已設定設計系統,簡報會自動套用品牌顏色、字體和視覺風格。官方建議在 prompt 講清楚受眾、重點訊息,以及會影響設計的公司背景。
以下是一段示例 prompt,情境是香港中小企的公司簡介簡報。本文沒有聲稱做過任何測試,輸出會因你的素材和當時的產品版本而不同:
幫我做一份公司簡介簡報,對象是第一次見面的香港中小企老闆。
- 目標:10 分鐘內介紹我哋公司同服務,令對方願意約第二次會議
- 頁數:8 頁;結構:封面、我哋係邊個、客戶常見煩惱、三項服務、
合作流程、收費方式(只寫「按項目報價」)、適合的客戶類型、聯絡方式
- 版面:每頁一個重點、大字標題、少字多圖表;用我上載的 logo 同品牌色
- 內容:用繁體中文(香港書面語);不要自行加入客戶名稱、數字或獎項
- 如有需要,開始前先問我問題
第一版出來後,可以按官方教學的做法逐頁修改:
- 改指定一頁:清楚講明頁數,例如「第 3 頁改成三欄比較」。
- 加或刪頁:「將第 5 頁拆成兩頁,節奏慢啲」「刪除第 7 頁」。
- 圖表:描述你要呈現的數據,例如「用我提供的三年營業額做一個柱狀圖」,Claude 會產生相應圖表;數字一定要由你提供並核對。
- 動畫:官方指以 HTML 呈現簡報的好處之一,是 Claude Design 可以製作跨頁動畫幫你講故事。
- 圖片和 logo:可以叫 Claude 加入圖片、logo 等視覺元素;已設定設計系統的話,會自動使用當中核准的素材。
簡報應該用邊個格式匯出?
- 獨立 HTML:官方指最適合保留互動和動畫,適合你自己在電腦上播放。
- PPTX:要交給同事或客戶在 PowerPoint 繼續修改時使用。
- PDF:適合電郵傳閱或列印。
- Send to Canva:想在 Canva 繼續編輯時使用。
匯出後請打開檔案逐頁檢查排版和字體,特別是轉成 PPTX 或 PDF 後的中文字。分享方面,官方簡報教學列出四個選項:只限自己(Private)、組織內有連結的人可檢視、可留言(預設)或可編輯;多人有權限時,可以在類似群組聊天的介面一齊和 Claude 對話。不過官方〈Get started with Claude Design〉的已知限制亦列明,兩人或以上同時編輯同一個專案的功能仍屬基本,未必穩定。
如果你用的是 ChatGPT/Codex,想由一句需求做出 HTML deck 和 PPTX,可以參考 Codex + Huashu Design AI 簡報教學。
實作二:互動原型同 landing page
產品頁列明 Claude Design 可以把靜態 mockup 變成可分享、可給真人測試的互動原型,亦可以做 landing page、社交媒體素材等市場推廣素材。以下是一段示例 prompt,情境是香港的 AI 工作坊報名頁:
設計一個活動報名 landing page,對象是想學 AI 工具的香港上班族。
- 目標:令訪客填表報名一個 90 分鐘的工作坊
- 版面:頂部主標題同報名按鈕、工作坊內容三點、講者介紹、
時間地點、常見問題、報名表(姓名、電郵、公司)
- 內容:日期、地點、價錢先用「待定」代替,我之後自己填
- 要同時適合手機同桌面瀏覽
第一版出來後,可以按官方建議繼續:
- 要求變化:對方向未有把握時,叫 Claude 給你 2–3 個選項並排比較,官方指這比估估下快得多。
- 叫 Claude 做設計檢查:官方說明指 Claude 可以檢查無障礙設計、色彩對比度、資訊層次和整體易用性,把它當作設計拍檔,而不只是生成工具。
- 處理特殊情況:交接開發前,官方 Academy 原型教學建議叫 Claude 展示設計點樣處理空白狀態、錯誤狀態、載入中狀態,以及數據多少不同的情況,例如「顯示報名表未填、填錯、提交中三種狀態」。
- 收集意見:用組織內分享連結讓同事留言,再按意見修改。
交接 Claude Code:由原型變成真正網頁
按官方 Claude Academy 原型教學,按「Export」再選交接 Claude Code 後,官方預設會把專案的設計檔、對話紀錄和一份 README(指示模型如何理解這些設計)打包,並給你一段可以貼到本機 Claude Code(或你選用的其他 coding agent)的 prompt,當中包括這個打包檔的網址;你亦可以選擇交接 Claude Code Web。官方的交接建議:
- 清楚命名:對話中用過的元件名稱,會一併帶到交接內容。
- 在 chat 記下決定:例如「用分頁而唔用側邊欄,因為用家要一眼睇晒所有部分」,這些理由會成為開發時的背景。
- 先處理特殊情況:空白、錯誤、載入中狀態都做好,工程同事會得到較完整的藍圖。
未安裝 Claude Code 的話,先看 Claude Code 安裝教學。交接後的程式碼仍要由你或開發同事檢查、測試,才可以正式上線。
實作三:一頁式文件、履歷 → PDF
產品頁把「文件」列為官方用例之一:製作履歷或一頁式文件,然後匯出 PDF。以下是一段示例 prompt,情境是補習中心的暑期課程單張:
做一頁 A4 直向的推廣單張,介紹一間社區補習中心的暑期課程。
- 目標:家長睇完知道有咩課程、點樣報名
- 版面:上面標題同一句賣點,中間三個課程方塊,
下面報名方法同 QR code 位置(先留空框)
- 內容:課程名稱、時間、價錢全部用我提供的資料,唔好自行補充
- 受眾:小學生家長
完成後我會匯出 PDF。
匯出前後要做三件事:
- 核對每一個字:課程名稱、日期、價錢、地址和電話都要逐項對返原始資料;AI 產生的成品不會自動替你核實事實。
- 檢查 PDF 版面:用 PDF 閱讀器打開,確認尺寸、邊界和中文字體都正常,再決定是否送去印刷。
- 履歷要小心個人資料:做履歷時只放你願意交給 AI 工具處理的資料,身份證號碼等敏感資料不要放入。
設定品牌設計系統
設計系統令 Claude Design 的成品「似你公司,而唔係模板」。按官方〈Set up your design system in Claude Design〉,Claude 會從你提供的程式碼庫、簡報或其他設計參考,抽取可重用的元件、顏色、字體和版面規則,作為帳戶內每個專案的基礎。Team 和 Enterprise 只需由負責的設計師或品牌負責人設定一次,其他成員的專案就會自動使用;官方前提是組織管理員已授予設定設計系統的權限。管理員指南建議第一階段由 2–4 位受信任的設計師及設計主管負責,涵蓋品牌和產品設計兩邊。
- 建立或切換組織:打開 Claude Design,在專案選擇器左下角按目前的組織名稱,選擇你的組織或建立新組織,然後完成 onboarding 流程。
- 上載品牌和產品素材:可以是程式碼庫(例如 React 元件庫)、原型(截圖、網頁流程、現有設計檔)、簡報或文件(設計得好的 PowerPoint 或 PDF 亦可以),或者個別素材(logo、色板、字體規格)。一種來源已經可以開始,提供多種會更好。
- 檢查生成的設計系統:Claude 會產生一套 UI kit,通常包括色板、字體、按鈕和卡片等元件,以及間距、網格等版面規則。官方建議開一個測試專案,用「幫 [你的產品] 做一個 landing page」這類 prompt 檢查成品是否符合品牌。
- 發佈:滿意後確認「Published」開關已開啟。發佈後,在該組織內從 Claude Design 首頁建立的專案,都會用你的設計系統取代預設風格。
日後更新:品牌會改變。在 Claude Design 的組織設定中,按目標設計系統旁的「Open」,再按右上角的「Remix」,左邊會打開 chat 介面,你可以和 Claude 一齊修改設計系統。官方提示:提供真實成品(例如一個完成的 landing page)比只給色板更能表達品牌感覺;第一次抽取效果不理想,就再上載其他素材。官方亦提醒,設計系統的質素取決於來源:雜亂的程式碼庫或不完整的檔案,會直接反映在成品上。
公司用家:一個組織可以有多個設計系統,例如不同品牌或部門。預設情況下,任何有 Claude Design 權限的成員都可以發佈設計系統、設定組織預設和刪除設計系統;Enterprise 可以用自訂角色中的「Claude Design Admin」權限,把這些動作限於指定成員。
進階:同 Claude Code 串連
如果你本身用 Claude Code 寫程式,官方文件提到四種和 Claude Design 串連的方法。它們分散在不同的官方頁面,名稱亦相近,以下按來源逐一說明:
1. /design-sync:把 repo 的設計系統上載到 Claude Design
按 Claude Code 官方指令表,/design-sync [hint] 會把你 repo 內的 React 設計系統轉換並上載到 Claude Design,令它產生的設計使用你真正的元件;可以順帶為設計系統命名,例如 /design-sync Acme DS。第一次同步會逐個元件核對,大型 repo 可能要幾個小時。這個指令需要連接 claude.ai,所以經 Amazon Bedrock、Google Cloud 等第三方平台使用 Claude Code 時不能用。官方指令表另列出 /design-login,用你的 claude.ai 帳戶授權 /design-sync 存取設計系統。
2. Claude Design MCP 伺服器:在終端機建立和修改設計
官方說明提供以下兩步:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
加入伺服器後,在 Claude Code 執行 /design-login,用你的 claude.ai 帳戶登入。連接後,你可以把設計匯入程式碼庫、把程式碼匯出為即時原型,或者讓 Claude 由頭到尾完成整個專案。
3. 由 Claude Design 交接到 Claude Code
即上文實作二的「Export」交接:設計檔、對話紀錄和 README 會打包,Claude Code 會由你現有的設計繼續,而不是由一張截圖重新開始。
4. Claude Code 的 /design:在 Claude Code 內起草設計
Claude Design 產品頁把 /design 列為「直接在 Claude Code 工作」的方法;2026 年 6 月 17 日的官方 blog 則寫,你可以用 /design 在不離開終端機的情況下建立、修改和同步設計專案。按 Claude Code 官方指令表,/design [brief] 會在同一塊 canvas 上以多個 artboard 起草 UI mockup、畫面流程、landing page 或海報,並發佈成一個 artifact,當中運行的是 Claude Design 編輯器的 research preview。帳戶可以儲存的話,你可以在 canvas 上修改再儲存成新版本;否則只可以檢視草稿並匯出 PNG 或 PDF。它需要可以使用 artifacts 的 session 和 Claude Code v2.1.234 或以上版本;經 Amazon Bedrock、Google Cloud 等第三方平台使用 Claude Code 時不能用。留意三份官方資料對 /design 的描述並不一致(blog 說同步設計專案,指令表說發佈 artifact),本文只照錄各自原文,不作合併推斷;/design 所用的編輯器亦仍標示為 research preview,與 claude.ai/design 的 beta 狀態不同,本文其餘步驟都以 claude.ai/design 為準。
匯出格式對照表
| 匯出方式 | 最適合 | 備註 |
|---|---|---|
| 獨立 HTML(Export as standalone HTML) | 有動畫或互動的簡報、原型 | 官方指最適合保留互動和動畫 |
| PPTX | 交給同事在 PowerPoint 繼續修改 | 匯出後逐頁檢查排版和中文字 |
| 一頁式文件、履歷、傳閱或列印 | 官方文件用例正是匯出 PDF | |
| 下載 .zip | 保存整個專案檔案 | — |
| Send to Canva | 在 Canva 繼續編輯 | — |
| 其他合作工具 | 送到你已經在用的工具 | Adobe、Base44、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wix;官方表示更多目的地即將推出 |
| 交接 Claude Code | 由原型變成真正程式 | 可選傳送到本機 coding agent 或 Claude Code Web |
| 組織內分享連結 | 收集意見、線上展示 | 只限組織內;權限分為檢視、留言、編輯 |
以上來自官方〈Get started with Claude Design〉的匯出清單(2026-09-15 核對)。Figma 不在官方清單內:官方管理員指南列明,目前支援匯出 HTML 打包、PPTX、PDF,以及交接 Claude Code 或上述九個合作工具。網上有教學介紹用第三方外掛把 HTML 轉成 Figma 稿,但那不屬 Anthropic 官方功能,本文不作介紹。如果你的團隊一定要用 Figma 稿,可以參考 Gemini Canvas UI 設計教學的做法。

已知限制同資料安全
官方列出的已知限制
- 留言顯示:inline comment 偶爾不在頁面出現,可以打開留言檢視查看;如果 Claude 沒有處理你的留言,改為把意見貼到 chat。
- 大型程式碼庫:非常大的 repo 可考慮由 Claude Code 連結,以免延遲或瀏覽器出問題;同步設計系統請用
/design-sync。 - 對話錯誤:遇到「chat upstream error」,可以在同一個專案內開一個新的 chat 分頁。
- 可用裝置:只在網頁和桌面提供。
- 多人同時編輯:兩人或以上同時編輯同一個專案的功能仍屬基本,未必穩定。
- 設計系統匯入:質素取決於來源,雜亂的程式碼庫或不完整的檔案會反映在成品上。
公司用家要知的資料處理
- 專案預覽隔離:官方管理員指南指,Claude Design 的專案預覽在 Anthropic 營運的獨立內容網域上、以沙盒 iframe 執行,預覽內的程式碼不能存取你的 Claude 帳戶、登入資料或編輯器;移除某人的分享權限後,對方會即時失去預覽存取權。
- 上載素材會保存:對 Team 和 Enterprise 而言,上載的素材會持續儲存,並按 Anthropic 企業產品的資料保留及刪除政策處理。
- 暫未支援:截至 2026-09-15,Claude Design 未支援稽核紀錄(audit logs),亦未支援資料駐留(data residency)要求;有這類合規要求的公司要先評估。
無論個人還是公司用家,都不應把客戶機密、未公開財務資料或他人的個人資料上載,除非公司政策和客戶協議容許。帳戶本身的保安(兩步驗證、登入裝置、不與人共用帳戶等),可以用 AI 帳戶安全檢查表逐項核對。
Claude Design、Cowork、Codex 簡報、Gemini Canvas 點揀?
| 你的情況 | 可以先看 |
|---|---|
| 已有 Claude Pro 或以上,想用對話做簡報、原型或一頁式文件,並跟品牌設計系統 | 本文(Claude Design) |
| 要把一堆 Word、Excel、PDF 檔案整理成報告或簡報檔,重點在處理檔案 | Claude Cowork 教學 |
| 用 ChatGPT/Codex,想由一句需求做 HTML deck、PPTX 同演講模式 | Codex + Huashu Design AI 簡報教學 |
| 最終一定要交可編輯的 Figma 稿 | Gemini Canvas UI 設計教學 |
各工具的方案和功能不斷變化,本表只作分流,實際選擇請按各篇文章的核對日期和官方資料決定。
下一步
- 未決定用 Pro 定 Max:看 Claude Pro vs Max 5x vs 20x 方案比較,或用 AI 方案比較工具對照。
- 經常撞到用量上限:看 Claude Pro、Max 用量限制指南。
- 想把原型交接 Claude Code:先看 Claude Code 安裝教學。
- 香港資格和訂閱前檢查:看 Claude 香港訂閱指南。
如果你已按上文核對好資格,只是想了解本站的 Claude Pro 相關服務,可到 Claude Pro 服務頁查看(Claude Design 包含在 Pro 及以上方案,目前屬 beta,功能和用量規則以 Anthropic 當時提供為準,本站不能保證)。頁面上的港幣金額是 HK Learn AI 的獨立服務總價,不是 Anthropic 官方香港價格;本站與 OpenAI/Anthropic 並無從屬關係。任何聲稱共用或轉讓帳戶很安全的說法都不可信。付款前請閱讀服務條款,並了解代充與成品號涉及的憑證、條款和停權風險。任何方式都不會改變文首所述的官方支援地區狀態。
結論
Claude Design 把「做簡報、畫原型、排單張」變成一段對話:Pro 已經包括,打開 claude.ai/design,講清楚目標、版面、內容和受眾,就可以得到第一版,再用 chat、inline comment 和直接拖拉逐步修改,最後匯出 HTML、PPTX、PDF 或交接 Claude Code。要記住的是:它現在屬 beta,功能仍會變;用量與 chat、Claude Code、Cowork 共用;手機用不到;Figma 不在官方匯出清單;所有文字、數字和聯絡資料都要自己核對。至於所在地是否受支援,請以官方名單為準,不要依賴任何繞過方法。
資料來源與引用
我們附上第一手及官方來源,方便你逐一核實。
- 1.Get started with Claude Design — Anthropic Support
- 2.開始使用 Claude Design(繁體中文版) — Anthropic Support
- 3.Set up your design system in Claude Design — Anthropic Support
- 4.Claude Design admin guide for Team and Enterprise plans — Anthropic Support
- 5.Claude Design — Anthropic
- 6.Using Claude Design for presentations and slide decks — Anthropic (Claude Academy)
- 7.Using Claude Design for prototypes and UX — Anthropic (Claude Academy)
- 8.Introducing Claude Design by Anthropic Labs — Anthropic
- 9.Claude Design now stays on brand for daily work — Anthropic
- 10.Claude release notes — Anthropic Support
- 11.Available beta and research preview features — Anthropic Support
- 12.Claude Code commands — Anthropic (Claude Code Docs)
- 13.Claude plans and pricing — Anthropic
- 14.What is the Max plan? — Anthropic Support
- 15.Manage usage credits for paid Claude plans — Anthropic Support
- 16.Claude Fable models on your plan — Anthropic Support
- 17.Anthropic supported countries — Anthropic
常見問題
Claude Design 免費版用唔用到?
用不到。Claude 官方價格頁的方案比較中,Claude Design 一行寫明 Free「No」,Pro、Max 5x 和 Max 20x 都是「Yes」;Team 和 Enterprise 亦包括 Claude Design,但 Enterprise 預設關閉,要由管理員在 Organization settings > Capabilities 開啟。
Claude Design 仲係咪研究預覽(research preview)?
不是。Claude Design 在 2026 年 4 月 17 日推出時屬 research preview;Anthropic 在 2026 年 6 月 17 日的官方 blog 已稱它為 beta;截至 2026 年 9 月 15 日,Help Center 說明(繁體中文版寫「以測試版形式提供」)和產品頁亦一樣,但官方沒有公布確切的轉換日期。按 Anthropic 的定義,beta 功能發展得比 research preview 成熟,已穩定到可以日常使用,但官方仍會按用家使用情況繼續調整,所以功能和介面仍可能改變。
用 Claude Design 會唔會另外計額度?
不會另外計。官方說明寫明 Claude Design 計入與 Claude 其他功能相同的用量上限,與 chat、Claude Code 和 Cowork 共用同一組額度,沒有獨立的 Claude Design 額度;以前另設的每週額度已經取消(官方在 2026 年 6 月 17 日宣布改為共用)。大型程式碼庫或多次反覆修改會用得較多。用到上限後,Claude Design 會暫停到額度重設;如已啟用 usage credits,就可以繼續使用。官方沒有公布每個方案可以做幾多份設計。
Claude Design 可唔可以匯出去 Figma?
Figma 不在官方匯出清單內。截至 2026 年 9 月 15 日,官方列出的匯出方式是 .zip、PDF、PPTX、獨立 HTML、交接 Claude Code,以及 Adobe、Base44、Canva、Gamma、Lovable、Miro、Replit、Vercel 和 Wix 九個合作工具。網上提到的第三方轉換外掛不屬官方功能,本文不作介紹;如果你的工作流程一定要用 Figma 稿,可以參考本站的 Gemini Canvas UI 設計教學。
手機用唔用到 Claude Design?
用不到。官方已知限制寫明 Claude Design 只在網頁和桌面提供:在電腦瀏覽器打開 claude.ai/design,或者在 Claude Desktop app 的側邊欄使用。
Claude Design 同 Claude Code 點樣配合?
官方文件提到四個方法。第一,在 Claude Design 按右上角「Export」,選交接 Claude Code:官方會把設計檔、對話紀錄和一份 README 打包,並提供一段可以貼到本機 Claude Code 的 prompt,亦可以改為交接 Claude Code Web。第二,在 Claude Code 用 /design-sync 把 repo 的 React 設計系統上載到 Claude Design,令設計用回你真正的元件。第三,加入 Claude Design MCP 伺服器並執行 /design-login,就可以在終端機建立和修改設計。第四,Claude Design 產品頁把 Claude Code 的 /design 指令列為直接在 Claude Code 工作的方法:按官方指令表,它把 mockup 起草在 canvas 上,再發佈成一個運行 Claude Design 編輯器 research preview 的 artifact;官方 blog 則說可以用它在終端機建立、修改和同步設計專案。各頁描述並不一致,本文照錄原文,詳見內文「進階:同 Claude Code 串連」。
Claude Design 而家用緊邊個模型?
Anthropic 在 2026 年 4 月推出時表示 Claude Design 由 Claude Opus 4.7 驅動,但這是推出時的資料;截至 2026 年 9 月 15 日,現行產品頁和 Help Center 說明都沒有列明預設模型,本文亦不作推斷。另外,官方 Fable 說明列明 Claude Design 可以使用 Fable 5 和 Fable 5.1:Pro 要用 usage credits;Max 可把最多 50% 的每週用量上限用在 Fable 模型而不另收費,之後可以用 usage credits 繼續,或改用其他模型。
香港可以用 Claude Design 嗎?
Claude Design 屬 Claude 付費方案功能。截至 2026 年 9 月 15 日,Anthropic 官方支援國家/地區名單(Commercial API 及 Claude.ai)未列出香港。本文不提供任何繞過地區限制的方法,請先閱讀本站的 Claude 香港訂閱指南,並留意官方名單更新。
本文遵循我們的 編輯準則.

關於作者
HK Learn AI 編輯部
HK Learn AI 編輯部負責研究、查證同編寫每一篇內容,並引用官方及第一手來源。
此主題相關文章

Claude Skills 教學:自訂技能包,令 Claude 跟公司格式出報告同文件(Free 都用得,2026 年 9 月核對)
按 Anthropic 現行官方說明(2026 年 9 月 15 日核對)講解 Claude Skills:Free、Pro、Max、Team 和 Enterprise 都可以用,只要開啟 Code execution and file creation。本文一步步教你用對話、上載 ZIP 或 Claude Code 資料夾建立自訂 skill,把官方文件之間互相矛盾的命名和長度規則整理成一套安全做法,並附中小企示例、測試方法、團隊分享和安全清單。文首附支援地區狀態。

ChatGPT Agent 模式教學(2026 更新):Agent 已停用,改用 ChatGPT Work 搜資料、填表同整理檔案,邊個方案有、點樣安全授權
ChatGPT Agent 模式已經停用,OpenAI 叫用家改用 ChatGPT Work。本文按官方文件,逐步教你用 Work 搜資料並整理成報告、用 cloud browser 填表(去到確認前停低)、用桌面版 Work 整理本機檔案;再比較 Free、Go、Plus、Pro 的分別,講清網站存取、App 權限和登入安全設定,以及地區資格限制。資料核對日期:2026 年 9 月 15 日。

Claude in Chrome 教學:安裝 Chrome 擴充、揀權限模式、防 prompt injection(Pro/Max 適用)
按 Anthropic 現行官方文件(2026 年 9 月 15 日核對)一步步設定 Claude in Chrome:邊個方案有、點樣開獨立 Chrome 設定檔、6 步安裝同 15 項權限、分辨 Cowork 版同 classic 版側邊面板、揀手動批准或自動批准、第一個低風險任務、防 prompt injection 的停手訊號,以及 Claude Code 整合同常見錯誤。文首附支援地區狀態。