什麼是設計系統？電商為什麼需要？
設計系統是品牌數位體驗的單一真相來源：色彩、字體、間距等設計代幣，加上按鈕、卡片、版型等可複用元件與使用準則。對電商而言，它讓活動頁產出從數週縮到數天、讓多人協作不走樣、讓品牌在每個接觸點長得像同一個人。
設計系統，是把品味變成基礎設施。
每頁長得不一樣
三個設計師、五個檔期之後，官網像是拼貼出來的。
改版成本居高不下
沒有可複用的元件，每個新頁面都是客製專案。
設計交付靠猜
設計稿與實作總有落差，來回修改吃掉所有時程。
01 · 一致性的複利
每一次改版都該站在上一次的肩膀上
Shopify 彙整（2025）：行動裝置佔電商網站流量 77%。設計系統的第一個驗收標準，是同一套元件在手機與桌機上都成立。
代幣先行
色彩、字階、間距先變成程式碼可讀的變數，改一個代幣，全站一起更新。
雙生元件庫
Figma 與程式碼同步演進，設計稿與實作之間沒有翻譯損耗。
治理讓系統活著
新增與修改有明確流程，系統跟著品牌長大，半年後依然是資產而非負債。
工作方式
設計與工程在同一張桌上
代幣命名、元件邊界與互動規格由設計師與工程師共同定案，交付的是一套會動的系統，附使用文件。
產出效率
活動頁從數週變數天
組頁積木到位後，行銷檔期用現成元件組裝，品牌長相不走樣，速度分數不掉隊。
我們怎麼做
設計代幣
色彩、字階、間距、圓角，品牌的視覺 DNA 變成程式碼可讀的變數。
元件庫
Figma 與程式碼雙生的元件庫，設計即開發。
使用準則
什麼時候用什麼元件、怎麼組合——把品味寫成文件。
治理機制
新增與修改的流程設計，讓系統活著長大而不是腐化。
合作流程
品牌盤點
視覺資產與既有介面的體檢
代幣定義
設計代幣與命名系統建立
元件建置
Figma 元件庫與程式碼元件同步打造
導入陪跑
團隊培訓與治理流程建立
交付清單
01
設計代幣表
色彩、字階、間距、圓角與動態曲線的單一真相來源，設計與程式碼共用。
02
元件庫
Figma 元件與對應的程式碼元件，含狀態、變體與響應式行為。
03
使用準則
元件的使用時機、組合規則與禁用情境，把判斷寫成文件。
04
治理流程
新增、修改與棄用的提案流程，讓系統持續演進。
品牌的樣子一致了，每一次曝光都在累積同一筆資產。
常見問題
需要，而且受益更大：小團隊沒有重工的本錢。規模可以從一頁式的代幣表開始，隨品牌成長擴充。
Figma 元件只解決設計端。設計系統的價值在設計與程式碼同步——改一個代幣，全站一起更新。
核心代幣與基礎元件約 4–6 週；完整系統隨範圍而定，我們建議分階段交付、邊用邊長。
CIS 定義品牌是誰，設計系統定義品牌在數位介面上怎麼行動——後者是前者的執行層。
