【2026 最新】Claude Design Systems 怎麼用？繁中品牌規則、三頁原型與改版驗收教學

你請 Claude 做了首頁，覺得很好看；接著做方案頁，按鈕忽然換色，再做報名頁，中文字體和間距又變了。Claude Design Systems 要解的，正是每開一頁就重新交代品牌的麻煩。可是，把規則存進去，和作品真的照做，仍是兩件要分開檢查的事。

這篇寫給沒有設計系統經驗、希望做出繁體中文原型的讀者。我們以虛構品牌「山間學堂」整理一份最小品牌規則，接著安排首頁、方案頁、報名頁的對照練習。本文依官方文件提供操作與驗收方法，未登入帳號完成三頁生成，因此沒有比較成績或實測截圖；你會得到可複製的材料、提示與檢查單。

先說結論：共用規則＋正確選用＋跨頁驗收

一致的三頁原型＝共用規則＋正確選用＋跨頁驗收。 把設計系統想成連鎖店的工作手冊：杯子顏色、菜單字體與服務方式寫在同一本，分店仍要逐間檢查。規則給方向，成品才告訴你哪條規則真正落地。

截至 2026 年 11 月 4 日，官方設定說明列出 Design systems 仍為 beta，提供給 Pro、Max、Ultra、Team、Enterprise。Enterprise 預設關閉，需由擁有者在 Organization settings > Artifacts 開啟。Claude Design 可用方案與 Design systems 可用方案不同：Design 入門文件列出的 Design 本身也包含 Free，別因為能做原型就推論帳號具有共享設計系統。

一、Claude Design Systems 先準備五個零件

設計系統不是一張漂亮參考圖。參考圖告訴你「像什麼」，規則要再說清楚「哪裡用、什麼時候換」。這裡的 token，可以理解為有名字的設計數值：例如把一個色碼叫作「主要操作色」，以後討論的是用途，而非各自挑一個差不多的橘色。

①「顏料罐」：色彩要有用途

怕三頁各用一種主色？先把背景、文字、主要操作與錯誤狀態分開。山間學堂使用暖白背景 #FAF7F2、深色文字 #202722、深綠主要按鈕 #21513F、珊瑚裝飾 #D97757。驗收時追主要按鈕是否都用深綠，別只問畫面有沒有綠色。這些是本篇自訂練習值。

②「同一本字帖」：繁中要驗真字

擔心英文字看起來對，中文卻像另一個網站？準備可使用的繁中字型檔與字重，另留一行混合文字，例如「週末山林課程・NT$1,280・體驗預約」。從標題到按鈕逐一看繁中字形、數字、標點與換行。字體名稱相同還要檢查實際使用的字型，不靠肉眼猜測。

③「尺」：間距先少而明確

卡片每頁鬆緊不同？先限定 8／16／24／32／48 像素五階間距，卡片內距用 24、手機左右邊界用 16。它們是本練習的刻度，不是官方建議。驗收看同一層級是否沿用同一刻度，內容需要例外時，把原因記回規則。

④「積木」：先做三個基本元件

每個按鈕都重新畫，細節容易漂移。先定義 PrimaryButton、CourseCard、FormField：主要按鈕、課程卡片、表單欄位。規則要寫文字長了怎麼換行、欄位錯誤如何顯示、卡片圖片缺失時留什麼位置，才有跨頁可重用的行為。

⑤「使用說明」：寫用途與禁用條件

同一種珊瑚色被拿去當內文，畫面就可能失衡。用白話寫：「珊瑚色只作裝飾；正文用深色；一個區塊只保留一個主要操作。」Claude Academy 設計系統教學說明元件與色彩可附 usage notes，讓後續使用也讀到規則。把單一元件的細節留在該元件筆記，總覽只留共同原則。

字型可從 Noto CJK 官方專案尋找繁體中文版本與下載指引；選定後核對該檔案的授權與字重。品牌若有商用字型，先確認可否上傳到這個服務。本練習用假品牌與假課程，不需要上傳客戶名單、付款資料或未公開產品畫面。

二、Claude Design Systems 怎麼建立？分清素材與程式庫

先選最接近現有材料的一條路。只有品牌 PDF、色票與字型，就從對話建立；已有產品元件庫，才考慮同步程式碼。官方設定說明把兩者分別定位為品牌素材擷取與既有 React 元件同步。沒有程式庫的新手，可以先完成第一條。

路線 A：從自己的品牌素材開始

在對話的 ＋ > Design system > New design system 選 Using Claude，依提示加入檔案。管理入口可先找 Settings > Capabilities > Design systems > Manage，若沒有該項，再找 Settings > Design systems。前者是目前 Help Center 的指引；Claude Academy 設計系統教學也列出後者與對話入口。

