design.md：让AI Agent产出品牌一致的页面

从零散提示到统一设计规范

Vercel 团队近期分享了他们让 AI Agent 构建"品牌一致"（on-brand）页面的实践方案：核心是一个名为 design.md 的单一文件。这个看似简单的做法，背后其实回应了当前 AI 辅助前端开发中一个长期存在的痛点——AI 生成的界面往往在美学和品牌层面缺乏一致性。

当前主流的 AI Coding Agent（如 GitHub Copilot、Cursor、v0 等）本质上是基于大语言模型（LLM）的代码生成系统。这类系统在生成单个组件或页面时表现出色，但面对跨页面、跨会话的一致性要求时会出现明显短板——因为 LLM 的生成过程是基于概率采样的，每次调用都是相对独立的推理过程，没有持久化的"记忆"来维持风格延续性。当你让一个大模型或 Coding Agent 生成页面时，它会输出"看起来能用"的代码，但每次生成的配色、间距、字体、组件风格都可能不同。如果没有统一的约束，几十个页面拼在一起就会显得凌乱，完全谈不上品牌调性。Vercel 的解法是：把所有设计决策集中编码到一个文件里，让 Agent 在生成时始终参照它。

design.md 的三个核心机制

根据 Vercel 官方分享，这套方案由三个环节构成，形成了一个完整的闭环。

一份文件编码设计决策与使用指导

design.md 承担了"设计系统单一真相来源"（single source of truth）的角色。它不是简单的样式表，而是用自然语言 + 结构化规则的方式，把设计决策和使用指导都写进去。

设计系统（Design System）是现代前端工程的核心基础设施，代表性实现包括 Google 的 Material Design、IBM 的 Carbon Design System、Shopify 的 Polaris 等。传统设计系统通常由 Figma 文件、Storybook 组件库、CSS/Token 变量三层构成，服务对象是人类设计师和工程师。design.md 的创新在于，它在这套体系之上新增了"面向 AI Agent 的可读层"——用自然语言和结构化规则将设计决策重新编码，让模型可以直接理解并遵循品牌规范，相当于为 AI 量身定制了一份"设计系统说明书"。这种思路与 OpenAI 提出的 system prompt 工程、Anthropic 的 Constitutional AI 都有相通之处：通过显式约束塑造模型输出的边界。

这样做的好处非常直接：Agent 是靠上下文（context）工作的，一个 Markdown 文件恰好是模型最擅长理解和遵循的格式。相比让 Agent 去解析散落在代码库各处的 CSS 变量或 Figma 文件，一份集中的、语义清晰的 design.md 能让模型更准确地理解"我们的品牌应该长什么样"。它既包含了硬性约束（比如主色值、字号阶梯），也包含了软性指导（比如"标题应保持简洁有力"这类原则）。

通过评估框架塑造输出质量

光有规范还不够。Vercel 强调，Agent 的输出会经过一个 eval harness（评估框架） 来"塑形"。

Eval Harness 是 LLM 应用工程中的关键基础设施，最早广泛用于模型基准测试（如 EleutherAI 的 lm-evaluation-harness），近年来逐渐演进为生产系统中的质量门控机制。在 AI 生成内容的场景下，eval harness 通常包含三类检查：一是规则性检查（如色值是否符合 token 定义、组件是否来自规范库）；二是语义性检查（如页面描述是否与品牌调性一致）；三是视觉回归检查（通过截图对比检测布局偏移）。Vercel 将这套机制引入设计一致性验证，本质上是借鉴了 CI/CD 流水线的质量卡点思想——任何不符合规范的输出，在进入生产环境之前都必须经过自动化校验，而不是依赖人工 review 来兜底。

这一点尤其值得关注。它意味着 AI 生成页面不再是"生成即交付"的一次性动作，而是有一道自动化质检环节。评估框架会检查生成结果是否符合 design.md 中定义的标准——是否用了正确的配色、组件是否符合规范、布局是否符合品牌调性。不达标的输出会被识别出来，而不是直接进入生产环境。

这本质上是把软件工程中"测试驱动"的理念，迁移到了"设计一致性"这个更主观的领域。通过可量化、可自动化的评估，主观的"美感"被转化为了可以被工程化验证的指标。

生产反馈回流形成迭代闭环

第三个环节是闭环的关键：生产环境的反馈会被重新喂回到这个循环里。

这一设计理念与机器学习中的强化学习人类反馈（RLHF，Reinforcement Learning from Human Feedback）有深层的结构相似性。RLHF 是 ChatGPT、Claude 等现代对话模型能够对齐人类偏好的核心训练机制——模型生成输出，人类对输出进行评分，评分结果反向优化模型行为。Vercel 的闭环虽然不涉及模型权重的更新，但在工程层面复现了同样的逻辑：生产表现（真实用户行为或团队审查）→ 评估信号 → 规范文件迭代 → 下一次生成质量提升。这种"软件层的 RLHF"让系统具备了持续改进能力，而无需等待基础模型的更新。

也就是说，页面上线后的真实表现——可能是用户行为数据、可能是团队的人工审查、也可能是新出现的边界情况——都会成为改进 design.md 和评估框架的依据。这让整个系统具备了持续进化的能力，而不是一套写死的静态规则。

为什么这个思路值得借鉴

从更宏观的视角看，design.md 代表了一种正在成型的 AI 工程化范式：与其追求更强的模型"凭空发挥"，不如为 Agent 提供清晰的上下文约束、可验证的输出标准和可迭代的反馈闭环。

这一实践出现在一个行业转折点上：2024-2025 年，AI Coding Agent 从"辅助提效工具"向"半自主执行角色"快速演进，Devin、SWE-agent、OpenHands 等系统开始承担完整的开发子任务。这一趋势让"如何约束和验证 AI 输出"成为前沿工程问题。产业界用"AI Engineering"或"LLMOps"来描述这套围绕提示设计、评估框架、反馈机制构建的工程体系。design.md 所代表的"上下文工程（Context Engineering）"思路——即通过精心设计的输入约束来控制模型输出——正在成为 LLMOps 实践中的核心方法论，与传统软件工程中的"防御性编程"有异曲同工之妙。

三者结合起来，恰好对应了软件工程的三大支柱——规范、测试、迭代。Vercel 只是把它们应用到了"让 AI 产出品牌一致页面"这个具体场景。

对于任何正在探索用 AI Agent 做前端或内容生成的团队来说，这个模式有很强的可复制性：

• 建立单一规范文件：把你的设计系统、品牌指南以 Agent 友好的格式集中沉淀，而非依赖零散提示词。
• 搭建评估机制：不要相信一次性输出，用自动化手段验证结果是否符合预期。
• 打通反馈回路：让生产数据反哺规范，形成持续改进。

小结

Vercel 的 design.md 实践，看似只是"用一个 Markdown 文件约束 AI"，实则展示了如何用工程化思维驯服 AI 生成的不确定性。在 AI Coding Agent 越来越普及的今天，如何保证输出质量与品牌一致性，将成为区分"玩具"与"生产级工具"的关键分水岭。这套"规范—评估—反馈"的闭环，融合了设计系统工程、LLM 评估基础设施和类 RLHF 的迭代机制，或许正是答案的雏形。