原创 逛逛 2026-04-13 13:08 浙江
这个开源项目有意思，解决你的 AI 生成的界面丑陋的问题。
最近刷 X 的时候看到的这个开源项目，10 天不到就拿了 4 万 Star，火得一塌糊涂。
它做的事情很简单但很精准：把 Nike、Claude、Notion、Figma 这些大牌网站的设计系统全部提取出来，做成 AI 能直接读懂的 Markdown 文件。
你丢一个到项目里，告诉 AI 照着这个风格来，出来的界面就跟原版一样精致。
比如基于 Claude 设计规范 Design.md 生成的网页。
而且我觉得 DESIGN.md 这中理念短期内一定会重塑 UI/UX 设计师的日常工作方式。
以前设计师出设计稿，需要从组件库里找一些组件，根据业务需求拼起来。
这个流程完全可以标准化，把所有设计规范沉淀维护成一个 MD 就行了。
后面想出图口喷一下就好了。
01
开源项目简介
这个项目叫 awesome-design-md，是 VoltAgent 团队做的。
简单说就是一个设计系统的合集库，收录了 58 个知名品牌网站的完整设计规范，全部以 DESIGN.md 格式保存。
DESIGN.md 是 Google Stitch 最近提出的一个概念。
就是用纯 Markdown 来描述一个网站的视觉语言，包括颜色、字体、间距、阴影、组件样式这些，格式天然适合 AI 阅读。
跟 AGENTS.md 类比一下就明白了：
AGENTS.md 告诉 AI 怎么写代码，DESIGN.md 告诉 AI 界面应该长什么样。一个管功能，一个管颜值。
目前这个项目斩获了 4 万+ Star。
开源地址：https://github.com/VoltAgent/awesome-design-md02
收录了哪些品牌
目前一共 58 个品牌，分了 8 个大类：
覆盖面还挺广的，基本上你想模仿哪个风格都能找到。
每个 DESIGN.md 里面有什么
每个品牌的设计文件都遵循 9 大标准化板块：
视觉主题与氛围、调色板与色彩角色、排版规范、组件样式、布局原则、阴影与层级、设计禁忌、响应式规则。
还有专门给 AI Agent 的提示词指南。
说白了就是把你能在设计系统里想到的所有细节都写进去了。
而且不是那种泛泛的描述，是非常精确的设计 Token。
比如 Vercel 的文件里记录了它标志性的阴影描边技术 box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)
Geist 字体在每个尺寸下的 letter-spacing 值，多层阴影堆叠的具体参数。
Linear 的文件记录了 Inter 字体 Weight 510 这个标志性字重，半透明白色边框的透明度层级。
这些参数都是从真实网站的 CSS 里提取出来的，不是凭感觉写的。
另外每个品牌文件夹里还自带 preview.html 和 preview-dark.html，直接在浏览器里打开就能看到色板、字体、按钮、卡片的实际效果，明暗两套主题都有。
04
怎么用
三步搞定：
第一步，去仓库里找你喜欢的品牌文件夹。
第二步，把里面的 DESIGN.md 文件复制到你项目根目录。
第三步，在你的 AI 编程工具里告诉它参照这个文件来生成 UI。
没了，就这么简单。不需要装任何依赖，不需要跑任何构建命令，纯 Markdown 文件直接丢进去就行。
兼容性方面，Claude Code、Cursor、OpenAI Codex、Google Stitch 都能用，只要是能读取项目文件的 AI 编程工具就行。
如果你想要的品牌还没收录，可以去 GitHub 开个 Issue 提需求，作者会根据热度来排优先级。
05
总结一下
awesome-design-md 解决的问题很实在：让不会设计的开发者也能用 AI 生成专业级别的界面。
以前你得自己琢磨配色、字体、间距，现在直接拿大牌的设计规范来用，AI 生成的 UI 瞬间就不一样了。
更大的意义在于 DESIGN.md 这个概念本身。
随着 AI 编程工具越来越强，设计规范从视觉稿变成机器可读的文本文件是必然趋势。
awesome-design-md 只是开了个头，后面肯定会有更多设计系统以这种方式存在。
如果你是设计师，这个开源项目一定要重视起来。
06
点击下方卡片，关注逛逛 GitHub
这个公众号历史发布过很多有趣的开源项目，如果你懒得翻文章一个个找，你直接关注微信公众号：逛逛 GitHub ，后台对话聊天就行了：
📖 相关推荐
资深互联网从业者，专注AI工具研究与实战应用。长期跟踪ChatGPT、Claude、Stable Diffusion等前沿AI技术，擅长将复杂的技术概念转化为通俗易懂的教程。运营颜资源小站，致力于为中文用户提供高质量的AI教程、开源项目推荐和数字资源整理。
评论(0)