AI 應用

Claude Design 改成對話範本後怎麼開始?入口、方案與設計系統

Claude Design 在 2026 年 4 月是一個有自己網址的獨立網站,到了 10 月,它已經變成 Claude 對話裡的一個範本。入口換了,開放的方案範圍也跟著改寫,所以照著早期畫面去找選單,常常會對不上。

簡單來說,Claude Design 是 Anthropic 做的視覺成品工具。你用文字描述想要的畫面,Claude 就在對話旁邊的畫布上做出設計稿、可互動的原型或單頁文件,之後再靠對話、評論與拖曳慢慢修到滿意。它的使用者不限設計師,沒有設計背景的人也能用它做出登陸頁、簡報與活動素材。

入口、方案、簡報的歸屬在這半年都動過,要用得順手,得先弄清楚它從哪裡來、現在站在哪個位置。

Claude Design 是什麼?

Claude Design 是 Claude 裡專門做視覺成品的範本。你在對話裡描述需求,Claude 在旁邊的畫布上做出第一版,你再用對話、評論和直接編輯修改。畫布上的內容由畫板與圖層組成,文字、形狀、圖片都是可以單獨選取的圖層,這點和直接生成一張圖片很不一樣。

現在它是 Claude 對話裡的一項功能,不再是獨立網站,所以網路上早期的介紹,在入口、形態,以及它和 Artifacts、Claude Code 的關係上,常和現況對不上。

Anthropic Labs 在 2026 年 4 月推出的視覺成品工具

Claude Design 由 Anthropic Labs 在 2026 年 4 月 17 日發表,定位是用對話做出精緻的視覺成品,像設計稿、原型、簡報和單頁文件。Anthropic 表示它在發表當時由 Claude Opus 4.7 驅動,並稱這是自家最強的視覺模型;當時的狀態是研究預覽,向 Pro、Max、Team、Enterprise 訂閱者逐步開放。現行說明頁沒有再寫模型名稱,所以模型這一項只能以發表當時為準。

Anthropic 在發表文章裡列出的使用者包括設計師、產品經理、創辦人、行銷與業務人員。設計師可以用它探索多個方向,或把靜態稿轉成可互動的原型;產品經理能先畫出功能流程,再交給 Claude Code 或設計師;沒有設計背景的人,則能直接做出簡報、登陸頁和社群素材。

從獨立網站轉為 Claude 對話裡的範本

現在 Anthropic 的說明頁把 Claude Design 寫成 artifact 範本之一,成品顯示在對話旁的畫布上。在對話裡可以直接請 Claude 做設計,或在訊息框選 Output > Design;也可以從 Artifacts 分頁挑 Design 範本,Claude Code 裡同樣能用。

Claude Design 產品頁寫明現在可以在任何一段 Claude 對話裡使用 Claude Design
Claude Design 產品頁已改成說明可以在任何一段 Claude 對話裡使用,不必再另開獨立網站(截圖來源:Anthropic)。

4 月發表時的獨立版 claude.ai/design 還在運作,不過 Anthropic 已經預告它會在 2026 年 12 月 14 日關閉。如果你手邊的操作說明提到要先到那個網址建立專案,那描述的是獨立版的畫面,和現在對話裡的範本在入口與選單上不盡相同。

與 Artifacts、Claude Code 的分工

Artifacts 是這類成品的統稱。Anthropic 的說明頁把它定義成 Claude 做出來、你會拿給別人看的東西,設計、簡報、文件都算,一開始只有你自己看得到。Design 是其中一種範本,與 Slides、Docs 並列:Docs 可匯出成 Word、PDF、Markdown 和 Google Docs,Slides 可匯出 PowerPoint 與 PDF,Design 則可匯出 .zip、PDF、PowerPoint 和獨立 HTML,也能送到 Google Slides。

Claude Code 是設計完成後的下一站,負責把畫面變成真正的程式;反過來,在 Claude Code 裡也能直接請 Claude 做設計,或用 /design 指令。

Claude Design 開放所有方案,Enterprise 自 10 月 15 日預設開啟

