認真的研究一下發現對前端工程師來說，一值都這樣寫啊

什麼是Design token？

對Token這個單字並不陌生，在驗證身分系統中可以理解為識別證，在加密貨幣中可以理解為數字資產，在LLM中他是語言文本的基本單位。簡單來說，Design Tokens 的目的主要有兩個：

1. 一致性：以語義化命名集中管理顏色、字體、間距等設計值（例如 color.brand.primary、space.md），改動一次即可在整個產品線同步。
2. 跨平台：透過Style Dictionary等工具，將 tokens 轉換為各平台的樣式（如CSS Variables/SCSS、JS/TS 模組、Android XML、iOS（Swift/Obj-C）、Figma/Sketch）。

參考了Nathan Curtis的文章來列出時間點後，發現在十年前的文章中就已經基礎概念 — 「透過JSON讓這些Token重複使用在不同平台中」。

• 2014年，Salesforce的Design System 團隊首次使用「Design Tokens」這個詞，把顏色、字體、間距抽象化，方便多平台（Web / iOS / Android）一致。
• 2016年，Nathan Curtis寫了Tokens in Design Systems
  ，幫助這個概念在設計圈大規模傳播。
• 2018-2020年，Figma 與 Sketch 的plugin開始出現（如 Figma Tokens），社群開始嘗試把設計與程式更緊密串接，可參考Curtis寫的設計系統 Token 命名指南：視覺風格的術語、型別與分類框架。
• 2021年之後，W3C Design Tokens Community Group 成立，開始制定跨平台標準（像 JSON schema、命名規範，預計2025年年底前Release)，今天Figma團隊特別提到這一篇Curtis寫的重塑 Token 分類體系：設計 Token 專案筆記，從盤點到落地

在不同平台的格式差異

以下透過按紐來呈現差異

1. tokens.json

    {
      "color": {
        "brand": {
          "primary": { "default": "#2C3E50", "hover": "#334A5E", "active": "#243444" }
        },
        "text": { "onBrand": "#FFFFFF" }
      },
      "radius": { "md": "10px" },
      "spacing": { "sm": "8px", "lg": "16px" },
      "font": { "size": { "md": "16px" }, "weight": { "bold": 700 } }
    }
   

2. For css

    :root {
      /* Colors */
      --color-bg: #F8F7F3;
      --color-paper-edge: #E9E6DB;
      --color-text: #2A2A2A;
      --color-text-muted: #6F6B63;
      --color-brand: #2C3E50;
      --color-brand-hover: #334A5E;
      --color-brand-active: #243444;
      --color-accent: #C97C2E;
      --color-border: #D9D4C8;
   
      /* Typography */
      --ff-heading: Georgia, serif;
      --ff-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --ff-typewriter: 'Special Elite', ui-monospace, SFMono-Regular, Menlo, monospace;
      --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 32px;
      --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
      --lh-tight: 1.2; --lh-normal: 1.6;
   
      /* Spacing, radius, shadow */
      --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 48px;
      --radius-sm: 6px; --radius-md: 10px;
      --shadow-card: 0 8px 20px rgba(0,0,0,.06);
    }
   
    :root[data-theme="dark"] {
      --color-bg: #121212;
      --color-paper-edge: #1B1B1B;
      --color-text: #EDEDED;
      --color-text-muted: #A7A7A7;
      --color-brand: #9BB7D7;
      --color-brand-hover: #A6C1DE;
      --color-brand-active: #86A5C3;
      --color-accent: #E6A86B;
      --color-border: #2A2A2A;
      --shadow-card: 0 8px 20px rgba(0,0,0,.5);
    }
   
    /* Base usage (optional examples) */
    body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: var(--ff-body);
    }
   
    /* Button using tokens */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      font-size: var(--fs-md); font-weight: var(--fw-bold);
      padding: var(--sp-sm) var(--sp-lg); border-radius: var(--radius-md);
      user-select: none; border: 0; cursor: pointer;
      transition: filter .15s ease, transform .1s ease, background-color .15s ease;
    }
    .btn--primary {
      background: var(--color-brand); color: #fff;
    }
    .btn--primary:hover  { background: var(--color-brand-hover); }
    .btn--primary:active { background: var(--color-brand-active); transform: translateY(.5px); }
    .btn--primary:disabled { opacity: .6; cursor: not-allowed; }
   

3. For tailwind

   省略一下設定

    <button class="btn btn-primary">Get Started</button>
   

以前端的角度來說基本上就是「CSS Variables」，改一個地方全部 UI 就會跟著更新，這幾年開發的方式一直都是這樣，只是不知道原來這就是最近經常聽到的Design token。

但為什麼最近經常聽到呢？

近年討論升溫，主因包括：

1. 設計系統普及：團隊需要以系統化方式維護視覺與互動規則。
2. 跨平台需求增加：Web、iOS、Android 與深色模式等情境，需要一次定義、到處落地。
3. Figma 與外掛生態成主流：設計與程式更容易同步，tokens 成為設計系統的共同語言。
4. W3C 正在標準化：有了跨工具的共同規範，投資 tokens 更有把握。
5. AI 生成興起：AI 需要清楚的規格才能產生一致的 UI，tokens 正好是理想的「規則輸入」。

對我而言，第 3 點與第 5 點特別關鍵：Figma 今年加入 AI 生成功能，而在使用 AI Agent 時，若能提供一套清楚的規格，才能穩定輸出一致的結果；Design Tokens正是最適合的輸入格式與約束。

明天想嘗試使用LLM和AI協作來產生Design token，透過這些token讓 Figma AI服務產生更符需求的個人網站 UI。

參考文章

• Intro to Design Tokens
• Tokens in Design Systems