Google 提出 DESIGN.md 后就散养了,Vercel 用最好的实践告诉大家一份 DESIGN.md 文件应该包括综合的设计指导、样式文档以及验收评估指导。
Google 提出 DESIGN.md 后就散养了,Vercel 用最好的实践告诉大家一份 DESIGN.md 文件应该包括综合的设计指导、样式文档以及验收评估指导。
在本文中,design.md 是 Vercel 发布的公开规范文档,供各类智能体通过单一 URL 访问。它系统化地沉淀了信息架构、排版层级、文案标准及设计反模式,测试证明其能引导模型从读者目标出发构建结构合理的页面,并将常见布局与结构缺陷减少约 57%。
在本文中,Design System 指 Vercel 的设计系统组件与视觉规范(涵盖表格、统计条、图表等)。团队将其封装为公开样式表,并在 design.md 中公布类名,从而接管了智能体对间距、排版等视觉细节的决策权,确保跨场景生成的界面与官方产品体验一致。
在本文中,Design Tokens 指公开样式表中定义的一组受控、文档化的设计标记与样式类名。通过在 design.md 中罗列这些 Token,团队避免了智能体自行编造间距或字体变量,智能体只需在输出的 HTML 中直接调用对应标记,既节约了上下文空间又保障了渲染一致性。
在本文中指页面信息的组织结构与呈现层级,是 Vercel 构建公开 design.md 时的核心规范维度之一。design.md 通过指导信息架构,让 AI Agent 能根据特定读者目标组织内容骨架(例如提案优先呈现续约建议与商业对比、规划页突出交互控制区),避免生成千篇一律的通用模板页面。
v0 是 Vercel 团队日常加载 design.md 的 AI 开发工具之一。通过向 v0 注入公开的设计规范文档与样式表,团队让 Agent 在脱离内部代码库的环境中,也能直接生成符合 Vercel 品牌视觉标准、组件结构和排版要求的独立网页与交付物。
Claude(包括文内评测使用的 Claude Opus 4.8)是 Vercel 用于测试与运行 design.md 的主要 AI 模型之一。团队在 7 个固定业务场景的全轮次评估中利用它生成页面,以验证设计规则在不同模型间的适应性,并在日常工作中借助它生成符合品牌标准的页面。
Codex 是 Vercel 构建与验证 design.md 体系的关键代码生成工具之一。在全场景评测及量化对照实验中,团队结合 GPT-5.5 运行 Codex 生成页面,证实加载 design.md 能够将生成的机械性布局缺陷大幅减少 57%,是团队日常生成品牌化页面的重要载体。
GPT-5.5 是 Vercel 在评估实验中与 Codex 结合使用的底层大语言模型。在针对 3 个桌面场景的对照测试中,搭载 GPT-5.5 的生成实验显示,载入 design.md 后页面出现的已知布局缺陷从 91 次降至 39 次,证明该规范能有效约束模型的自由臆造行为。
在本文中,Eve 是 Vercel 构建内部 Slack 智能助手(@design-agent)所采用的开发框架。该代理能够根据用户请求实时加载 design.md 与样式表,生成符合品牌规范的报告页面、设计评审与文案建议;Vercel 还基于 Eve 开源了设计代理模板,供开发者搭建同类工作流。
在本文中,Figma 是 Vercel 团队收集真实设计反馈的来源渠道之一。团队每周将来自 Figma 评论、Slack 讨论及 GitHub 评审中的人工修改意见汇总并通过自动化聚类,提炼出高频重复的设计缺陷,用以持续更新 design.md 规则与品牌样式表。
在本文中,A/B 测试是 Vercel 验证 design.md 迭代效果的关键评估手段。团队利用本地评审工具对生成结果进行双盲对比测试,将新旧版本指南(或有无指南基线)在相同输入下生成的页面进行盲测打分,以此客观决定具体设计规则的保留、修改或回滚。
Vercel 是本文的实践团队与平台。为了让 AI 生成的提案和报告等独立页面保持其标志性品牌质感,Vercel 打造了由 design.md 指南、公开样式表及评测体系构成的解决方案,使代码智能体在离开代码仓库环境时也能自主构建符合官方设计规范的高质量页面。
可左右滑动查看