商品頁要證明什麼？
先把商品頁問題變成可驗證的設計工作流
從商品複雜度、決策證據、選擇、優惠、信任、履約與量測，整理最值得先驗證的商品頁工作項目。
什麼是設計系統？電商為什麼需要？
設計系統整理色彩、字體、間距等設計代幣，也收錄按鈕、卡片、版型與使用準則。它可以減少重複決策並改善多人協作，但發布速度仍取決於內容、核准與工程範圍。
設計系統，是把品味變成基礎設施。
每頁長得不一樣
三個設計師、五個檔期之後，官網像是拼貼出來的。
改版成本居高不下
沒有可複用的元件，每個新頁面都是客製專案。
設計交付缺少規格
若狀態、響應式與互動規則沒有寫清楚，實作落差會增加來回確認與排程風險。
01 · 一致性的複利
後續改版沿用已核准的規則與元件
Shopify 彙整（2025）：行動裝置佔電商網站流量 77%。設計系統應在代表性手機與桌機尺寸上驗收元件，而不是假設同一配置適用所有裝置。
代幣先行
色彩、字階、間距先變成程式碼可讀的變數，改一個代幣，全站一起更新。
雙生元件庫
Figma 與程式碼同步演進，設計稿與實作之間沒有翻譯損耗。
治理讓系統活著
新增與修改有明確流程，系統跟著品牌長大，半年後依然是資產而非負債。
工作方式
設計與工程在同一張桌上
代幣命名、元件邊界與互動規格由設計師與工程師共同定案，交付的是一套會動的系統，附使用文件。
產出效率
活動頁從數週變數天
組頁積木到位後，行銷檔期用現成元件組裝，品牌長相不走樣，速度分數不掉隊。
我們怎麼做
設計代幣
色彩、字階、間距、圓角，品牌的視覺 DNA 變成程式碼可讀的變數。
元件庫
讓 Figma 元件與程式碼元件對照，並記錄狀態、變體與責任邊界。
使用準則
記錄元件的使用時機與組合方式，讓設計判斷有文件可循。
治理機制
定義元件新增、修改、審查與淘汰流程，避免規則與例外持續分散。
合作流程
品牌盤點
視覺資產與既有介面的體檢
代幣定義
設計代幣與命名系統建立
元件建置
同步建立 Figma 元件庫與程式碼元件
導入陪跑
團隊培訓與治理流程建立
交付清單
01
設計代幣表
色彩、字階、間距、圓角與動態曲線的單一真相來源，設計與程式碼共用。
02
元件庫
Figma 元件與對應的程式碼元件，含狀態、變體與響應式行為。
03
使用準則
元件的使用時機、組合規則與禁用情境，把判斷寫成文件。
04
治理流程
新增、修改與棄用的提案流程，讓系統持續演進。
一致的介面規則，能減少頁面之間的品牌落差與重複設計。
常見問題
如果頁面與元件開始重複，簡化版設計系統就可能有幫助。可以先從色彩、字級、間距與常用元件開始，再依實際重工情況擴充。
Figma 元件主要處理設計端。設計系統還要建立與程式碼的對照、更新流程和驗證方式；代幣能否同步到全站，取決於實作與發布流程。
取決於品牌數量、元件範圍、文件深度與既有介面品質。完成盤點後可分階段交付，先覆蓋使用頻率高的頁面與元件。
CIS 定義品牌是誰，設計系統則把這些原則轉成數位介面的執行規則。