Anthropic 的說明頁與功能頁現在都寫 Claude Design 在 Free、Pro、Max、Team、Enterprise 方案皆可使用,而且預設開啟,用量併入方案額度,不另外標價。

Claude Design 產品頁常見問答寫明 Claude Design 包含在含 Free 在內的每一種方案
功能頁的常見問答寫明,Claude Design 與 Slides、Docs 都包含在含 Free 在內的每一種方案(截圖來源:Anthropic)。

開放範圍是後來才放寬的。4 月的發表文章與 7 月的部落格文章寫的是付費方案,較新的說明頁與功能頁才改成所有方案,所以在別處看到「免費版不能用」,可能是沿用較早的說法,實際能不能用,以登入後看到的畫面為準。

各方案的預設開啟狀態與組織管理開關

Free、Pro、Max 這三種個人方案與 Team 都是預設開啟。Enterprise 則是在 2026 年 10 月 15 日起預設開啟,在那之前要由擁有者到 Organization settings > Artifacts 手動打開;功能頁另外註明,啟用 HIPAA 的組織不在預設開啟的範圍內。

管理面有兩個地方要分開看。對話裡的 Design 範本在 Organization settings > Artifacts 設定;獨立版另外有 Organization settings > Claude Design 的啟用開關,兩邊各自管理,開了一邊不會連帶開另一邊。Enterprise 還能用自訂角色,控制誰可以使用獨立版。無論哪個方案,都得先把 Artifacts 需要的程式碼執行開關打開。

獨立網站 claude.ai/design 將於 12 月 14 日關閉,設計系統要提前遷移

Anthropic 的說明頁與功能頁都寫,claude.ai/design 這個獨立版會在 2026 年 12 月 14 日關閉。關閉之前,獨立版裡的專案都還在;設計系統則要在期限前遷移出來,遷移的入口在 Design 分頁的橫幅上。過了 12 月 14 日,跟獨立版有關的網址與設定就不再適用。

Claude Design 的費用包含在 Claude 方案裡

Claude Design 沒有另外標價,用量併入方案的額度。根據 Anthropic 2026 年 10 月的方案頁,Free 是 0 美元;Pro 年繳每月 17 美元(一次付 200 美元),月繳每月 20 美元;Max 每月 100 美元起,用量分成 Pro 的 5 倍與 20 倍兩個級距。價格不含稅。

方案頁也註明價格與方案由 Anthropic 自行調整,所以實際金額以結帳畫面為準。

從對話、Artifacts 分頁或 Claude Code 開啟 Claude Design

三個入口開出來的是同一種畫布,對話在左,成品在右。差別只在你當下人在哪裡,已經在聊天就直接說,想從範本開始就走 Artifacts 分頁,在寫程式就用 Claude Code。

Anthropic 說明頁描述的標準流程有 7 步:開始一個設計、掛上設計系統、補上脈絡、描述要做的東西、在畫布檢視、修改、匯出或分享。

Claude Design 從對話、Artifacts 分頁或 Claude Code 三個入口開出同一種畫布,再依 7 步完成設計
不論從對話、Artifacts 分頁或 Claude Code 開啟,畫面都是對話在左、成品在右,接著照說明頁的 7 步往下走。

先確認程式碼執行與檔案建立功能已開啟

Artifacts 需要打開「Cloud code execution and file creation」這個功能才能運作。Free、Pro、Max 在 Settings > Capabilities 裡開,Team 與 Enterprise 則在 Organization settings > Capabilities,由管理員決定。

這個開關沒開的話,Artifacts 不能用,Design 當然也跟著用不了。團隊成員在自己的設定裡找不到這個開關,通常就是要請管理員到組織設定打開。

在對話裡直接提出需求,或從 Output 選 Design

最直接的做法,是在任何對話裡用文字請 Claude 做一個設計,它會在對話旁邊開出畫布;也可以在訊息框點 Output,選 Design,明確告訴 Claude 這次要的是設計範本。

第一版出來之後,同一個對話就是你的工作現場。想改什麼繼續說,想看另一個版本就再要,所有的往來都留在這個對話裡。

Artifacts 分頁與 Claude Code 的 /design

