VoltAgent/awesome-design-md

这是什么？

核心功能

• 01为数十个品牌网站提供可直接使用的 DESIGN.md 文件。
• 02每个文件涵盖配色、字体排版、组件、布局、阴影层级和响应式规则。
• 03附带预览 HTML 页面，展示色板、字号、按钮和卡片。
• 04每个站点提供浅色和深色两种预览版本。
• 05采用 Stitch DESIGN.md 格式，即纯 Markdown，无需额外工具。

适用场景

• 将某品牌的 DESIGN.md 放入项目，让 AI 助手按该风格生成页面。
• 研究知名网站如何组织设计令牌和组件规则。
• 借助复古网页系列生成 1990 年代或 2000 年代初风格的界面。
• 让 AI 生成的界面在整个项目中保持视觉一致。

快速上手

1. 1

   从 getdesign.md 的合集中选择一个 DESIGN.md

2. 2

   将 DESIGN.md 文件复制到项目根目录，然后让 AI 代理按照它构建页面

收录于专题

标签

常见问题

awesome-design-md 是什么？

收录多个品牌网站设计系统的 DESIGN.md 文件，供 AI 编程助手生成风格一致的界面。 Awesome DESIGN.md 收录了一批 DESIGN.md 文件，每个文件描述一个网站或品牌的视觉设计系统，涵盖配色、字体排版、组件、布局、阴影层级和响应式行为。把对应文件放到项目根目录，AI 编程助手就能读取并按相同的视觉语言生成界面。

awesome-design-md 可以免费使用吗？用的什么许可证？

awesome-design-md 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

awesome-design-md 还在维护吗？

活跃维护中。awesome-design-md 最近一次提交是在 2026年10月28日。

awesome-design-md 适合用来做什么？

将某品牌的 DESIGN.md 放入项目，让 AI 助手按该风格生成页面。 研究知名网站如何组织设计令牌和组件规则。 借助复古网页系列生成 1990 年代或 2000 年代初风格的界面。 让 AI 生成的界面在整个项目中保持视觉一致。

awesome-design-md 怎么安装和运行？

从 getdesign.md 的合集中选择一个 DESIGN.md 将 DESIGN.md 文件复制到项目根目录，然后让 AI 代理按照它构建页面

在哪里获取 awesome-design-md？

源代码和安装说明在 GitHub 上：https://github.com/VoltAgent/awesome-design-md