拆解Vercel的AI设计规范

来源：X @xiaogaifun

DESIGN.md 是面向 AI 的设计规范文件。它以文字形式将产品的颜色、字体、间距、动效写成可执行规则，AI 编写代码时按这些规则取值，避免每次生成的界面都不一致 ^[0,2]。公司自行发布这类文件。VoltAgent 维护的跟踪列表显示，截至 2026 年 8 月共有 7 家公司公开了各自的 DESIGN.md，Vercel 就在其中 ^[2]。Vercel 把这份文件放在 vercel.com/design.md，并跟随产品更新。例如官网调整字体比例时，文件也会同步修改；抓取的旧副本会让 AI 使用过时的样式 ^[2]。文件约 6500 词，其中一节标题为 “Reject generated-design reflexes”（拒绝生成式设计的默认反应），列出生成器在未收到禁止指令时倾向于优先使用的做法 ^[2]。素材称这份文件为“教科书级”的 AI 设计规范，并把其思路概括为：从视觉决策转向语义决策 ^[0]。

网上流传的许多“Vercel 设计系统分析”是第三方对最终页面的解读，与第一方源文件不同 ^[2,3]。下文以 Vercel 官方颜色文档、第一方文件副本和第三方整理为依据，逐项拆解这份规范。

素材认为颜色部分是整份文件的核心 ^[0]。传统 DESIGN.md 只列出几个色值并标明主色、辅色，AI 不知道按钮在默认、悬停、点击状态下应该是什么颜色 ^[0]。Vercel 将每个颜色系列拆成 10 个梯度，每个梯度对应一种界面状态：100 为默认背景，200 为悬停背景，300 为点击背景；400 至 600 依次为默认、悬停、点击边框；700、800 用于实心色块及其悬停态；900、1000 分别用于次要和主要文字与图标 ^[0]。这套结构与 Vercel 官方 Geist 颜色文档一致：同一系列中 1-3 号负责背景（2 号悬停、3 号激活），4-6 号负责边框（默认、悬停、激活），7-8 号用于高对比背景及其悬停态，9-10 号用于文字与图标 ^[15]。也就是说，编号表示交互状态，颜色是状态的表现形式；AI 只要查表，不需要猜测“悬停时变深多少”，因为规则已预先定义 ^[0]。亮色与暗色主题共用同一组 Token 名，切换主题时映射到不同色值。素材举例：gray-1000 在亮色主题中为接近纯黑的 #171717，在暗色主题中为接近纯白的 #ededed ^[0]。第一方文件同样要求颜色语义化：组件中不得硬编码色值，必须使用 text-primary 这类语义 Token ^[2]。近黑的 #171717 确实是这套系统的底色，多个来源都将其排在灰阶最深位置 ^[8,17]。不过，若据此以为 Vercel 的界面色彩丰富，那就错了。第一方 DESIGN.md 副本显示，Vercel 本质上接近无彩色：界面只使用四级灰阶（#FAFAFA → #F2F2F2 → #EBEBEB → #171717），蓝色 #0072F5 是唯一的交互强调色，仅出现在链接、焦点环和 skip-to-content 指示中，其余颜色被压缩为不超过 10px 的状态圆点 ^[6]。机制上，“颜色即状态”用于编码交互；审美上，这套系统的纪律是把彩色使用控制在最低程度 ^[6]。

间距方面，素材称 Vercel 以 4px 为基数，总共只提供 9 个值（4、8、12、16、24、32、40、64、96），并建议组内使用 8px、组间使用 16px、板块使用 32-40px 的节奏 ^[0]。这里存在出入：另一份整理将 Vercel DESIGN.md 的间距值记录为 12 档，从 4px 延伸到 192px 的板块间距 ^[7]。无论档位多少，限制选择本身就产生节奏感。间距值过密反而难用：线性刻度上 24 和 28 之间只差 4px，没人能清楚说明何时该用哪个 ^[22]；8 点网格体系将可用值限制为固定列表（8、16、24、32、40、48、64……），正是为了减少随意取值 ^[21]。素材中一位设计师朋友说“9 种基本够用”，这说的也是同一件事：大多数产品真正需要的间距档位远少于工具能提供的数量 ^[0]。字体采用同样思路。Vercel 将文字分为标题、标签、正文、按钮等固定角色，每个角色对应一组 Token，预先定义字体、字号、字重、行高、字间距 ^[0]。Geist 的字阶按此粒度定义：正文小号为 16px、字重 400、行高 1.5；按钮与链接为 14px、字重 500、行高 1.43；整套共 15 种字阶 ^[8,7]。决策方式因此改变：不再纠结于 14px 还是 15px，而是先判断文字属于哪个角色，样式自动匹配 ^[0]。间距和字体在做同一件事：减少执行阶段的自由发挥，从字号思维转向角色思维 ^[0]。

