Vercel DESIGN.md：给 AI 执行的设计规范

这篇 X Article 的核心判断很直接：好的 AI 设计规范不是一张色值表，而是一套把设计判断提前结构化的执行系统。Vercel 的 `design.md` / `design.dark.md` 把颜色、间距、字体、文案、动效和无障碍写成稳定 token 与语义规则，让 AI 在生成界面时少猜测、多选择。

一句话总结

Vercel 的设计规范有价值，不只是因为它好看，而是因为它把“应该怎么设计”翻译成了 AI 可以稳定复用的规则：状态用颜色梯度表达，布局用少量间距控制节奏，文字用角色而不是随意字号，文案和动效也被纳入产品体验的一部分。

核心观点

1. 颜色不是色号，而是状态系统

文章最看重的是 Vercel 对颜色梯度的语义化处理。100 到 300 管背景状态，400 到 600 管边框状态，700 到 800 管实心色块，900 到 1000 管文字和图标层级。AI 不再需要临场判断 hover、active、border 应该如何变化。

2. 明暗主题共享同一套 token

同一个 token 在亮色和暗色主题里可以映射到完全不同的色值，但语义保持不变。比如 `gray-1000` 在亮色里接近黑色，在暗色里接近白色，表达的都是“最重要的信息”。

3. 间距越克制，页面越稳定

Vercel 的间距体系基于 4px 倍数，只保留少数常用值。文章认为这不是限制创造力，而是在定义页面节奏：组内、组间、板块间分别用稳定间距表达信息关系。

4. 字体从尺寸思维变成角色思维

标题、标签、正文、按钮分别有固定角色和 token。AI 的任务变成判断文本角色，而不是随手挑 14px、15px 或某个行高。这会显著降低同一产品内的视觉漂移。

5. 文案也是设计系统的一部分

文章特别强调按钮、错误提示和成功提示的规则。按钮应包含动作和对象，错误提示要说明发生了什么和下一步怎么办，完成提示不必重复“成功”。这些都在减少用户猜测。

6. 动效要克制，无障碍要前置

Vercel 的思路不是动画越多越精致，而是能瞬时反馈就瞬时反馈，只有状态变化需要解释来源时才加短动画。同时，对比度、焦点态、不能只靠颜色传达状态，也被纳入基础规范。

文章结构复盘

开篇	作者先指出 Vercel 的 DESIGN.md 是一份“给 AI 看的设计规范”，用于约束 AI 生成界面时的颜色、字号、间距和组件行为。
颜色	重点拆解颜色 token 的状态含义，以及亮色 / 暗色主题共用 token 名称的语义价值。
节奏	通过 4px 倍数和少量间距值，说明设计系统应主动限制选择，让页面形成一致的呼吸感。
字体	把字体看成信息角色系统。先判断文本承担什么角色，再套用对应样式。
文案	按钮、错误提示、完成提示都要有明确规则，让用户少猜一步。
动效与无障碍	动效服务于理解，不服务于炫技；无障碍不是附加项，而是产品可用性的底线。

对 AI 产品开发的启发

DESIGN.md 应该写语义，不只写数值。比如“主要文字用 `gray-1000`”，比“文字用 #171717”更适合跨主题、跨组件复用。
状态映射要提前定好。默认、悬停、按下、禁用、聚焦等状态都应有明确 token，避免 AI 每次生成新风格。
间距系统应少而稳定。可选值过多会让界面碎掉；固定节奏能让 AI 更容易生成一致布局。
文案规范要进设计文件。AI 生成产品界面时，按钮和错误提示常常比配色更影响可用性。
动效默认保守。状态反馈要快，只有弹窗、抽屉、上下文切换这类需要空间解释的场景才需要明显过渡。
无障碍规则不能后补。对比度、键盘焦点、图标和文字双通道表达状态，应在规范中直接出现。

可直接借鉴的 DESIGN.md 骨架

1. Design principles
   - 产品气质、密度、边界、哪些效果不要用

2. Tokens
   - Colors: semantic roles + state mapping
   - Spacing: allowed values + layout rhythm
   - Typography: text roles + size/weight/line-height
   - Radius, shadow, border, z-index

3. Components
   - Button, input, menu, modal, table, card
   - Default / hover / active / disabled / focus states

4. Motion
   - When duration should be 0ms
   - When to use 150ms / 200ms / 300ms
   - Easing and reduced-motion rules

5. Copy
   - Button = verb + object
   - Error = what happened + why + next step
   - Toast = state change, no redundant success wording

6. Accessibility
   - Contrast
   - Focus visibility
   - Non-color-only status
   - Keyboard navigation

我的判断

这篇文章值得保存，因为它讲清了 AI 时代设计规范的真正变化：过去设计系统主要服务设计师和前端，现在还要服务 AI。给 AI 的规范不能停留在“风格参考”，必须变成可执行的约束。

如果后续要给自己的产品写 DESIGN.md，我会优先复制它的方法，而不是复制它的色值：用 token 表达语义，用少量选择稳定节奏，把文案、动效和无障碍一起写进去。这样 AI 生成的页面才更像同一个产品，而不是每次重开一套视觉。

转载与来源

转载/摘录声明：本文为原文内容的归纳整理与短摘录，保留原作者、发布时间和来源入口；完整内容以原发布页面为准。

原作者：小盖（@xiaogaifun）
发布时间：2026-06-22 11:06 UTC，X 显示为 2026-06-22
原文标题：简直就是教科书级别的 AI 设计规范。
原文入口：https://x.com/xiaogaifun/status/2069014055579509117
文章讨论对象：Vercel design.md 与 Vercel design.dark.md

“Vercel 的设计系统规范，真的是我见过的教科书级样例。”

“从字号思维变成角色思维。”