这次我们来看一个比较新的东西Vercel 推出的design.md。简单说它是一个让 AI Agent 在生成网页时自动遵守品牌风格规范的文件机制。它解决的问题非常典型明明给 AI 描述了“高端、简洁、有科技感”结果生成出来的页面还是接近默认模板颜色、字体、间距全都对不上。design.md就是用来把设计约束写到项目里让 AI Agent 在写代码前先读这份文件再按文件里的规则生成页面。这篇文章会围绕几个重点展开design.md是什么、在 Vercel 的 AI 建设流程里如何生效、文件结构怎么写、如何配置品牌规范、如何验证 Agent 是否真正遵守了风格约束、以及落地时的注意事项和最佳实践。如果你是前端开发者、设计工程师或者在折腾 AI 生成网页、Agent 自动化建站这篇文章可以直接收藏。1. 核心能力速览能力项说明项目类型网页建设规范文件 / AI 上下文配置方案来源Vercel 提出的design.md机制用于约束 AI Agent 生成网页时的品牌风格主要功能将品牌色、字体、间距、语气、布局规则写入项目让 AI Agent 在生成代码前自动读取并遵守使用方式在项目根目录创建design.md配合 Vercel 的 AI 建设流程使用是否依赖特定框架不依赖属于规范文件可与 Next.js、Vite、静态站点等搭配是否支持批量任务本身不处理批量任务但可在多个项目中复用同一品牌规范是否有 API不直接提供 API核心是文件和读取机制适合场景AI 生成品牌官网、活动页、组件库预览、多页面站点统一风格、Agent 自动化建设流程主要优势将设计约束从自然语言提示词中剥离出来变成可复用、可版本控制的配置文件从能力表能看出来design.md不是一个独立运行的工具而是一个“给 AI 看的设计规范”。Vercel 的做法是把它放进 AI 建设网页的流程里让 Agent 先读规范再动手写代码。这个思路比单纯在提示词里加一句“请使用品牌风格”要稳得多。2. 适用场景与使用边界2.1 适合谁用适合几类人前端开发者平时用 AI 生成页面但总需要手动改样式design.md可以把配色、字体、间距这些规则固定下来。设计工程师品牌规范不再只存在于 Figma 或者设计文档里可以直接进入项目仓库让 AI 建设流程自动读取。独立开发者和初创团队没有完整设计系统但希望 AI 产出的页面至少有统一的品牌感。做 Agent 自动化建设流程的人如果你正在搭一个“输入需求自动生成多页面站点”的工具design.md可以有更稳定地约束每个输出页面的风格。2.2 能解决什么问题最常见的场景是你在同一个项目里连续让 Agent 生成好几个页面结果每个页面的样式风格都不一致。一个页面用了圆角大按钮另一个页面是全直角导航栏高度也不同。这不是模型能力不行而是缺少一个跨任务的统一约束。design.md把原本写在提示词里的设计信息抽出来变成一个项目内的权威文件。Agent 在生成每个页面时都能读取到同一份规范输出的一致性自然比靠提示词硬控稳定得多。2.3 不适合的场景不适合替代完整的设计系统design.md本质上是一个约束文件无法替代设计令牌、组件库、响应式规则的完整工程体系。不适合完全脱离代码审查AI Agent 生成的页面仍然需要人工检查。design.md能减少风格漂移但不能保证布局一定合理、内容一定准确。不适合当作运行时样式配置这份文件主要给 AI 读不是给浏览器用的。2.4 版权、隐私与安全边界如果要用 AI 生成的是品牌官网、产品页面或者营销素材需要注意素材版权问题。从材料看这个方案只约束网页生成过程不涉及额外素材库。如果 Agent 生成的过程中带了图片、图标、字体要确认这些资源的授权范围。尤其是品牌字体和品牌图片尽量使用自有授权素材避免把未授权的内容交给 Agent 自动使用。另外如果把design.md放进公开仓库等于公开了你的品牌设计规范。如果品牌色、字体、间距属于公司内部设计资产就要考虑仓库权限不要把内部规范直接公开。这既是一个隐私边界问题也是品牌资产管理问题。3. 核心思路把设计规范变成 Agent 的上下文design.md的核心思路并不复杂AI 生成网页时模型只能根据当前对话里的信息来决定输出。如果你在对话里描述品牌风格这些描述会占用上下文空间而且不同页面的描述可能不一致。design.md则是把设计规范固定成了一个项目文件Agent 在动手生成代码前先读取这个文件把规范装进上下文然后按规范执行。这个思路和提示词工程里的“预先设定角色和规则”类似只不过design.md是文件化的规则不依赖用户在每次对话中重复输入。这样做的好处非常明确规范可复用同一个design.md可以用于多个页面、多个项目不需要每次重新写提示词。规范可版本控制design.md放在 Git 仓库里改起来有记录回滚也方便。规范可审查设计团队可以直接看这个文件确认 AI 的建设规则是否符合品牌要求。规范可独立更新不需要因为配色调整而重写所有提示词。Vercel 把这份文件放到项目上下文中让 Agent 在生成网页前自动读取。从工程角度讲这其实是在 AI 建设流程里增加了一道“规则前置”的步骤。你不需要在每次生成需求里重复描述品牌风格Agent 会从文件里自己拿到这些信息。4. design.md 文件结构与配置方法4.1 基本文件位置按照 Vercel 的做法design.md一般放在项目根目录和README.md同级。路径示例my-ai-site/ ├── design.md ├── app/ ├── components/ ├── public/ └── package.json放在根目录的好处是Agent 在扫描项目结构时能第一时间看到这份文件。如果放在深层目录Agent 可能不会主动去读。4.2 文件内容结构示例design.md的内容没有强制格式但建议按区块组织。下面给出一个通用模板# 品牌设计规范 ## 品牌概述 - 品牌定位高端、专业、可信赖 - 目标用户企业级客户 - 整体风格简洁、现代、克制的科技感 ## 色彩规范 - 主色#0A0A0A深黑 - 辅助色#2D2D2D暗灰 - 品牌强调色#FF4D00亮橙仅用于关键行动点 - 背景色#F5F5F0米白 - 文字色#1A1A1A正文 - 辅助文字#6E6E6E ## 字体规范 - 主字体Inter - 备用字体system-ui, sans-serif - 标题字重600 或 700 - 正文字重400 - 代码字体JetBrains Mono ## 间距与布局 - 页面最大宽度1200px - 区块间距80px桌面端40px移动端 - 卡片圆角8px - 按钮圆角6px - 导航栏高度64px ## 组件规范 - 按钮主按钮使用品牌强调色文字为白色悬停时透明度 90% - 卡片白色背景1px 边框颜色 #EAEAEA - 导航链接默认文字色悬停时使用品牌强调色 ## 内容风格 - 语气专业、直接、不使用夸张营销词 - 标题简洁不超过 12 个字 - 正文短句为主避免长段落 - 禁止使用水军式表达和夸大承诺 ## 禁止事项 - 不使用渐变背景 - 不使用阴影过重的卡片 - 不使用非授权图片素材 - 不改变品牌强调色的使用范围这是一个通用模板具体内容需要按实际品牌规范调整。关键是design.md写得越具体Agent 执行时越不容易偏。像“高端大气”这种形容词Agent 很难稳定翻译成样式代码但“主色 #0A0A0A强调色 #FF4D00”这种明确信息Agent 就能直接写进 Tailwind 配置或者 CSS 变量。4.3 配合代码文件的落地design.md不只是给 Agent 看的它最终要落到代码里。为了让 Agent 生成的代码真正和规范对应建议在项目中同步建立设计令牌比如tailwind.config.js中的颜色值、间距值等。Agent 看到design.md之后再看到项目里的设计令牌就能把规范映射到实际代码。// tailwind.config.js 示例 module.exports { content: [./app/**/*.{js,ts,jsx,tsx}], theme: { extend: { colors: { primary: #0A0A0A, accent: #FF4D00, background: #F5F5F0, text: #1A1A1A, muted: #6E6E6E }, fontFamily: { sans: [Inter, system-ui, sans-serif], mono: [JetBrains Mono, monospace] }, borderRadius: { DEFAULT: 8px, button: 6px } } } };如果项目里已经有完整的设计令牌design.md是在更上层告诉 Agent“这些令牌如何组合使用”。两者互相配合效果比单独一份文件好得多。5. 在 Agent 建设中启用 design.md5.1 通用配置思路目前design.md更适合在 Vercel 的 AI 建设流程或类似支持“项目上下文读取”的 Agent 工具中使用。如果你在自己搭建 Agent 流程思路是在 Agent 生成代码前先读取design.md文件内容把它拼接进系统提示词或上下文再让 Agent 输出代码。一个基础流程可以这样设计Agent 接收用户需求例如“生成一个落地页”。Agent 检查项目根目录是否存在design.md。如果存在Agent 先读取文件内容纳入上下文。再读取项目现有的设计令牌或组件代码。按需求和规范生成页面代码或修改现有代码。这个流程里design.md是一个前置约束Agent 每次执行任务都会先过一遍规范。这和每次都靠用户在提示词里反复强调品牌风格效果完全不同。5.2 自定义 Agent 的伪代码示例如果你想把design.md纳入自己的 Agent 工具可以参考下面的逻辑import os def load_design_spec(project_root: str) - str: design_path os.path.join(project_root, design.md) if os.path.exists(design_path): with open(design_path, r, encodingutf-8) as f: return f.read() return def build_agent_context(project_root: str, user_requirement: str) - str: design_spec load_design_spec(project_root) if design_spec: design_block f项目设计规范必须遵守\n{design_spec} else: design_block 未提供项目设计规范保持默认简洁风格。 # 将 system prompt、设计规范、用户需求一起交给模型 return f 你是前端开发 Agent。生成代码前先阅读项目设计规范并严格按照规范输出。 {design_block} 用户需求如下 {user_requirement} 这个代码示例只展示了基本的上下文组装方式。实际使用时你还需要处理好现有代码的读取、生成文件的写入以及后续的人工审查环节。5.3 在 Vercel 流程中的使用Vercel 的 AI 建设流程现在已经支持把design.md作为项目的一部分Agent 自动读取并执行。使用起来的大致步骤是在项目中创建design.md写入品牌规范。将项目推送到 Vercel 或关联的 Git 仓库。通过 Vercel 的 AI 建设功能发需求比如“生成一个产品展示页”。Agent 自动读取design.md按品牌风格生成页面代码。人工检查代码确认内容、布局和样式是否符合预期。这种方式的优势在于Agent 不再需要你每次都解释品牌背景直接看文件就能知道“这个站应该长什么样”。6. 功能测试与效果验证6.1 测试目的design.md的有效性需要验证不是写上文件就万事大吉。验证的核心指标是Agent 生成的页面是否符合规范中的关键约束。重点看这几个维度色彩是否准确匹配。字体是否按规范配置。间距、圆角、按钮样式是否一致。多页面之间的风格是否统一。是否出现了规范里禁止的事项。6.2 测试用例设计建议按以下用例验证测试项输入示例预期结果验证方式单页面生成“生成一个产品介绍页”页面使用主色、品牌强调色按钮为强调色圆角按钮检查页面色彩和按钮样式多页面一致性“分别生成首页和关于页”两个页面的导航、按钮、卡片风格一致对比关键组件的样式禁止事项检查只提交规范不做额外说明页面不使用渐变和过重阴影检查样式代码色彩准确度检查 CSS 或 Tailwind 配置主色、背景色、文字色和规范完全一致比对十六进制色值按钮生成“生成一个带按钮的活动页”按钮使用品牌强调色悬停变透明度检查按钮样式代码6.3 判断标准通过生成页面的配色、字体、按钮、卡片、导航栏均与design.md描述一致没有突破禁止事项。基本通过整体风格一致但个别组件细节存在偏差比如某个按钮颜色不统一需要微调。不通过生成页面仍接近默认模板没有体现品牌色彩或者规范只部分生效。如果出现不通过的情况优先检查design.md描述是否足够具体。把“高级感”改成具体的色值、字体、间距值通常能明显提升效果。7. 常见问题与排查方法问题现象可能原因排查方式解决方案Agent 生成的页面完全没有品牌风格design.md未被读取或文件路径不对检查项目根目录是否存在design.md检查 Agent 日志中是否有文件读取记录把文件移到根目录重新发起生成任务色彩有偏差看起来像同一色系但不精确design.md中的颜色描述太模糊例如“深色”检查规范中是否写明具体十六进制色值使用精确色值例如#0A0A0A部分组件遵守规范部分组件没有项目里已有组件代码覆盖了规范设置检查已有组件中的样式优先级统一调整组件代码或明确组件覆盖规则字体没有生效项目未正确加载字体文件检查字体加载方式和font-family配置在项目中引入字体资源并确认 CSS 配置正确页面风格一致但内容布局有问题design.md只约束了样式没有约束布局层级检查design.md中是否有布局规范增加区块顺序、最大宽度、栅格等布局规则Agent 在长需求中丢失部分规范约束上下文过长规范信息被压缩检查 Agent 的上下文管理策略将关键规范放在上下文中更靠前的位置或拆分任务多页面出现样式漂移每个页面任务独立没有共享上下文检查每个页面的生成日志中是否都读取了design.md在每次生成任务前强制读取规范文件8. 最佳实践与使用建议8.1 规范要具体到值而不是形容词写design.md时尽量把所有描述落到可执行的值上。不要写“使用高级感颜色”要写“主色#0A0A0A强调色#FF4D00”。不要写“间距舒服一点”要写“区块间距 80px卡片内边距 24px”。Agent 对具体数值的把握远比对感受类描述的把握更稳定。8.2 与设计令牌同步维护design.md是给 AI 看的规则设计令牌是给代码用的变量两者要保持一致。如果项目里已经有tailwind.config.js配置或 CSS 变量design.md里的色值、字体、间距要与之一一对应。否则 Agent 按design.md生成代码时可能和现有样式体系冲突。8.3 控制规范文件长度design.md不是越长越好。如果文件太长Agent 在有限上下文里可能关注不到关键信息。建议把内容控制在 100 到 300 行左右只保留影响视觉表现的核心规则。像组件库 API 文档、页面模板代码这类信息应该放在其他文档里不要让design.md承担所有职责。8.4 多项目复用品牌规范如果团队有多个项目需要统一品牌风格可以把design.md做成模板复制到每个项目的根目录再按项目特性微调。这样可以保证基础品牌规范一致同时保留单项目调整空间。更进阶的玩法是用脚本把design.md生成到多个仓库中但需要注意各项目是否有特殊规范覆盖。8.5 重视人工审查design.md可以明显提升 AI 生成页面的一致性但不能替代人工审查。每次生成后开发者或设计师要检查关键页面导航栏、按钮、卡片、表单、页脚。重点不是看“是否好看”而是看“是否遵守了规范”尤其是色值、字体、圆角这些可以量化的指标。8.6 注意合规与授权如果项目最终要上线使用且design.md涉及品牌 Logo、商标、特定图片素材或商业字体需要确保这些资源的授权。品牌官网等场景中Logo 通常有严格的展示规范不能因为 AI 生成方便就随意调整间距、比例和颜色。另外如果 AI Agent 在生成页面时使用了外部图片或图标资源要确认这些资源是否允许商用。稳妥的做法是使用团队已有授权素材或者让 Agent 只生成占位结构正式素材由设计团队替换。9. 总结与下一步design.md是比较轻量但很实用的方案它解决的是 AI 生成网页时风格漂移的问题。把品牌规范从提示词里抽出来放到项目文件中让 Agent 在生成前先读取思路简单落地也不复杂。如果你正在做 Vercel 的 AI 建设流程、自建网页生成 Agent或者只是希望 AI 输出的页面更有品牌感建议按这个思路试一下先写一份 50 行左右的design.md包含主色、字体、间距、按钮样式这些基础规范然后跑一次页面生成任务对比加文件前后的输出差异。最容易踩的坑有两个一是规范写得太模糊Agent 执行时偏了方向二是项目里有旧代码Agent 生成的规范和已有组件样式冲突。前者靠具体化数值解决后者靠同步设计令牌、统一组件代码解决。下一步可以继续扩展的方向包括把design.md做成团队模板在多个项目里复用与设计令牌接轨把规范从文档层落到代码层在自定义 Agent 流程中把design.md封装成强制前置读取的上下文模块。也可以尝试按页面类型拆分规范比如首页、营销页、文档页各有一套子规则让 Agent 在不同场景下获取更精准的约束。