## 项目概述

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月。