DESIGN.md，让AI设计不跑偏

使用 AI 设计工具时最烦人的问题之一就是输出不稳定。你明明已经告诉它颜色怎么用、字体怎么搭、按钮要什么风格。可它生成几次之后还是会偷偷改一点最后做出来的界面风格前后不一致。DESIGN.md就是为了解决这个问题出现的。它的作用很简单把设计规则写成一个 AI 能读懂的 Markdown 文件让 AI 在生成界面时始终按照同一套视觉规范来做。下面就讲清楚DESIGN.md是什么以及在 Google Stitch 里怎么用。什么是 DESIGN.mdDESIGN.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 Warm colors: primary: #d97706 secondary: #78716c surface: #fff8ed on-surface: #292524 error: #dc2626 typography: body-md: fontFamily: Source Serif 4 fontSize: 17px fontWeight: 400 rounded: md: 12px --- # Design System ## Overview A 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 ## Dos and Donts - Do use warm tones to create a calm, editorial feeling - Dont overuse strong orange; reserve it for key actions - Do prioritize readability, spacing, and typographic hierarchyMarkdown 格式的好处是它很容易读也很容易改。你想换主色、改字体、调整圆角直接编辑文本就行不需要学习一套复杂语法。标准 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 做设计最难的不是生成一个好看的页面。而是让它每次都像同一个产品。最后精通 React 面试从零到中高级(针对面试回答)CSS终极指南Vue 设计模式实战指南20个前端开发者必备的响应式布局深入React:从基础到最佳实践完整攻略python 技巧精讲React Hook 深入浅出CSS技巧与案例详解vue2与vue3技巧合集