什么是 DESIGN.md？AI 编程 Agent 读取的设计规范文件（附免费移动应用示例）

DESIGN.md 是一种 Markdown 文件，用于向 AI 编程 Agent 描述产品的视觉规范。Google Labs 提出的这种格式将可选的 YAML 设计 Token 与具体的书面使用指南结合在一起。在生成界面之前，Agent 可以读取其中关于颜色、字体、间距和组件规则的具体约定。

对于移动应用开发者来说，它最大的实用价值在于能将这些设计选择延续到下一个界面。你可以从我们的免费移动 DESIGN.md 库中挑选一个文件，参考旁边的界面预览，然后将这些规则应用到你自己的应用中。

谁发起了 DESIGN.md？

Google Labs 发布了 Stitch 所使用的 DESIGN.md 格式。Google 在其 2026 年 3 月的 Stitch 发布公告中首次引入了 DESIGN.md 的导入与导出功能，随后在 4 月开源了草案规范。官方 GitHub 仓库目前仍将该格式标记为 alpha 阶段，因此在开发相关集成时，请务必查看最新的规范说明。

名为 DESIGN.md 的文件也可能只是普通的项目文档。在分享此类文件时，说明其采用的格式规范，并提供原始文本供检查。

DESIGN.md 文件包含哪些内容？

Google Labs 规范文档描述了一个带有可选 YAML Frontmatter 的 Markdown 主体。Token 分组涵盖颜色、排版、圆角、间距和组件。正文部分则解释具体设计决策，例如强调色应该用在何处，或者按钮与卡片在样式上有何区别。精准的数值与文字指导各司其职。

规范支持 CSS 颜色字符串，包括十六进制 Hex 值。在 YAML 中写 Hex 颜色时需加引号，因为未加引号的 # 会被识别为注释。形如 {colors.primary} 的引用指向文件中的另一个 Token。Sleek 的设计库在原始文本旁展示了 Hex 色块，方便你在下载前直观核对配色方案。

极简的 DESIGN.md 示例长什么样？

一份入门级的 DESIGN.md 可以描述一个小型视觉系统：一套配色、一种正文样式、一个间距数值和一个按钮。下方示例专为本指南编写。你可以将其保存为 DESIGN.md，然后根据移动应用的实际需求陆续添加规则。这是一个起点，而非完整的组件库。

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

你可以使用仓库提供的 Lint 命令来检查新增内容。检查结果有助于发现失效的引用与颜色对比度问题。不过，你仍然需要亲自检查渲染后的界面：文本文件无法帮你发现文本被截断、控件语义混乱或键盘遮挡输入框等实际视觉问题。

npx @google/design.md lint DESIGN.md

如何在 Claude Code 中使用 DESIGN.md？

将 DESIGN.md 放在项目中，并在处理 UI 任务时让 Claude Code 读取。Anthropic 的记忆文档说明，CLAUDE.md 的导入文件会在会话启动时加载。若要按需读取，可以使用普通路径引用，或在 .claude/rules/ 中编写规则，通过 paths 模式匹配 UI 文件。

例如，在 CLAUDE.md 中添加以下指令，不使用 @ 导入：

For UI tasks, read DESIGN.md before creating or changing app screens.

然后提出具体的界面及状态需求。例如，要求生成一个包含空状态和同步失败状态的任务列表界面。检查生成的 UI 是否符合文件中设定的数值规则；当你主动调整设计时，也要同步更新该文件。我们的 Claude 设计指南介绍了更完整的开发流程。

如何在 Cursor 或 Stitch 中使用 DESIGN.md？

在 Cursor 中，可以显式地将 DESIGN.md 作为上下文附加到任务中，或在项目规则（Project Rule）中引用它。而在 Stitch 中，则可以使用其 DESIGN.md 导入和导出工作流在不同项目之间传递设计规则。两者的使用方式有所不同：编程 Agent 需要将文件置于其上下文（Context）中，而 Stitch 则是围绕该格式构建了一套工作流。

对于 Cursor，其规则文档对项目规则和文件引用做出了详细说明。你可以创建一条规则，指导 Agent 在进行 UI 修改时读取 DESIGN.md。请合理设置规则的触发时机，以免与 UI 无关的后端任务加载冗长的设计文档。

对于 Stitch，Google 的 DESIGN.md 发布公告确认了你可以跨项目导入和导出设计规则。导入后，将生成的界面与设计源进行比对，并按需调整规则。

Sleek 如何利用 DESIGN.md 生成移动应用样式？

Sleek 为每一个支持二次创作的精选参考设计都配备了对应的设计规范文件。当你点击“使用此风格”并描述应用需求时，Sleek 会将该文件连同你的需求说明一起传递给生成引擎。设计文件定义了视觉美学，而你的需求说明则决定了应用的具体功能与内容。在开始生成前，你可以随时查看界面预览与设计规范文件。

参考设计画廊与 DESIGN.md 规范库使用的是同一批精选项目。Sleek 使用 Google Labs 的结构，并添加了边框、阴影等组件属性，Lint 工具会将这些属性报告为警告。此外，Sleek 还补充了针对图标系统、插画风格、视觉层级和个性化视觉细节的指导说明。样式规范文件记录了生成新应用时采用的视觉设计选择。

在设计库中打开任意样式即可复制或下载对应的 DESIGN.md，或者选择“Use this style in Sleek”直接输入你的应用创意。如果你希望在自己的编程环境中调用 Sleek，可以参考 Agent 配置指南了解独立的集成步骤。

DESIGN.md 常见问题（FAQs）