灵感来源于 Google Stitch

精选 DESIGN.md
设计系统合集

从真实网站中提取的设计系统文档。复制到你的项目中,告诉 AI 代理「构建一个看起来像这样的页面」,即可获得完美匹配像素的 UI。

55
DESIGN.md 文件数
6
分类类别
9
标准章节

什么是 DESIGN.md?

DESIGN.mdGoogle Stitch 引入的全新概念 —— 一个纯文本的设计系统文档,AI 代理通过阅读它来生成一致的 UI。

它只是一个 Markdown 文件。无需导出 Figma,无需 JSON Schema,无需特殊工具。将它放入项目根目录,任何 AI 编码代理或 Google Stitch 都能立即理解你的 UI 应该如何呈现。

Markdown 是 LLM 最擅长阅读的格式,因此无需解析或配置。

文件 谁读取它 它定义了什么
AGENTS.md 编码代理 如何构建项目
DESIGN.md 设计代理 项目的外观和感觉

每个 DESIGN.md 包含什么

01
视觉主题与氛围
情绪、密度、设计哲学
02
调色板与角色
语义名称 + 十六进制值 + 功能角色
03
字体规则
字体系列、完整层级表
04
组件样式
按钮、卡片、输入框、导航及其状态
05
布局原则
间距刻度、网格、留白哲学
06
深度与高程
阴影系统、表面层级
07
应该与不应该
设计护栏和反模式
08
响应式行为
断点、触摸目标、折叠策略
09
代理提示指南
快速颜色参考、即用型提示
文件 用途
DESIGN.md 设计系统(代理读取的内容)
preview.html 视觉目录,展示色板、字体比例、按钮、卡片
preview-dark.html 相同的目录,但使用深色表面

55 个可直接使用的设计系统

如何使用

01
复制 DESIGN.md
将目标站点的 DESIGN.md 文件复制到你的项目根目录。
02
告诉 AI 代理
在提示中告诉你的 AI 编码代理:「请根据 DESIGN.md 构建一个看起来像这样的页面」,即可获得完美匹配的 UI。
想请求为某个网站生成 DESIGN.md? 提交 Issue →