大家好，我是何三，独立开发者
做前端开发的同学应该都有过这种经历：老板甩过来一个设计稿，说"照着这个做"。你打开 Figma，看着那些精妙的间距、恰到好处的圆角、舒服到骨子里的配色，然后开始一个个量、一个个抄。
累不累？累。但更累的是——你根本不知道为什么它好看。
今天介绍一个 GitHub 项目，叫 awesome-design-md，已经拿到了 12k Star，它做的事情很直接：把 55 个顶级网站的设计规范，全部整理成了 Markdown 文件。
不是截图，不是 Figma 链接，是实打实的代码级规范——颜色 HEX 值、字号、字重、阴影参数、间距系统，全给你列好了。
直接复制到项目里，AI Agent 就能读懂。
DESIGN.md 是个什么概念？
这个项目背后的核心概念叫 DESIGN.md，最早由 Google Stitch 提出。
简单说，它就是一份纯文本的设计规范文档，AI Agent 能直接读取并据此生成 UI。
你可能觉得这也没什么稀奇的，设计规范文档谁不会写？
关键区别在于：DESIGN.md 是写给 AI 看的。
传统的 Figma 设计稿、设计 Token JSON，AI 读起来很费劲。但 Markdown？那可是大语言模型最熟悉的格式。丢一个 DESIGN.md 进项目根目录，任何 AI 编码工具（Cursor、Windsurf、Google Stitch）都能立刻理解你的 UI 应该长什么样。
不需要 Figma 导出，不需要 JSON Schema，不需要任何特殊工具。一个 Markdown 文件就搞定了。
这 55 个设计规范有多细？
我随便翻了几个，精度吓人。
以 Linear 为例，它的 DESIGN.md 里有这样的细节：
- 主背景色不是纯黑，是
#08090a，带一点极其微弱的蓝冷调 - 文字不是纯白，是
#f7f8f8，防止在深色背景上刺眼 - 标题用的 Inter Variable 字体，但开启了
cv01和ss03两个 OpenType 特性，让字形变得更几何、更干净 - 字号 72px 时，letter-spacing 是
-1.584px——负的，把字往里压，制造紧凑感 - 品牌色只有一个：
#5e6ad2（靛蓝紫），整个网站除了灰度色系就只有这一个彩色
再看看 Vercel：
- 用的是自家 Geist 字体，48px 标题的 letter-spacing 压到
-2.4px到-2.88px - 不用 CSS border，全靠
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)模拟边框线。这套"影子当边框"的技巧贯穿了整个设计系统 - 阴影不是单层的，是多层叠加——一层当边框、一层做抬升、一层做环境光、一层做内发光，四个值堆在一起
Notion 的有趣之处在于它用的是暖灰色系：
- 灰色不是冷灰，是带黄棕底色的暖灰：
#f6f5f4（暖白）、#31302e（暖深） - 文字用
rgba(0,0,0,0.95)，95% 不透明度的黑——比纯黑柔和，但差距小到你以为就是黑色 - 阴影每层的不透明度不超过 0.05，五层叠加起来才有自然感
这些规范是从真实网站的 CSS 里提取出来的，不是人工拍脑袋写的。
每个 DESIGN.md 里都有什么？
每个文件统一遵循 9 大模块的结构：
1. Visual Theme & Atmosphere — 整体风格描述，用自然语言讲清楚这个网站的"气质"。比如 Linear 被描述为"黑暗中的星光"，Vercel 是"被压缩的基础设施"。
2. Color Palette & Roles — 完整色板，每种颜色都有语义角色标注（主文字、次文字、品牌色、悬停态……）和精确的 HEX/RGBA 值。
3. Typography Rules — 字体族、字重、字号、行高、字间距的完整层级表。从 72px 的 Display 到 10px 的 Micro，每一个级别都有精确参数。
4. Component Stylings — 按钮、卡片、输入框、徽章、导航，每个组件的每种状态（默认、悬停、聚焦、禁用）都有详细样式。
5. Layout Principles — 间距系统、栅格参数、留白哲学。比如 Linear 用 8px 基准间距，但偶尔会出现 7px 和 11px 的微调值——那是为了视觉对齐做的光学补偿。
6. Depth & Elevation — 阴影层级系统。从 Level 0（无阴影）到 Level 5（对话框），每层的具体参数都有。
7. Do's and Don'ts — 设计禁区。比如 Linear 明确写了"不要用 700 粗体，最大只到 590"、"不要给深色背景用实心彩色按钮，透明度才是王道"。
8. Responsive Behavior — 响应式断点、触控区域大小、折叠策略。
9. Agent Prompt Guide — 直接给 AI 用的提示词模板。比如"帮我创建一个 Linear 风格的 Hero 区域，背景色 #08090a，标题 48px Inter Variable weight 510……"
最后一个模块是点睛之笔。它意味着你甚至不需要自己去解读这些规范，直接把提示词喂给 AI 就行。
实际怎么用？
用法极其简单，两步：
第一步，从项目仓库里找到你喜欢的网站，复制它的 DESIGN.md 到你的项目根目录。
仓库地址：https://github.com/VoltAgent/awesome-design-md
# 比如你想用 Linear 的设计规范
cp design-md/linear.app/DESIGN.md ./your-project/
第二步，在 AI 编码工具里告诉它："按照 DESIGN.md 的规范，帮我做一个 XX 页面。"
然后看着 AI 帮你把 Linear 的设计语言搬到你的项目里。
每个网站还附带了 preview.html 和 preview-dark.html，是可视化的设计元素目录——色块、字号层级、按钮样式、卡片效果，一目了然。
这项目为什么值得关注？
我聊几个我观察到的点。
第一，它解决了一个真实痛点。 AI 编码工具（Cursor、Windsurf 等）越来越强，但它们生成的前端页面经常"能用但不好看"。原因很简单——AI 不知道你要什么风格。DESIGN.md 就是给 AI 一个明确的设计"说明书"。
第二，它降低了设计门槛。 不是每个人都有设计师搭档。有了这些规范，独立开发者可以直接"抄"顶级公司的设计语言。不是简单复制粘贴，而是拿到一套经过验证的设计系统——从颜色到间距到阴影，全套的。
第三，它在推动一种新的协作方式。 以前设计师出 Figma，前端照着做。以后可能是设计师出 DESIGN.md，AI 直接生成代码。中间那个"人工翻译"的环节，可能要被干掉了。
第四，MIT 开源协议，随便用。 不过项目也说了，这些是从公开网站的 CSS 里提取的设计参数，不代表他们拥有任何网站的视觉版权。
还有个细节
项目里有些 DESIGN.md 的描述写得像散文。
比如 Linear 的主题描述里写了这么一句：
"Linear's website is a masterclass in dark-mode-first product design — a near-black canvas where content emerges from darkness like starlight."
Vercel 的：
"The custom Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing, creating headlines that feel compressed, urgent, and engineered — like code that's been minified for production."
Notion 的：
"Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way."
这些描述不是给人类设计师看的，是给 AI 看的。AI 读懂这些自然语言描述后，生成的 UI 才会有"感觉"，而不只是像素级还原。
这个思路挺有意思的——用自然语言的"设计意图"去引导 AI 的"设计决策"。
最后
如果你对前端设计感兴趣，或者正在用 AI 编码工具做项目，强烈建议去翻翻这个仓库。就算不直接用，光看这些顶级网站的设计规范拆解，也能学到不少东西。
地址放这了：https://github.com/VoltAgent/awesome-design-md
12k Star，MIT 协议，55 个网站的设计规范，全免费。
本文使用 MGO 编辑并发布
关注"何三笔记"，回复"mgo" 免费下载使用
