开源的AI设计灵感收集网站 awesome-design-md

收集和提供现成的能被 AI 理解的设计规范,Awesome DESIGN.md 为开发者提供了一个优雅的解决方案 —— 复制一个 DESIGN.md 文件到项目根目录，告诉 AI 代理"给我一个这样的页面"，就能得到像素级完美的 UI。

关键词：#AI #awesome-desgin-md

实际效果演示：用AI复刻Wise风格的网站

Wise

复刻

网站地址：https://vi-wealth.com

什么是 DESIGN.md？

DESIGN.md 是 Google Stitch 推出的一个创新概念。它是一个纯文本的设计系统文档，AI 代理可以通过阅读这个文档来生成一致的 UI。

与传统的设计交付方式相比：

传统方式	DESIGN.md
Figma 导出（复杂、需要解析）	纯 Markdown（LLM 原生理解）
JSON Schema（需要配置）	零配置，即插即用
设计文档（难以代码化）	语义化描述，代码可直接生成

简单来说，DESIGN.md 就是给 AI 看的设计文档。它用 LLM 最擅长阅读的 Markdown 格式，完整描述了项目的视觉风格。

Awesome DESIGN.md 提供了什么？

这个仓库收集了 58 个知名网站的 DESIGN.md 文件，全部从真实网站提取，覆盖了多个领域：

AI & 机器学习（12 个）

Claude - Anthropic 的 AI 助手，温暖的陶土色调
ElevenLabs - AI 语音平台，深色电影级 UI
Ollama - 本地 LLM 运行，终端极简主义
xAI - Elon Musk 的 AI 实验室，未来派单色设计

开发者工具（14 个）

Cursor - AI 优先代码编辑器，流畅深色界面
Linear - 工程师项目管理，极致精确的紫色点缀
Vercel - 前端部署平台，黑白精确度，Geist 字体
Supabase - 开源 Firebase 替代品，深色祖母绿主题

基础设施（6 个）

ClickHouse - 快速分析数据库，黄色点缀技术文档风格
Stripe - 支付基础设施，标志性紫色渐变
MongoDB - 文档数据库，绿色叶子品牌

设计与生产力（10 个）

Figma - 协作设计工具，生动多彩，专业而有趣
Notion - 一体化工作区，温暖极简主义，衬线标题
Framer - 网站构建器，大胆黑蓝，运动优先

企业与消费品牌（7 个）

Apple - 消费电子， premium 留白，SF Pro 字体
Tesla - 电动汽车，极致减法，电影级全屏摄影
SpaceX - 航天技术，纯粹黑白，未来感

汽车品牌（5 个）

Ferrari - 奢华汽车，明暗黑白社论式，法拉利红极度简约
Lamborghini - 奢华汽车，纯黑大教堂，金色点缀
Tesla - 电动汽车，极致减法，电影级全屏摄影

每个 DESIGN.md 包含什么？

每个文件都遵循 Stitch DESIGN.md 格式，包含 9 个核心部分：

部分	内容
1. 视觉主题与氛围	情绪、密度、设计哲学
2. 色彩系统与角色	语义名称 + 十六进制值 + 功能角色
3. 排版规则	字体家族、完整层次表
4. 组件样式	按钮、卡片、输入框、导航（含状态）
5. 布局原则	间距比例、网格、留白哲学
6. 深度与层次	阴影系统、表面层次
7. 做与不做	设计护栏和反模式
8. 响应式行为	断点、触摸目标、折叠策略
9. AI 代理提示指南	快速色彩参考、即用提示

每个网站还附带：

DESIGN.md - 设计系统（AI 读取的文件）
preview.html - 可视化目录（色卡、排版、按钮、卡片）
preview-dark.html - 深色模式目录

如何使用？

步骤 1：选择一个设计

浏览 Awesome DESIGN.md 仓库，找到你喜欢的网站风格。

例如，如果你喜欢 Linear 的极致精确和紫色点缀：

cd /your/project
cp /path/to/awesome-design-md/design-md/linear.app/DESIGN.md ./DESIGN.md

步骤 2：复制 DESIGN.md

将选择的 DESIGN.md 复制到你的项目根目录：

# 例如复制 Linear 的设计
cp /Users/gudaixin/Code/awesome-design-md/design-md/linear.app/DESIGN.md ./DESIGN.md

步骤 3：告诉 AI 使用它

现在，你可以给 AI 代理（如 Claude、OpenAI、Google Stitch）这样的提示：

请根据 DESIGN.md 中描述的设计系统，为我的博客创建一个首页。

要求：
- 使用 Linear 的紫色点缀和精确排版
- 按照响应式断点设计移动端
- 遵循"做与不做"中的设计护栏

AI 会读取 DESIGN.md 文件，理解你的视觉风格，并生成像素级一致的代码。

实际例子

复制 Claude 的设计系统

cd ~/projects/my-ai-app
cp /Users/gudaixin/Code/awesome-design-md/design-md/claude/DESIGN.md ./DESIGN.md

然后告诉 AI：

