复制一份 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，并扩展了这些常用部分：

# 部分 说明
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 快速提示词与参考说明

每个站点目录通常包含：

文件 用途
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

历史上的今天
04月
25
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系客服QQ3387285338进行处理。