WORK STORY / 03
把散落的顏色值收斂成可執行的 Design Token System
情境
專案累積大量散落在元件與樣式中的硬編碼顏色，同一視覺語意可能出現多種不同色值。這不只讓設計調整難以同步，AI 或工程師在新增畫面時，也很容易直接複製既有寫法，讓顏色債務持續擴散。
我的判斷與做法
我重新盤點全專案顏色來源，將可重用色彩收斂成 Design Tokens，並透過 Custom Build Plugin 統一產生與管理。接著把規則接進 Lint Gate，直接阻擋新的硬編碼 hex、rgb、hsl 與 named colors，讓新增程式碼只能使用正式 Token。
形成的結果
硬編碼色值從 2,047 降到 213，減少約 90%；Design Tokens 則從 47 擴充到 190。顏色從散落在程式碼裡的實作細節，變成具有單一來源、可搜尋、可驗證，也能由工具持續守住的設計基礎設施。
留下的思考
設計系統真正難的不是建立 Token，而是阻止系統再次退化。只要一項規則能被機器明確判斷，就應該讓工具在錯誤進入 Codebase 前直接攔下。