简直就是教科书级别的 AI 设计规范。

原始來源與檔名：2026-06-23T093114+0800-简直就是教科书级别的 AI 设计规范。.md

NAPKIN | 餐巾纸

• 一句话: Vercel 的 DESIGN.md 展示了如何将视觉规范转化为「语义化、结构化」的规则体系，让 AI 能像资深工程师一样输出稳定一致的 UI 界面。
• 餐巾纸公式: 优秀 AI 设计规范 = 语义化系统 (Semantic Tokens) + 严格的限制 (Constraints) + 操作对象化 (Action + Object) + 极简动效与无障碍支持。
• 餐巾纸草图: 视觉决策 -> 语义决策 颜色 (RGB) -> 状态 (100-1000) 间距 (任意px) -> 节奏 (4px倍数，9个值) 文字 (字号/行高) -> 角色 (heading/copy/label)

ROUND 1: SKELETON | 骨架掃描

• 核心问题: 如何让 AI 在自动生成代码时，产出风格一致、符合产品节奏且不跑偏的 UI 界面？
• 核心答案: 编写一份给 AI 看的设计规范（DESIGN.md），不只是列出色值和字号，而是定义「语义规则」和「交互状态」，让 AI 做语义决策而非视觉决策。
• 论证结构与章节骨架:
  1. 引言: 介绍 Vercel 的 DESIGN.md，指出其核心是为 AI 提供执行准则，避免风格漂移。
  2. 颜色规范 (语义即状态): 颜色按 100-1000 梯度划分，对应默认、悬停、点击等固定状态，暗黑模式共用相同的语义 Token。
  3. 间距与字体 (限制即节奏): 间距限制在 9 个值（4px倍数），确立页面呼吸感；字体归纳为角色（标题、正文等），统一视觉层级。
  4. 文案规范 (消除猜测): 按钮文案需「动作+对象」，报错信息需包含「原因+解决办法」，去除冗余确认词汇。
  5. 动效与无障碍 (克制与包容): 多数场景 0ms 瞬间反馈，按变化幅度控制动效时长；强制对比度、焦点状态，服务所有用户群体。

ROUND 2: DISSECTION | 血肉解剖

• 隐形假设:
  • AI 生成 UI 的不确定性来源于提示词的模糊性（视觉层面的过度自由）。
  • 开发和设计的最高效率来自于限制选择，而非提供无限可能。
  • AI 能够理解高维度的语义映射（如 gray-1000 = 最重要的信息）并稳定地转化为实际代码。
• 边界条件:
  • 此类规范适用于高度组件化、系统化的产品开发（如 Vercel、SaaS 产品）。如果产品定位是强视觉冲击、实验性艺术设计，这套强约束规则可能会扼杀创意。

ROUND 3: SOUL | 靈魂提取

• 知识连结:
  • Design Token: 现代前端架构中的基础概念，Vercel 将其极致化并专门适配于 LLM 的上下文中。
  • Vibe Coding: AI 辅助编程的趋势，强调将领域知识抽象成 AI 可读的 Context，DESIGN.md 正是 UI/UX 领域的最佳实践。
  • KISS (Keep It Simple, Stupid) 原则: 文案及动效设计（如 0ms 反馈）完美契合。
• 深层洞见: 把视觉选择题变成逻辑判断题。AI 不擅长体会美感，但擅长遵循逻辑。当设计系统成为一套逻辑严密的映射表（State Map）时，AI 就能成为最顶尖的 UI 工程师。
• 行动呼吁:
  • 为自己的项目编写 DESIGN.md。
  • 将项目中的绝对数值（#FF0000, 14px）重构成语义化 Token（danger-color, text-sm）。
  • 检查报错文案，确保包含「原因+对策」结构。

简直就是教科书级别的 AI 设计规范。 (Architectural Deep Dive)

前言/背景

随着 AI 辅助编程（如 Cursor, Copilot 等 Vibe Coding 模式）的流行，开发者越来越依赖 AI 直接生成 UI 组件和页面。然而，AI 缺乏全局审美记忆，容易导致每次生成的界面风格不统一。Vercel 开源其 DESIGN.md，展示了如何通过一份机器可读（Machine-Readable）的设计系统文档，规范化 AI 的视觉输出。这不仅是一份文档，更是一种将设计思维「工程化」的典范。

章節詳細總結

1. 重构颜色系统：从色号到状态机 普通的设计规范只给出色盘，而 Vercel 将颜色抽象为 100-1000 的十级梯度。这十级并非简单的明暗变化，而是直接与 UI 的交互状态绑定：100-300 管理背景的默认/悬停/点击，400-600 管理边框状态，700-800 管理实心色块，900-1000 管理信息层级。这种设计使得颜色成为一种状态机，配合亮暗两套主题共用一套语义 Token，让 AI 摆脱了「选色」的纠结，只做状态的映射。

2. 空间与排版：通过约束建立节奏感 Vercel 的间距系统严格限制在 9 个值（基于 4px 乘数），字体排版则完全摒弃了让使用者选择字号和行高的做法，改为选择角色（标题、正文、标签、按钮）。优秀的架构不在于提供多少能力，而在于实施多少约束。通过收敛选项，设计系统强制页面形成固定的呼吸节奏和视觉层级，极大降低了决策成本。

3. 微文案设计：消除用户的认知负担 文案在设计规范中往往被忽视。Vercel 强调了「动作+对象」的结构（如“部署项目”而非“部署”），并在报错信息中要求必须包含事件原因和解决方案。这种系统级的语用学规定，提升了人机交互的效率，让提示信息具备了极高的操作价值，同时去除了“成功”等冗余状态词。

4. 动效与无障碍：克制与极客的工程修养 在动效泛滥的当下，Vercel 提倡在多数状态切换下使用 0ms 的瞬时反馈，仅在空间层级发生变化（如弹窗）时才引入动画，且时间严格依据变化幅度控制在 150-300 毫秒。无障碍设计（A11Y）作为硬性指标被纳入系统，包含对比度要求和交互焦点，彰显了成熟云原生/SaaS 平台的工程严谨性。

總結與結論

Vercel 的 DESIGN.md 是一场设计思维到系统工程的范式转换。对于 AI 和开发者而言，视觉不再是感性的像素堆砌，而是理性的语义组装。这套规范之所以被称为“教科书级别”，是因为它深刻洞察了机器与人类的边界：人类负责定义结构、状态、角色和节奏，而机器（AI）在这个坚实的轨道上，高速、一致地输出可靠的代码。所有致力于 AI 研发流水线建设的架构师和团队，都应将这份文档作为其 Prompt Engineering 及前端基建的必修课。