Claude 側邊欄有一個 Artifacts 分頁,所有做過的成品都收在這裡;從這個分頁也能用範本開新的成品,選 Design 就是開新的設計。

在 Claude Code 裡,可以請 Claude 把一個想法做成設計,或用 /design 在桌面版或終端機裡建立、編輯與同步設計。

在手機 App 提出需求與編輯設計,分享權限要回電腦調整

iOS 與 Android 的 Claude App 可以要求 Claude 做設計,先去忙別的,等它做完再回來,在 Artifacts 分頁以全螢幕檢視並編輯。出門在外想先丟個需求給 Claude,這樣的流程就夠用。

不過分享權限無法在手機上調整,得回到網頁版或桌面版才改得了。

設計系統讓每份成品自動套用品牌規範

設計系統是 Claude Design 裡最影響成品品質的功能。做法是先花一次工夫,把品牌的色彩、字型和元件交給 Claude 整理,之後每份成品都照這套規範走,而且 Claude 出稿之前,會先拿設計系統檢查一遍成品,有偏差先改再給你看。

要特別分清楚的是,設計系統這個功能目前在說明頁仍標示為 beta,列出的方案是 Pro、Max、Team 與 Enterprise;Pro、Max、Team 預設開啟,Enterprise 要由擁有者在 Organization settings > Artifacts 開啟。這和「Design 本身所有方案皆可使用」不是同一件事,免費版不在設計系統列出的方案裡。

起步所需的素材不多,至少備一種就能開始,像程式碼庫或元件庫、能代表視覺識別的簡報或文件,或是 Logo、色票、字型規格這類品牌資產。

Claude Design 設計系統從準備素材、建立、抽出色彩字型元件與版面規律、測試驗證到套用新專案的流程
設計系統至少備一種素材就能建立,抽取結果不像品牌時,補上完成的成品再抽一次。

建立設計系統的三條路徑

依你手上的素材,有三種建立方式:

  1. 在對話裡建立:請 Claude 根據連接的 App、上傳的檔案、Figma 檔、簡報、Logo 與字型來建立,適合以品牌規範為主的設計系統。
  2. 從 Claude Code 建立:如果設計系統已經寫成 React 元件,在 Claude Code 執行 /design-sync,它會直接讀取程式碼裡的 design token 與元件,適合以程式碼為主的產品設計系統。
  3. 從獨立版遷移:在側邊欄的 Design 分頁,按橫幅上的「Migrate team design systems」,每個設計系統會變成一個 artifact,在任何對話與 Claude Code 裡都能使用。

遷移過來的設計系統可能需要整理,這時按橫幅上的「Let Claude clean it up」,Claude 會幫忙整理說明、token 與元件。

Claude 會抽出色彩、字型、元件與版面規律

Claude 會從素材裡抽出四類內容。色彩包含主色、輔色與強調色;字型包含字族、字級與字重;元件是按鈕、卡片、導覽這類會重複出現的介面模式;版面規律則是間距、格線與頁面結構。

抽完之後要自己看一遍。Anthropic 說明頁的建議是開一個測試專案驗證,例如請 Claude 做一個登陸頁、儀表板或一頁式簡介,看看成品像不像你的品牌。

抽取不理想時,補真實成品比補規格有效

如果第一次抽取沒有抓到品牌的感覺,Anthropic 的建議是反覆調整,上傳更多或不同的素材。素材裡最好有完成的成品,例如一個做好的登陸頁或行銷網站,因為成品比單純的規格更能傳達品牌的調性。

在獨立版裡,已經建好的設計系統想修改,可以在 Claude Design 的組織設定裡按 Open,再按 Remix,之後在對話面板請 Claude 動手改。改完可以再用測試專案確認一次。

發佈後的設計系統會套用到組織內新專案

在獨立版裡,把設計系統的 Published 開關打開之後,組織內從 Claude Design 首頁建立的專案就會改用你的設計系統,不再用預設的。在對話範本裡,說明頁同樣寫明新專案會自動承襲組織的設計系統,不需要再逐一設定。

設計系統在 Settings > Design systems 裡管理。有 Claude Design 存取權的成員都能建立與編輯設計系統;Enterprise 管理員則可以限定誰能發佈、設定組織預設,以及刪除設計系統。