把以下內容存成自己的品牌說明，和有權使用的字型、完成版範例一起加入。這是可供 Claude 整理的文字材料，並非必須符合的匯入檔案格式。

品牌：山間學堂（虛構練習品牌）
用途：繁中課程網站，讓新訪客了解內容並預約體驗。
背景 #FAF7F2；正文 #202722；主要操作 #21513F；裝飾 #D97757。
字型：使用我附上的繁中字型檔，列出實際名稱與字重；缺檔先指出。
字級：桌機標題 48px、手機標題 32px、正文 18px、行高 1.6。
間距：8、16、24、32、48px；卡片內距 24px；手機邊界 16px。
元件：PrimaryButton、CourseCard、FormField；主要按鈕圓角 12px。
Usage notes：每區塊一個主要操作；珊瑚色不作正文；
表單保留可見標籤，錯誤需文字說明；長標題可換行，不裁掉文字。
先整理最小設計系統，列出材料沒有定義的選擇；不要自行補品牌故事。

建立後先讀回數值，再看字型與元件。請它找出不一致處，例如規則寫卡片內距 24，元件卻是 20。若你還沒決定圓角，就補一個明確選擇再存；不要讓三頁分別回答同一個未決問題。

路線 B：從已有的產品元件庫同步

若品牌已存在 React 元件，官方設定文件提供 Claude Code 的 /design-sync。先指定真正的介面目錄，說明要帶哪些 token 與元件；閱讀執行需求後，再允許需要的建置步驟。這條路的目標是帶入既有規格，先在獨立分支或副本檢查差異，並保留同步日期。

同步後，拿現有 CourseCard 與匯入版本對照屬性、字重與狀態。若程式庫並沒有本篇三個元件，就用實際名稱改寫練習；不要因為提示裡叫這個名字，就把重新畫出的近似卡片當成原元件。

三、同一份需求做三頁：先寫考卷，再生成

現在才開始做作品。三頁要共用品牌，但各有不同壓力：首頁考資訊層次，方案頁考重複元件，報名頁考表單與錯誤狀態。先把下面需求存一份，兩組都照貼；文字、素材與頁面順序保持相同。

製作「山間學堂」可點擊繁中原型，三個畫板：
首頁：課程介紹、兩張課程卡、主要動作「查看方案」。
方案頁：入門與進階兩個方案，沿用同款課程卡，主要動作「預約體驗」。
報名頁：姓名、電子郵件、課程選擇、送出；另顯示空白與錯誤狀態。
動線：首頁 → 方案 → 報名 → 本機示意完成狀態，保留返回入口。
只用假資料，不呼叫真實服務，不收款，不提交到外部。
每頁提供 1440px 與 390px 寬度的設計；窄版避免水平溢出。
使用所選設計系統的規則與既有元件；若未選，採預設。
回報每頁用到的元件名稱、待確認項目與可操作路徑。

這裡的 1440 與 390 是本練習選的檢查寬度，不是產品的支援範圍保證。依官方原型教學，可要求多畫板與可點擊流程；在畫板上用 Play 操作。若成品只是靜態畫面，就明確要求補上導覽及示意送出行為。

• A 組：另開乾淨對話，在設計系統選單清除所有勾選，確認訊息框下方顯示 No design system。不附品牌材料，貼相同需求。
• B 組：再開乾淨對話，只選山間學堂，貼同一需求。不要把 A 組作品帶進來，也不要中途再加美學 Skill。
• 保留證據：記下日期、帳號方案、當時可見的模型設定、設計系統名稱與規則版本；每頁保存同寬截圖、原型與提示。A／B 各三頁是一次練習，不足以推出整個產品的成功率。

A 組偶然也用深綠，不代表讀到了品牌；B 組按鈕相似，也未必用到指定元件。官方原型教學建議用元件名稱指明需求；驗收時再選取物件核對元件來源或檢查匯出內容。品牌符合度與「真的重用元件」分開記，才不會把外觀相近當成同一件事。

四、用四把尺驗收，再改一條規則

不要只替整張畫面打「好看／不好看」。對每一頁各留四行：字體、色彩、元件、手機版。每行寫「預期值、實際值、通過／失敗／未確認、證據位置」。能讀到實際樣式就記數值，只有截圖能看時，把色碼或字型欄留作未確認；抗鋸齒像素不能替代原始色票。

