DESIGN.md：让AI设计告别“抽风”，每次输出都像同一个产品

导语：用DESIGN.md给AI设计“立规矩”，告别风格飘忽，每次输出都像出自同一产品。

使用 AI 设计工具时，最烦人的问题之一就是输出不稳定。你明明已经告诉它颜色怎么用、字体怎么搭、按钮要什么风格，可它生成几次之后还是会偷偷改一点，最后做出来的界面风格前后不一致。DESIGN.md 就是为了解决这个问题出现的。它的作用很简单：把设计规则写成一个 AI 能读懂的 Markdown 文件，让 AI 在生成界面时始终按照同一套视觉规范来做。

什么是 DESIGN.md？

DESIGN.md 是一个 Markdown 文件，里面写着你的设计系统说明。你可以把它理解成喂给 AI Agent 的“设计底稿”。AI 读取它之后，就能知道这个项目应该使用什么颜色、字体、组件样式和视觉规则。

DESIGN.md 在 AI 生成设计中的作用。它也是 Google Stitch 里的核心元素。事实上，当你让 Google Stitch 生成一个新设计时，它第一步通常就是先生成一份 style guide。当 Google Stitch 这样的设计 Agent 读取 DESIGN.md 后，它生成的每个页面都会遵循同一套视觉规则：颜色统一、字体统一、组件模式也更一致。

在 Google Stitch 里生成新设计时，你最先看到的通常是一份 AI 生成的 style guide。点击它并选择 Edit，就可以看到 DESIGN.md 文件。顺便说一句，这里更愿意叫它“style guide”，而不是完整的 design system，因为在 Google Stitch 目前还不支持修改 UI 组件本身，只能调整颜色、字体、圆角这类视觉属性。

DESIGN.md 的设计理念

传统设计规范通常很细，设计师需要严格按照里面的规则做设计。但 DESIGN.md 没那么死板。它更像是给 AI 一个基础方向：颜色、字体、圆角、间距这些底层规则要统一，但具体页面怎么组织，仍然可以根据业务场景灵活变化。还有一点很重要：DESIGN.md 不是一次写完就不动的配置文件，而是一个持续演进的文件。当 AI 生成界面后，你可以继续调整设计，再反过来迭代 DESIGN.md，让它越来越贴近你的产品风格。

DESIGN.md 的文件结构

DESIGN.md 本质上是一个 Markdown 文件，通常包含两层内容：第一层是 YAML front matter，用来放机器可读的设计 token，比如颜色 hex 值、字体属性、间距尺度等；第二层是正文，用自然语言解释设计理念，方便人阅读，也方便 AI 理解设计意图。Markdown 格式的好处是很容易读也很容易改。你想换主色、改字体、调整圆角，直接编辑文本就行，不需要学习一套复杂语法。标准 Markdown 加 YAML 基本就够了。

现成的 DESIGN.md 示例

现在已经有人整理了一批可直接使用的 DESIGN.md 文件，用来复刻一些大品牌的视觉风格。VoltAgent/awesome-design-md 收集了很多受热门品牌设计系统启发的 DESIGN.md 文件。你可以直接复制一份到项目里，然后告诉 AI：“帮我做一个这种风格的页面。” AI 就能按照这份规则生成更接近目标风格的 UI。

比如，下面是 Apple 视觉语言对应的 DESIGN.md。

Google Stitch 支持你在生成设计的一开始就提供 DESIGN.md。一个叫 Roxy 的 SaaS 简单落地页。

最后 Google Stitch 生成了这样的结果：

Apple 风格的 landing page 设计。当然，它不可能完美复刻 Apple 的设计，但你能明显看到一些常见的 Apple 视觉特征已经出现了，比如干净的配色、更大的留白、更克制的界面层次。

总结

DESIGN.md 不是一个神奇文件，但它确实能让 AI 设计更稳定。它把原本容易飘的设计偏好变成了明确的文字规则和设计 token。对 AI 来说，它是一份可执行的设计说明；对团队来说，它是一份可以持续迭代的风格基准；对产品来说，它能让不同页面生成出来后不至于像来自五个设计师。如果你经常用 Google Stitch 或其他 AI 设计工具生成界面，DESIGN.md 很值得放进工作流里。因为让 AI 做设计，最难的不是生成一个好看的页面，而是让它每次都像同一个产品。