当前位置：首页 > news >正文

DESIGN.md，让AI设计不跑偏

news 2026/6/5 6:40:02

使用 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 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 ## 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，基本就够了。