元伸科技
老實說，過去設計系統（Design System）就是給設計師看圖、給工程師對齊命名的內部工具。但這一兩年跟客戶聊下來，情況變了——AI 編碼跟設計工具也在讀設計系統。Cursor、v0、Galileo AI、Figma AI 都會抓設計系統，根據它產出符合品牌的程式碼。
實務觀察：設計系統做得 AI 友善與否，直接決定 AI 工具產出的品質。我們在桃園、龜山幾個客戶端做完設計系統改造後，AI 產 code 的貼合度差距非常明顯。本篇是完整實作指南，與 Figma 到 Code 的 AI 友善交付流程 是一組配套工序。
AI 友善設計系統三大原則
原則 1：Design Token 三層語意命名
基礎層（原始值）
└─ blue-500: #3B82F6
└─ red-300: #FCA5A5
語意層（用途）
└─ color-primary: blue-500
└─ color-danger: red-300
元件層（精細）
└─ button-bg: color-primary
└─ alert-error-bg: color-danger
老闆最常踩的坑：直接給 AI 一堆 hex 色碼，結果 AI 把 #3B82F6 寫死在 30 個檔案裡。日後要改主色就是一場噩夢。講白一點，AI 工具用語意層或元件層產 code 才會精準：
/* AI 產出（語意化）*/
.button {
background: var(--color-primary);
color: var(--color-on-primary);
}
/* 不好的 AI 產出（直接用原始值）*/
.button {
background: #3B82F6;
color: white;
}
原則 2：元件 atomic design 分類
元件分類：
├─ Atoms（原子）
│ ├─ Button
│ ├─ Input
│ └─ Icon
├─ Molecules（分子）
│ ├─ FormField（Label + Input）
│ └─ SearchBox（Input + Button）
├─ Organisms（組織）
│ ├─ Header
│ ├─ ProductCard
│ └─ ContactForm
└─ Templates（模板）
├─ ProductDetailPage
└─ ArticlePage
每個元件加分類標籤（atom: true / molecule: true），讓 AI 工具知道組合層級。
我會建議：中型以上的專案才導入完整 atomic design 分層，小型 Landing Page 用兩層（基礎元件 + 區塊）就夠，不用為了「看起來專業」硬套四層架構。
原則 3：文檔結構化
每個元件文檔包含 5 個區塊：
# Button 元件
## 用途
主要互動觸發點，用於送出表單、導向頁面、觸發功能。
## Props 表
| Prop | 類型 | 預設 | 說明 |
|---|---|---|---|
| variant | 'primary' \| 'secondary' \| 'ghost' | 'primary' | 視覺變體 |
| size | 'sm' \| 'md' \| 'lg' | 'md' | 尺寸 |
| disabled | boolean | false | 是否停用 |
## 使用範例
```tsx
<Button variant="primary" size="md" onClick={handleSubmit}>
送出
</Button>
無障礙提示
- 必須有 aria-label 或可讀的子元素
- disabled 狀態要有視覺與 ARIA 對應
- 焦點狀態用 focus-visible
AI 提示（給 Cursor / v0 用）
"建立一個 primary variant 的 Button，顯示 '送出'，點擊觸發 handleSubmit"
## Figma 與程式碼同步策略
### 小團隊：手動同步
設計師改 Figma → 通知工程師 → 工程師手動更新 token。**簡單但有滯後**。
中壢一間做電商的客戶就用這套，前期還行，第二年元件數量超過 80 個之後開始失控——設計改了沒通知、工程師抄錯數字、現場一堆色差。除非團隊小於 3 人、元件少於 30 個，否則不建議長期靠手動同步。
### 中等規模：半自動同步
用 Figma Tokens 外掛：
1. 設計師在 Figma 維護 token
2. 一鍵匯出 JSON
3. 工程師執行 build script 整合到 code
```bash
# Style Dictionary build
npm run build-tokens
# 產出 tokens.css、tokens.scss、tokens.js
大團隊：全自動 CI/CD
# GitHub Actions
on:
schedule:
- cron: '0 9 * * *' # 每日 9 點
jobs:
sync-tokens:
steps:
- run: figma-export tokens
- run: npm run build-tokens
- run: git commit -m "chore: sync design tokens"
- run: git push
每天自動同步 Figma token 到 code repo。
AI 工具整合
Cursor / Copilot
在 .cursor/rules.md 或 CLAUDE.md 中標註：
# Design System Rules
我們使用語意化 Design Token，請優先使用以下 token：
- 顏色：var(--color-primary), var(--color-secondary)
- 間距：var(--spacing-tight), var(--spacing-loose)
- 字體：var(--font-heading), var(--font-body)
避免直接用 hex 色碼或數值單位。
元件遵循 atomic design：
- Atoms 在 src/components/atoms/
- Molecules 在 src/components/molecules/
- Organisms 在 src/components/organisms/
AI 看到後產 code 會自動套用。
v0 / Galileo AI
提供設計系統 URL 給 AI 工具，它會抓取並學習：
v0：請依照 https://design.example.com 設計系統做一個 ProductCard
提供文檔越完整，AI 產出貼合品牌率越高。
Figma AI
設計系統建在 Figma Library 中：
- 命名規範化（Color/Primary、Color/Secondary）
- 元件變體齊全（Size、Variant、State）
- 加 description 說明用途
Figma AI 會用 Library 內元件做新設計。
元伸自家實戰
設計系統 AI 友善化前後：
| 指標 | 改造前 | 改造後 |
|---|---|---|
| v0 產出貼合品牌率 | 偏低 | 大幅提升 |
| 新元件設計時間 | 較長 | 明顯縮短（AI 產出 + 微調） |
| 工程整合時間 | 較長 | 顯著縮短 |
| 設計與工程一致性 | 中等 | 明顯改善 |
最大效益：設計師花更多時間在「系統設計與品質審核」，而非「畫每個畫面」。對於需要長期累積元件庫的 客製化系統開發 案例，這個投資的回報尤其顯著。
實際上元伸這幾年協助客戶導入時，最有感的不是「快」，而是「一致」——同一套 token 用 18 個月後，新加入的設計師跟工程師看了文件就上手，不用再被資深成員口頭教學三個月。
不要犯的 4 個錯誤
- ❌ 直接用 hex 與數值：AI 產出 hard code、難維護
- ❌ 元件命名不一致：
button/Btn/BUTTON混用 - ❌ 沒文檔：AI 不知道元件用途，產出可能誤用
- ❌ Figma 與 code 不同步：版本錯亂，AI 抓到舊資料
結語：設計系統是 AI 時代的協作介面
設計系統不再只是「給設計師用的圖庫」，是設計師、工程師、AI 工具的共同語言。
語意化、結構化、有文檔的設計系統，能讓 AI 工具產出 8-9 成可用的 code，設計師與工程師的工作量大幅降低。元伸科技 24 年深耕網頁設計領域，在 客製化網站設計 與長期維運合作中，把設計系統 AI 友善化視為專案交付物的一部分——延伸閱讀可參考 AI 設計到 Code 的完整實踐指南。
如果您正在規劃新一輪網站改版，或內部設計團隊正卡在「token 命名混亂、AI 產 code 老是不像」這類問題，歡迎找我們聊聊。
📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢 24hr 回覆
