VoltAgent/awesome-design-md

项目概述

awesome-design-md 是一个精选的 DESIGN.md 文件集合，这些文件是从知名品牌设计系统中分析提取的。DESIGN.md 是 Google Stitch 引入的一种纯文本设计系统文档，AI 代理可以读取它来生成一致的用户界面。该项目旨在帮助开发者将 DESIGN.md 文件放入项目中，并让编码代理生成匹配的 UI。

核心功能

• 提供 73 个来自流行网站（如 Claude、Vercel、Stripe、Apple 等）的 DESIGN.md 文件。
• 每个 DESIGN.md 文件包含视觉主题、颜色、排版、组件样式、布局原则、深度与层次、注意事项、响应式行为和代理提示指南。
• 每个网站还附带 preview.html 和 preview-dark.html，用于可视化展示颜色、字体、按钮等。
• 支持请求特定网站的 DESIGN.md，包括私人请求。
• 包含 1990 年代复古网页的 DESIGN.md 文件，用于生成复古 UI。

适用与不适用场景

适用场景：

• 希望快速生成与知名品牌视觉风格一致的 UI 的开发者。
• 使用 AI 编码代理（如 Cursor、Copilot）进行 vibe coding 或 vibe design 的开发者。
• 需要设计系统参考或设计令牌的团队。

不适用场景：

• 需要完全原创或独特设计，不希望模仿现有品牌的项目。
• 需要 Figma 导出或 JSON 模式等结构化设计文件的项目。
• 对设计系统有严格法律或品牌合规要求的场景（因为文件按“原样”提供，不保证准确性）。

技术架构与依赖

• 仓库本身是一个静态集合，主要包含 Markdown 文件和 HTML 预览文件。
• 依赖：无特定运行时依赖，仅需 Markdown 阅读器和浏览器即可查看预览。
• 文件格式遵循 Google Stitch 的 DESIGN.md 规范。
• 许可证：MIT。

安装与快速开始

1. 克隆仓库：git clone https://github.com/VoltAgent/awesome-design-md.git
2. 浏览 collection 目录（或通过 README 中的链接）找到你想要的网站。
3. 复制该网站的 DESIGN.md 文件到你的项目根目录。
4. 告诉你的 AI 代理：“使用 DESIGN.md 构建一个页面”。

典型使用方法

1. 从仓库中选择一个网站，例如 https://getdesign.md/vercel/design-md。
2. 下载或复制 DESIGN.md 到你的项目。
3. 在你的 AI 编码代理（如 Cursor）中，引用该文件并描述你想要的页面。
4. 代理将根据设计令牌和规则生成 UI。
5. 可选：使用 preview.html 预览设计令牌。

配置与部署要点

• 无需配置，直接使用。
• 如果希望自定义，可以编辑 DESIGN.md 中的颜色、字体等。
• 部署时，确保 DESIGN.md 文件在项目根目录，以便代理读取。
• 注意：DESIGN.md 文件按“原样”提供，不保证与实时网站完全一致。

限制、风险与许可证

• 限制：DESIGN.md 文件可能不完整或过时，且不保证与实时网站完全一致。
• 风险：使用这些设计文件可能涉及品牌模仿，需注意法律和合规风险。
• 许可证：MIT，但设计令牌来自公开网站，不声称拥有任何网站的视觉标识。

官方链接

• 仓库地址：https://github.com/VoltAgent/awesome-design-md
• Google Stitch DESIGN.md 文档：https://stitch.withgoogle.com/docs/design-md/overview/
• 请求 DESIGN.md：https://getdesign.md/request

信息来源和分析时间

• 信息来源：GitHub 仓库 README、CONTRIBUTING.md、仓库元数据。
• 分析时间：2025年4月。