---
type: concept
title: DESIGN.md
created: 2026-05-04
updated: 2026-05-04
tags: [design-system, markdown, ai-agent, google-stitch, design-md]
---

## 定义

DESIGN.md 是一种纯文本设计系统文档格式，由 Google Stitch 引入。它用 markdown 描述颜色、字体、间距、组件样式等设计规范，AI agent 可以直接读取来生成风格一致的 UI。

## 核心要点

- **格式**：纯 markdown，无特殊语法，LLM 天然友好
- **文件位置**：项目根目录的 `DESIGN.md`
- **与 AGENTS.md 的区别**：AGENTS.md 告诉编码 agent 怎么构建项目，DESIGN.md 告诉设计 agent 界面应该长什么样
- **标准结构**（VoltAgent 版本）：
  1. Visual Theme & Atmosphere — 整体氛围
  2. Color Palette & Roles — 颜色语义化定义
  3. Typography Rules — 字体层级
  4. Component Stylings — 按钮、卡片等组件状态
  5. Layout Principles — 间距、栅格
  6. Depth & Elevation — 阴影层级
  7. Do's and Don'ts — 设计禁区
  8. Responsive Behavior — 响应式断点
  9. Agent Prompt Guide — 快速参考

## 不同来源的说法

| 来源 | 观点 |
|------|------|
| Google Stitch | DESIGN.md 是让 AI 理解设计意图的最小格式，强调简单性和可移植性 |
| VoltAgent/awesome-design-md | 在 Stitch 基础上扩展为 9 段结构，每个设计包含 DESIGN.md + preview.html |

## 优势对比

| 对比项 | 传统方案（Figma/JSON） | DESIGN.md |
|--------|---------------------|-----------|
| 学习成本 | 高 | 零 |
| 工具依赖 | Figma | 无（纯文本） |
| LLM 理解度 | 需解析 | 直接读取 |
| 版本控制 | 困难 | 简单（普通文件） |
| 可分享性 | 需 Figma 账号 | 任意复制 |

## 相关实体

- [[wiki/entities/google-stitch|Google Stitch]] — 概念提出者
- [[wiki/entities/voltagent|VoltAgent]] — 最大 DESIGN.md 收集项目的维护者

## 参考来源

- [[wiki/library/VoltAgentawesome-design-md|VoltAgent/awesome-design-md]]