Vercel 分享了如何用 DESIGN.md 让 AI 生成符合品牌的设计，错误率降低一半多，还能复用给其他团队。
Vercel 开发了 DESIGN.md 标准，让 AI Agent 能生成符合品牌风格的页面。该系统包含三层架构：指导文件 DESIGN.md、公共样式表和评估闭环。测试显示，使用 DESIGN.md 后，AI 生成的页面错误率从 91 个降至 39 个。Vercel 已在内部使用此系统，并通过 Slack 机器人 @design-agent 接收真实需求。
DESIGN.md 让 AI Agent 设计出 "符合品牌" 的页面 Vercel 内部已有一个 product-design skill，让 coding agent 在仓库内工作时能读懂设计系...
DESIGN.md 让 AI Agent 设计出 "符合品牌" 的页面 Vercel 内部已有一个 product-design skill，让 coding agent 在仓库内工作时能读懂设计系统和产品规范，产出符合 Vercel 风格的页面。但问题在于：仓库之外的场景——报告、提案、一次性页面——所用的工具读不到仓库里的文件，agent 就失去了设计依据。 于是他们采用了 DESIGN.md (Google Stitch 开放的标准)：一个公开 URL 上的单文件，任何环境中的任何 agent 都能加载，获得 Vercel 的品牌判断力。 vercel.com/blog/how-our-a… 最终方案：三层系统 1. DESIGN.md（指导文件）编码"判断力"：如何理解读者任务、组织证据、选择页面结构、写文案、品牌资产规则；并给常见的 AI 生成坏模式命名以便规避 2. 公共样式表（stylesheet）把排版、间距、布局等可复用的"机械决策"从模型手中拿走，以 CSS 类名/token 形式发布；agent 只需引用类名，且样式表不进入模型上下文，节省 token 3. 评估闭环（eval loop）确定性代码检查抓机械错误（如表格没用满宽度），人工评审判断主观质量（层级、构图） 方法论：评估驱动的迭代 · 7 个固定场景（用量报告、续约提案、基准报告、交互规划页、build-vs-buy 简报、安全治理简报、演示 deck），prompt、mock 数据、视口全部冻结，唯一变量是 DESIGN.md 本身——保证任何输出差异都能归因于指导文件的改动。 · 一轮（round） = 用全部 7 个场景在 Claude Opus 4.8 和 Codex (GPT-5.5) 上各生成一遍。 · 配套本地评审工具：整页渲染 + 盲测 A/B 对比，每次运行记录 prompt、输入、模型配置、文件版本、截图和反馈。 · 纠偏落地规则：每条反馈落到"能稳定执行它的最窄位置"——判断类进 DESIGN.md，机制类进样式表，可机械验证的进确定性检查；单个模型特有的失败在复现前不进规则。 · 里程碑处用盲测 A/B（新版 vs 旧版文件）决定每条改动的保留、修改或回滚。 效果验证和边界 最终测试：3 个桌面场景 × 有无 design.md 各生成一次（不重新抽卡），跑确定性检查统计已知失败： · 有 DESIGN.md：39 个已知失败 · 无 DESIGN.md：91 个已知失败 持续运营机制 · Slack 里的 @ design-agent（基于 eve 构建）接收真实需求，加载最新 design.md 生成页面并回帖截图和部署链接。 · 每周汇总 Slack、GitHub review、Figma 的反馈，自动化聚类重复抱怨 → 人工审核 → 决定修复落在哪一层（agent / skill / design.md / 样式表 / 检查）。 · 度量方式：统计同类抱怨的出现频率，编码修复后频率应下降；不降则说明修复方式错了（规则不清、未加载、样式表缺原语、或该用代码检查而非散文）。 给开发者的可复现路径 1. 选一个高频产物（提案、报告等），先写简短评分标准（事实是否保留、读者决策是否清晰、你常手动纠正的问题是否解决）。 2. 先存基线：不加任何设计上下文生成一次，保留 prompt、输入、配置、截图。 3. 从最近 10 条纠正意见出发，把每条改写成可观察的表述（"证据表格用满可用宽度" ✓，"让表格不那么挤" ✗）。 4. 约束可重复的机制：发布样式表，文档化可用类名和 token。 5. 跑一次配对盲测：同输入、同模型、同视口，有/无文件各一次，打乱后按评分标准盲评。 6. 编码纠正而非手改产物：更新指导文件，用下一次对比验证首次尝试是否真的变好。 Vercel @vercel Our agents use 𝚟𝚎𝚛𝚌𝚎𝚕.𝚌𝚘𝚖/𝚍𝚎𝚜𝚒𝚐𝚗.𝚖𝚍 to build on-brand pages. ▪︎ One file encodes decisions and guidance ▪︎ Output is shaped through our eval harness ▪︎ Production feedback is fed ba vercel.com/blog/how-our-a… //t.co/ylz7uB4fhw 🔗 View Quoted Tweet 💬 1 🔄 1 ❤️ 1 👀 246 📊 2 ⚡