如何将 Google Stitch 的 Design.md 文件与 Claude Code 结合使用，以实现一致的 UI

为什么 AI 写界面总是"飘"

让 Claude Code 生成一个登录页，它会自己决定主色是 #3B82F6 还是 #6366F1，按钮圆角是 4px 还是 8px，正文字体是 Inter 还是系统默认。没有人告诉它，它只能猜。

换一个 prompt，猜出来的结果就不一样了。多写几个组件之后，整个项目的视觉风格七零八落。

传统解法是在每次 prompt 里把规范描述一遍："主色 #1A73E8，Inter 字体，按钮圆角 8px……"。这很麻烦，而且写得越长越容易被模型忽略一部分。

DESIGN.md 的思路是把这些规范写进一个文件，让 Claude Code 持久引用，而不是每次口述。

DESIGN.md 是什么

Google Stitch 是 Google Labs 旗下的 AI UI 设计工具，输入自然语言或图片就能生成移动端和网页界面，并导出前端代码。

2026 年 3 月，Stitch 完成了一次大版本重设计，从"提示词生成 UI"升级成 AI 原生设计画布。最值得关注的是一个新概念：DESIGN.md，一个让 AI Coding Agent 直接读取你的设计规范的 markdown 文件。

让 AI Coding Agent 直接读懂你的设计规范。

这篇文章从头到尾讲清楚怎么做。

DESIGN.md 就是一个普通的 markdown 文件，它把你整个项目的设计系统写进去，颜色、字体、间距、组件样式全在里面。任何 AI Coding Agent，包括 Claude Code、Cursor、Gemini CLI，都可以直接读取，不需要你在每个 prompt 里重复描述规范。

用一个类比来说，Claude.md 告诉 Claude 怎么构建项目，DESIGN.md 告诉 Agent 界面应该长什么样。

DESIGN.md 里有什么

文件内容结构

一个完整的 DESIGN.md 包括以下部分：

• 颜色系统：主色、辅色、强调色的精确 hex 值，以及语义色（Success/Error/Warning 等）
• 字体规格：字族、字重、H1-H6 到 body/caption 的字号映射、行高、字间距
• 间距比例：基础单位（通常 4px 或 8px），以及 xs/sm/md/lg/xl/2xl 的具体像素值
• 布局规则：容器最大宽度、栅格列数、响应式断点
• 组件样式：按钮、输入框、卡片、导航的视觉规格，包含 hover/focus/disabled 各状态
• 圆角和阴影：各组件的圆角值、阴影层级定义

DESIGN.md 是普通文本，可以用任何编辑器打开，可以纳入 Git 版本管理，支持 PR 审查，跟代码文件一样对待。

一份完整的 DESIGN.md 大概长这样：

markdown

# Design System

## Colors
- Primary: #1A73E8
- Primary Dark: #1557B0
- Surface: #FFFFFF
- Background: #F8F9FA
- Error: #D93025
- Success: #188038
- Text Primary: #202124
- Text Secondary: #5F6368
- Border: #DADCE0

## Typography
Font Family: Google Sans, Roboto, sans-serif

| Token    | Size  | Weight | Line Height |
|----------|-------|--------|-------------|
| heading-1 | 32px | 400    | 40px        |
| heading-2 | 24px | 400    | 32px        |
| body      | 14px | 400    | 20px        |
| caption   | 12px | 400    | 16px        |

## Spacing Scale
Base unit: 8px
xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px | 2xl: 48px

## Components

### Button
- Border radius: 4px
- Padding: 8px 24px
- States: hover (darken 8%), disabled (opacity 38%)

### Card
- Border radius: 8px
- Border: 1px solid #DADCE0
- Padding: 16px
- Shadow: 0 1px 2px rgba(0,0,0,0.1)

颜色用精确 hex，字体有完整的字号层级，间距有具体像素值，组件有各状态的视觉规格。AI 读到这些，生成组件时就有明确的约束可以遵循。

第一步：拿到一个 DESIGN.md

有三种方式。

方式一：从 Google Stitch 生成

在 stitch.withgoogle.com 描述你的产品，生成 UI 设计之后直接导出 DESIGN.md。这是最完整的方式，生成的文件会包含 Stitch 帮你梳理出的完整设计系统。

方式二：从任意 URL 提取

在 Stitch 里输入一个 URL，它会从页面的 CSS 里提取颜色、字体、间距，自动生成对应的 DESIGN.md。想做 Stripe 风格的界面，直接丢 stripe.com 进去就能拿到文件。

方式三：用现成的

社区项目 awesome-design-md 收录了 30 多个知名产品的 DESIGN.md 文件，包括 Stripe、Linear、Vercel、Notion、Figma、Cursor、Supabase 等，直接复制用。每套文件还附带 preview.html，可以预览完整的设计风格。

第二步：配置 CLAUDE.md

Claude Code 每次启动会自动读取项目根目录的 CLAUDE.md 作为持久上下文。在这里告诉它 DESIGN.md 的存在以及如何使用。

在 CLAUDE.md 里加上这一段：

markdown

## Design System