根据 DESIGN.md，创建一个聊天界面，包含：
- 消息列表（左侧）
- 聊天窗口（右侧）
- 使用 Claude 的温暖陶土色调 (#e5786a)
- 简洁的编辑器风格输入框

复制 Vercel 的黑白极简风格

cp /Users/gudaixin/Code/awesome-design-md/design-md/vercel/DESIGN.md ./DESIGN.md

AI 会自动理解：

使用 Geist 字体
黑白高对比度
精确的间距系统（4px 基准）
极简的交互设计

为什么这么强大？

1. LLM 原生理解

Markdown 是大语言模型最擅长的格式。不需要解析 JSON、XML 或 Figma 文件 —— AI 直接阅读自然语言。

2. 零学习成本

设计师和开发者都不需要学习新工具。就是 Markdown 写的文档，任何文本编辑器都能打开。

3. 版本控制友好

DESIGN.md 可以放入 Git，与代码一起版本管理。设计变更清晰可追踪。

4. AI 代理统一接口

无论使用 Claude、OpenAI、Google Stitch 还是其他 AI 编码工具，都能理解 DESIGN.md。

5. 真实网站提取

所有 DESIGN.md 都是从真实网站提取的，不是臆造的设计系统。这意味着：

经过真实用户验证
可落地实施
包含细节（hover 状态、阴影、渐变）

与 AGENTS.md 的区别

文件	谁读取它	定义什么
`AGENTS.md`	编码代理	如何构建项目
`DESIGN.md`	设计代理	项目应该是什么样子

扩展阅读

总结

Awesome DESIGN.md 是 AI 时代的前端开发加速器。它让开发者能够：

快速原型：58 种现成设计系统，即选即用
一致性保证：AI 理解你的视觉风格，生成像素级一致的 UI
设计民主化：不需要设计师，也能创建专业级别的界面
版本可控：设计系统与代码一起管理

复制一个 DESIGN.md，告诉 AI"给我一个这样的页面"，就这么简单。

谢谢关注收藏

⏰ 刚刷到的朋友注意啦！点击【关注】锁定宝藏库，从此升职加薪不迷路 ✨

特别重要信息

重要网站

ai-wealth: https://vi-wealth.com

理财数据网站：http://vi-money.com/

个人博客网站：https://funkygod.vip/

日更小说网站： https://024novel.com/

AI汇聚信息：https://info.vi-wealth.com/information

纸鹤漂流来信：https://findingx.us

时间雨：逆滩 · 时雨，https://letter.findingx.us/

AI编程套餐

MiniMax：Coding plan

🎁 MiniMax 跨年福利来袭！邀好友享 Coding Plan 双重好礼，助力开发体验！好友立享 9折专属优惠 + Builder 权益，你赢返利 + 社区特权！ 👉 立即参与：https://platform.minimaxi.com/subscribe/coding-plan?code=5oAzx7O6Sr&source=link

GLM： coding plan

🚀 速来拼好模，智谱 GLM Coding 超值订阅，邀你一起薅羊毛！Claude Code、Cline 等 20+ 大编程工具无缝支持，“码力”全开，越拼越爽！立即开拼，享限时惊喜价！链接：https://www.bigmodel.cn/glm-coding?ic=RTWWS8HOD6

火山方舟：特惠编程plan

方舟 Coding Plan 支持 Doubao、GLM、DeepSeek、Kimi 等模型，工具不限，现在订阅折上9折，低至8.9元，订阅越多越划算！立即订阅：https://volcengine.com/L/vd1xvW2KKgg/ 邀请码：2DSAD6JL

轻量云主机长期优惠

RackNerd

☁ 主机显示特惠：只要80元（3TB流量，1vcpu，50GB硬盘）购买地址：https://my.racknerd.com/aff.php?aff=14942

CloudCone

CloudCone 特惠轻量云主机：购买地址：https://app.cloudcone.com/?ref=12332

📢 腾讯云资源限时福利

有云服务器、CDN、对象存储、网络防护等需求的朋友，欢迎联系下方腾讯云官方销售 👇 ✔️ 内部专属折扣，价格更优 ✔️ 量大可谈，支持定制方案 ✔️ 技术咨询与售后无忧

开源的AI设计灵感收集网站 awesome-design-md#

实际效果演示：用AI复刻Wise风格的网站#

Wise#

复刻#

什么是 DESIGN.md？#

Awesome DESIGN.md 提供了什么？#

AI & 机器学习（12 个）#

开发者工具（14 个）#

基础设施（6 个）#

设计与生产力（10 个）#

企业与消费品牌（7 个）#

汽车品牌（5 个）#

每个 DESIGN.md 包含什么？#

如何使用？#

步骤 1：选择一个设计#

步骤 2：复制 DESIGN.md#

步骤 3：告诉 AI 使用它#

实际例子#

复制 Claude 的设计系统#

复制 Vercel 的黑白极简风格#

为什么这么强大？#

1. LLM 原生理解#

2. 零学习成本#

3. 版本控制友好#

4. AI 代理统一接口#

5. 真实网站提取#

与 AGENTS.md 的区别#

扩展阅读#

总结#

谢谢关注收藏#

特别重要信息#

重要网站#

AI编程套餐#

MiniMax：Coding plan#

GLM： coding plan#

火山方舟：特惠编程plan#

轻量云主机长期优惠#

RackNerd#

CloudCone#

📢 腾讯云资源限时福利#