• 字體：用同一句繁中混排樣本查看實際字型、粗細、缺字與換行。別只驗英文字。
• 色彩：三頁主要按鈕是否沿用指定值？錯誤文字是否被裝飾色取代？
• 元件：三頁同款按鈕的內距與狀態是否一致？課程卡長標題、表單錯誤是否依規則呈現？
• 手機版：390px 下逐頁捲到底，查看裁切、橫向捲動、點擊目標與返回路徑；再用鍵盤試標籤、焦點與送出。

接著做一個看得出效果的改動：把主要按鈕圓角從 12 改成 4 像素，其他值保留。先保存修改前的規則與作品，再更新設計系統，建立一份新的方案頁；另複製舊方案頁，明確要求更新到新的設計系統後比較。這樣能分辨規則儲存、新作品套用，以及舊作品更新三個環節。

Claude Academy 設計系統教學指出，既有設計各自保留建立時的設計系統副本，需要請 Claude 更新。因此，舊頁仍是圓角 12，不能單憑這點認定設定失敗。先查新頁是否為 4，再查舊頁是否確實執行更新；若文字、顏色也一起變了，記成額外偏差，回到本輪只改圓角的範圍。

本練習的通過條件可以訂得直接：三頁都滿足四類檢查、主要動線可走完、規則改動在指定作品出現。任何一項未確認，就留下待查證據；不必硬湊總分。A 組與 B 組若都通過，只能說這次任務兩者都符合你的規格，不能反推設計系統沒有價值。

五、字型、權限與舊版遷移：先找對問題

字型被替換時，先查看 Typography 是否有真正的檔案。Claude Academy 設計系統教學明確指出，只有字型名稱而缺字型檔，Claude 無法使用該字型。接著再查檔案是否包含繁中文字形、所需字重與使用權；若先用系統替代字型，將它記成這輪的替代條件，避免當成品牌字型已驗收。

團隊先用個人測試作品確認規則，再分享給成員，最後才考慮組織預設。官方管理指引建議分階段導入並驗證品牌一致性。預設會影響後續創作，先確定用途與維護者，比一次分享給所有人更容易找回問題來源。

截至 2026 年 11 月 4 日，官方遷移說明公告獨立站 claude.ai/design 將於 2026 年 12 月 14 日 關閉並轉為唯讀。遷移入口與可移動項目正在分批提供；部分工作區會看到 Move team design systems，取得新版移動功能後則與專案一起移動。先讀當次搬移摘要，保存需要的檔案與對話，搬完再跑三頁檢查。聊天與留言不隨作品搬移，舊公開連結在獨立站關閉後也將失效。

不要為了照教學而刪除已搬好的設計系統、也不要把舊版 Published 開關套到新版分享流程。先判斷自己在獨立站還是對話內 Artifacts，核對畫面上的分享對象與預設狀態，再做下一個動作。

常見問題：八個先講答案的判斷

1. Free 能用 Claude Design Systems 嗎？

目前官方方案清單未包含 Free。Design 本身包含 Free，Design systems 則列在上述付費方案的 beta；先分清兩個功能。

2. 不會寫程式也能建立嗎？

可以。先用品牌說明、字型與完成版素材開始；已有元件庫時再走同步路線。

3. 上傳色票後，三頁就一定一致嗎？

仍要逐頁驗收。把用途、元件狀態與手機排版列成清單，檢查實際輸出。

4. 為什麼字型名稱對了，中文看起來不同？

先查字型檔。再核對繁中字形、字重與實際使用字型；名稱只是檢查起點。

5. 改 usage note 和修改當前作品一樣嗎？

作用範圍不同。規則筆記供後續使用；當前作品改稿後，也要確認共用規則是否需要同步調整。

6. 已有的三頁會自動換成新規則嗎？

先明確要求更新。既有作品保留建立時的副本，新頁與舊頁分開驗，才能定位差異。

7. 三頁 A／B 比較能證明誰比較好嗎？

只能檢查這次輸出。要估計穩定性，還要重複生成、保留失敗案例並固定評分方式。

8. 可以直接拿原型收報名與付款嗎？

本練習只做假資料與示意完成狀態。要接真實服務，另外實作與驗收資料處理、身分驗證和付款流程。

給新手的三個重點

• 先做小：五類規則、三個元件，讓每一條都有可檢查的用途。
• 先選對：生成前確認所選設計系統；測對照組時清除選擇。
• 先留證據：三頁逐項檢查，改一條規則後，分開驗新作品與舊作品。

如果想繼續處理網站設計判斷，可以接著讀 Hallmark 設計流程；若要比較額外設計規則的用途，參考 Taste Skill 與受控比較方法。它們補的是設計判斷與工作方式，這篇則先把你的品牌變成可重用規則。