文案在大多数 DESIGN.md 中是最容易缺失的部分 ^[0]，Vercel 却把文案规范写到了句式层面。按钮文案必须采用“动作 + 对象”的形式：写“部署项目”“删除成员”，不写“部署”“删除”这类模糊词，因为用户看到“删除”时还要猜测删除的对象 ^[0]。报错信息要先说发生了什么，再讲接下来怎么办，让用户立即知道问题所在和下一步操作 ^[0]。“错误要说明如何修复，而不只是哪里出了问题”也出现在面向 Vercel 风格的 AI 设计检查清单中 ^[10]。操作完成后的提示只说明发生了什么变化，例如“项目已删除”，而不是“项目删除成功”——提示能够弹出来就表明操作已完成了，“成功”属于重复信息 ^[0]。这三条规则的共同点是消除猜测：每条文案都提供完整信息，用户不需要自行补全 ^[0]。

动效部分与直觉相反：很多交互场景下 0 毫秒才是最佳选择，即不加动画、瞬间完成 ^[0]。独立分析证实了这种克制：Vercel 的动效时长在 150-250ms 之间，缓动以 ease-out 为主，几乎不用弹簧——“部署成功不该有电影感，它应该让人感到正确” ^[32]。AI 设计工程实践中有一条相似原则：交互触发频率越高，越不应加动画。每天触发上百次的交互（如快捷键、命令面板）永远不加动画；最强的修复往往是删除动画 ^[28]；键盘触发的动作直接取消动画 ^[30]。当然，空间变化明显的场景需要过渡，例如弹窗凭空出现时，用户不知道它从哪里来 ^[0]。素材给出的 Vercel 时长划分是：普通状态变化约 150ms，弹出层约 200ms，模态框约 300ms，变化越大反应时间越长 ^[0]。这组量级在行业中是共识：UI 动画一般不超过 300ms ^[28]，模态窗这类大幅画面变化用 200-300ms 合适 ^[34]。背后的逻辑只有一条：能不动就不动，需要动时也要快、轻、克制 ^[0]。

素材将无障碍放在最后，但 Vercel 对它的规定同样具体 ^[0]。Vercel 的 Web Interface Guidelines 明确要求：每个可聚焦元素都要有可见的焦点环，优先使用 :focus-visible，成组控件配 :focus-within；所有流程必须能用键盘操作；不允许禁用浏览器缩放 ^[42]。第一方 DESIGN.md 副本将焦点样式进一步细化：双层焦点环，内层 2px 白、外层 4px 蓝，白环保证在任何背景下可见 ^[6]。这些要求依据 WCAG 标准：普通文字与背景的对比度至少 4.5:1，大号文字至少 3:1 ^[36,43]；4.5:1 是 WCAG 设定的最低要求，选择该值是因为它对应中度弱视用户约 20/40 的视力水平 ^[35]。用于识别界面组件和状态的视觉信息与相邻颜色的对比度至少 3:1 ^[36,43]，焦点指示器与相邻颜色也至少 3:1 ^[41]。“状态变化不能只靠颜色表达”对应 WCAG 的“使用颜色”成功标准——颜色传递的信息必须同时用文字、图案等方式传达 ^[35,39]。Vercel 的色板为可访问性留出了专门位置：10 步色阶的最后两档是次要和主要文字图标色，按可访问对比度设计 ^[15]。这些规则表明设计系统面向所有人：色觉不敏感者、用键盘导航者、在强光下看手机的人 ^[0]。

最后一部分是那份“拒绝生成式设计的默认反应”清单 ^[2]。被提取出来的 Vercel 设计系统将套路具体化为：悬停时 3D 倾斜的功能卡片、每个表面都叠加阴影、每个标题都用渐变文字、没有真实出处的用户证言。每一项旁都给出替代写法：抬高表面用实色加 1px 边框；边框与阴影二选一；阴影只留给浮层 ^[16]。这正是整份 DESIGN.md 的方法论缩影：不但规定该用什么，也规定不该用什么 ^[2]。规则提前确定后，执行时只需选择角色，无需自由发挥 ^[0]。对设计师、开发者、AI 都是如此 ^[0]。

原文更正：素材称 Vercel 间距体系只有 9 个值（4 到 96px）；另一份整理记录为 12 档，从 4px 到 192px。 ^[7]

参考来源