- 這是一篇“很乾很乾”的乾貨 -

 先說一個設計師熟悉的場景 

假設你是一個設計團隊的 Lead，剛做完一套完整的設計規範：色板、字體層級、間距系統、組件庫。你把它放進 Figma，寫了一份 20 頁的 Design Guideline PDF，發給了所有人。

然後，你讓 AI 幫你做第一個頁面。結果還不錯。

做第二個，顏色開始漂移——AI 自作主張用了一個"看起來差不多"的灰。

做第五個，你已經認不出這是同一個產品了。字號錯了，間距是隨機的，按鈕圓角變成了方的。

你問 AI，它說：對不起，我不知道你的規範是什麼。

這就是問題所在：你有設計規範，但 AI 不知道。每次對話，它都在從零開始。

最近更新的Google Stitch 2.0表達的也是同樣的訴求。

 設計師日常 vs AI 生成現實：一組對比 

在解決方案之前，先把設計師在工作流中真正面對的規範內容列出來，再對照 AI 生成時的實際行為：

這不是 AI 能力的問題。它只是沒有被告知邊界在哪裏。

設計規範存在 Figma 裏、PDF 裏、設計師的腦子裏——但不在 AI 的上下文裏。

解法：把 .md 文件變成 AI 的行為憲法

.md 文件在 AI 工作流裏不是普通文檔，而是約束層。

你需要建立一套分層的設計規範文件體系：

/design-system/
├── 00-meta.md        # AI 行為總綱
├── 01-tokens.md      # 色彩、字體、間距 Token
├── 02-components.md  # 組件約束清單
├── 03-patterns.md    # 佈局與交互模式
├── 04-responsive.md  # 響應式與多端適配
└── 05-dos-donts.md   # 明確禁止項

注意：以下所有 .md 文件內容均為參考樣例，基於一個假想的輕量級 iOS 產品設計系統構建。實際使用時，你需要將色值、字號、組件名稱、斷點等替換為你自己產品的真實規範。框架和寫法可以直接複用，數值不要照搬。

第一層：00-meta.md —— AI 行為總綱

這是最重要的一層。它告訴 AI：在做任何設計決策時，查文檔，不要猜。

# 產品設計系統 · 總綱

## AI 生成原則
- 所有 UI 決策必須優先查閲本文檔
- 未在 tokens.md 中定義的顏色值：禁止使用
- 未在 tokens.md 中定義的字號/字重：禁止使用
- 未在 components.md 中列出的組件變體：禁止自行創造
- 所有間距必須是 8pt Grid 的倍數，不接受例外

## 設計風格錨點
- 風格關鍵詞：温暖、輕盈、生活感、非科技感
- 參考：Day One（情緒）、Linear（交互密度）、VSCO（視覺剋制）
- 明確排除：Material Design 規範、霓虹色系、玻璃擬態、陰影堆疊

## 生成優先級
1. 優先複用 components.md 中已有組件
2. 其次通過 Atom 組合實現
3. 最後才新建——且必須主動說明原因

## 符號約定
- ❌ 表示：嚴格禁止，不得出現在任何生成結果中
- ✅ 表示：必須遵守的強制規則

樣例說明：以下 Token 定義基於假想產品，色值、字號體系、間距倍數等均需替換為你的實際設計決策。格式與分類結構可直接複用。

這是核心文件，涵蓋設計師最關心的所有基礎參數。每一個值都是邊界，不是參考。

# Design Tokens

## Color · 顏色系統

