简直就是教科书级别的 AI 设计规范。
Vercel 的设计系统规范，真的是我见过的教科书级样例。
今天认真学习他们的 DESIGN.md，一亮一暗两套主题，彻底把颜色、字体、间距、组件、动效、文案规则，全部描述成了一套可以执行的设计方法。
感觉以后我所有产品的 design.md 都可以照这个路子来写了。
具体在这里：
可能有些朋友还不太清楚 DESIGN.md 是什么。简单说，它是一份给 AI 看的设计规范。当 AI 帮我们写代码的时候，它需要知道该用什么颜色、多大的字号、元素的间隔。
没有这份文件，AI 每次出的界面都长得不一样，风格飘忽不定。
看完 Vercel 的 DESIGN.md 之后，我发现一份好的 DESIGN.md，远远不止是告诉 AI 用什么色号、选几号字。它背后代表着一整套设计思维。挺颠覆我认知的。
今天就拆开来写一写，这份文件到底好在哪里。
1
先说颜色。
我最开始写 DESIGN.md 的时候，颜色部分其实很简单。列几个色值，告诉 AI 哪个是主色、哪个是辅助色、哪个是强调色，基本就结束了。
但这样写， AI 仍然不知道这些颜色应该如何对应不同的交互状态。
比如一个按钮，默认状态该是什么颜色？鼠标悬停的时候该变深多少？点击下去那一瞬间又该是什么颜色？这些细节如果没有明确规定，AI 每次生成的结果都可能不一样。
Vercel 的做法完完全全解决了这个问题。
在他们的设计系统里，每个颜色系列都被拆成了从 100 到 1000 的 10 个梯度，而且每个数字都对应一种固定的界面状态。
100 是元素的默认背景，200 是鼠标悬停时的背景，300 是点击时的背景。再往上，400 是默认边框，500 是悬停边框，600 是点击边框。
700 用于实心色块，比如标签或者按钮本身；800 是这类色块的悬停状态。900 用于辅助文字和图标，1000 用于主要文字和图标。
看起来只是数字编号，但背后其实对应着一套完整的交互逻辑。
100 到 300 管理背景状态。400 到 600 管理边框状态。700 和 800 管理实心色块状态。900 和 1000 管理信息层级。
也就是说，Vercel 实际上是在告诉 AI 这里有几种状态。颜色只是这些状态的表现形式。
这样带来的好处非常直接。
AI 写代码的时候，不需要再猜一个按钮悬停时该变深多少，也不用猜边框该怎么变化。默认态对应 100，悬停对应 200，点击对应 300，规则已经提前定义好了。
另外，在这个基础上，Vercel 还提供了亮色和暗色两套主题，但使用的是完全相同的 Token 名字。
比如 gray-1000。在亮色主题里，它是接近纯黑的 #171717。在暗色主题里，它变成了接近纯白的 #ededed。
对于设计系统来说，这两种颜色其实是同一个东西。
它们都代表页面里最重要的信息。开发和 AI 在生成界面时，关注的是 gray-1000 这个语义，而不是背后的具体色值。当主题切换时，系统自动把这个语义映射到对应的颜色。
2
解决了颜色的问题之后，另外一个更重要的约束是页面的节奏感。
Vercel 的间距体系基于 4px 的倍数，总共只给了 9 个值：4、8、12、16、24、32、40、64、96。整个产品里所有的间距，都从这几个数字里选。
我的第一反应会觉得有点少。万一需要 20px 怎么办？需要 28px 怎么办？
问了一个设计师朋友，他说对于绝大多数的产品而言，9 种间距样式其实基本上也够了。
如果有太多的间距选择，那页面的节奏感也就没了。很多糟糕的网站，间距的设计非常随意。这其实是做产品的大忌。
优秀的设计系统不会给无限选择，它会主动限制选择。
Vercel 直接给出了一套明确的节奏建议：组内元素之间保持 8px，组与组之间保持 16px，板块与板块之间保持 32 到 40px。这确实是在定义页面的呼吸节奏。
用户未必会注意到这些间距，但会自然感受到哪里属于同一个整体，哪里已经进入新的内容区域。
很多时候，一个页面之所以显得舒服，并不是因为设计师用了什么高级技巧，而是因为这种节奏始终保持一致。
字体也是同样的思路。
Vercel 的字体系统和颜色、间距的逻辑一模一样。
所有文字都被归纳成几个固定角色：标题 heading、标签 label、正文 copy、按钮 button。
每个角色下面再提供不同尺寸的 Token，每个 Token 都提前定义好了字体、字号、字重、行高和字间距。
之前面对一段文字，设计师可能会思考用 14px 还是 15px，行高设多少合适。
有了设计系统之后，思考方式变成了另一种。AI 先判断这段文字是什么角色。是标题，是正文，还是辅助信息。角色确定之后，对应的样式也就确定了。
从字号思维变成角色思维。从视觉决策变成语义决策。这也是设计系统真正的价值所在。妙。
看到这里会发现，无论是间距还是字体，Vercel 做的其实都是同一件事，尽可能减少执行阶段的自由发挥，规则提前确定，执行的时候只需要选择角色。
对设计师如此，对开发如此，对 AI 也是如此。
3
另外，文案同样被当成 Vercel 设计规范的重要部分。这是大多数 DESIGN.md 里最容易缺失的。
Vercel 对这些细节却规定得非常具体。
比如按钮文案，要求必须是一个动作加一个对象。像部署项目、删除成员这样。不能只写部署、确定、删除这种模糊词。
原因很简单。看到删除的时候，用户还需要想一下到底是删除什么。有动作，有对象，用户立马就能够形成完整的理解。
报错信息也类似。Vercel 给出的规则很明确。先告诉用户发生了什么。再告诉用户接下来应该怎么办。
例如构建失败，原因是打包文件超过了大小限制，解决办法是缩减体积或者调整限制。三句话读完，用户立刻知道问题在哪里，也知道下一步该做什么。
很多产品里的报错提示是操作失败，请稍后重试。这样的提示信息量几乎为零。用户读完之后唯一获得的信息，就是失败了。至于为什么失败，接下来怎么办，依然需要自己猜。
设计系统里的文案规范，本质上是在减少这种猜测。
Vercel 也还规范了操作完成后的提示信息，只需要说明发生了什么变化。比如项目已删除，不能写项目删除成功。
因为提示框能够弹出来，本身就已经说明操作完成了。成功这两个字属于重复信息。
接下来是动效。
这一部分其实特别有意思，因为它和我的直觉刚好相反。我会觉得，动画越多，产品越精致。
所以，按钮悬停加一点动画，菜单弹出加一点动画，似乎这样才显得高级。现在好多 Vibe Coding 的产品似乎都朝着这样的方向发展。
但 Vercel 的态度完全不同。他们甚至明确写到，很多交互场景下，0 毫秒往往是最好的选择。也就是说，不加动画，瞬间完成。
如果一个按钮从默认状态变成悬停状态，这个变化已经足够清晰。那最好的反馈就是立刻发生，额外加一层动画，反而会让界面显得拖沓。
当然，有些场景确实需要动效。
比如一个弹窗突然出现。如果完全没有过渡，人会不知道它从哪里来的。这时候动画就有价值了。
Vercel 甚至把不同场景的时长都规定好了。普通状态变化大约 150 毫秒，弹出层大约 200 毫秒，模态框大约 300 毫秒。
变化越大，给人的反应时间越长。变化越小，反馈越直接。
背后的逻辑始终只有一个，能不动就不动，需要动的时候，也要快、轻、克制。
最后一个让我印象很深的部分是无障碍。
说实话，这一部分以前我几乎不会专门关注。因为大多数时候，一个产品只要界面好看、功能能用，好像就够了。但 Vercel 在这里写得特别认真。
他们要求文字和背景之间必须保持足够的对比度。状态变化不能只靠颜色表达，还要搭配图标或者文字说明。
所有可以交互的元素都必须有清晰的焦点状态，不能为了视觉干净就去掉。
这些规则意味着设计系统服务的是所有人，包括色觉不敏感的人、用键盘导航的人、在强光下看手机的人。
太专业了这个 DESIGN.md。我觉得后面大家要做新的产品，可以基于这两套 MD 的思路去写自己的 DESIGN.md。
