AI生成的页面总像同一个模板？Vercel 内部 design.md 方案，3步让前端不再撞脸

你让 AI 做的页面，是不是都长一个样

每个用 Cursor、v0、Claude Code 生成前端的兄弟都懂这种憋屈。你让它写个仪表盘，它吐出来的是千篇一律的 SaaS 模板风：左边导航、中间一排大卡片、彩虹渐变配色、到处圆角。你让它”保持简洁高端”，每次生成的布局、间距、字体层级却像开盲盒一样不可预测。

好不容易手动把样式调顺了，换个页面或者换个模型，AI 马上又回到原点，继续陷入”微调 Prompt、页面崩坏、人肉兜底”的死循环。说白了，自然语言管不住好设计，纯靠嘴喂，它永远在凭空捏。

之前我写过用 v0 一句话出 App 和给 AI 编码 Agent 装设计品味，那两篇解决的是”能不能出”，今天这篇要解决的是”出得稳不稳”。

先搞清楚：为什么纯 Prompt 管不住好设计

Vercel 早期也栽在这个坑里。他们在代码库里维护了一套叫 product-design 的 Agent Skill，Agent 在仓库里干活时能直接读设计系统组件和历史落地代码，效果相当好。但问题很快来了：那些临时提案、报告、独立微页面，生成工具根本读不到代码库里的设计文件。

他们第一版尝试，是把设计规范压成一段公开 Prompt 直接喂给 Agent，结果翻车了。原因就两个。

第一，设计语言太主观。”保持布局干净”这种话，在人类设计师眼里有明确规范，在大模型理解里千人千面。第二，缺代码锚点。没有真实组件库上下文，模型只能全凭想象去捏 CSS、字体、间距，等于让它从零发明一套视觉语言。

一句话点透：描述风格不等于编码规则。你以为在教它审美，它听到的是一堆可以自由发挥的模糊指令。

图：design.md 三层系统架构，判断层、约束层、评测层各归各位

核心：Vercel 的三层系统怎么搭

他们推倒重来，跑了 200 多轮真实场景生成，才提炼出这套相互配合的三层系统。我拆开讲，你照着抄就能用。

第一层，判断层 design.md。这是个公开 Markdown 文件，不教 AI 写具体 CSS，而是教它”像资深设计师一样决策”：根据读者任务重构页面（高管先看到结论，审计员看明细），写有理有据的文案，最关键的是显式命名反模式，比如”禁止无意义的卡片层层嵌套””禁止夸张渐变装饰”，让 Agent 能精准识别并主动规避典型的 AI 坏味道。

第二层，约束层公共样式表。Vercel 发布了一个官方托管的 vercel-brand.css，把字体、间距、Design Token、图表基元全预设成标准类名。design.md 只告诉 Agent 可用哪些类名，Agent 只引用这些标准类名，自由裁量权直接被剥离。最妙的一点是：样式表在浏览器渲染时才远程加载，根本不进模型上下文，既省了宝贵 token，又让样式表现 100% 确定。

第三层，评测层 Eval Loop。挑 7 个真实高频场景（性能报告、续约提案、基准测试等），锁死 Prompt 和输入数据当固定评测集。用确定性代码检查（比如表格没占满宽度、元素溢出）加人工盲测打分。每次发现的缺陷，主观判断写进 design.md，可复用样式写进 CSS，机械错误转成自动化检查用例。

实战：普通团队 6 步复刻自己的 design.md

这套方案最迷人的地方在于不依赖模型微调，小团队甚至个人开发者都能低成本复刻。我把它压成 6 步：

锁定一个高频真实场景。选团队最常用的页面类型，准备好真实数据输入，拒绝”帮我做个好看的页面”这种空话。
保存初始 Baseline。不给任何规则跑一次生成，存好截图和代码，作为后续对比的基准底稿。
从最近 10 次 Code Review 提炼可观察规则。把”表格太挤”转成”数据表必须占满容器全宽”，把审美要求变成客观可度量描述。
收敛机械样式到公共 CSS。AI 老在字体大小、阴影、圆角上自由发挥，就写个含 Token 和 Class 的样式表挂 CDN，并规定它只能用这些类名。
单盲 A/B 评测。同样 Prompt 同样模型，分别生成带规则和不带规则的页面盲测打分，验证你的规则是否真起效。
把纠错沉淀成闭环。AI 再犯错别人肉改生成的代码，想清楚这是缺规则、缺组件，还是能写自动化测试拦截，然后补进 design.md。

顺带提一句，很多朋友用 Lovable 一句话造应用，其实完全可以在项目根目录丢一份 design.md，让每次生成的页面都长你家的脸，而不是 Vercel 的脸。