brands-design-md 是我自己日常收录的一个开源品牌设计参考库，当前收录 68 个品牌目录，里面有 Airbnb、Apple、Figma、Stripe、Vercel、Notion、Claude、Duolingo 等知名品牌的设计规范文档。并且还会持续更新。
仓库：github.com/ricocc/brands-design-md
本仓库适合设计师、前端开发者和使用 AI 进行界面创作的人：在开始一个页面、组件或产品界面前，先快速了解某个品牌的色彩、字体、排版、间距、圆角、组件和整体视觉气质。
一般看品牌或者网站，都是停留在收藏网址或者截图上，看得到风格，拿不到规则；知道页面好看，写不出它为什么好看。今年有了 DESIGN.md，准确约束风格和设计原则，但是浏览起来就没那么直观。
brands-design-md 想补上的就是中间这段，我补充了 HTML 预览和截图，梳理好颜色、字体、间距、圆角、组件和页面节奏，整理成一套方便预览、也方便给 AI 阅读的设计规范。
把一套品牌视觉语言拆成 7 个文件，人看视觉，AI 读规则，开发时也能拿对应文件做实现参考。
每个品牌目录按一套固定结构组织。以 brands/duolingo/ 为例，常规品牌包包含以下 7 个文件。
brands/
└── duolingo/
├── preview.html
├── DESIGN.md
├── cover_duolingo_com.webp
├── favicon.ico
├── tokens.json
├── variables.css
└── theme.css
- preview.html 是按照每个品牌自己的视觉风格制作的预览页。它会使用这个品牌的颜色、字体、间距、圆角、表面和组件处理，把 DESIGN.md 里的规则组织成一张可以直接在浏览器里打开的参考页面。
- DESIGN.md 是设计上下文文档。里面有品牌视觉观察、基础令牌、排版层级、布局建议、组件描述，以及使用边界。人可以读，AI 也可以从中读懂一个品牌应该延续什么、哪些地方需要收住。
- cover_duolingo_com.webp 这类 cover 文件则是品牌官方网站的截图。它和 preview.html 的用途不同，cover 用来快速识别原网站的视觉形象，preview 用来浏览整理后的设计规则。
- favicon 是对应网站的图标文件，方便在品牌目录里快速辨认来源。
- tokens.json 保存结构化的颜色、字体、间距、圆角、阴影和布局信息。variables.css 把这些信息整理成 CSS 自定义属性，theme.css 则可以作为 Tailwind CSS v4 主题变量的参考。
仓库： github.com/ricocc/brands-design-md
如果只想浏览，直接打开 GitHub 仓库，进入 brands/，挑一个品牌目录，再打开其中的 preview.html。
如果想把资料保存到本地，可以直接下载或者克隆到本地即可。
git clone https://github.com/ricocc/brands-design-md.git cd brands-design-md
接下来按自己的目的选择文件。
想快速找风格，就看 cover 和 preview.html；想让 AI 读懂品牌，就给它 DESIGN.md；想进入实际开发流程，就继续看 tokens.json、variables.css 和 theme.css。
如果你只是想找一个视觉方向，打开品牌目录里的 cover 和 preview.html 就够了。
cover 让你先看到原网站的样子。你可以快速判断这个品牌偏向明亮还是暗黑，页面更接近产品界面还是编辑风格。然后打开按照该品牌制作的 preview.html，继续看它如何处理颜色、字体、层级、组件和页面片段。
这个过程不需要先读完一份长文档。先看页面，确认方向，再回头查规则，理解成本会低很多。
如果你要把资料交给 Cursor、Claude 或 Codex，入口就换成 DESIGN.md。
你可以把某个品牌的文档放进项目上下文，再把对应的 tokens.json、variables.css 和 theme.css 一起提供给 Agent。这样它读到的是品牌的视觉观察、设计令牌、组件描述和使用边界，写页面时也有具体的颜色变量、字体层级和间距关系可以参考。
例如，给 Agent 的任务可以这样写。
参考 brands/duolingo/DESIGN.md 的视觉观察和组件规则。 使用 brands/duolingo 样式文件应用主题 先搭建页面结构，再按这套规则实现，不要额外引入不在文档里的装饰风格。
这和只说一句参考 duolingo 有区别。品牌名只能提供一个方向，DESIGN.md、JSON 和 CSS 才能把方向变成 Agent 可以继续处理的上下文。
做这个仓库时，我重点想的是同一套参考怎么在不同环节之间顺畅流转。
我们看 cover 和 preview.html，先有个视觉印象；读 DESIGN.md，把这种感觉拆成具体的设计判断；交给 AI 时，文档和令牌就是它能直接用的约束；到了前端，JSON、CSS 和 Tailwind 主题变量又是现成的实现起点。
同一个品牌目录里，视觉、规则和实现文件放在一起，参考就有了一条连续的路径——不用在截图网站、设计文档和代码片段之间来回拼，也不用每次都重新向 AI 解释这个品牌的颜色和气质。
不过这些文件不是让你原样照搬。品牌原站里一定有和具体业务绑定的页面、组件和内容，更适合当成参考，再按自己的产品做取舍。tokens.json 和 CSS 文件提供的是可复用的结构，页面最终长什么样，还是得看你的产品任务。
仓库里的设计文档、预览页面、截图和相关文件由我自行生成、整理和校正，参考了品牌公开网站以及公开设计资源(getdesignmd、refero design 等)。它们适合学习、研究和界面创作，不能替代品牌方最新的官方设计规范，也不代表品牌授权或合作关系。
有些品牌目录是基于公开视觉语言整理出的参考版本。品牌官网会持续变化，这里的资料应当看作某个时间点的设计观察，使用时还要自己核对官网当前状态。
它提供的是设计上下文，不提供可以直接安装的 React 组件包，也不提供品牌方的商用授权素材。如果你正在找设计方向、AI 开发上下文和一组可以继续拆解的品牌样本，可以从这个仓库开始。
这个设计规范库，我定位成一个品牌设计参考的中间层，给人看，也给 AI 用。它不决定风格，但能让品牌参考从截图和名字，继续走到规则和实现更省心一点。
我是 Rico，感谢阅读！
