top of page
運用 AI，從 0 建立 Design System
Health2Sync 官網多年迭代後，設計稿與線上版本早已脫節。我以官網為唯一事實來源，建立兩層色彩 Token、三個斷點的 Responsive 變數與 30 個元件，並完成 WCAG 對比檢查。
背景
➊ 從維護者，試著用 AI 從 0 建立
上一份工做過去我參與 Design System 的經驗，多半是接手既有系統、持續維護。從零建立一套系統，一直是我想補上的一塊。
➋ 長期缺乏設計維護的官網
公司的設計資源長期集中在智抗糖 App 與照護平台後台（PMP），官網很少有人投入維護，設計稿與線上版本也逐漸脫節。
➌ 探索 AI 輔助建立 Design System 的可能性
AI 工具越來越成熟，我很好奇：有了 AI，從零建好基礎規範與元件能有多快？於是我主動以官網為對象，自己動手做一次。
作為專案唯一的設計師，我負責範圍盤點、Token 架構、命名規則與文件，並與 AI 協作加速素材擷取。
先盤點：哪些頁面該納入？
創建目標
建置過程
➊ 兩層 Color Token
23 個 Primitives 對應到 33 個 Semantic Token。每個顏色都寫了用途與官網實例，在 Figma 選色時直接顯示。
➋ 以 Variable Modes 管理 Responsive 斷點
建立 86 個 Responsive Token，並以 Figma Variable Modes 對應 Desktop、Tablet、Mobile 三個斷點。切換 Frame 的 Mode，字級、間距與元件尺寸即自動套用對應數值，一份設計稿即可涵蓋三種裝置，無需重複繪製。
➌ 30 個元件，Variants 涵蓋所有情境
元件分為 Navigation、Layout、Content、Interactive & Forms 四類。
Button 有 4 種樣式 × 2 種尺寸 × 3 種狀態，共 24 個 Variant；
Form Field 有 3 種類型 × 4 種狀態，共 12 個 Variant。
➍ 用途導向的命名規範
所有 Token 與 Variant 都以「用途」而非「外觀」命名：名稱說明它用在哪裡、扮演什麼角色，而不是什麼顏色或多少數值。品牌色調整時只需改 Primitive 的對應，元件不受影響；設計師與工程師也能從名稱直接判斷該用哪一個。
➎ 元件文件化
為每個元件建立一致的文件模板，涵蓋使用時機（Usage）、尺寸規格（Specs）、互動狀態（States）、可調整屬性（Properties）與 Do / Don’t。讓未參與建置的設計師與工程師，也能獨立且正確地使用元件。
設計成果
目前進度
-
4 個頁面完成三個斷點設計稿（首頁、雲端照護平台、聯絡我們、FAQ），全部由元件組成
-
新增頁面只需拖入元件並切換斷點，不必再量網頁
-
斷點、命名與狀態都和前端寫法一致，可直接交給工程
若持續推進
這個專案的定位，是呈現我從零建置 Design System 的方法：範圍盤點、Token 架構、命名規範與元件文件化。目前已完成基礎規範與核心元件，系統架構也預留了擴充空間。若持續推進，下一步會是：
bottom of page