Skip to main content

awesome-design-md,把大厂设计系统喂给 AI 编程助手的 DESIGN.md 合集

awesome-design-md 收录了 73+ 个知名品牌网站的 DESIGN.md 设计系统文档。

· 2 min read

DESIGN.md 是什么

DESIGN.md 是一份纯文本的 Markdown 设计系统文档。

里面写清楚了色板、字体层级、组件状态、间距规则、布局原则这些设计规范。AI 编程 Agent。

怎么用

用法很直接,三步就够:

  1. 打开仓库,找到你想要的品牌目录
  2. 把对应的 DESIGN.md 复制到项目根目录
  3. 在给 AI 编程 Agent 的指令里,明确告诉它参考这份文件来生成界面

举个真实一点的例子:你想做 Linear 风格的界面,就把仓库里 Linear 那份 DESIGN.md 丢进项目根目录,然后跟 Claude Code 说:

参考项目根目录的 DESIGN.md 来写这个页面,颜色、字号、间距都按里面的规范来,不要自己发挥。

注意,只复制文件还不够——你得在对话里点名让 Agent 读它。不说的话,它大概率还是按自己的默认审美来。

至此,日常用法已经够用了。

目前觉得好用的DESIGN.md

总结

如果你觉得这些大厂的网站设计的非常不错,你可以让AI按照DESIGN.md来,或者优化你已经有的DESIGN.md