設計系統產生器 是做什麼的？
打造讓產品保持一致的最小系統。設計系統是一組決策，而不是一堆數值：少數、命名良好的 token 勝過沒有人使用的詳盡規模。
如果已安裝 frontend-design 技能，frontend-design/references/tokens.md 包含完整且經過對比度檢查的入門集；可從中開始並調整。
1. 輸入
- 讀取現有內容：目前的 CSS、Tailwind 設定、主題檔、元件庫、品牌資產。盤點實際使用的數值（顏色、字體大小、間距、圓角）以及每個數值出現的頻率。
- 釐清（或推斷並說明）產品的調性、平台（網頁、iOS、Android）、密度，以及是否需要深色模式與高對比度模式。
2. 架構：三層
- 原始 token：帶有中性名稱的原始數值。例如
--gray-50 ... --gray-950、--blue-600、--space-4、--radius-md。永遠不直接在元件中使用。 - 語意 token：基於用途的別名。例如
--bg、--surface、--surface-sunken、--border、--border-strong、--text、--text-muted、--text-subtle、--accent、--accent-fg、--accent-subtle、--focus-ring、--success、--warning、--danger、--info（加上-subtle變體）。主題透過這些名稱切換。 - 元件 token（僅在需要時）：例如
--button-height-md、--input-border、--card-padding。當某個元件需要獨立主題時才加入。
命名規則：類別-角色-變體-狀態（例如 --text-muted、--accent-hover）。語意 token 中不要出現顏色名稱（使用 --accent，而不是 --blue）。
3. 要做的決策
- 間距：以 4px 為基礎。數列：0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128。（Fluent 2 和 Material 都以 4px 為基礎；Tailwind 的預設數列也是基於 4px。）
- 字體：一到兩個字型家族；模組化比例（密集 1.2、產品 1.25、編輯 1.333+）；使用角色而非大小（展示、標題、標題、內文、標籤、說明、程式碼）；每個角色有其行高；僅展示字級使用流體
clamp()。 - 顏色：中性色階 10–12 階（刻意選擇偏暖或偏冷），一個強調色階，四個語意色相。使用 OKLCH 產生色階以獲得均勻的感知步階。
- 圓角：一個系列（銳利、柔和或圓潤），3–4 階加上
full。 - 陰影：最多 3 層（浮起、浮動、覆蓋），兩層中性陰影；深色模式下偏好使用較亮的表面而非較濃的陰影。
- 動態效果：3 種持續時間（快速約 140ms、基礎約 220ms、緩慢約 320ms），3 種緩動曲線（出、入、出入），以及減少動態規則。
- 層級：小規模的 z-index 數列（黏性、下拉式、覆蓋、對話框、提示、工具提示）。
- 中斷點：以內容驅動；常見組合為 640、768、1024、1280、1536。
4. 主題與對比度
- 同時定義淺色與深色主題。深色模式：接近黑色的背景（非 #000）、接近白色的文字（非 #fff）、更亮的表面以顯示層次、強調色變亮並略微降低飽和度。
- 加入
prefers-contrast: more變體，強化邊框與低調文字。 - 使用 WCAG 2 公式驗證每個文字/背景配對，並發布其比率：文字 4.5:1，大字型與有意義的 UI（輸入框邊框、圖示、焦點環）3:1。將數值包含在文件中；未經計算不要聲明「符合 AA 標準」。
5. 輸出
根據專案技術棧產生：
tokens.css（CSS 自訂屬性，包含淺色 + 深色 + 高對比度），以及/或 Tailwind 主題對應（v4 使用@theme，v3 使用theme.extend），以及/或tokens.json（W3C Design Tokens Community Group 格式，若使用 Style Dictionary 等管線工具）。- 一份簡短的
DESIGN.md，記錄：原則（3–5 行）、包含對比度比率的 token 表格、字體角色、間距使用規則，以及核心元件（按鈕、輸入框、卡片、對話框、表格、提示框）的建議與不建議事項。 - 可選擇產生一個
styleguide.html/ 展示頁面，呈現所有 token 與元件狀態在兩種主題下的樣貌，方便視覺檢查。
6. 遷移（現有產品）
- 將現有數值對應到最近的 token；列出會被移除的數值及其原因。
- 依序替換：先顏色，再間距，然後字體，最後圓角和陰影。
- 若程式碼庫龐大，可保留一個暫時的別名層以支援舊名稱。
檢查清單
- 原始、語意和（僅必要時）元件層已分離。
- 元件僅參考語意 token。
- 淺色、深色與高對比度主題均已存在，且每個配對都有計算出的比率。
- 間距以 4px 為基礎；一個圓角系列；最多三個陰影層級。
- 字體角色涵蓋展示至說明；最多兩個字型家族，三個字重。
- 動態 token 包含減少動態規則。
- 文件說明每個 token 的使用時機，而不僅是數值。