Challenge
xh 交易所走的是「白牌」模式。團隊把同一套交易所產品租給不同客戶，核心架構共用、只換一套主題樣式。因此「一套核心、多客戶各自換皮」這件事能不能做得快又不亂，直接決定產品的競爭力，設計系統正是關鍵。當時光生成一套主題就要將近一個月。我把這些問題帶進與 PM 的例行設計會議提出，取得主導這項優化的任務。另外，平台為桌機與手機各自獨立切版，這套設計系統需同時涵蓋兩套版面，複用的價值也更高。
Action
重建兩層 Design Token 架構、統一命名。
與三方界定白牌換皮邊界。
導入設計文件自動化交付。
建立 AI 主題生成工作流。
Result
交易所有一套可依循的白牌設計系統，產出時間縮短到約兩週。
讓後續每一套客戶主題都在同一套標準上快速產出、也能持續維護迭代。
Services
Client
My Role
Detail
初接手時的三個挑戰
1.差異化邊界不清：初期已有幾套初版設計稿、第一版測試站也接近完成，但沒明確界定「哪些可改、哪些共用」，無從判斷換皮的自由度。
2.Token 只有一層（挑戰圖）：元件樣式直接吃基礎色票（例： secondary-80），別的主題想調就只能改原始色票，也會不可預期地波及其他元件。
3.文件靠手動：為了讓前端讀得懂，設計師得手動把 token 整理成表格，維護極耗時。綜合評估，當時生成一套主題要將近一個月。
兩層 Token 架構（Global → Alias）
參考各大品牌與 Quasar、數次討論修正後，定案兩層 Figma Variable：基礎層 Global（原始色票、間距、字級、圓角…）與語意層 Alias（依用途命名、指向 Global，例如 color/layer/normal01 → color/secondary/80）。換主題只需調整語意層對應，底層不動，不再牽一髮動全身。
命名系統（迭代簡化） 統一採 kebab-case，命名從最初的五段（button-primary-bg-color-normal）迭代簡化為三段（color-bg-normal），更好讀、好維護。
PM／前端／設計三方一起把界線畫清楚
1.通用元件：Textfield、Panel、Checkbox、Radio、Toggle、Date Picker、Snackbar、Dialogs…等嚴格套用語意層 Alias、不可更換。
2.可客製元件：Buttons、Trade Buttons、Perpetual Buttons、Slider、Follow Card、Tabs、Nav bar…等可自由取用基礎層或語意層，盡量展現各客戶風格差異。
3.頁面層：主結構拍版固定；惟首頁可在既定 section 範圍內自由揮灑（仍須取自 Global 或 Alias）。（圖例：綠圈＝通用元件、紅圈＝可客製元件）
設計文件自動化交付
建好 variable 定義後，精選最合團隊的 Figma 插件，一鍵匯出 token 表格供閱讀、再以另一套插件一鍵匯出 JSON 交付前端。兩套插件只負責「讀 variable → 匯出文件」，定義與命名由我人工維護——把過去手動整理表格的時間省下，資訊落差降到最低。
Figma MCP 出現後，把建好的設計系統與前端 code 餵給 AI，能快速生成不同客戶主題的首頁、以及可客製元件的多種提案；主視覺留白、交 ChatGPT 產圖後回填。AI 產出仍需手工微調、不直接採用，但已是「一個月→約兩週」的重要推手。
優化告一段落後，主管接手持續測試、回饋，並實際跑了一套新主題——原本要一個多月的產出，縮短到約兩週即可完成並交付前端。設計系統進入可持續維護、迭代的狀態。