提示詞先交代目標、版面、內容與受眾

提示詞怎麼寫,決定第一版有多少能留下來。Anthropic 說明頁的建議是,好的提示詞要涵蓋目標、版面、內容與受眾四件事,資訊不夠時 Claude 也會主動反問。說明頁列出的範例題材有附篩選條件的儀表板、多畫面的手機引導流程、登陸頁、含條件式問題的回饋表單,以及內部營運工具。

除了說明頁,Anthropic 的產品設計師 Nate Parrott 在 2026 年 7 月 24 日的部落格文章裡,也列出了他用 Claude Design 的 10 項做法。兩邊的建議不完全相同,說明頁給的是通用原則,Nate Parrott 分享的則是他自己的工作習慣。

下指令之前先把想法想清楚

Nate Parrott 的第一項做法,是在動手之前先在電腦外把想法想清楚,用口述、手機記筆記或錄語音都可以,再把完整的構想一次交給 Claude。想清楚的內容,剛好就是前面那四件事。

以下用一家虛構公司的活動頁當例子,示範四件事怎麼寫成一則提示詞:

目標:為龐果設計的春季設計講座做一頁報名登陸頁,讓訪客留下姓名與 Email。
版面:單欄長頁,最上方是主視覺與報名按鈕,往下依序是講座內容、講者簡介、報名表單。
內容:講座主題是「小型品牌的視覺一致性」,日期與地點先用假資料,表單欄位只有姓名與 Email。
受眾:經營小型品牌、沒有專職設計師的店主,語氣親切,少用專業術語。Code language: plaintext (plaintext)

目標說明這頁為什麼存在,版面決定畫面的順序,內容給 Claude 可以放進去的材料,受眾則決定語氣與資訊的深淺。四項裡缺哪一項,Claude 就得自己猜哪一項。

字型與色彩不說明,Claude 就套自己偏好的風格

Nate Parrott 指出,沒有任何指示時,Claude 會套用它自己偏好的外觀。想要不同的樣子就要明講,可以直接指定字型與色彩、附上情緒板,或是請 Claude 先提出幾組字型與色彩的搭配讓你挑。

如果同樣的外觀規範每次都得重講,他的建議是把這類重複的工作做成設計系統,也就是上傳品牌檔案與素材,讓 Claude 產生一套設計系統,之後出稿都拿它檢查。

附上截圖、簡報或程式碼庫當參考

Anthropic 說明頁列出可以附上的參考素材,包括截圖、圖片、線框圖、同類產品的範例,或是呈現某種風格的簡報與文件。如果你要做的是既有產品的新畫面,也可以連結程式碼庫,讓 Claude 理解現有的元件與樣式。

Nate Parrott 還提到兩個做法。版面說不清楚時,直接在紙上畫草圖,拍照上傳;設計需要外部資訊時,用連接器與網路搜尋補足。給的脈絡越接近真實情境,第一版離可用就越近。

方向不確定時,一次要多個版本再混搭

兩個說法都有數量建議,但不太一樣。Anthropic 說明頁的建議是,方向不確定時請 Claude 做 2 至 3 個版本,再挑一個往下改。

Nate Parrott 的做法則是一次要 10 個選項。他說多數選項會很普通,但總有一兩個值得用,接著再對 Claude 說類似「我喜歡 B 和一點 D,請給我五個混合版」的話。要幾個版本,看你想收斂得多快。

修改有對話、內嵌評論與畫布編輯三種手段

第一版出來之後,修改就是主要的工作。Anthropic 說明頁把修改分成對話、內嵌評論和畫布上直接編輯三種,並給了一個簡單的分工,元件層級的小修用評論,新增區塊或需要脈絡的變更用對話,視覺上的微調用直接編輯。

選對手段,可以少打很多字。需要 Claude 理解整體意圖時才開口講,只想把某個按鈕挪一格,就直接動手。

整體結構與配色交給對話

對話適合範圍大的修改,像是換整體配色、重新排版面順序、增加面板,或是要求另外幾種版面方案。這類修改牽涉到結構,需要 Claude 掌握整頁的脈絡,用對話最穩。

