[Github发现] awesome-design-md – 收集流行网站设计系统的开源项目

在 AI 编程时代，如何让 AI 生成的前端代码与设计师的视觉稿保持一致，始终是个痛点。awesome-design-md 这个项目提供了一种优雅的解法——通过纯文本的 DESIGN.md 文件，让 AI 理解并还原任意网站的设计系统。

相关链接

• GitHub：https://github.com/VoltAgent/awesome-design-md
• 维护者：VoltAgent

DESIGN.md 是什么

DESIGN.md 是 Google Stitch 提出的概念，是一种纯文本设计系统文档。AI 编程代理读取后，能生成与原网站视觉风格一致的 UI。

它的核心思路非常巧妙：用 AI 最擅长处理的 Markdown 格式，承载设计系统的关键信息——颜色、字体、间距、阴影、组件样式等。不需要 Figma 插件、不需要 JSON Schema、不需要任何特殊工具。直接扔进项目根目录，任何 AI 编程工具都能理解并使用。

项目包含什么

awesome-design-md 目前收录了 58 个来自真实网站的 DESIGN.md 文件，涵盖多个领域：

AI 与机器学习

Claude、Cohere、ElevenLabs、Minimax、Mistral AI、Ollama、xAI、RunwayML、Together AI 等。每个文件都捕捉了这些 AI 产品的视觉语言——比如 Claude 的暖色调陶土色强调色、Cohere 的渐变色数据仪表盘风格。

开发者工具

Cursor、Linear、PostHog、Raycast、Supabase、Vercel、Warp、Resend、Sentry 等。这些工具的设计系统文档尤其有价值，因为它们本身就是工程师在做产品，文档质量高、细节丰富。

基础设施与云服务

ClickHouse、MongoDB、Stripe、Sanity、HashiCorp、Composio。

设计工具与生产力

Figma、Framer、Notion、Miro、Intercom、Cal.com、Clay、Webflow。

金融科技

Coinbase、Kraken、Revolut、Wise。

企业与消费品牌

Apple、Spotify、NVIDIA、Airbnb、SpaceX、Uber、IBM。

汽车品牌

BMW、Ferrari、Lamborghini、Renault、Tesla。这几个奢侈汽车品牌的设计系统文档尤其值得研究——暗黑、高对比度、金色/绿色点缀，把 premium 两个字刻进 DNA。

每个 DESIGN.md 包含哪些内容

文件结构遵循 Google Stitch 的标准格式，包含 9 个核心章节：

1. 视觉主题与氛围：情绪、密度、设计哲学
2. 色彩体系：语义化命名 + Hex 值 + 功能角色
3. 字体规范：字体族、完整层级对照表
4. 组件样式：按钮、卡片、输入框、导航，含各种状态
5. 布局原则：间距比例、网格、留白哲学
6. 深度与层级：阴影系统、表层层级
7. Do’s and Don’ts：设计 guardrails 和反模式
8. 响应式行为：断点、触控目标、折叠策略
9. 代理 Prompt 指南：快速取色、现成可用的 Prompt

每个网站目录还额外提供两个预览文件：

• preview.html：视觉目录，展示色板、字体层级、按钮、卡片
• preview-dark.html：同上，但针对暗色表面

如何使用

使用流程极其简单：

1. 从仓库中复制目标网站的 DESIGN.md 到你的项目根目录
2. 告诉你的 AI 编程工具：按照这个 DESIGN.md 的规范来构建 UI
3. 得到像素级还原的设计

适用人群

• AI 编程工具用户：想让 AI 生成的前端代码更贴近设计稿
• 前端开发者：需要参考大厂设计系统的实现细节
• 设计师：了解自己设计在代码层面的具体表达
• AI 代理开发者：构建多代理协作系统中的设计代理

总结

awesome-design-md 是一个非常实用的开源项目。它把设计系统从 Figma 的专有格式中解放出来，用纯文本让 AI 理解设计意图。这个思路和 Google Stitch 一脉相承——Markdown 是 LLM 最擅长处理的格式，不需要解析器和特殊工具。

24.2k stars、58 个现成设计系统、覆盖 AI/开发工具/云服务/金融/汽车等多个领域，这个仓库值得任何一个在做 AI 前端开发的人收藏。