跳至主要內容
HK Learn AI
AI 生產力

Claude Design 教學:用對話做原型、簡報同一頁式文件(Pro 起・Beta 版)

按 Anthropic 現行官方文件(2026 年 9 月 15 日核對)一步步用 Claude Design:邊個方案有、點樣計用量、官方七步流程、三個香港中小企示例(公司簡介簡報、活動 landing page、推廣單張)、品牌設計系統、交接 Claude Code,以及匯出格式同已知限制。文首附支援地區狀態。

HK Learn AI 編輯部標誌

HK Learn AI 編輯部

編輯部

發佈於 2026年9月15日

最後審閱:2026年9月20日

分享這篇文章
本頁內容
資訊圖解:Claude Design,一句想法,變成設計稿;簡報|互動原型|一頁文件;講需求 → 修改 → 匯出

難度

初階

所需時間

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?要留意
FreeUS$0不包括—
ProUS$20/月(月繳);年繳折合 US$17/月(US$200 一次過預繳)包括Fable 模型要用 usage credits(見下文)
Max 5xUS$100/月包括每個 session 用量為 Pro 的 5 倍;只提供月繳
Max 20xUS$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 專案的典型流程是:

  1. 建立專案;
  2. 附加或匯入你想 Claude 使用的設計系統;
  3. 加入相關背景資料(截圖、程式碼庫);
  4. 描述你想做的東西;
  5. 檢視 Claude 在 canvas 產生的內容;
  6. 透過 chat 修改、直接在 canvas 編輯,或留下 inline comment;
  7. 滿意後匯出或分享。

步驟 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 分鐘的工作坊
- 版面:頂部主標題同報名按鈕、工作坊內容三點、講者介紹、
  時間地點、常見問題、報名表(姓名、電郵、公司)
- 內容:日期、地點、價錢先用「待定」代替,我之後自己填
- 要同時適合手機同桌面瀏覽

第一版出來後,可以按官方建議繼續:

  1. 要求變化:對方向未有把握時,叫 Claude 給你 2–3 個選項並排比較,官方指這比估估下快得多。
  2. 叫 Claude 做設計檢查:官方說明指 Claude 可以檢查無障礙設計、色彩對比度、資訊層次和整體易用性,把它當作設計拍檔,而不只是生成工具。
  3. 處理特殊情況:交接開發前,官方 Academy 原型教學建議叫 Claude 展示設計點樣處理空白狀態、錯誤狀態、載入中狀態,以及數據多少不同的情況,例如「顯示報名表未填、填錯、提交中三種狀態」。
  4. 收集意見:用組織內分享連結讓同事留言,再按意見修改。

交接 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 位受信任的設計師及設計主管負責,涵蓋品牌和產品設計兩邊。

  1. 建立或切換組織:打開 Claude Design,在專案選擇器左下角按目前的組織名稱,選擇你的組織或建立新組織,然後完成 onboarding 流程。
  2. 上載品牌和產品素材:可以是程式碼庫(例如 React 元件庫)、原型(截圖、網頁流程、現有設計檔)、簡報或文件(設計得好的 PowerPoint 或 PDF 亦可以),或者個別素材(logo、色板、字體規格)。一種來源已經可以開始,提供多種會更好。
  3. 檢查生成的設計系統:Claude 會產生一套 UI kit,通常包括色板、字體、按鈕和卡片等元件,以及間距、網格等版面規則。官方建議開一個測試專案,用「幫 [你的產品] 做一個 landing page」這類 prompt 檢查成品是否符合品牌。
  4. 發佈:滿意後確認「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一頁式文件、履歷、傳閱或列印官方文件用例正是匯出 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 設計教學

各工具的方案和功能不斷變化,本表只作分流,實際選擇請按各篇文章的核對日期和官方資料決定。

下一步

如果你已按上文核對好資格,只是想了解本站的 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. 1.Get started with Claude Design — Anthropic Support
  2. 2.開始使用 Claude Design(繁體中文版) — Anthropic Support
  3. 3.Set up your design system in Claude Design — Anthropic Support
  4. 4.Claude Design admin guide for Team and Enterprise plans — Anthropic Support
  5. 5.Claude Design — Anthropic
  6. 6.Using Claude Design for presentations and slide decks — Anthropic (Claude Academy)
  7. 7.Using Claude Design for prototypes and UX — Anthropic (Claude Academy)
  8. 8.Introducing Claude Design by Anthropic Labs — Anthropic
  9. 9.Claude Design now stays on brand for daily work — Anthropic
  10. 10.Claude release notes — Anthropic Support
  11. 11.Available beta and research preview features — Anthropic Support
  12. 12.Claude Code commands — Anthropic (Claude Code Docs)
  13. 13.Claude plans and pricing — Anthropic
  14. 14.What is the Max plan? — Anthropic Support
  15. 15.Manage usage credits for paid Claude plans — Anthropic Support
  16. 16.Claude Fable models on your plan — Anthropic Support
  17. 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 編輯部

HK Learn AI 編輯部負責研究、查證同編寫每一篇內容,並引用官方及第一手來源。

此主題相關文章

資訊圖解:Claude Skills,教一次,次次跟格式;舊範本+工作指示 → SKILL.md → 一致格式報告;先訂格式|再做測試|重複使用
AI 生產力2026年9月15日

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,把官方文件之間互相矛盾的命名和長度規則整理成一套安全做法,並附中小企示例、測試方法、團隊分享和安全清單。文首附支援地區狀態。

閱讀約 43 分鐘繁中
資訊圖解:ChatGPT 多步任務,搜資料、填表、整檔案;搜尋資料 → 整理結果 → 確認提交;重要操作,由你拍板
AI 生產力2026年9月15日

ChatGPT Agent 模式教學(2026 更新):Agent 已停用,改用 ChatGPT Work 搜資料、填表同整理檔案,邊個方案有、點樣安全授權

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

閱讀約 35 分鐘繁中
資訊圖解:Claude in Chrome,瀏覽器助手點用?;讀網頁 → 提出操作 → 人手批准;網頁內容,唔等於指令
AI 生產力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 整合同常見錯誤。文首附支援地區狀態。

閱讀約 53 分鐘繁中