對話也不只用來修改,說明頁提到可以請 Claude 解釋它的設計決定、提出改進建議,或檢查無障礙問題。想知道某個配色為什麼對比不夠,直接問它即可。

單一元件用內嵌評論點選修改

內嵌評論是在畫布上點選某個元素,直接在它上面留言,例如調整按鈕的內距、把單選鈕改成下拉選單、套用品牌色,或讓某個區塊可以收合。比起在對話框用長長一段文字描述「第三個區塊的右邊那顆按鈕」,點選的方式不會指錯對象。

評論有時不會顯示在頁面上,這時可以到評論檢視查看;如果 Claude 沒有收到,把同樣的意見貼進對話也行。Nate Parrott 還提到,點選元素選擇 comment 後可以用語音輸入,不過這需要裝置本身開啟聽寫功能。

最後的細節直接在畫布上調整

最後的細節可以在畫布上拖曳、縮放、對齊,也能直接改文字與色彩。Anthropic 發表時還提到,畫面上有調整旋鈕,可以即時微調間距、色彩與版面,Claude 也會替專案做出客製的滑桿。現行說明頁沒有逐項說明這些控制項,實際有哪些,以畫面上看到的為準。

Nate Parrott 建議把最後一哩路留給手動調整,他在文章裡說,直接編輯不會耗用 token。畫布由畫板與圖層組成,鍵盤與螢幕閱讀器也能操作大部分的編輯動作;只有新增文字圖層、畫板、形狀或註記需要滑鼠或觸控板,這類新增可以請 Claude 代勞。

Claude Design 沒有版本歷史,換方向前先另存目前版本

Claude Design 目前沒有版本歷史,沒辦法從清單裡挑一個先前的版本還原。所以想試一個完全不同的方向、又不想弄丟現在的版本時,就先請 Claude 把目前的狀態存起來。

做法是對 Claude 說,例如「先把目前的版本存起來,改用完全不同的做法」。Claude 存檔之後會告訴你放在哪裡,之後就能回頭參考先前的版本。Claude Academy 的原型指南另外提到一個做法,從設計標題的選單選 Duplicate,在副本上試新方向,原本那份就不會被動到。

原型從線框圖開始,再接上真實元件

原型是 Claude Design 對設計師與產品經理最有用的地方。Anthropic 在發表時列出的原型用途有互動原型、產品線框圖與視覺稿、設計探索和行銷素材,也包括用程式碼做的前沿原型,可以加入語音、影片、著色器、3D 與內建的 AI。

Anthropic 的 Claude Academy 有一份給產品團隊的原型指南,用一個例子描述從功能概念到實作的流程。產品經理先在對話裡描述功能,例子是一個附篩選與批次操作的通知中心;Claude 依組織的設計系統做出第一版原型,設計師再到畫板上細修;接著把設計分享出去做非同步審查,團隊實際點開原型操作並留下評論;最後由工程師在 Claude Code 開啟這份設計,請 Claude 實作,不必看著截圖從頭再來。

先用線框圖確認頁面結構

外觀還不重要的時候,Nate Parrott 建議先做線框圖。線框圖比較快,也能讓 Claude 專注在高階的結構上,方便用很短的時間試好幾個想法。

結構定下來之後,再逐步補上互動與細節。Anthropic 說明頁的建議也是這個順序,先講核心版面與內容,再加互動,並且說明目標的螢幕尺寸,例如手機、平板或桌面。

連結程式碼庫後,原型沿用現有元件

要讓原型用上真正的元件,Claude Academy 的原型指南給了兩條路。一條是建立設計系統,這是指南推薦的做法;另一條是直接在產品的程式碼庫裡開 Claude Code 做設計,Claude 會讀取程式碼,沿用產品現有的色彩、字型與間距,不需要額外設定。提示詞裡再用名稱指定元件,例如「use the ProductCard component」,Claude 就會沿用,而不是自己畫一個只是看起來相似的版本。

大型程式庫可以直接告訴 Claude,介面元件放在哪個套件或資料夾。指南也提醒,從程式碼同步的設計系統保留的是上次同步時的元件,元件庫發佈新版之後要再同步一次。非常大的程式庫可能造成延遲,說明頁建議改從 Claude Code 連結;要同步設計系統,則在 Claude Code 用 /design-sync。

