design-tokens

此技能為專案產生基礎設計代碼。請在設計簡報之後、建構任何元件之前執行。之後建構的每個元件都應參考這些代碼，而非直接寫死數值。

範例提示

• 「為此專案設定設計代碼」
• 「根據 Dieter Rams 風格產生代碼系統」
• 「我需要間距比例和色板才能開始建構」
• 「建立符合我們簡報的代碼」

流程

1. 檢查現有內容。 在產生任何內容之前，先掃描程式碼庫中是否有：

   • CSS 變數定義（:root、[data-theme]、自訂屬性檔案）
   • Tailwind 設定（tailwind.config.js、tailwind.config.ts）及任何主題擴充
   • 主題提供者檔案（Material UI createTheme、Chakra extendTheme、shadcn globals.css）
   • 設計代碼 JSON 檔案（Style Dictionary 格式、Figma 代碼匯出）
   • 任何 tokens.css、variables.css、theme.css 或類似名稱的檔案
   • package.json 中的 UI 框架依賴（tailwindcss、@mui/material、@chakra-ui/react 等）

   如果代碼已存在，擴充它們而非取代。找出缺口（缺少深色模式、間距比例不完整、沒有動畫代碼）並補上。

2. 閱讀簡報。 在 .design/*/DESIGN_BRIEF.md 尋找設計簡報。如果有多個子資料夾，使用最近修改的那個，或詢問使用者正在處理哪個功能。如果指定了美學理念，使用 /frontend-design 中的參數來推導代碼值。如果沒有簡報，詢問使用者想要的方向。

3. 產生代碼，格式需符合專案的技術棧：

   • Tailwind 專案 → 擴充 tailwind.config.js 並寫入 globals.css
   • CSS/HTML 專案 → 寫入 tokens.css 檔案
   • CSS-in-JS 專案 → 寫入 theme.ts 或 theme.js 檔案
   • 如果不確定，預設使用 CSS 自訂屬性（最具可攜性）

4. 務必同時產生淺色和深色模式色板。 使用 [data-theme="dark"] 或 prefers-color-scheme 媒體查詢。兩個色板都應根據所選理念具有設計意圖，而非只是反轉數值。

代碼類別

色彩

/* 語意色彩代碼，非原始數值 */
--color-bg-primary:          /* 主要背景 */
--color-bg-secondary:        /* 次要/卡片背景 */
--color-bg-tertiary:         /* 細微背景（輸入框、凹陷區域） */
--color-bg-inverse:          /* 反轉背景 */

--color-text-primary:        /* 主要文字 */
--color-text-secondary:      /* 次要文字 */
--color-text-tertiary:       /* 佔位符、禁用文字 */
--color-text-inverse:        /* 反轉背景上的文字 */
--color-text-link:           /* 連結顏色 */

--color-border-primary:      /* 預設邊框 */
--color-border-secondary:    /* 細微邊框 */
--color-border-focus:        /* 焦點環顏色 */

--color-accent-primary:      /* 主要動作顏色 */
--color-accent-primary-hover:
--color-accent-primary-active:
--color-accent-secondary:    /* 次要動作顏色 */

--color-status-success:
--color-status-warning:
--color-status-error:
--color-status-info:

--color-surface-overlay:     /* 模態框/下拉選單背景 */

間距

產生一致的間距比例。基本單位應符合美學理念：

• 緊湊型理念（粗獷主義、瑞士風格）：4px 基本單位
• 平衡型理念（Rams、斯堪地那維亞風格）：4px 或 8px 基本單位
• 寬敞型理念（日式極簡、編輯風格）：8px 基本單位，搭配較大倍數

--space-0:   0;
--space-1:   /* 基本單位 * 0.25 */
--space-2:   /* 基本單位 * 0.5 */
--space-3:   /* 基本單位 * 0.75 */
--space-4:   /* 基本單位 * 1 */
--space-5:   /* 基本單位 * 1.5 */
--space-6:   /* 基本單位 * 2 */
--space-7:   /* 基本單位 * 3 */
--space-8:   /* 基本單位 * 4 */
--space-9:   /* 基本單位 * 6 */
--space-10:  /* 基本單位 * 8 */
--space-11:  /* 基本單位 * 12 */
--space-12:  /* 基本單位 * 16 */

字體

--font-family-display:       /* 標題/展示字體 */
--font-family-body:          /* 內文字體 */
--font-family-mono:          /* 程式碼/等寬字體 */

--font-size-xs:
--font-size-sm:
--font-size-base:
--font-size-md:
--font-size-lg:
--font-size-xl:
--font-size-2xl:
--font-size-3xl:
--font-size-4xl:             /* 主視覺/展示尺寸 */

--font-weight-normal:
--font-weight-medium:
--font-weight-semibold:
--font-weight-bold:

--line-height-tight:         /* 標題：1.1-1.3 */
--line-height-normal:        /* 內文：1.4-1.6 */
--line-height-relaxed:       /* 寬鬆內文：1.6-1.8 */

--letter-spacing-tight:      /* 展示字型 */
--letter-spacing-normal:
--letter-spacing-wide:       /* 全大寫、標籤 */

佈局

--max-width-content:         /* 最大閱讀寬度（相當於 65-75ch） */
--max-width-wide:            /* 寬內容區域 */
--max-width-page:            /* 頁面最大寬度 */

--border-radius-sm:
--border-radius-md:
--border-radius-lg:
--border-radius-full:        /* 藥丸/圓形 */

--shadow-sm:
--shadow-md:
--shadow-lg:
--shadow-focus:              /* 焦點環陰影 */

動畫

--duration-instant:   50ms;
--duration-fast:      150ms;
--duration-normal:    250ms;
--duration-slow:      400ms;
--duration-slower:    600ms;

--easing-default:     cubic-bezier(0.4, 0, 0.2, 1);
--easing-in:          cubic-bezier(0.4, 0, 1, 1);
--easing-out:         cubic-bezier(0, 0, 0.2, 1);
--easing-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

響應式斷點

--breakpoint-sm:   375px;    /* 手機 */
--breakpoint-md:   768px;    /* 平板 */
--breakpoint-lg:   1024px;   /* 小桌面 */
--breakpoint-xl:   1280px;   /* 桌面 */
--breakpoint-2xl:  1536px;   /* 寬桌面 */

深色模式

務必同時產生深色模式代碼與淺色模式代碼。規則：

• 不要單純反轉顏色。深色背景應根據美學理念偏暖或偏冷。
• 深色模式中稍微降低對比度（純白文字配純黑背景過於刺眼）。
• 陰影在深色模式中應使用更暗、更透明的數值，而非與淺色模式相同的陰影。
• 強調色可能需要調整亮度以維持對比度比例。
• 同時包含 prefers-color-scheme 媒體查詢和 [data-theme="dark"] 屬性選擇器，讓使用者能同時支援系統偏好和手動切換。

:root {
  /* 淺色模式代碼 */
}

[data-theme="dark"] {
  /* 深色模式覆蓋 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 系統偏好深色模式，除非使用者明確選擇淺色 */
  }
}

輸出

將代碼檔案儲存在專案技術棧的適當位置。說明代碼源自哪個美學理念，並註明任何偏離或選擇。