Design System 設計系統

一套統一的顏色、字體、元件、間距與互動規則。

先用一句話理解

一套統一的顏色、字體、元件、間距與互動規則。

打個比方

像品牌裝潢手冊，讓每間分店看起來一致。

什麼時候會遇到

頁面變多、多人設計開發、需要一致品牌與可維護 UI 時。

再往深一點看

Design System（設計系統）是把 UI 的規格——主色、字體階層、間距單位、按鈕樣式、表單元件、動畫時間——集中定義成一份可共用的規則集，設計師在 Figma 引用它，工程師在程式碼裡實作它。它解決的問題是「多人協作下 UI 越來越不一致」：沒有設計系統時，第一頁的按鈕是藍色圓角，第五頁的按鈕是深藍方角，三個月後整個產品看起來像不同人做的。Design system 把 component 和視覺規格連結起來，一旦主色改了，Figma 裡的設計和程式碼裡的 component 可以同步更新。早期小專案可以直接用 shadcn/ui 或 Tailwind 的設計語言當起點，不一定要從零建立。

舉個例子

你用 shadcn/ui 做一個 SaaS 後台：它內建了按鈕、輸入框、卡片、對話框的 component，顏色和間距都用 CSS 變數統一管理。日後要改品牌主色，只需要改 globals.css 裡的幾個變數，全站所有 component 自動更新，不用一個頁面一個頁面去改。

常見誤解

- 每新增一個頁面就自己決定顏色、間距和按鈕樣式，三個月後產品有五種藍色、三種按鈕大小、四種卡片 padding，視覺一致性全無。
- Figma 裡的設計規格和程式碼裡的實作脫節——設計師改了按鈕圓角，工程師不知道，程式碼沒跟著改，導致設計稿和實際畫面永遠有落差。
- 太早建立過度複雜的設計系統，花了大量時間設計規格，但產品本身還在驗證方向，設計一改規格又要全部更新，本末倒置。