交給工程之前補齊空白、錯誤與載入狀態

Claude Academy 的建議有三項:清楚命名畫板與元件,因為 Claude Code 會讀取設計裡的這些名稱;做決定的當下就記下來,例如選了分頁而不選側欄,就在畫板上的註記寫明原因,Claude Code 讀得到;以及先請 Claude 補出空白、錯誤與載入狀態,並看看畫面在資料很少、或遠多於預期時長什麼樣子。

Academy 的說法是,這幾個步驟能讓設計更容易拿來實作。原型多半只呈現資料正常出現的樣子,這幾種狀態若沒先補上,工程師開工時可能得自己推想它們該長什麼樣,所以趁交接前補齊,通常比事後再來回確認省事。

簡報範本已獨立成 Claude Slides

許多人原本把 Claude Design 當成做簡報的工具,現在簡報已經獨立成 Claude Slides,Anthropic 的管理員指南寫明,簡報現在有自己的工具。依功能頁的說明,Slides 與 Design、Docs 一樣,包含在每個方案裡。

所以現在要做簡報,該先從 Slides 範本進去,而不是把簡報當成 Design 的功能。Design 的角色是視覺版面與原型,簡報格式只是它的匯出選項之一。Claude Academy 的簡報指南現在也改以 Claude Slides 示範,網路上較早以 Claude Design 示範的簡報教學,描述的是 Design 專案的做法,不等於 Slides 範本的功能。

Slides 範本能直接編輯、播放與匯出

Slides 範本可以從你的筆記、報告,或對話裡已有的內容做出簡報。每一張投影片都能直接編輯,不用離開 Claude 就能播放,也能匯出成 PowerPoint 或 PDF;連接 Google Drive 之後,還能直接送到 Google Slides 變成可編輯的檔案。

Claude Academy 的簡報指南建議,提出需求時先說明簡報的用途與讀者,修改時用投影片的編號或標題指定範圍,例如請它把文字太多的第 4 張改成一張圖表加一句重點。

入口和 Design 一樣,可以在任何對話請 Claude 做簡報,或在訊息框的 Output 選單挑範本,也可以從 Artifacts 分頁的範本開始。

Design 專案同樣可以匯出 PPTX 與 Google Slides

用 Design 做出的版面如果要放進簡報軟體,Export 選單裡有 PPTX 與 Google Slides 可選,另外還有 PDF、.zip 和獨立 HTML。

如果想要的是能播放、能逐張修改的簡報,卻拿到一組沒有 Present 按鈕的畫板,代表做出來的是 Design。Claude Academy 的原型指南建議,這時直接請 Claude 做成 slides 或 deck,它可以在同一個對話裡把設計轉成 Slides 簡報。

成品能匯出、分享,也能交給 Claude Code

做完之後,通常還有三件事:把成品匯出成檔案、分享給別人看,以及交給 Claude Code 變成程式。Anthropic 說明頁把這三件事都放在 Export 與 Share 兩個按鈕後面,Export 位在專案的右上角。

Claude Design 的 Export 提供 5 種匯出格式、15 個 Send to 外部工具與兩種交給 Claude Code 的方式,Share 預設為私人
匯出檔案、送到其他工具與交給 Claude Code 都從 Export 開始,誰能開啟成品則另外在 Share 設定。

Export 按鈕提供的 5 種匯出格式

專案右上角的 Export 可以匯出 .zip、PDF、PPTX,也能送到 Google Slides,或匯出成獨立 HTML。要給客戶看的靜態稿用 PDF,要放進簡報的用 PPTX 或 Google Slides,要給工程師的用 .zip 或 HTML。

互動式原型匯成靜態檔之後,能保留多少互動,Anthropic 的說明頁沒有逐項說明。成品的重點若在互動,匯出之後最好自己打開確認一遍。

Send to 清單列出的 15 個外部工具

