brands-design-md 是我自己日常收录的一个开源品牌设计参考库，当前收录 68 个品牌目录，里面有 Airbnb、Apple、Figma、Stripe、Vercel、Notion、Claude、Duolingo 等品牌的设计规范文档。并且还会持续更新。
GitHub: github.com/ricocc/brands-design-md
一般看品牌或者网站，都是停留在收藏网址或者截图上，看得到风格，拿不到规则；知道页面好看，写不出它为什么好看。 今年是有了 DESIGN.md，从规则上约束设计风格，但是浏览就没那么方便。
brands-design-md 想补上的就是中间这段，补充上对应设计风格的 HTML 预览和网站截图，梳理好颜色、字体、间距、圆角、组件和页面节奏，整理成一套方便预览、也方便给 AI 阅读的设计规范。
把一套品牌视觉语言拆成 7 个文件，人看视觉，AI 读规则，开发时也能拿对应文件做实现参考。
每个品牌目录按一套固定结构组织。以 brands/duolingo/ 为例，常规品牌包包含以下 7 个文件。
├── cover_duolingo_com.webp
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。
如果想把资料保存到本地，可以直接下载或者克隆到本地即可。
想快速找风格，就看 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。
这样它读到的是品牌的视觉观察、设计令牌、组件描述和使用边界，写页面时也有具体的颜色变量、字体层级和间距关系可以参考。
参考 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 文件提供的是可复用的结构，页面最终长什么样，仍然要看你的产品任务。
仓库里的设计文档、预览页面、截图和相关文件由我自行生成、整理和校正，参考了品牌公开网站以及公开设计资源(getdesign.md、style.refero.design 等)。
它们适合学习、研究和界面创作，不能替代品牌方最新的官方设计规范，也不代表品牌授权或合作关系。
有些品牌目录是基于公开视觉语言整理出的参考版本。品牌官网会持续变化，这里的资料应当看作某个时间点的设计观察，使用时还要自己核对官网当前状态。
它提供的是设计上下文，不提供可以直接安装的 React 组件包，也不提供品牌方的商用授权素材。如果你正在找设计方向、AI 开发上下文和一组可以继续拆解的品牌样本，可以从这个仓库开始。
这个设计规范库，我定位成一个品牌设计参考的中间层，给人看，也给 AI 用。它不决定风格，但能让品牌参考从截图和名字，继续走到规则和实现更省心一点。
