用 DESIGN.md 约束 AI 生成 UI

AI 生成的界面之所以容易出现相似的渐变、圆角卡片和居中布局，往往不是编码能力不足，而是缺少明确的设计参考。开源项目 awesome-design-md 将真实品牌的视觉规则整理成 DESIGN.md，让 AI 编程助手依据具体的颜色、字体、组件和布局规范生成页面，从而减少千篇一律的“AI 味”。

开源项目简介

awesome-design-md 是一套面向 AI 编程助手的设计系统参考库，收录了 300 多个真实品牌的设计语言，覆盖 Apple、Nike、Stripe、BMW、Claude、Runway 等不同领域。

项目沿用了 Google Stitch 提出的 DESIGN.md 思路：将颜色、字体、间距、组件样式和布局规则写进一个 Markdown 文件。AI 读取后，可以像拿到品牌设计手册一样，明确按钮圆角、标题字重、页面留白等细节。

• 开源地址：https://github.com/VoltAgent/awesome-design-md
• 官方网站：https://getdesign.md/

这个项目不会训练新模型，也不会改变模型本身的编码能力。它提供的是一套清晰、可执行的视觉约束，帮助 AI 更准确地理解目标风格。

它怎样让 AI 停止生成模板化界面

如果只要求 AI“制作一个电商落地页”，结果通常容易落入固定套路：紫蓝渐变的首屏、三张圆角功能卡片，以及醒目的行动按钮。

加入品牌 DESIGN.md 后，提示会变得更加具体。例如使用 Nike 的设计规范，AI 可以据此采用全幅黑白摄影、巨型大写标题、简洁导航和克制的装饰，让页面在视觉上更接近目标品牌语言。

项目主要通过以下三种方式减少界面同质化。

1. 为 AI 提供完整的品牌规范

每个 DESIGN.md 文件都会描述一套相对完整的视觉系统，包括：

• 颜色系统：不仅写“蓝色”，还会给出具体色值、语义名称和使用场景，例如主按钮或链接颜色。
• 字体层级：明确字体家族、字号、字重和不同标题层级，而不是只使用“大标题”之类的模糊描述。
• 组件规则：定义按钮、卡片、输入框和导航的圆角、阴影、间距及交互状态。
• 设计理念：概括品牌的整体气质，例如 Vercel 的黑白精确风格、BMW 的工程感，或 Runway 的电影编辑风格。

2. 用 AI 易于理解的文本传递设计

与依赖可视化文件解析相比，Markdown 更容易直接进入 AI 编程助手的上下文。DESIGN.md 不要求额外导出设计稿，也不依赖专用插件或解析器，只需放入项目并在提示词中明确引用即可。

这种方式把抽象审美转化为结构化文本，使不同 AI coding agent 都能按照统一规则生成和修改界面。

3. 提供覆盖多个行业的品牌样本

项目涵盖了多种类型的设计参考：

• 科技：Apple、NVIDIA、Vercel
• 金融：Stripe、Revolut、Coinbase
• 消费：Nike、Airbnb、Starbucks
• 汽车：BMW、Tesla、Ferrari
• 复古网页：1996 年的 Dell、2001 年的 Nintendo 等

开发者可以根据项目类型选择相近的品牌规范，而不必从零编写整套设计系统。

DESIGN.md 里面有什么

每份品牌规范不只是提取颜色，还会进一步拆解排版、组件、布局和交互规则。

章节	内容
视觉主题与氛围	页面情绪、信息密度与设计理念
颜色系统	语义名称、具体色值与功能角色
排版规则	字体家族、字号、字重和层级表
组件样式	按钮、卡片、输入框、导航及其状态
布局原则	间距尺度、网格结构和留白规则
深度与层级	阴影系统、表面关系和视觉层次
该做与不该做	设计护栏、禁用方式与常见反模式
响应式行为	页面断点、触控目标和内容折叠策略
Agent 提示指南	快速颜色参考和可直接使用的提示词

每个品牌通常还会提供对应的预览文件：

• preview.html：展示色板、字号、按钮和卡片等基础元素。
• preview-dark.html：展示同一套规范在暗色模式下的效果。

如何使用

使用过程可以概括为三步：

1. 从仓库中选择一个合适的品牌目录，将其中的 DESIGN.md 复制到项目根目录。
2. 告诉 AI 编程助手：“使用 ./DESIGN.md 作为设计参考。”
3. 描述需要构建的页面，并让 AI 按照文件中的规范实现。

这一流程不需要安装额外依赖，也不要求配置专门的设计工具链。比如要制作精致的支付页面、极简 SaaS 后台或视觉鲜明的科技媒体网站，可以分别选择 Stripe、Linear 或 The Verge 等接近目标风格的参考文件。

这个现象的深层启示

AI 味更多是参考系问题

当需求只有“做得好看”时，模型容易从训练数据中提取常见模式，最终生成趋于平均化的界面。DESIGN.md 提供了明确的审美坐标，让模型不再依赖宽泛的默认模板，而是围绕指定的品牌语言进行实现。

文本正在成为设计系统的新载体

传统设计文件主要服务于设计师和开发者，而 DESIGN.md 面向的是 AI。它将视觉规则翻译成模型能够直接读取的结构化文本，也让设计系统更容易进入 AI 原生开发流程。

清晰约束有助于提高输出质量

完全开放的提示并不一定带来更多创造力。颜色、字体、间距和组件规则越明确，AI 越容易保持页面的一致性。约束并非限制设计，而是帮助模型避开随意组合和模板化输出。

写在最后

AI 已经可以快速完成大量前端代码，但“能够运行”并不等于“视觉统一”。awesome-design-md 的价值不仅在于收录了大量品牌，更在于展示了一种实用方法：把设计语言整理成 AI 可读取、可执行的 Markdown 规范。

下次让 AI 制作页面时，与其只说“做得好看”，不如提供一份合适的 DESIGN.md，明确告诉它颜色怎么用、组件怎么画，以及页面应该呈现怎样的整体气质。