74份大厂设计文档,让AI别再紫渐变 ! awesome-design-md(大厂设计语言库)

同一个需求，同一句提示词，同一个模型，跑两遍。

第一遍我只说"做一个落地页"。出来的是这套：紫蓝青三段渐变的按钮、渐变高亮的标题、胶囊徽章、圆角卡片。你大概在各种 AI 生成的产品页上见过它。

第二遍我在项目根目录放了一份 DESIGN.md，提示词里只多了一句"按这份文档的设计语言来"。出来的是另一个东西：近黑底色、一个强调色用到底、大标题字距收到 -3px、零渐变、零投影。

两份 HTML 我都留着，数了数：

这不是模型能力的问题。 AI 做界面丑，缺的不是能力，是能照着抄的样例——你不给它依据，它只能按训练数据里见得最多的那一套来：渐变、紫色、圆角卡片。

而有个仓库，把 74 个大厂网站的设计语言，拆成了 74 份可以直接拷进项目根目录的纯文本。

github.com/VoltAgent/awesome-design-md

一、DESIGN.md 是什么：一份给 AI 读的、纯文本的设计系统

这个概念不是这个仓库发明的，源头是 Google Stitch 推出的 DESIGN.md 玩法。它只有一句话：把设计规范写成一份 Markdown，放在项目根目录，AI 编程工具自己会读。

没有 Figma 导出，没有 JSON schema，不用装 CLI，不用配 MCP。就是这么个文件。

它和大家都熟悉的 AGENTS.md 是一对：

这个分工挺关键。之前让 AI 写页面，你在提示词里写"做 Linear 那种极简风"，AI 只能凭印象猜——猜出来十有八九还是它见过最多的那套。DESIGN.md 把这件事从「描述风格」变成了「递交依据」。

二、74 份文档，按 10 个行业分好组

打开仓库的 design-md/ 目录，74 个文件夹，一个网站一个。README 里按行业归成了 10 类：

README 的 Collection 段落。每个条目后面还带一句风格速写——"Vercel：黑白精准，Geist 字体"、"Starbucks：四层大地绿体系 + 自有 SoDoSans 字体"。你可以先靠这一行字筛掉不想要的，再去读正经文档。

最后那个「复古区」是作者的一个周末系列，专门收录 90 年代到千禧年的网页设计语言。想做怀旧风页面的时候，直接从这儿拿。

这里有个小发现：README 的徽章写的是 73 份，但目录里实际已经有 74 个文件夹——多出来的那个是 Slack，收藏清单里还没登记。仓库在长，文档没跟上，这种事在这种高速增长的仓库里很常见。

三、一份 DESIGN.md 里到底写了什么

我挑了 Linear 那份通读了一遍：548 行，23.8 KB。

打开的方式有点出人意料。GitHub 会把文件头部的 YAML 自动渲染成表格，所以第一屏看到的就是这套东西：

design-md/linear.app/DESIGN.md。左边能看到目录树——收藏里的文件夹用的是域名不是品牌名（linear.app、mistral.ai、x.ai），所以别照着品牌名去拼路径。色板里每一个色值都带语义名：primary #5e6ad2 是品牌薰衣草蓝，canvas #010102 是最深的那层底，hairline #23252a 是描边色。

真正让我意外的是字体那段，细到这个程度：

{typography.display-xl} = 80px / 字重 600 / 行高 1.05 / 字距 -3.0px / 用途是大标题。往下每一档都这么写——display-lg 56px、display-md 40px、headline 28px……一直到 body-sm 14px。同一个页面上哪个位置该用哪一档，写死了九行。

正文部分固定九个章节：

九段依次是视觉氛围与调性、色板与角色、字体规则、组件样式、布局原则、层级与阴影、Do's and Don'ts、响应式行为、给 Agent 的提示词指南。下面那张表写的是每个文件夹里的三个文件——DESIGN.md、preview.html、preview-dark.html。

九段里我认为最有用的是 Do's and Don'ts。它直接写死"这种风格下什么不能做"，等于把设计评审的意见提前写好了。举几个 Linear 那份里的原话：

• 主色 #5e6ad2只能出现在品牌标记、主按钮、聚焦环、选中态左侧边框上——不做装饰性使用
• 按钮圆角固定 8px，不要改成胶囊
• 不要
  加大气渐变、聚光灯卡片、发光投影
• 阴影只有一套做法：surface 色阶 + 1px 描边 + 顶部内高光，零 drop shadow

"不要做"比"要做什么"值钱得多。AI 自由发挥时犯的毛病，基本都集中在这几类。

四、实测：同一句提示词，跑两遍

光看文档不算数，我拿 Claude Code 真跑了一遍。

两个空目录，同一句需求（"给一个叫 Notelight 的 AI 笔记应用做单文件营销落地页，要导航、Hero、功能三栏、一条评价、底部 CTA"），同一个模型。唯一的差别：A 组目录里放了 Linear 那份 DESIGN.md，并在提示词里加了一句"先读根目录的 DESIGN.md，严格按它来"。