This project uses a design system defined in `design.md` at the project root.
Always refer to this file when generating or modifying any UI component.

Rules:
- Use ONLY colors, fonts, and spacing values defined in design.md
- Do not invent new values or use framework defaults
- Implement all interactive states (hover, focus, active, disabled) per design.md
- Follow the typographic scale and weight assignments in design.md
- When in doubt, refer to design.md before making any visual decision

## Stack
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS with custom config
- Components: Custom components

后面的 Stack 部分按你的实际情况填，框架、样式方案、组件库都写清楚。

注意最后那条 "When in doubt, refer to design.md before making any visual decision"，明确授权 Claude Code 遇到不确定时主动查文件，而不是自己猜。

第三步：验证它真的在读

配好之后，先做一个验证，在 Claude Code 里问：

"这个项目的主色是什么？"

它应该返回 design.md 里的精确 hex 值，而不是说不知道或者给出一个随机颜色。如果不对，检查 CLAUDE.md 的路径引用和措辞是否够明确。

第四步：生成组件

现在可以开始写组件了。每个 prompt 里明确点名设计系统：

"参照 design.md 中的设计系统，创建一个 primary 按钮组件，包含 hover、focus 和 disabled 状态。"

"按照项目设计规范，构建一个用户信息卡片，包含头像、姓名、邮箱和状态标签。"

"用 design.md 里定义的颜色和间距，实现一个侧边栏导航组件，包含图标和文字标签。"

即便 CLAUDE.md 里已经有说明，在 prompt 里再提一次，生成结果会更稳定。

额外技巧：把 token 写进 Tailwind 配置

如果你用 Tailwind CSS，有一步额外操作值得做，让 Claude Code 把 design.md 里的所有 token 映射到 tailwind.config.js：

"读取 design.md，生成一个 tailwind.config.js，把所有颜色、间距和字体值映射为 Tailwind 自定义 token。"

生成结果大概长这样：

javascript  ``javascript ``

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1A73E8',
        'primary-dark': '#1557B0',
        surface: '#FFFFFF',
        background: '#F8F9FA',
        error: '#D93025',
        success: '#188038',
      },
      fontFamily: {
        sans: ['Google Sans', 'Roboto', 'sans-serif'],
      },
      spacing: {
        xs: '4px',
        sm: '8px',
        md: '16px',
        lg: '24px',
        xl: '32px',
        '2xl': '48px',
      },
      borderRadius: {
        button: '4px',
        card: '8px',
      },
    },
  },
}

这相当于加了一层双重保险。即便某次 prompt 写得不够精确，Tailwind 的 utility class 本身只包含你的 token，不会跑偏到框架默认值上。

怎么发现风格漂移

写了一批组件之后，让 Claude Code 做一次检查：

"检查 /components 目录下的组件，找出使用了 design.md 未定义的颜色、间距或字体值的地方，列出来。"

它会扫描文件，找出不符合规范的值。早发现早修，比让问题积累到整个项目都需要统一补救要省事得多。

几个常见错误

DESIGN.md 没有提前完善就导出

Stitch 导出的文件质量取决于你的设计做得多完整。设计刚起步就导出，文件里会有大量占位颜色和默认值，Claude Code 读到的就是这些默认值。先在 Stitch 里把设计迭代到比较成熟，再导出。

CLAUDE.md 只提到文件存在，没说怎么用

"本项目有 design.md" 和 "生成任何 UI 时必须参照 design.md，不得使用文件外的值" 是两种不同的指令效果。措辞要明确，约束要清晰。

只在第一次提设计系统，后续 prompt 不再提

CLAUDE.md 提供的是背景上下文，不是强制执行的规则。在重要的 prompt 里主动提一句，比依赖上下文隐性生效更可靠。

写了新组件但忘记更新 design.md

设计系统会随着产品演进。新加了一个颜色变量、调整了一个间距值，都要同步更新 design.md 并提交到版本管理。下次开新 session，Claude Code 读到的才是最新的规范。

小结

整个工作流就四个文件，各司其职：

先从一种组件开始验证，比如只做按钮，确认颜色、字重、圆角都对了，再推广到整个组件库。

DESIGN.md 本身还很新，但背后的逻辑很简单：给 AI 一个它能读的设计规范文件，比每次靠口述更可靠。

社区资源：awesome-design-md

社区已经出现了开源项目 awesome-design-md，收录了 31 个知名产品的现成 DESIGN.md 文件，包括 Stripe、Vercel、Linear、Notion、Figma、Cursor、Claude、xAI、Supabase 等。每套文件附带 preview.html 和 preview-dark.html，可以预览配色和组件样式。

把对应的 DESIGN.md 复制进项目根目录，配好 CLAUDE.md 就能用。想做 Linear 质感的界面，不需要自己从头分析它的设计规范。

相关资源：

• Google Stitch：https://stitch.withgoogle.com
• DESIGN.md 格式文档：https://stitch.withgoogle.com/docs/design-md/overview
• awesome-design-md（现成的设计系统文件）：https://github.com/VoltAgent/awesome-design-md