只做一次的決策

只做一次的決策

改一個標題樣式，為什麼會波及五十個畫面？

因為設計系統是一組你只做一次的決策。字體、色彩這類決策，會出現在每個用這套系統做出來的畫面上。

系統分三層：基礎是最底層的決策，元件由基礎組成，頁面再由元件組合而成。

所以頁面會繼承上游的所有決策。

一個按鈕裡的三個決策

基礎是最底層的決策：色彩角色、字級系統、間距級距、圓角、圖示風格。

元件把這些基礎包裝成可重複使用的零件，例如按鈕、卡片、輸入框。

來看 Fern，一款給第一次在公寓種植物的人用的植物照護 App。

它的按鈕元件使用品牌主色、內文字級和標準圓角。一個按鈕，就承載了三個基礎決策。

注意按鈕的顏色、文字大小和圓角各自來自一個基礎決策，元件只是把它們組合起來。

分辨基礎和元件

判斷方法很簡單：問自己，它是「一個決策」，還是「一個零件」？

色彩角色、間距這類單一決策是基礎。按鈕、卡片這類可以直接放上畫面的東西是元件。

常見誤解是把設計系統當成一份風格指南文件，或一張元件貼紙表。

元件表只是其中一層。底下還有一整層基礎決策在支撐它。

改一個基礎，處處更新

元件繼承基礎，頁面繼承元件。所以修改一個基礎，會影響每個用到它的元件和頁面。

把 Fern 的主色從暗淡的綠換成更飽滿的綠。每個頁面上的按鈕、連結、焦點框和強調色會同時更新。

字級也一樣。內文從 15 像素改成 16 像素，卡片、列表、表單和新手引導裡的文字會一起變大。

改元件變體，只動局部

並非每個修改都會傳遍全部畫面。

如果改的是一個元件變體，影響範圍只到用那個變體的畫面。例如調整 Fern「小提示」卡片的內距，只有顯示小提示的畫面會變。

常見誤解：想改變所有頁面的樣子，就去一頁一頁編輯頁面。

正確做法是往上游找。改基礎或元件，讓頁面自動繼承。

系統是頁面的天花板

當 AI 工具從設計系統產生頁面時，它會自動套用系統裡的決策。

所以系統的品質，就是每個頁面品質的天花板。

風格指南描述決策；設計系統是那些決策可重複使用的實作。一堆好看的截圖，若無法用來一致地建出新畫面，就不算設計系統。

系統在預覽裡好看，也不代表完成。要看新頁面建在它上面時表現如何。

下次改畫面前先追蹤

下次要調整畫面，先別急著打開頁面。

先判斷這個決策屬於哪一層，再追蹤它會流到哪裡。

這樣你能預測改動範圍，也能在交給 Claude Code 或 Cursor 之前，先把基礎做好。

在設計系統中，按鈕是由色彩、字級和圓角等基礎組成的可重複使用零件，因此按鈕屬於元件。

• 正確
• 不正確

答案: 正確

正確。基礎是單一設計決策，例如色彩角色或圓角；元件則把多個基礎組合成可放到畫面上的零件。

Fern 將內文基礎從 15 像素改成 16 像素。哪些地方最可能一起受到影響？

• 所有使用這個內文字級的卡片、列表、表單和新手引導
• 只有目前開啟的那一個頁面
• 只有使用小提示變體的畫面
• 只有設計系統的風格指南文字

答案: 所有使用這個內文字級的卡片、列表、表單和新手引導

內文字級是基礎決策。卡片、列表、表單和新手引導若使用這個基礎，就會透過元件和頁面繼承新的字級。逐頁修改不是正確做法。

你只想調整 Fern「小提示」卡片的內距，最適合修改哪一層？

• 小提示卡片的元件變體
• 整個系統的主色基礎
• 所有頁面的個別畫面
• 整份風格指南文件

答案: 小提示卡片的元件變體

小提示卡片的內距屬於特定元件變體的設定。修改它只會影響使用這個變體的畫面，不會讓所有頁面一起改變。若修改基礎，影響範圍通常會更廣。