Export 裡還有一份 Send to 清單,可以把成品直接送到其他工具。2026 年 10 月的說明頁列有 Adobe Experience Manager、Adobe for Creativity、Adobe Journey Optimizer、Base44、Canva、Gamma、HubSpot、Hyperframes、Lovable、Miro、Netlify、Replit、v0、Vercel 和 Wix。

這份名單只說明成品能送去哪裡,各工具適不適合,取決於你原本的工作流程,名單也可能再調整。

成品的分享權限預設為私人

新做好的成品預設是私人的,按 Share 才能設定誰可以開啟,以及對方只能檢視、可以評論,或可以編輯。

誰能開啟依方案而不同。依 Anthropic 的分享說明頁,Pro 與 Max 可以選只有自己或任何有連結的人,也能用 Email 邀請特定的人(beta);Team 與 Enterprise 的成品預設只留在組織內,可以選只限受邀者或組織內所有人,要開放給任何有連結的人,得先由擁有者開啟對外分享。被分享的人都需要 Claude 帳號。擁有編輯權限的人可以同時在畫布上作業,即時看到彼此的修改。管理員指南則補充,預覽連結用簽章令牌,每次有人開啟預覽都會重新比對分享權限,所以移除某人的權限會立刻生效。

交給 Claude Code 的兩種接法

從 Export 選擇「Hand off to Claude Code」,有兩種接法,一種是送到本機的 coding agent,另一種是送到 Claude Code Web。Anthropic 在發表文章裡說明,設計可以動工時,Claude 會把所有內容打包成一份交接包,只要一道指令就能交給 Claude Code。Claude Academy 的原型指南則補充另一種做法,把設計的編輯權限給工程師,對方在專案的 Claude Code 裡貼上設計連結,請 Claude 實作即可;如果設計本來就是在 Claude Code 做的,就留在同一個工作階段直接請 Claude 開始寫。

Claude Code 收到之後,是接著既有的設計往下做,而不是從一張截圖重新開始。如果有連結程式碼庫,它也能沿用同樣的元件與模式。反方向則可以用 /design-sync 把設計系統同步進 Claude Design;在 Claude Code 裡用 /design,還能把設計匯入程式碼庫,或把程式碼匯出成可運作的原型。

Claude Design 的共用額度與 9 項已知限制

使用上最容易碰到的兩件事,是額度和功能邊界。額度是 Claude 全部功能共用的,邊界則是說明頁坦白列出的幾項限制。說明頁只描述規則,沒有公布實際消耗量的數字。

Design 用量計入 Claude 全部功能共用的額度池

根據 Anthropic 的說明頁,Design 的用量和所有 Claude 的工作共用同一個額度池,包括 Claude Code,沒有專屬於 Design 的額度。Claude Design 先前有自己的每週額度,現在已經改為計入方案的共用額度。

大型程式庫與反覆修改會消耗較多用量。達到上限之後,Design 要等額度重置才能再用;已開啟用量點數(usage credits)的使用者,則可以在方案內含的額度用完後繼續使用。

Anthropic 說明頁列出的 9 項已知限制

說明頁列出的已知限制共有 9 項:

  1. 內嵌評論有時不會顯示在頁面上,但可以在評論檢視裡看到。
  2. 非常大的程式庫可能造成延遲或瀏覽器問題,建議改從 Claude Code 連結;同步設計系統用 Claude Code 的 /design-sync。
  3. 出現「chat upstream error」時,在同一個專案裡開一個新的對話分頁。
  4. 手機 App 不能改分享設定,要回網頁或桌面版。
  5. 兩人以上同時編輯的功能還很陽春,可能不穩定。
  6. 設計系統的匯入品質取決於來源素材,雜亂的程式碼庫或不完整的檔案,問題會一路帶進成品。
  7. 目前沒有版本歷史。
  8. 在屬性面板的圖層清單裡按 Delete、Backspace 或剪下,作用的是畫布上已選取的物件,不是游標所在的那一列,要先在那一列按 Return。
  9. 用鍵盤無法在畫布上新增文字圖層、畫板、形狀或註記,需要滑鼠或觸控板,或請 Claude 代為加上。
Claude Design 說明頁列出的 9 項已知限制與各自的對應做法
9 項已知限制多半有對應做法,例如沒有版本歷史時,換方向前先請 Claude 存下目前的版本(資料來源:Anthropic)。

