HZN Design System

背景與挑戰

公司過去的交付流程是「設計師畫稿 → PM 寫 spec → 工程師憑印象重做」，每一段轉手都會走樣；每改一次顏色或間距，設計稿、spec、程式碼三邊還得各自更新一遍。

問題的根源不是稿不夠精細，而是三方沒有共用同一份來源。於是我規劃了 HZN Design System——所有設計變數寫在一個 tokens.json，元件樣式共用一套 SCSS，PM 和工程師都直接吃這份來源。改一個檔案，三邊同步更新。

設計決策

成果與反思

目前 tokens、元件庫、版型殼、產原型流程與 Theme Studio 均已完成，下一步是用真實案子完整跑一輪流程。效果可以濃縮成一句話：改一個 token，三方同步更新；PM 不用等設計師、設計師不用催工程師、工程師不用猜設計意圖。

我也重新定位了 Figma：它只單向接收 tokens，用在還沒有程式的探索與溝通階段；一旦進了 code，code 就是唯一正本，不再反向鏡像養出第二個真相來源。

回頭看，這個專案最有價值的，是與 AI 協作的架構決策過程。tokens 要不要分兩層、cheatsheet 為什麼是 AI 的唯一真相、為什麼要求 AI「自己讀 repo」而不是把規則貼進對話——每個決策都是在與 AI 來回辯證後定案的。設計系統的本體是規則與邊界，而不是元件的長相；能把規則講清楚到 AI 和三種角色都不會誤解，才是這份系統真正的交付物。