用途:DESIGN.md 提供纯文本形式的设计系统文档,让 AI 编码代理读取后生成一致的 UI。它遵循 Google Stitch 的 DESIGN.md 格式,包含颜色、字体、组件和布局规则,不依赖 Figma 导出或 JSON schema。文档涵盖视觉主题与氛围、颜色调色板与角色(语义名+十六进制+功能角色)、字体规则与层级、组件样式(按钮、卡片、输入、导航及状态)、布局原则(间距、网格、留白)、深度与阴影、设计守则、响应式行为以及代理提示词指南。
主要能力:收录来自开发者工具与 AI、基础设施、设计创意、金融商务、生产力与沟通、企业工业、消费生活等多个领域的 50 多个设计系统,如 Cursor、Claude、Vercel、Stripe、Linear、Figma、Apple、Spotify 等。
使用方式:从目录选择设计系统;从 https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/{site}/ 下载 DESIGN.md(以及可选的 preview.html),放入项目根目录;告知代理“使用此 DESIGN.md 构建 UI”或“将此 DESIGN.md 作为设计系统”,代理读取后生成匹配的样式、组件与布局。也可比较多个 DESIGN.md 的颜色、字体和组件模式,或到仓库提交 issue 请求新增设计系统。
适用场景:为项目套用某品牌风格、参考其设计系统构建 UI、对比不同系统设计规范。
限制:资料未提供各文件的具体许可、更新频率、价格或收费信息;实际生成效果取决于所用代理和模型;未说明是否支持全部前端框架。