這些限制是 Anthropic 在 2026 年 10 月的說明頁所列,Claude Design 仍在持續更新,哪些限制已經改善,以登入後看到的實際介面為準。

Claude Design 這半年的變動,讓入口、方案與簡報的歸屬都和早期的說法不同,不過做事的順序沒變。先確認登入後看得到的入口,再備好一份能代表品牌的素材,用目標、版面、內容與受眾寫出第一則提示詞,剩下的修改交給評論與畫布。如果手上還有獨立版的專案和設計系統,記得在 2026 年 12 月 14 日之前遷移出來,獨立版關閉之後,入口就以 Claude 對話、Artifacts 分頁與 Claude Code 為主。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

Claude Design 能做出哪些成品?

Claude Design 能依文字描述,在對話旁的畫布上做出設計稿、可互動的原型與單頁文件,再用對話、評論和拖曳修改。畫布由畫板與圖層組成,文字、形狀、圖片都能單獨選取,和直接生成一張圖片不同。

Claude Design 免費版可以使用嗎?

Claude Design 依現行說明頁,在 Free、Pro、Max、Team、Enterprise 方案皆可使用,用量併入方案額度。設計系統功能則仍是 beta,只列 Pro、Max、Team 與 Enterprise,免費版不在其中。

Claude Design 現在要從哪裡開啟?

Claude Design 可在任何對話直接請 Claude 做設計,或在訊息框選 Output > Design,也能從 Artifacts 分頁挑 Design 範本,Claude Code 裡則用 /design 指令。

Claude Design 的設計系統要準備哪些素材?

Claude Design 的設計系統至少備一種素材就能開始,例如程式碼庫或元件庫、能代表視覺識別的簡報或文件,或 Logo、色票、字型規格。第一次抽取不像品牌時,補上做好的登陸頁這類完成成品,比補規格更有效。

Claude Design 的提示詞要交代哪些內容?

Claude Design 的提示詞要涵蓋目標、版面、內容與受眾四件事,缺哪一項 Claude 就得自己猜,資訊不夠時它也會主動反問。方向還不確定時,可以請 Claude 一次做 2 至 3 個版本,再挑一個往下改。

Claude Design 的修改方式有哪幾種?

Claude Design 的修改分成對話、內嵌評論與畫布上直接編輯三種。換整體配色或版面結構用對話,單一元件的小修點選後留評論,最後的拖曳、對齊與改字直接在畫布上動手,Nate Parrott 提到直接編輯不會耗用 token。

Claude Design 有版本歷史可以還原嗎?

Claude Design 目前沒有版本歷史,無法從清單挑一個先前的版本還原。想試完全不同的方向時,先對 Claude 說把目前的版本存起來再改,Claude 存檔後會告訴你放在哪裡,之後就能回頭參考。

Claude Design 的成品能匯出成哪些格式?

Claude Design 的 Export 可匯出 .zip、PDF、PPTX 與獨立 HTML,也能送到 Google Slides。交給工程時選 Hand off to Claude Code,由 Claude Code 接著往下做。

Claude Design 的用量會另外計算嗎?

Claude Design 沒有專屬額度,用量和 Claude Code 在內的所有 Claude 工作共用同一個額度池。大型程式庫與反覆修改消耗較多,達到上限要等額度重置,已開啟用量點數的使用者則能在內含額度用完後繼續使用。

資料來源
  1. Introducing Claude Design by Anthropic Labs — Anthropic
  2. Get started with Claude Design — Anthropic
  3. What are artifacts and how do I use them? — Anthropic
  4. Claude Design 產品頁(方案開放範圍與預設開啟時程) — Anthropic
  5. Set up your design system in Claude Design — Anthropic
  6. Claude Design admin guide for Team and Enterprise plans — Anthropic
  7. Share artifacts — Anthropic
  8. Plans & pricing(2026 年 10 月) — Anthropic
  9. How the product designer who built Claude Design uses it — Anthropic(Nate Parrott)
  10. Using Claude for prototypes and UX — Claude Academy
  11. Making slides and presentations with Claude — Claude Academy