今天要搞懂 2026 年最被討論的設計基礎建設：設計系統（Design System）與設計代幣（Design Tokens）。重點不是「畫一套漂亮元件」，而是把顏色、間距、字級、陰影、動效這些最小的設計決策，抽成一組可被設計工具、前端程式、甚至 AI 同時讀取的「變數」，讓一個品牌在十幾個平台上長得一致、改一次就全站同步。學會這套思維，你做的設計才開始具備「規模化」的能力。
📖 學（核心）
先講 token 是什麼。 Design Token（設計代幣）就是把一個視覺決策變成一個有名字的變數。例如你不再直接寫 #1A73E8，而是寫 color.brand.primary；不再隨手填 16px，而是用 spacing.md。這些變數就是設計與程式之間的共同語言。2026 年最大的變化，是業界已經放棄各家自創的命名規則，全面往 DTCG（Design Tokens Community Group）標準 靠攏——這是一套用 JSON 描述 token 的開放格式，讓 Figma、程式碼、各種平台之間可以互通，不再被單一工具綁死。
重點在「三層架構」，這是現代設計系統的骨架。 Token 不是一張色票就結束，而是分成三層，層層引用：
- Primitive（原始層／全域 token）：最底層的原始值，例如
blue.500 = #1A73E8、size.4 = 16px。它只描述「這是什麼值」，不帶任何用途語意。 - Semantic（語意層）：描述「用在哪裡」，引用原始層。例如
color.action.primary指向blue.500、color.text.default指向gray.900。設計師和工程師日常其實是在用這一層。 - Component（元件層）：針對特定元件的微調，引用語意層。例如
button.background = color.action.primary。
這樣分層的好處很實際：當你要做深色模式，你只需要把語意層重新指向不同的原始值（color.text.default 在深色時指向 gray.50），元件層完全不用動。要做多品牌也一樣——核心是同一套 primitive，子品牌只是把語意層智慧地覆寫掉。2026 的企業級系統幾乎都靠這招處理跨品牌、跨平台的複雜度，因為「一套系統打天下」早就變成瓶頸。
設計系統不再只是「文件」，而是「會執行規則的治理平台」。 過去 Storybook、Figma library 像是給人看的參考書；2026 的趨勢是它要能主動強制規則（enforceable governance）。也就是說，當有人——包含 AI 產生的程式碼——用了系統外的顏色或間距，系統能在 lint、CI 階段就擋下來。文件也從靜態頁面變成「機器可讀的智慧中樞」，因為 AI agent 現在會直接讀你的 token 與元件規格去產生功能，前提是這些定義要結構化、語意清楚，AI 才能「在品牌內、在系統內」生成。
最後是工作流：設計也有 CI/CD 了。 一個成熟流程長這樣——設計師在 Figma 改了一個顏色 token，觸發 Continuous Delivery 管線：自動在 GitHub 開一個 PR、更新 Storybook 文件、再到 Slack 通知相關的人。設計變更從「口頭交接」變成「版本控管的程式碼」。這也是為什麼無障礙（a11y）在 2026 被直接內建進 token 層——配合歐盟 European Accessibility Act 這類法規，對比度、可讀性這些檢查在元件還在構想階段就被把關，而不是上線後才補。
🧠 記
口訣：原語元、改一次、能執行。
- 原語元 = token 三層架構：原始層（raw 值）→ 語意層（用途）→ 元件層（微調）。日常都用語意層。
- 改一次 = 改語意層的指向，深色模式／多品牌一次同步，元件層不動。
- 能執行 = 2026 的系統會「強制規則」，不只是給人看的文件；連 AI 生成都要守規則。
- 標準記一個縮寫：DTCG（開放 JSON token 標準，跨工具互通）。
✍️ 實踐
今天挑一個你手邊的小介面（一張卡片或一顆按鈕都行），做這三件事，可衡量：
- 盤點硬編碼值：把這個元件用到的所有顏色、間距、字級、圓角列出來，數一數有幾個「寫死的值」。目標是把這份清單變成 token 名稱（至少轉出 5 個語意層 token，例如
color.text.default、spacing.md）。 - 建一張對照表：用兩欄寫下「primitive → semantic」的對應（例如
gray.900 → color.text.default）。完成至少 5 組。 - 驗收深色模式：只改語意層的指向，寫出深色模式下這 5 個 token 各自應指向哪個原始值。如果你發現元件層需要跟著改，代表你的分層還不夠乾淨——這就是今天的學習訊號。
衡量標準：你的元件裡「寫死的值」歸零，全部換成 token 名稱。
🔗 延伸學習
- Design Tokens – Material Design 3：Google 官方對 token 三層的權威說明。
- Design tokens explained（Contentful）：從零建立 token 系統的實作指南。
- The Future of Enterprise Design Systems: 2026 Trends（Supernova）：2026 企業級系統與 DTCG、多品牌趨勢。
- Design Tokens in 2026: Beyond Colors and Spacing：token 在動效、語意層上的進階用法。
💬 想深入？複製下面這段到 AI（ChatGPT、Claude…），再打上你的問題
你是我的「UIUX」學習教練。我今天在學的主題是「設計系統與設計代幣（Design System & Design Tokens）」，重點包括：token 三層架構（原始／語意／元件）、DTCG 開放標準、用語意層一次切換深色模式與多品牌、設計系統作為可強制規則的治理平台。請用淺白、可操作的方式回答我接下來的問題，需要時給例子和步驟。我的問題是：
↑ 複製整段貼到 AI，最後接上你的問題即可。