Vercel DESIGN.md for Brand-Compliant Pages

The system includes a DESIGN.md file for brand judgment, a public stylesheet for mechanical decisions, and an evaluation loop for quality assurance.

Testing with 7 fixed scenarios on Claude Opus 4.8 and Codex (GPT-5.

5) showed 39 failures with DESIGN.md versus 91 without it.

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📊 2 ⚡

This report is categorized under AITOP's "Products" desk. Within our cross-regional analytical framework, it directly maps to AI developer toolchains, coding agents, and engineering workflows. Key entities and technical topics under continuous tracking include DESIGN.md, Vercel, AI Agent, Claude Opus.

Source attribution: curated from shao__meng (@shao__meng). Cross-source corroboration: 10 independent sources have covered this development (including Guillermo Rauch, Viking, LangChain), confirming industry-wide signal strength.