Vercel 跑了 200 多次，终于摸清了怎么把经验教给 Agent
内容提要
Vercel通过200多次试错，将设计师反馈转化为Agent可执行的规则。他们发现仅靠design.md不够，需结合固定场景、程序检查和人工评审。关键是将模糊要求具体化，如“表格用完整宽度”，并分层处理：样式用stylesheet，判断留guidance。最终错误减少57%，但强调需持续迭代，从周报小规模测试开始。
延伸解读
从模糊到具体：规则的可执行性
Vercel 的经验表明，像“保持布局干净”这类模糊要求，模型难以稳定执行。他们通过将规则具体化，如“表格使用完整可用宽度”，并配合程序检查，显著减少了错误。这提示我们，在指导 Agent 时，应尽量将抽象描述转化为可验证的客观标准，而非依赖模型的主观理解。
分层处理：样式与判断分离
Vercel 将确定性的样式（如字体、间距）放入公共 stylesheet，而将需要判断的内容（如信息组织）保留在 design.md 中。这种分层不仅减少了模型的上下文负担，还让规则更清晰。对于实践者而言，区分“固定不变”和“需要决策”的部分，是提升 Agent 输出一致性的关键。
持续迭代：从反馈到规则沉淀
Vercel 通过 200 多次试错，将设计师的反馈逐步转化为规则和检查。他们强调，一条规则若只修复当前页面却破坏其他场景，就需调整或撤回。这提醒我们，建立 Agent 工作流不是一次性工程，而是需要持续收集反馈、定期评估并迭代规则，才能逐步逼近理想效果。
小规模起步：避免过度设计
Vercel 建议从一份周报开始，记录基线输出，并分析自己常做的修改，提炼出可复用的具体规则。他们强调，无需一开始就搭建复杂平台，而是先验证小规模改进的有效性。这种渐进式方法降低了试错成本，也更适合团队逐步建立对 Agent 的信任。
Q&A
Vercel 是如何将设计师的反馈转化为 Agent 可执行的规则的？
Vercel 通过 200 多次试错，将设计师的反馈（如“表格用完整宽度”）具体化，并分层处理：需要判断的规则写入 design.md，确定的样式放入公共 stylesheet，程序可检查的加入代码检查，构图等主观问题由人工评审。他们还会给常见 AI 设计毛病起名字，并持续迭代。
为什么 Vercel 最初将 product-design skill 整理成公开 Prompt 后效果不好？
因为很多看似明确的描述（如“保持布局干净”）对模型来说仍然模糊，模型需要自行决定留白、标题大小、表格宽度等细节。在代码仓库中，现成组件和上线页面能提供具体参考，但公开 Prompt 只有文字，不同模型会各自理解，导致输出不一致。
Vercel 的 design.md 和 stylesheet 分别承担什么作用？
design.md 包含需要 Agent 判断的规则，如读者目标、证据组织、页面结构等；stylesheet 包含已确定的样式（字体、间距、表格样式等），Agent 只需调用规定的 class 和 token，CSS 在浏览器渲染时加载，不占用模型上下文。
Vercel 如何验证 design.md 的效果？他们用了什么评测方法？
Vercel 准备了 7 个固定场景（如性能报告、续约方案等），每个场景的 Prompt、数据和渲染条件固定。他们用 Claude Opus 4.8 和 GPT-5.5 的 Codex 跑完整评测，并开发了本地评测工具，记录每次运行的 Prompt、模型版本、截图和人工反馈，支持盲测 A/B。最终通过对比加载和不加载 design.md 的页面，程序检查出的已知错误减少了 57%。
Vercel 在将规则写入 design.md 时遵循什么原则？
每条新规则都要拿真实页面跑一遍，看结果是否变好。如果一条规则只救了当前页面却搞坏了其他场景，就会修改或撤回。如果只是某个模型偶尔出错，不会马上写成全局规则，等重复出现再沉淀。
Vercel 上线后如何持续改进 design.md？
Vercel 员工可以在 Slack 中 @design-agent 获取设计帮助，Agent 会加载最新的 design.md 和 stylesheet 并返回截图和链接。每周汇总 Slack 反馈、GitHub Review 和 Figma 评论，自动化聚类重复意见，再由人判断该修改哪一层（design-agent、skill、design.md、stylesheet 或代码检查）。新页面类型会变成新的 eval 场景。
对于想模仿 Vercel 做法的团队，文章给出了什么建议？
建议从一份周报开始：先用当前 Prompt 跑一次作为基线，记录输入、模型版本和结果；然后回顾最近十次修改，提炼出可复用的具体要求（如“结论必须出现在第一页”），而不是模糊的“做得更专业”；将每次相同的做成模板，程序可检查的加检查，需要判断的留在 guidance；最后用相同条件再跑一次，并盲测对比。不要一开始就建平台。
Vercel 的 design.md 如何解决不同页面类型（如续约方案和交互式规划页）的差异？
design.md 告诉 Agent 页面的目标用户和核心任务，因此续约方案会先展示推荐结论，而交互式规划页会把操作控件放在前面。这样即使使用相同的字体和颜色，不同页面也不会千篇一律。