先看不给依据的那一版：

典型的 AI 味样本。紫蓝青三段渐变的主按钮、渐变高亮的标题文字、胶囊状徽章、圆角大卡片。你不能说它难看，但这套东西你在别的地方已经见过一百次了。

再看给了依据的那一版：

同一句需求，同一模型。近黑底 #010102、薰衣草蓝只出现在主按钮和选中态、大标题字距收紧、产品界面用深色面板框住。模型在最后的自述里逐条报告了它执行了什么："薰衣草蓝不作背景填充""CTA 用 8px 不做 pill""无大气渐变、无聚光灯卡片"——它在对着文档自查。

两版文件放一起看，差距全在数字里：

这不是玄学，是 AI 终于有了一个可查证的依据。 值得说一句：给了依据的那版体积反而大得多——因为它真的在按九段规范逐项实现，而不是随手写一套样式就交差。

五、三步跑起来（不用装任何东西）

整个过程不装依赖、不配 MCP、不开浏览器插件。就三步。

第一步，把仓库拿下来。 两种方式都行：

git clone https://github.com/VoltAgent/awesome-design-md.git

或者嫌大，直接在网页上打开想要的那份 DESIGN.md，点右上角复制。

第二步，把选中的那份拷到项目根目录。 想要 Linear 风就拷 linear.app/DESIGN.md，想要 Vercel 就拷 vercel/DESIGN.md。只拷一份——两份放一起会互相打架。

第三步，跟你的 AI 工具说一句。 Codex、Claude Code、Cursor、Gemini CLI 都认：

读一下项目根目录的 DESIGN.md，严格按照里面的设计语言，实现这个页面

额外加分项： 收藏里的每份文档都对应一个在线预览（色板、字体层级、按钮、卡片都能直接看），入口在官网 getdesign.md。官方还给这个格式配了一个 lint 命令，改完自己的 DESIGN.md 之后可以跑一遍：

npx @google/design.md lint DESIGN.md

六、可直接复制的地址表

先说清楚：公众号正文里的网址点不动（微信会把正文超链接整段剥离）。下面的地址请手动输入或复制，也可以直接点本文左下角的「阅读原文」，那里是仓库首页。

收藏里最常用的 12 份，路径直接给你（克隆后在 design-md/ 目录下）：

想要收藏里没有的网站，可以去 getdesign.md/request 提，还支持私有请求——做出来只发给你一个人。

七、边界和坑：它做得到什么，做不到什么

老规矩，三件做得到 + 一件做不到。

它做得到的三件事：

它做不到的一件事（附证据）：

它给不了你像素级一致，也给不了授权。 三处硬伤，都是我在读文档时看到的实据：

• 色值是从公开 CSS 里提取的
  ，不是品牌内部的设计系统。仓库自己在 License 段写得很清楚："extracted design tokens represent publicly visible CSS values"——公开可见的 CSS 值，和人家内部设计系统有差距是必然的。
• 字体是最大的一处打折。
   Stripe 那份用的 sohne-var、Linear 用的 Linear Display、星巴克用的 SoDoSans，全是商业字体，你本机没有。文档里都写了 fallback 方案（大多落到 SF Pro Display、system-ui），但fallback 一换，字形的味道就丢了。想真还原，得自己解决字体授权。
• 文档本身也可能滞后。
   每个站点文件夹里的 README.md 现在只写着一句话——"详情已迁移到 getdesign.md"，早前版本是直接放预览页的。仓库在快速迭代，读到的任何一处细节都可能已经过时。

另外三个现实提醒：

• 别拿它当"抄一个一模一样的站"的工具。
   它给你的是设计语言（色板、字体层级、间距体系），不是人家的文案和图片。设计风格本身不受版权保护，但你顺手把人家页面上的文案、图标、产品截图一起搬走，那就是另一回事了。仓库里 Stripe 那份甚至把名字写成了 "Stripi-Inspired-design-analysis"——这种处理本身就说明了边界在哪。
• 一份不够，十份更糟。
   同一个项目里塞三份不同品牌的 DESIGN.md，出来的页面会比没有依据还乱。要混，也应该是你读懂之后自己合并成一份。
• 它是起点，不是终点。
   想做出真正属于自己的界面，最终还是要在这套规范上改出自己的色板和字体。这也是仓库的用法——借一个专业的下限，先让东西体面地跑起来。

八、今天你可以做的一件事

打开你手上那个"界面最丑"的项目，去收藏里挑一份气质最接近的 DESIGN.md 拷到根目录，然后让 AI 重做其中一个页面。

别重做整个站，就挑一个页面。 对比一下改之前的截图和改之后的截图——如果差距一眼能看出来，你就知道以后该怎么给 AI 提需求了：不是描述风格，是递交依据。

你被 AI 生成的哪一套设计烦过？紫渐变、圆角卡片、还是那个蓝紫高亮标题？ 评论区说说，我挑几个典型的下期展开。

仓库地址在公众号后台回复关键词 「设计」 获取相关资源