---
type: link
title: "DESIGN.md - 给智能体阅读的‘UI/UX 说明书’"
date: 2026-06-28 17:59:00 +0800
tags: [design.md, design, agent, google-labs, ui]
linkUrl: https://github.com/google-labs-code/design.md
---

要更好地理解 **`DESIGN.md`** 这个技术，你可以将其核心定位为：**“专门给 AI 编码助手（AI Coding Agents）阅读的‘UI/UX 说明书’或‘设计系统提示词（System Prompt）’”**。

以下是帮助你深度、立体理解这项技术的 5 个关键维度：

## 1. 理解它的核心痛点：为什么需要它？

在 `DESIGN.md` 出现之前，如果你对 AI 说“帮我写一个设置页面”，AI 会基于它在互联网上学习到的通用代码逻辑来生成 UI，这往往会导致：

* **风格不一致**：这次生成的按钮是圆角的，下次生成的变方了；页面 A 的蓝色和页面 B 的蓝色有色差。
* **缺乏品牌感**：生成出来的界面通常非常“大众脸（Generic）”，没有企业的品牌规范。
* **难以约束**：将复杂的 Figma 导出文件或厚重的 JSON 规范喂给 AI，往往因为上下文过大、格式不匹配导致 AI 理解偏差。

`DESIGN.md` 正是为了解决这个问题而诞生的。它给 AI 建立了一个**持久的、结构化的上下文**，让 AI 在写每一行 UI 代码前，都先翻看这本“规范指南”。

---

## 2. 掌握它的“双层结构”（核心机制）

`DESIGN.md` 的精妙之处在于它采用了**人类与 AI 共同最擅长阅读的 Markdown + YAML 混合格式**。它的文件结构分为两个图层：

1. **YAML Front Matter（机器可读层）**：
* 位于文件顶部，由 `---` 包裹。
* **内容**：精密的“设计令牌（Design Tokens）”，如具体的颜色 Hex 码、字体大小缩放（Typography）、圆角大小（Rounded）、间距（Spacing）等。
* **作用**：让 AI 精准掌握规范的客观数值，防止 AI 在写 CSS 时“瞎编”参数。


2. **Markdown Body（人类与 AI 意图可读层）**：
* 位于 YAML 下方，由 `##` 标题组织。
* **内容**：品牌的设计理念、视觉侧重点、使用场景的阐述（例如：“大标题使用深墨色以彰显现代感，背景色采用温暖的石灰岩色以缓解视觉疲劳”）。
* **作用**：提供上下文。大语言模型（LLM）对带有感性色彩的“设计原则”理解力极强，这层叙述能指导 AI 拥有“设计师一样的直觉和审美审判力”。

---

## 3. 理解它在 AI 工作流中的定位

在现代 AI 辅助编程或“Vibe Coding（氛围编程）”的生态中，你可以把项目根目录下的几个 `.md` 文件看作团队的不同角色：

* **`README.md`**：给**人类开发者**看的，介绍项目怎么跑、怎么配置。
* **`AGENTS.md`**：给**开发 Agent**看的，规定如何编译、运行、测试项目（规定“如何做”）。
* **`DESIGN.md`**：给**UI/设计 Agent**看的，规定项目应该长成什么样、传达什么感觉（规定“视觉表现”）。

---

## 4. 动手实践以加深理解

要直观感受到它的威力和逻辑，建议按照以下步骤去“玩”一下：

* **研究官方规范**：直接去查看该仓库里的 `docs/spec.md`（完整规范），看看它是如何严谨定义 Token Schema 的。
* **看看别人的作业**：搜索社区中（如 `awesome-design-md`）由真实知名网站（如 Stripe, Linear 等）提取出来的 `DESIGN.md` 样本，看高手是如何通过文字和 Token 锁死一个极具质感的 UI 的。
* **在开发工具里测试**：如果你在使用 Cursor, Claude Code, Cline 或 Google 自家的 Stitch。尝试在项目根目录下放一个 `DESIGN.md`（里面写满一种奇特的风格，比如满屏的复古霓虹风加超大圆角），然后对 AI 说：“帮我写一个登录组件”，看看它是不是真的被这个文件“洗脑”了。

## 5. 它的深远意义

理解这项技术，还要看清它的未来趋势。`DESIGN.md` 标志着**设计系统（Design Systems）正在从“代码/组件驱动”转向“语义/提示词驱动”**。未来设计师也许不再需要维护复杂的 React 组件库，而是通过不断迭代维护一个 `DESIGN.md` 语言规范，AI 就可以自动在各种框架（React, Vue, Tailwind, Flutter）中完美且不失真地输出符合品牌调性的界面。


- [Gemini 3.5 Flash 会话](https://gemini.google.com/app/5eb0901035c3116c)