06-22
Vercel 的 AI 设计规范：一份教科书级的参考
本文深度拆解了 Vercel 的 DESIGN.md 文件，展示了如何为 AI 编写一份高效、可执行的设计规范。文章从颜色、间距、字体、动效、文案和无障碍等维度，逐一分析了 Vercel 的做法及其背后的设计思维。例如，颜色系统通过 100-1000 的梯度设计，将交互状态（默认、悬停、点击）与固定数字关联，让 AI 无需猜测；间距体系只提供 9 个基于 4px 倍数的值，强制节奏一致；字体系统采用角色思维（标题/标签/正文/按钮）而非字号思维，减少视觉决策；动效设计则强调“能不动就不动”，并给出了各场景的精确时长。这篇文章适合希望提升 AI 生成界面一致性、或想要建立自身设计规范的产品经理、前端工程师和 AI 工具开发者阅读。