Vibe Coding | 用 .md 文件給 AI 立規矩：設計生成的邊界控制
整理版優先睇
用分層 .md 文件幫 AI 劃清設計底線，令生成結果唔會漂移走樣
作者係一位 design lead，親手整咗一套完整設計規範放曬入 Figma 跟 PDF，但每次叫 AI 幫手生成頁面，結果都係一開始幾好，做多幾個就顏色走位、字號亂嚟、間距隨機，完全唔似同一個產品。佢發現問題唔係 AI 能力問題，而係你有設計規範但 AI 睇唔到——佢每次對話都係由零開始。最近 Google Stitch 2.0 都表達緊同一個訴求，可見呢個係業界共同痛點。
解法係建立一套分層嘅 .md 文件體系，令佢哋成為 AI 嘅行為憲法而唔係普通參考文檔。呢套體系包括六個文件：00-meta.md（AI 行為總綱）、01-tokens.md（全量設計 Token）、02-components.md（組件約束清單）、03-patterns.md（佈局與交互模式）、04-responsive.md（響應式與多端適配）、05-dos-donts.md（明確禁止項）。每個值都係邊界唔係建議，AI 遇到任何決策要先查文檔唔好靠估。
注入方面提供咗三種方式：Cursor 用 CLAUDE.md 自動加載（首選、高頻開發場景）、Claude.ai Project 知識庫（精準控制產品討論/評審）、API system prompt 注入（自動化流水線、批量生成）。配合三個習慣——用約束性語言而非建議性語言、提示詞入面激活文檔、要求 AI 輸出合規聲明——就可以令規範真正咬合埋 AI 工作流程。
- 分層 .md 文件體系（00-meta 至 05-dos-donts）係目前將設計系統注入 AI 上下文最有效嘅載體，每個值都係邊界唔係建議
- 三種注入方式：Cursor 用 CLAUDE.md 自動加載（適合高頻日常開發）、Claude.ai Project 知識庫（適合設計評審討論）、API system prompt 注入（適合自動化批量生成）
- 寫作時要用約束性語言（「必須」而非「推薦」）、喺提示詞入面激活文檔、要求 AI 做完之後輸出合規聲明，三個習慣令規範真正生效
- 設計師日常面對嘅規範內容同 AI 沒約束時嘅實際行為有明顯落差，例如字號隨機出現 13/17/22px 而唔係規範嘅 12/14/16/20/24/32px
- 文章所有 .md 示例只係起點模板，實質嘅色值、字號、組件名稱、斷點等必須替換成你自己產品嘅真實規範，AI 遵守嘅邊界本質上係你對產品理解嘅結構化輸出
六層設計規範文件體系模板
包含 00-meta.md（行為總綱）、01-tokens.md（顏色/字體/間距 Token）、02-components.md（組件約束清單）、03-patterns.md（佈局與交互模式）、04-responsive.md（響應式斷點）、05-dos-donts.md（明確禁止項）嘅完整寫法範例，可直接基於呢個框架替換你產品嘅實際數值
Cursor CLAUDE.md 自動加載配置
喺項目根目錄創建 CLAUDE.md，每次會話自動讀取 design-system 文件夾入面嘅規範文件，並要求 AI 每次生成之後做自檢
設計師熟悉嘅場面：規範做曬但 AI 唔知
文章整理咗設計師日常面對嘅規範內容，同 AI 冇約束時嘅實際行為做咗一組對比，揭示咗當中幾個最常見嘅落差：字號系統規範係 12/14/16/20/24/32px，但 AI 會隨機用 13、17、22px；字重規範係 400/500/700，但 AI 會出現 600、800 甚至全文加粗；主色 #3D7A5F 明確禁止漸變，但 AI 會自作主張加個「氛圍感」漸變；間距系統係 8pt Grid，但 AI 會出現 10px、14px、18px 呢啲隨機值；頭像規範尺寸係 24/32/40/56px，但 AI 整咗個 44px 出嚟；圖片比例規範係 16:9/4:3/1:1，但 Banner 用咗 2:1、卡片用咗自由裁切。呢啲唔係大問題，但累積落嚟就會令成個產品睇落似多個唔同人整嘅。
解法：分層 .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 # 明確禁止項最重要嘅係第一層 00-meta.md，佢定義咗所有 AI 生成原則：所有 UI 決策必須優先查閲文檔，未定義嘅顏色值、字號/字重、組件變體一律禁止使用，所有間距必須係 8pt Grid 倍數不接受例外。
01-tokens.md 係核心文件，涵蓋顏色系統（品牌色/中性色/功能色）、字體系統（嚴格嘅字號層級表）、間距系統（8pt Grid 倍數）、圓角、陰影、圖片比例、頭像尺寸等等。關鍵係每個值都係邊界唔係參考，唔允許中間值出現。02-components.md 定義組件嘅變體、尺寸、圓角、決策樹，寫法關鍵係唔只描述係乜，要定義唔能夠係乜。03-patterns.md 定義頁面點樣由原子組件組合成完整頁面，包括列表頁、詳情頁、表單頁、儀表盤嘅佈局模式，同埋導航模式、交互反饋模式。04-responsive.md 定義五個斷點同埋每個斷點嘅字號響應、柵格系統、觸控與鼠標行為差異、圖片響應式規則、iOS 安全區適配、深色模式。05-dos-donts.md 係從實踐中歸納嘅高頻問題，明確列曬排版、顏色、間距、圖片、交互方面嘅禁止項。
注入策略：點樣令規範真正咬合
寫好 .md 文件係第一步，注入策略先至決定佢係咪真正生效。
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}`Cursor 方式係首選，只要喺項目根目錄放 CLAUDE.md，每次會話自動讀取規範文件，並定義埋生成結果嘅自檢清單——所有顏色值必須來自 tokens.md、字號字重喺允許列表內、所有間距係 8pt 倍數、圖片容器已定義寬高比、已考慮移動端觸控區域、已聲明響應式斷點行為。Claude.ai Project 適合同設計師討論方案時檢驗規範符合度，或者評審 AI 生成稿時快速指出違規點。API 注入適合配合 CI/CD 流水線做批量生成，可以用嚟做自動 design review。
三個令規範真正咬合嘅習慣
用約束性語言而唔係建議性語言——「必須」會被遵守，「推薦」會被忽略。
第一個習慣係用約束性語言。例如「推薦使用 16px 作為正文字號」呢句太弱，AI 會忽略；但「正文字號必須為 16px，禁止使用 15px 或 17px」呢句夠強，AI 會遵守。所有 .md 文件入面都要用 ❌ 標記嚴格禁止嘅行為，✅ 標記必須遵守嘅強制規則。 第二個習慣係喺提示詞入面激活文檔。唔好叫 AI 靠估，要叫佢查。例如「按照 components.md 中 Avatar 嘅規範實現用戶頭像，尺寸 40px，缺省狀態顯示首字母，移動端觸控區域不低於 44×44px」，呢個具體指示會令 AI 主動去查文檔。 第三個習慣係要求 AI 輸出合規聲明。叫佢喺實現完成之後列出使用咗邊個 token，有無違反 dos-donts.md 嘅地方，如有請說明並修正。呢個步驟相當於叫 AI 幫你做一次自動 design review。
一句話總結
作者 Michael 係設計師 / 開發者 / 攝影師，專注用 Vibe Code 構建自己嘅產品，歡迎關注後續內容同加入討論學習小組。
呢篇係「好乾好乾」嘅乾貨
先講個設計師都熟嘅場景
假設你係設計團隊嘅 Lead，剛整完一套完整嘅設計規範：色板、字體層級、間距系統、組件庫。你放佢入 Figma，寫咗份 20 頁嘅 Design Guideline PDF，派曬俾所有人。
跟住，你叫 AI 幫你整第一個頁面，結果算係幾好。
整第二個，顏色就開始漂移——AI 自己做咗主意用咗個「睇落差不多」嘅灰。
整到第五個，你已經認唔出呢個係同一個產品。字號錯曬，間距係random嘅，掣鈕圓角變曬方。
你問 AI，佢就話：對唔住，我唔知道你嘅規範係點。
呢個就係問題所在：你有設計規範，但 AI 唔知。每次傾偈，佢都係由零開始。
最近更新嘅 Google Stitch 2.0 表達嘅都係同一個訴求。
設計師日常 vs AI 生成現實：一組對比
喺 solution 之前，先列出設計師喺工作流入面真正面對嘅規範內容，再對照 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 生成 code 時最易塌陷嘅地方，亦都係設計師最難手動 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 或 17px2. 提示詞入面「激活」文件
按照 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 構建屬於自己嘅產品！
- 這是一篇“很乾很乾”的乾貨 -
先說一個設計師熟悉的場景
假設你是一個設計團隊的 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 或 17px2. 提示詞裏"激活"文檔
按照 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構建屬於自己的產品！