# 面向中文用户的 DESIGN.md 资源集合与本地化浏览版本

*Published:* 2026-04-25
*Author:* 客服001

复制一份 DESIGN.md 到你的项目里，告诉 AI Agent “按这个风格给我做一个页面”，就能更稳定地生成接近目标视觉语言的 UI。

目前仓库包含：

58 个参考案例：来自原项目收录的公开网站风格参考  
1 个自定义案例：awesome-design-md-cn 自己沉淀出的资源库设计语言

DESIGN.md 是 Google Stitch 提出的一个新概念。 它是一份给 AI Agent 读取的纯文本设计系统文档，用来帮助 AI 生成更一致的界面。

它本质上只是一个 Markdown 文件：

不需要 Figma 导出  
不需要 JSON schema  
不需要额外工具链  
把它放进项目根目录之后，AI coding agent 或 Google Stitch 就能理解你的界面应该长什么样。 Markdown 也是 LLM 最擅长读取的格式，所以没有额外解析和配置成本。

每个 DESIGN.md 里有什么？

每份文件都遵循 Stitch DESIGN.md format，并扩展了这些常用部分：

\#部分说明1Visual Theme & Atmosphere视觉气质、密度、设计哲学2Color Palette & Roles语义色、十六进制值、功能角色3Typography Rules字体族与完整层级规则4Component Stylings按钮、卡片、输入框、导航及状态5Layout Principles间距系统、网格、留白原则6Depth & Elevation阴影体系与层级关系7Do's and Don'ts设计边界与反模式8Responsive Behavior断点、触控目标、折叠策略9Agent Prompt Guide快速提示词与参考说明每个站点目录通常包含：

文件用途`DESIGN.md`设计系统说明，供 Agent 读取`preview.html`预览页，展示颜色、字号、按钮、卡片等`preview-dark.html`深色版本预览页**如何使用**

复制某个站点的 DESIGN.md 到你的项目根目录

告诉你的 AI Agent 按它来生成界面

GitHub地址：https://github.com/fchangjun/awesome-design-md-cn

GitHub地址：https://github.com/VoltAgent/awesome-design-md