視覺樣式詞條 3-26

設計權杖Design Token

也常叫做：設計權杖、設計變數、Design Token

你可能會這樣說

想把主色從藍改成綠，結果全站有幾十處寫死的地方要一一修改，改完還到處色差，之後每次調整都像在還債。

設計權杖是把色彩、字級、間距這些決策取成變數：主色叫 primary、中等間距叫 spacing-md，全站都引用同一份。要改風格時動一個源頭，整站同步更新。

它最大的價值是一致性：出現過的顏色就那幾種、間距就那幾級，網站自然有系統感，而不是到處隨手抓的顏色。

跟 AI 開新專案時先說「顏色與間距請集中定義成變數」，之後的調整都會輕鬆很多。

同一個變數

主色變數圓角變數

兩張卡片都「引用」同一組變數：改一個地方，全站連動——這就是設計權杖，不用再一頁一頁改。

圖 3-26　換一個主色、調一個圓角，兩張卡片同時換裝——這就是權杖的連動。

中文就可以

請把全站的視覺決策整理成設計權杖：
色彩定義 primary、surface、text、muted 等變數，目前寫死的顏色全部換成引用。
間距分五級、圓角與陰影各定三級。
集中在同一個檔案管理，其他地方只准引用、不准寫死。
做完把 primary 換個顏色給我看全站連動的效果。