将 DESIGN.md 文件复制到您的项目中，告诉您的 AI 智能体““为我构建一个看起来像这样的页面”，即可获得像素级完美匹配的 UI。
DESIGN.md是什么？
DESIGN.md是 Google Stitch 引入的一个新概念。它是一个纯文本设计系统文档，AI 代理会读取该文档以生成一致的用户界面。
它只是一个 Markdown 文件。无需 Figma 导出，无需 JSON 模式，也无需任何特殊工具。只需将其放入项目根目录，任何 AI 编码代理或 Google Stitch 都能立即理解您的 UI 应该是什么样子。Markdown 是 LLM 最易读取的格式，因此无需解析或配置。
| 文件 | 谁会读它 | 它的定义 |
|---|---|---|
AGENTS.md |
编码代理 | 如何构建项目 |
DESIGN.md |
设计代理 | 项目应该呈现怎样的外观和感觉 |
该仓库提供从真实网站提取的可直接使用的 DESIGN.md 文件。
每个设计方案内部包含什么.md
每个文件都遵循Stitch DESIGN.md 格式，并包含扩展章节：
| # | 部分 | 它捕捉到的内容 |
|---|---|---|
| 1 | 视觉主题与氛围 | 氛围、密度、设计理念 |
| 2 | 颜色搭配及角色 | 语义名称 + 十六进制 + 功能角色 |
| 3 | 排版规则 | 字体系列，完整层级表 |
| 4 | 组件样式 | 按钮、卡片、输入框、带状态的导航 |
| 5 | 布局原则 | 间距比例、网格、留白理念 |
| 6 | 深度和海拔 | 阴影系统，表面层级 |
| 7 | 注意事项 | 设计护栏和反模式 |
| 8 | 响应行为 | 断点、触及目标、崩溃策略 |
| 9 | 特工提示指南 | 快速颜色参考，即用型提示 |
每个站点包含：
| 文件 | 目的 |
|---|---|
DESIGN.md |
设计系统（代理人阅读的内容） |
preview.html |
可视化目录，包含色卡、字体大小标尺、按钮和卡片。 |
preview-dark.html |
同一目录，包含深色表面 |
如何使用
- 将网站复制
DESIGN.md到项目根目录 - 让你的AI代理使用它。
