DESIGN.md,让AI设计不跑偏

使用 AI 设计工具时，最烦人的问题之一，就是输出不稳定。

你明明已经告诉它：颜色怎么用、字体怎么搭、按钮要什么风格。可它生成几次之后，还是会偷偷改一点，最后做出来的界面风格前后不一致。

DESIGN.md 就是为了解决这个问题出现的。

它的作用很简单：把设计规则写成一个 AI 能读懂的 Markdown 文件，让 AI 在生成界面时，始终按照同一套视觉规范来做。

下面就讲清楚：DESIGN.md 是什么，以及在 Google Stitch 里怎么用。

什么是 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 组件本身，只能调整颜色、字体、圆角这类视觉属性。

这里也分享一直在用的0.2倍率的官方版本不降智的gpt 5.5API(https://api.aidazhi.com （vpn打开）)，注册后，私信送5刀

DESIGN.md 的设计理念

传统设计规范通常很细，设计师需要严格按照里面的规则做设计。

但 DESIGN.md 没那么死板。

它更像是给 AI 一个基础方向：颜色、字体、圆角、间距这些底层规则要统一，但具体页面怎么组织，仍然可以根据业务场景灵活变化。

还有一点很重要：DESIGN.md 不是一次写完就不动的配置文件。

它应该是一个持续演进的文件。

当 AI 生成界面后，你可以继续调整设计，再反过来迭代 DESIGN.md，让它越来越贴近你的产品风格。

DESIGN.md 的文件结构

DESIGN.md 本质上是一个 Markdown 文件，通常包含两层内容：

第一层是 YAML front matter，用来放机器可读的设计 token，比如颜色 hex 值、字体属性、间距尺度等。

第二层是正文，用自然语言解释设计理念，方便人阅读，也方便 AI 理解设计意图。

比如：

---name: Editorial Warmcolors:  primary: "#d97706"  secondary: "#78716c"  surface: "#fff8ed"  on-surface: "#292524"  error: "#dc2626"typography:  body-md:    fontFamily: "Source Serif 4"    fontSize: 17px    fontWeight: 400rounded:  md: 12px---# Design System## OverviewA warm, editorial interface for content-heavy products.Soft contrast, spacious layouts, and a more human, reading-focused visual style.## Colors- **Primary** (#d97706): CTAs, active states, highlighted actions- **Secondary** (#78716c): Supporting UI, metadata, secondary actions- **Surface** (#fff8ed): Page backgrounds- **On-surface** (#292524): Primary text on warm backgrounds- **Error** (#dc2626): Validation errors, destructive actions## Typography- **Headlines**: Source Serif 4, semi-bold- **Body**: Source Serif 4, regular, 16–18px- **Labels**: Inter, medium, 12px, letter-spaced section headers## Components- **Buttons**: Rounded (12px), primary uses warm amber fill- **Inputs**: 1px border, soft cream background- **Cards**: Subtle border, generous padding, no heavy elevation## Do's and Don'ts- Do use warm tones to create a calm, editorial feeling- Don't overuse strong orange; reserve it for key actions- Do prioritize readability, spacing, and typographic hierarchy

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 做设计，最难的不是生成一个好看的页面。

而是让它每次都像同一个产品。