这是一篇只讲方法、不讲玄学的硬核干货。

先从一个熟悉的桥段说起

你是设计团队的 Lead，刚把一整套设计规范打磨完：色板、字体层级、间距系统、组件库，全部整理进 Figma，还配了一份 20 页的 Design Guideline PDF，发给了所有人。

你让 AI 试着搭第一个页面，效果还行。第二个页面开始，颜色就“跑偏”——AI 自作聪明上了一个“看着差不多”的灰。到第五个页面，风格已经散成一盘：字号对不上，间距随机跑，按钮圆角直接变成直角。你去问它为啥，它说：抱歉，我不清楚你的规范是什么。

问题的本质很简单：你有规范，但 AI 不知道。每一次对话，它都在从零猜。最近更新的 Google Stitch 2.0 也在强调同一个诉求：把边界和约束明确告知 AI。

设计师的日常规范 vs 无约束 AI 的真实表现

• 字号系统（12 / 14 / 16 / 20 / 24 / 32px）→ AI 会随机用 13、17、22px，且每次都不一样
• 字重（400 / 500 / 700）→ AI 偶发 600、800，甚至整页加粗
• 主色 #3D7A5F，禁用渐变 → AI 会加“氛围感”渐变
• 间距 8pt Grid → AI 产出 10 / 14 / 18px 等游离值
• 头像尺寸 24 / 32 / 40 / 56px → AI 做出一个 44px
• 图片比例 16:9 / 4:3 / 1:1 → Banner 来个 2:1，卡片自由裁切
• 对齐左为主，居中只在空状态 → 标题全居中，卡片也居中
• 移动端最小触控 44×44px → 按钮只有 32px 高，根本点不着
• 响应式断点 375 / 768 / 1280px → 生成代码只考虑一个宽度

这不是 AI 能力不行，而是它没有被明确告知“边界”。你的规范在 Figma、在 PDF、在设计师脑子里，但不在 AI 的上下文里。

解法：把 .md 文件当作 AI 的“行为宪法”

.md 文件在 AI 工作流里不只是文档，而是约束层。建议按层搭建一套可注入的规范文件体系：

/design-system/
├── 00-meta.md        # AI 行为总纲
├── 01-tokens.md      # 色彩、字体、间距等 Tokens
├── 02-components.md  # 组件边界与变体
├── 03-patterns.md    # 布局与交互模式
├── 04-responsive.md  # 响应式与多端适配
└── 05-dos-donts.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. 最后才新建——且必须主动说明原因

## 符号约定
- ❌ 表示：严格禁止，不得出现在任何生成结果中
- ✅ 表示：必须遵守的强制规则

第二层：01-tokens.md —— 全量 Design 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 色文字

第三层：02-components.md —— 组件边界

别只描述“是什么”，还要定义“不能是什么”。

# 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 —— 布局与交互模式

Tokens 是原子、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 —— 响应式与多端

这是最容易

# 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

规范写好了，如何“注入”到 AI

方式一：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 文件上传到 Project 知识库。适用于：联合作图/审稿时用规范做对照、让 AI 标注 Redline、快速指出违规点。

方式三：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}
`

三种方式如何选

• 日常开发：Cursor + CLAUDE.md 自动注入，高频高效
• 一次性设计任务：Cursor 中 @file 精准引用，按需加载
• 产品讨论/评审：Claude.ai Project 知识库，非代码任务更合适
• 批量生成流水线：API 注入为 system prompt，自动化最佳

让规范真正“咬住”生成结果的 3 个习惯

1. 用“约束性”语言，别用“建议性”语言
   • 弱：推荐使用 16px 作为正文字号
   • 强：正文字号必须为 16px，禁止 15px 或 17px
2. 在提示词里“激活”文档

   按照 components.md 中 Avatar 的规范实现用户头像：
   尺寸 40px，缺省状态显示首字母，
   移动端触控区域不低于 44×44px。

   不要让 AI 猜，要让它查。

3. 要求 AI 输出合规声明

   实现完成后，列出具体使用了哪些 token，是否触犯 dos-donts.md；如有违规，必须说明并修正。这等于自动做了一次 design review。

一句话收束

AI 不会自动读你的 Figma；.md 文件是把设计系统注入 AI 上下文的当前最佳载体。它不是给人看的“参考”，而是给 AI 的“行为宪法”。字号、字重、颜色、间距、头像尺寸、图片比例、响应式断点……每一个值都是边界，不是建议。

本文所有 .md 示例可直接当模板起步。但真正有效的规范，必须从你自己产品的 Figma、组件库和既有决策中提炼。你在这套文件上投入的时间，会在每一次 AI 生成里持续回报——而且是复利回报。