本文介绍开源项目Awesome DESIGN.md，整理了Notion、Linear等66个顶级网站的设计规范为DESIGN.md文件，适合独立开发者和AI编程者免费使用。将文件放入项目根目录后，Claude Code等AI工具可严格按照色彩、字体、圆角等规范生成专业界面，无需手动调样式。项目不到半月获5.4万Star，支持预览和直接下载。
Tags:
现在用 Claude Code 从零开发一个项目，已经不是什么新鲜事，快的几分钟就能完成。
项目功能虽然完善，但 UI 界面是真的长得很一般，配色千篇一律，字体单调，排版松散。
原因其实很简单：AI 的开发能力已经够用，但对我们想要的产品设计风格并不了解。
以往公司有设计师，会在 Figma 里标注着各种细节，制定一套产品设计规范，同步给开发。
但现在一个人借助 AI 开发，没有设计师配合，这套流程走不通，设计这块只能靠自己扛。
于是，Google Stitch 前段时间给出了一个新的解决思路：DESIGN.md。
简单来说，把产品的设计规范写成一份 Markdown 文件，放进项目根目录，让 AI 直接读。
文件里写清楚：主色是什么，标题用什么字体，卡片圆角是多少，按钮悬停是什么状态，整体设计是极简还是信息密集。
有了这份文件，AI 严格按照设计规范，生成出来的界面就不会千篇一律，也不会凭空发挥。
以前的 AGENTS.md 文件告诉 AI 怎么构建项目，现在 DESIGN.md 则告诉 AI 项目该长什么样。
两个文件，就项目把「代码层」和「设计层」都给 AI 交代清楚。
但让人头疼的是，对于不懂设计的新手，自己从零写一份 DESIGN.md 并不轻松。
要提炼颜色体系、整理字体规范、描述组件样式，没有一定设计背景，很难写得准确。
恰巧，最近在 GitHub 上发现一个整理了各大顶级网站设计规范的合集：Awesome DESIGN.md。
开源不到半个月，就已斩获了 54000+ Star，成为最近增速最快的项目之一。
目前已参考 66 个顶级网站的视觉风格，提炼成了现成的 DESIGN.md 文件，可直接拿来就用。
比如 Notion、Linear、Figma 等，覆盖 AI 工具、开发者工具、设计工具、电商、金融、汽车等多个领域，基本想得到的标杆产品都有。
每个网站除了 DESIGN.md 文件本体，还附带了一个 preview.html 预览页，能直观看到色板、字阶、按钮、卡片的具体样式，不用全靠想象。
使用也非常简单，以 Notion 为例。
在 GitHub 仓库里找到 Notion 风格的 DESIGN.md，下载并放到本地项目根目录。
或者直接访问网站 https://getdesign.md 找到 Notion 设计规范：
然后执行对应安装命令即可：
npx getdesign@latest add notion接着打开 Claude Code，告诉它：
请参考项目根目录下的 DESIGN.md 风格，帮我构建一个关于 Hermes Agent 介绍网站。可以上下滚动的图片
对某个细节不满意，继续对话微调就行。整个过程不需要自己查颜色值，也不需要手动调字体。
写在最后
回到开头那个问题：AI 能写代码，但生成出来的界面总差点意思。
现在有了 Awesome DESIGN.md，不懂设计的独立开发者也能用 AI 生成专业级别的界面。
更大的意义在于 DESIGN.md 这个概念本身。
随着 AI 编程工具越来越成熟，设计规范从 Figma 视觉稿变成机器可读的文本文件，这个方向基本已经确定了。
Awesome DESIGN.md 只是开了个头，后面会有越来越多的设计规范以这种方式沉淀开放。
对于现在用 AI 做产品的人来说，这个合集值得收藏持续关注和学习。
GitHub 项目地址：https://github.com/VoltAgent/awesome-design-md
今天的分享到此结束，感谢大家抽空阅读，我们下期再见，Respect！
没有评论:
发表评论