Foundation
顏色、排版、間距、icon 使用、影像規則、可及性最低標準。
Design Systems / Handoff
設計系統與介面規範
把重複的設計決策變成 token、元件、狀態與內容規則，讓產品成長時不會每頁重新發明一次。
Why it matters
設計系統不是元件庫截圖，而是產品團隊的共用語言。
當頁面越做越多，最容易失控的是按鈕狀態、間距、字級、表單錯誤、內容語氣與前端實作細節。設計系統的價值，是讓設計品質可以被複製。
- 盤點現有介面與重複樣式，整理成可維護的基礎。
- 定義色彩、字級、間距、圓角、陰影與互動狀態。
- 撰寫元件用途、內容規範、可用性限制與前端備註。
面向沒有系統有系統
介面一致性靠記憶和截圖靠 token 與元件規則
前端交付反覆追問狀態狀態與變體先定義
內容品質各頁語氣不一欄位、提示與錯誤訊息有規範
System Layers
從設計基礎到治理規則，分層建立。
Components
按鈕、表單、卡片、導覽、表格、搜尋、空狀態與錯誤狀態。
Governance
命名、版本、何時新增變體、如何同步設計與程式碼。
Deliverables
可交付內容
介面盤點報告
標出重複樣式、不一致狀態、可合併元件與前端風險。
Design Token 規則
把顏色、字級、間距和狀態整理成清楚命名，方便設計與前端共用。
元件文件
說明用途、變體、互動狀態、內容限制、可及性與實作備註。
FAQ
設計系統常見問題
一定要先做完整 Design System 嗎？
不一定。通常會先建立足以支撐目前產品的核心規則，再隨著頁面和元件增加逐步擴張。
可以和現有前端框架搭配嗎？
可以。規格會依照現有技術棧調整，例如 Tailwind、Vue/Nuxt、React 或既有元件庫。
會包含內容規範嗎？
會。按鈕文案、表單提示、錯誤訊息、空狀態與 SEO 標題都屬於介面品質的一部分。
Systemize
把零散的介面決策整理成能維護的規範。
適合正在改版、擴張產品或準備讓設計與前端協作更穩定的團隊。