### 品牌色
- primary: #3D7A5F
- primary-light: #EAF3EE
- primary-dark: #2C5C46
### 中性色
- text-primary: #1A1A1A
- text-secondary: #6B6B6B
- text-disabled: #BDBDBD
- background: #FAFAF8
- surface: #FFFFFF
- border: #E8E8E8
- divider: #F2F2F0
### 功能色
- success: #3A9B6F
- warning: #E6A817
- danger: #E05252
- info: #4A7FC1
### 漸變
- gradient-warm: linear-gradient(135deg, #EAF3EE 0%, #FAFAF8 100%)
- ❌ 僅以上漸變可用，禁止自定義漸變方向和色值

### 約束
- ❌ 禁止使用任何未在上方列出的顏色值
- ❌ 禁止使用 rgba 透明疊加製造新顏色
- ❌ 品牌色禁止用於背景大面積填充

## Typography · 字體系統

### 字體

- iOS/macOS：SF Pro Display（標題）/ SF Pro Text（正文）
- Web/Android：PingFang SC / Noto Sans SC
- 代碼：SF Mono

### 字號層級（嚴格遵守，不允許中間值）
| 層級      | 字號  | 字重 | 行高 | 用途         |
|-----------|-------|------|------|--------------|
| display   | 32px  | 700  | 1.2  | 頁面主標題   |
| heading-1 | 24px  | 700  | 1.3  | 區塊標題     |
| heading-2 | 20px  | 600  | 1.35 | 卡片標題     |
| heading-3 | 17px  | 600  | 1.4  | 列表項標題   |
| body      | 16px  | 400  | 1.6  | 正文內容     |
| body-sm   | 14px  | 400  | 1.6  | 輔助說明     |
| caption   | 12px  | 400  | 1.5  | 標籤/時間戳  |

### 字重約束
- 允許字重：400 / 500 / 600 / 700
- ❌ 禁止：300（太細）/ 800 / 900（過於強調）
- ❌ 禁止：正文內容使用 600 以上字重
- ❌ 禁止：相鄰兩個層級使用相同字重 + 相同顏色（無法形成視覺層級）

## Spacing · 間距系統（8pt Grid）
| Token | 值   | 典型用途                     |
|-------|------|------------------------------|
| xs    | 4px  | 圖標內邊距、緊湊標籤內間距        |
| sm    | 8px  | 行內元素間距、圖標與文字間距      |
| sm+   | 12px | 緊湊卡片內邊距（特殊場景）        |
| md    | 16px | 標準內邊距、段落間距             |
| lg    | 24px | 卡片內邊距、區塊間距             |
| xl    | 32px | 頁面區塊分隔                   |
| 2xl   | 48px | 頁面頂部留白、大區塊間距         |
| 3xl   | 64px | 頁面級視覺呼吸區                |
- ❌ 禁止出現 10 / 14 / 18 / 22px 等非 Grid 值
- ❌ 頁面左右邊距：移動端固定 16px，Pad 端 24px，Web 端 32px，不允許其他值

## Border Radius · 圓角
| Token | 值     | 用途                          |
|-------|--------|------------------------------|
| none  | 0px    | 表格、分割線                   |
| sm    | 6px    | 標籤、小型輸入框                |
| md    | 12px   | 卡片、彈窗                     |
| lg    | 16px   | 底部抽屜、浮層                  |
| xl    | 24px   | 大卡片、圖片容器                |
| full  | 9999px | 按鈕（pill 形）、頭像、膠囊       |
- ❌ 禁止：圓角值超過容器高度的一半（會產生視覺變形）
- ❌ 同一屏幕內出現超過 3 種不同圓角值

## Shadow · 陰影
| Token     | 值                           | 用途             |
|-----------|------------------------------|------------------|
| shadow-xs | 0 1px 2px rgba(0,0,0,0.06)   | 卡片懸浮態         |
| shadow-sm | 0 2px 8px rgba(0,0,0,0.08)   | 默認卡片           |
| shadow-md | 0 4px 16px rgba(0,0,0,0.10)  | 彈出層、Dropdown   |
| shadow-lg | 0 8px 32px rgba(0,0,0,0.12)  | Modal、抽屜       |
- ❌ 禁止：疊加多層陰影
- ❌ 禁止：彩色陰影（如使用品牌色做陰影色）

## Image Ratio · 圖片比例
| 場景          | 比例 | 說明                    |
|---------------|------|-------------------------|
| Banner / Hero | 16:9 | 全寬展示圖                |
| 相冊封面      | 4:3  | 橫向卡片縮略圖              |
| 方形縮略圖    | 1:1  | 網格佈局、正方形預覽          |
| 人物/故事卡片 | 3:4  | 豎向卡片，類 Story 風格      |
| 地圖預覽圖    | 2:1  | 寬幅地圖組件                |
- ❌ 所有圖片容器必須指定比例，禁止高度自適應導致比例失控
- ❌ 圖片必須設置 object-fit: cover，禁止拉伸變形

## Avatar · 頭像尺寸
| 尺寸  | 用途                       |
|-------|--------------------------|
| 24px  | 評論列表、密集型列表         |
| 32px  | 卡片內嵌、消息列表           |
| 40px  | 標準列表項、默認頭像         |
| 56px  | 個人主頁、詳情頁作者區        |
| 80px  | 個人資料頁頭部              |
- ❌ 禁止使用列表以外的尺寸（如 44 / 48 / 36px）
- ❌ 形狀：始終圓形，禁止方形頭像
- 缺省態：用戶名首字母 + primary-light 背景 + primary 色文字

樣例說明：組件名稱和變體數量基於假想產品，實際使用時請對照你的 Figma 組件庫逐一填寫。寫法邏輯可直接複用。

設計師最痛的點：做完一版組件庫，開發或 AI 拿去用時多出來十幾個"變體"。寫法關鍵：不只描述是什麼，要定義不能是什麼。

# Component Constraints

## Button
- 變體僅限：primary / secondary / ghost / danger
- 尺寸僅限：sm（32px高）/ md（40px高）/ lg（48px高）
- 圓角：固定 radius-full，不接受方形按鈕
- 最小寬度：88px；圖標按鈕除外
- ❌ 禁止：outline 變體（用 ghost 替代）
- ❌ 禁止：在 primary 按鈕上疊加圖標（視覺層級混亂）

## Button 決策樹
1. 頁面主要操作（唯一）→ primary
2. 次要/並列操作 → secondary
3. 內容區域內聯動作 → ghost
4. 刪除 / 不可逆操作 → danger
5. 圖標獨立觸發 → IconButton（不使用 Button 組件）

## Card
- 背景：必須為 surface (#FFFFFF)
- 陰影：默認 shadow-sm，懸浮態 shadow-xs
- 內邊距：只能是 16px 或 24px
- 圓角：radius-md（12px）
- ❌ 禁止：Card 內嵌套 Card
- ❌ 禁止：Card 內出現超過 3 層信息層級

## Input
- 高度固定：40px（md）/ 48px（lg）
- 圓角：radius-sm（6px）
- 邊框顏色：border（默認）/ primary（focus）/ danger（error）
- ❌ 禁止：placeholder 字色深於 text-disabled

## Modal / 彈窗
- 移動端：bottom sheet，圓角 radius-lg 僅上兩角
- 桌面端：居中彈窗，最大寬度 480px
- ❌ 禁止：移動端全屏 Modal（除相機/全屏預覽類場景）
- ❌ 禁止：超過 2 層 Modal 嵌套

第四層：03-patterns.md —— 佈局與交互模式

樣例說明：以下模式基於假想產品的頁面類型歸納，實際使用時請對照你的產品信息架構補充或刪減。

Token 定義了"原子"，Components 定義了"分子"，Patterns 定義的是它們怎麼組合成頁面。沒有這層，AI 做出來的每個頁面佈局都會是全新發明的。

# Layout & Interaction Patterns

## 頁面級佈局模式

### 列表頁（List Page）
- 結構：頂部固定 Header + 可滾動列表區 + 底部 Tab Bar
- Header 高度：56px（含狀態欄留白）
- 列表項高度：72px（單行）/ 88px（雙行）/ 不固定（含圖片）
- 空狀態：居中插圖 + heading-2 標題 + body-sm 說明 + primary 按鈕
- ❌ 禁止：列表頁頂部放超過 1 個主操作按鈕
- ❌ 禁止：列表項高度在同一列表內不一致

### 詳情頁（Detail Page）
- 結構：頂部 Hero 圖（16:9）+ 滾動內容區 + 底部固定 CTA
- 底部 CTA 區高度：80px + safeAreaInsets.bottom
- 返回按鈕：左上角，固定 44×44px 觸控區
- ❌ 禁止：詳情頁頂部放超過 2 個操作入口

### 表單頁（Form Page）
- 結構：頂部標題 + 表單區域 + 底部提交按鈕
- 字段間距：24px
- 標籤位於輸入框上方，間距 8px
- 提交按鈕：固定底部，寬度 100% 減左右各 16px
- ❌ 禁止：提交按鈕放在表單中間
- ❌ 禁止：多個字段使用不同的輸入框高度

### 儀表盤頁（Dashboard）
- 結構：頂部問候區 + 數據卡片網格 + 快捷入口列表
- 卡片網格：移動端 2 列，平板 3 列
- ❌ 禁止：Dashboard 首屏信息超過 5 個模塊

## 導航模式

### 底部 Tab Bar
- 最多 5 個 Tab，最少 3 個
- 圖標尺寸：24px，激活態使用 primary 色
- 標籤文字：caption（12px）
- ❌ 禁止：Tab Bar 上放非導航類操作（如"發佈"按鈕用 FAB 替代）

###
 頂部導航 Header
- 高度：56px（不含狀態欄）
- 標題：heading-3，居中或左對齊二選一，全局統一
- 右側操作：最多 2 個圖標，間距 8px
- ❌ 禁止：Header 放超過 2 個右側操作圖標

### FAB（浮動操作按鈕）
- 尺寸：56×56px
- 位置：右下角，距底部 Tab Bar 上方 16px
- ❌ 禁止：同一頁面出現超過 1 個 FAB

## 交互反饋模式

### 加載狀態
- 列表加載：Skeleton Screen（骨架屏），禁止 spinner 獨佔全屏
- 局部加載：組件內 spinner，尺寸 20px
- 頁面初始化：全屏 skeleton，1.5 秒後必須有內容或錯誤態

### 操作反饋
- 成功：Toast 提示，頂部彈出，2 秒自動消失
- 失敗：Toast 提示 + 錯誤原因，3 秒消失
- 危險操作：必須彈出 Confirm Dialog，說明後果
- ❌ 禁止：成功/失敗只改變按鈕顏色不給文字反饋
- ❌ 禁止：刪除/清空類操作無二次確認

### 手勢交互
- 列表項左滑：顯示操作項（刪除/歸檔），寬度固定 80px
- 下拉刷新：標準系統樣式，禁止自定義刷新動畫超過 2 秒
- 返回手勢：全屏邊緣右滑返回，禁止攔截系統手勢

第五層：04-responsive.md —— 響應式與多端適配

樣例說明：斷點數值、柵格列數基於假想產品的設備覆蓋範圍，實際項目需根據目標平台（純 iOS App / Web / 小程序）重新定義。

這是 AI 生成代碼時最容易塌陷的地方，也是設計師最難手動 review 的部分。

# Responsive & Multi-Device Rules

## 斷點定義
| 斷點 | 範圍          | 典型設備                  |
|------|---------------|------------------------|
| xs   | 0 – 374px     | 小屏手機(iPhone SE)      |
| sm   | 375 – 767px   | 標準手機                 |
| md   | 768 – 1023px  | 平板豎屏                 |
| lg   | 1024 – 1279px | 平板橫屏 / 小筆記本       |
| xl   | 1280px+       | 桌面端                  |

## 頁面邊距
- xs / sm：左右各 16px
- md：左右各 24px
- lg / xl：左右各 32px，內容區最大寬度 1200px，居中

## 字號響應規則
- display：sm=28px，md=32px，lg=40px
- heading-1：sm=20px，md=24px，lg=28px
- body：所有斷點固定 16px，不隨屏幕縮放

## 柵格系統
- 手機：4 列，gutters 16px
- 平板：8 列，gutters 24px
- 桌面：12 列，gutters 24px

## 觸控與鼠標行為差異
- 移動端：所有可點擊元素最小觸控區域 44×44px
- 移動端：❌ 禁止 hover 態作為唯一信息展示方式
- 桌面端：可以使用 hover 展示操作項

## 圖片響應式規則
- 所有圖片使用相對單位（100% 寬度），❌ 禁止固定像素寬度
- Hero Banner：sm=16:9，lg=21:9
- 縮略圖網格：sm=2列，md=3列，lg=4列

## iOS 安全區適配
- 底部需要 safeAreaInsets.bottom 留白
- 頂部狀態欄區域不允許覆蓋內容
- 橫屏模式：左右各加 safe area padding

## 深色模式
- 所有 Token 必須同時定義 light / dark 兩套值
- ❌ 禁止在深色模式下直接取反色（機械反轉）
- surface 色在深色模式下：#1C1C1E（iOS 規範）

第六層：05-dos-donts.md —— 設計師視角的明確禁止項

樣例說明：以下禁止項來自產品設計實踐中的高頻問題，部分條目與產品類型強相關，請根據你的項目實際增減。

# Design Dos & Don'ts
## 排版
❌ 正文段落居中對齊（閲讀效率低）
❌ 連續超過 3 行全大寫文字
❌ 單行文字超過 75 個字符不換行
❌ 兩個相鄰元素字號差距小於 2px（無法形成層級）
✅ 正文左對齊為原則，居中僅用於空狀態和引導頁

## 顏色
❌ 純黑（#000000）用於正文（刺眼，用 #1A1A1A）
❌ 純白（#FFFFFF）用於大面積背景（用 #FAFAF8）
❌ 兩個相鄰色塊顏色對比度低於 3:1
❌ 使用超過 3 種品牌色在同一屏幕內
✅ 信息層級靠字重 + 顏色同時區分，不依賴單一維度

## 間距與佈局
❌ 列表項上下間距不一致
❌ 同一屏幕內出現超過 3 種不同的圓角值
❌ 卡片內容與卡片邊緣沒有內邊距
❌ 圖標與文字標籤間距小於 4px
✅ 相同層級的元素必須使用完全一致的間距值

## 圖片與媒體
❌ 圖片容器沒有定義寬高比（導致加載時跳動）
❌ 用戶上傳圖片不加任何裁切直接展示
❌ 圖片上直接疊加純色文字（無遮罩層）
✅ 圖片文字疊加必須加半透明遮罩（rgba(0,0,0,0.4) 起步）

## 交互與狀態
❌ 可點擊元素沒有任何 pressed / hover 態反饋
❌ 表單提交按鈕在加載中不禁用（允許重複提交）
❌ 錯誤提示只顯示"出錯了"不說明原因
❌ 空狀態只有文字沒有視覺引導
✅ 所有異步操作必須有 loading → success/error 完整狀態

## 移動端專項
❌ 底部固定按鈕與系統 Home Indicator 重疊
❌ 字號小於 12px（系統默認縮放後不可讀）
❌ 橫向滾動列表沒有視覺提示說明"可滑動"
❌ 彈出鍵盤時輸入框被遮擋
✅ 底部 CTA 區域必須計算 safeAreaInsets

寫完之後，怎麼用

文件寫好只是第一步，注入策略決定它是否真正生效。

方式一：Cursor —— CLAUDE.md 自動加載（首選）

在項目根目錄放 CLAUDE.md，Cursor 每次會話自動讀取：

# CLAUDE.md

執行任何 UI 相關任務前，必須先讀取：
- @docs/design-system/00-meta.md
- @docs/design-system/01-tokens.md
- @docs/design-system/02-components.md
- @docs/design-system/04-responsive.md

生成結果自檢（不合格的主動說明並修正）：
- [ ] 所有顏色值來自 tokens.md
- [ ] 字號和字重在允許列表內
- [ ] 所有間距是 8pt 倍數
- [ ] 圖片容器已定義寬高比
- [ ] 已考慮移動端觸控區域
- [ ] 已聲明響應式斷點行為

一次配置，每次生效。

方式二：Claude.ai Project —— 設計評審場景

把 .md 文件上傳到 Claude Project 知識庫，適合與設計師討論方案時檢驗規範符合度、讓 AI 幫做 Redline 標註說明、評審 AI 生成稿時快速指出違規點。

方式三：API 注入 —— 自動化生成流水線

const tokens = fs.readFileSync('./docs/design-system/tokens.md', 'utf-8')
const components = fs.readFileSync('./docs/design-system/components.md', 'utf-8')
const responsive = fs.readFileSync('./docs/design-system/responsive.md', 'utf-8')

const systemPrompt = `
你是產品的 UI 生成助手。
以下設計規範強制執行，不得違反：

${tokens}
${components}
${responsive}`

三種方式對比

三個讓規範真正咬合的習慣

1. 用約束性語言，不用建議性語言

# 弱（AI 會忽略）
推薦使用 16px 作為正文字號
# 強（AI 會遵守）
正文字號必須為 16px，禁止使用 15px 或 17px

2. 提示詞裏"激活"文檔

按照 components.md 中 Avatar 的規範實現用戶頭像，
尺寸 40px，缺省狀態顯示首字母，移動端觸控區域不低於 44×44px

不要讓 AI 猜，要讓它查。

3. 要求 AI 輸出合規聲明

實現完成後，列出使用了哪些 token，
有無違反 dos-donts.md 的地方，如有請說明並修正

相當於讓 AI 做一次自動 design review。

 一句話總結 

設計規範存在 Figma 裏，AI 不會自動讀 Figma。

.md 文件是目前把設計系統注入 AI 上下文最有效的載體。它不是給人看的參考文檔，而是給 AI 的行為憲法——字號、字重、顏色、間距、頭像尺寸、圖片比例、響應式斷點……每一個值都是邊界，不是建議。

文章中所有 .md 示例均可作為起點模板。真正有效的設計規範文件，必須從你自己產品的 Figma 文件、組件庫和歷史決策中提煉——AI 遵守的邊界，本質上是你對自己產品的理解的結構化輸出。

你花在這套文件上的時間，會在之後每一次 AI 生成中償還——而且是複利償還的那種。

最後送大家一個寶藏網站：https://designmd.ai/

本文是 Vibe Coding 系列的進階篇。歡迎關注後續內容。

歡迎加入討論學習小組，加好友進羣

大家好，我是麥柯 Michael

設計師 / 開發者 / 攝影師

和我一起用Vibe Code構建屬於自己的產品！