Vercel的DESIGN.md文件是AI时代设计规范的典范。这份规范不仅为AI提供了编写代码所需的具体设计参数，更体现了一种整体的设计思维，确保产品风格的一致性和用户体验的优化。它涵盖了颜色、字体、间距、组件、动效和文案等多个方面，且能够同时支持亮色与暗色主题。
结构化颜色系统
Vercel的颜色规范远超简单的色值罗列，它将每个颜色系列细分为10个梯度（从100到1000），并为每个数字赋予了明确的界面状态语义。例如：
- 100-300：管理背景状态（100为默认背景，200为鼠标悬停背景，300为点击状态背景）。
- 400-600：管理边框状态（400为默认边框，500为悬停边框，600为点击边框）。
- 700-800：管理实心色块状态（700为实心色块，800为悬停状态）。
- 900-1000：管理信息层级（900用于辅助文字和图标，1000用于主要文字和图标）。
这种语义化的设计，使得AI在生成界面时，无需猜测颜色，只需根据交互状态选择对应的数字即可。此外，Vercel通过亮色和暗色主题使用相同的Token名称（如gray-1000），实现在不同主题下自动映射到相应色值，保证了主题切换时的连贯性。
严谨的间距与字体规范
统一的间距体系
Vercel的间距体系基于4像素的倍数，仅提供9个固定值（4、8、12、16、24、32、40、64、96），这种限制性选择有助于保持页面的节奏感和一致性。它还给出了具体的间距建议：
- 组内元素间距：8px
- 组与组之间间距：16px
- 板块与板块之间间距：32-40px
这套规则定义了页面的“呼吸节奏”，让用户自然地感知元素的归属和内容的区块划分。
语义化字体系统
Vercel的字体系统与颜色和间距体系异曲同工，强调语义而非视觉细节。所有文字被归纳为几个固定角色：标题（heading）、标签（label）、正文（copy）、按钮（button）。每个角色下再细分不同尺寸的Token，每个Token都预先定义了字体、字号、字重、行高和字间距。例如，图片中展示了字体系统包括：
Headings, 'heading-72' through 'heading-14'用于标题页面和章节。Labels, 'label-20' through 'label-12'用于导航、表单标签、表格头、元数据。Copy, 'copy-24' through 'copy-13'设置多行正文。Buttons, 'button-16' through 'button-12'用于按钮的标签。
设计师和AI在应用时，只需判断文字的角色，对应的样式便自动确定，实现了从“字号思维”到“角色思维”的转变。
细节化文案与克制动效
精准文案指南
Vercel的DESIGN.md还将文案纳入规范，这在多数设计系统中较为少见。它规定了按钮文案必须是“动作+对象”的形式，例如“部署项目”而非“部署”，减少用户的理解成本。报错信息也需遵循“发生了什么+如何解决”的原则，提供完整的问题与解决方案，而非模糊的提示。操作完成提示也力求简洁，只说明结果，例如“项目已删除”，避免冗余的“成功”字眼。
有策略的动效使用
与直觉相反，Vercel提倡动效的克制，甚至在许多交互场景中建议使用0毫秒动画，即即时反馈。因为它认为，如果状态变化本身已足够清晰，额外的动画反而会增加用户等待时间，使界面显得拖沓。当然，在弹窗出现等需要视觉引导的场景，动效是必要的，且Vercel对不同场景的动效时长也有明确规定：
- 普通状态变化：150毫秒
- 弹出层：200毫秒
- 模态框：300毫秒
其核心原则是：能不动就不动，需要动时也要做到“快、轻、克制”。
全面无障碍设计
Vercel的设计规范还特别重视无障碍性。它要求：
- 文字与背景之间必须有足够的对比度。
- 状态变化不能仅依靠颜色表达，需搭配图标或文字说明。
- 所有可交互元素都必须有清晰的焦点状态，不为视觉简洁而牺牲。
这些规则确保产品能够服务于所有人，包括色觉障碍者、使用键盘导航的用户以及在各种光线条件下使用设备的用户。Vercel的DESIGN.md提供了一套可操作、可执行的设计方法，对于任何希望构建一致且用户友好的数字产品团队来说，都具有极高的参考价值。