✧ 站点

Design Systems Repo

设计系统相关案例、文章、工具、演讲的合集，资源非常全面！

Figma ∙ Design Systems

Figma 创建的网站，发布了很多设计系统相关的文章，包含设计、开发方法等等。

Jun ∙ DesignSystem.cc

产品设计师 Jun 设计开发的网站，收集了设计系统相关的教程、文章、书籍和案例。

✧ 演讲

Jina AnneClarity Conf

Jina Anne 发起的设计系统主题大会，有很多嘉宾分享来关于设计系统的方方面面。

UXPin ∙ UXPin Virtual Summit

UXPin 主办的设计系统主题峰会，有 IBM Carbon、Salesforce Lightning 等很多知名设计系统背后的故事。

✧ 工具

zeroheight

用于记录设计系统，包括创建在线 styleguide、管理组件代码、存放设计资源等等。

✧ 文章、书籍

​Brad Frost ∙ 《Atomic Design》

原子化设计，构建设计系统的核心指导理论，由 Brad Frost 提出。

​Alla Kholmatova ∙ 《Design Systems》

作者 ​Alla Kholmatova，向我们介绍了设计体系的基础构成和创建方法等等。

​C7210 ∙ 设计体系相关文章

UX 设计师 C7210 发布的系列文章，包含设计体系、Sketch Library 功能等方面的内容。

​Airbnb Design ∙ Building a Visual Language

来自 Airbnb Design 官方博客，介绍了设计系统的价值、创建思路等等方面的内容。

Alibaba Fusion Design ∙ 如何为 UX 团队挑选一个适合的设计系统

文中主要介绍了设计系统的发展历程（Design Guideline - DPL - Design System）、设计系统的类型及适用场景。

孙浩 ∙ Scope Lane

设计师孙浩的知乎专栏，翻译了国外一些设计系统相关的文章，介绍了创建设计系统的技巧、方法。

阅文 YUX ∙ 视觉工作流优化 —— 如何构建组件库

阅文 YUX 的文章，分享了构建产品组件库的思路和方法，很受用！

Rojcyk ∙ 我们如何使用 Figma 处理 Kiwi.com 设计体系

作者 Rojcyk 介绍了他在加入 Kiwi.com 的移动端设计团队之后，是怎么使用 Figma 来构建设计体系的。

✧ 在线设计系统、设计规范、组件库

Apple ∙ Human Interface Guidelines

Apple 官方的人机交互指南，除提供 Apple 平台相关 UI 资源外，还包含了一系列的设计原则、设计建议等等。

Google ∙ Material Design

Google 的 Material Design 设计系统，包含设计指南、设计与开发组件等等。

Microsoft ∙ Fluent Design System

Microsoft 的 Fluent 设计系统，包含用于在 Windows 10 上创建应用体验的设计准则与 UI 代码示例。

Microsoft ∙ Office UI Fabric

Office 的官方前端框架，提供了使用 React 构建的组件，以及用 Adobe XD 创建的控件、布局模板等等。

SAP ∙ Fiori Design Guidelines

SAP 公司提供的一套 Web 应用程序的用户界面设计指南，其中的 UI 元素使用指南真是相当详尽了。

Salesforce ∙ Lightning Design System

Salesforce 公司的 Lightning 设计系统，包含了用于创建符合 Salesforce Lightning 原则、设计语言和最佳实践的用户界面的资源。

IBM ∙ Carbon Design System

IBM 的开源设计系统，以 IBM Design Language 为基础，包括开源代码、设计工具和资源、人机界面指南等内容。

Atlassian ∙ Atlassian Design

Atlassian 依据 Atlassian Design Guidelines 构建的一套 UI 组件库。

Sipgate ∙ Unser Design

Sipgate 模式库建立于 2015 年，但一年之后，团队发现由于产品团队之间缺乏沟通而导致加入了太多的组件。最近，他们正在开发一个新的模式库，以实现在多个产品网站上统一设计语言的目标。

TED ∙ TED Swatches

TED 的设计系统，由几个 UX 设计师和前端开发人员组成的小团队负责。基于对他们的 patterns 的理解的共识，他们将这些模式 patterns 以一种简单的方式整理了出来。

Eurostar ∙ GLU

由 Eurostar 的一个专门小组负责，系统中的组件是真的按「原子化设计（Atomic Design）」进行组织的，包括 Atoms 原子、Molecules 分子、Organisms 有机体、Templates 模板、Pages 页面。

Yahoo! ∙ PURE

雅虎公司出品的一组轻量级、响应式纯 CSS 模块，适用于任何 Web 项目。

Intuit ∙ QuickBooks Design System

Intuit 的设计系统，包含了各种组件和设计原则说明，但是其中部分资源只有 Intuit 内部员工才能访问、下载。

GitHub ∙ Primer

Github 的在线设计系统 Primer，包含各种设计与代码资源、工具以及设计指南。

蚂蚁金服 ∙ Ant Design

服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

阿里巴巴 ∙ ICE Design

飞冰是一套基于 React 的中后台应用解决方案，由淘宝前端团队发起，与淘宝 UED 及后端开发同学共同打造，旨在「提高中后台系统的开发效率」。

阿里巴巴 ∙ Fusion Design

Alibaba Fusion Design 是一套旨在全面提升设计、开发效率的工作方式。 通过协助企业构建设计系统，提供系统化工具协助设计师、前端使用设计系统，提供一站式设计项目协助平台，打通互联网产品从设计到开发的工作流。

滴滴出行 ∙ Cube-UI

滴滴出行从内部组件库精简提炼而来的移动端组件库，基于 Vue.js 实现。

微信 ∙ WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

Google ∙ Flutter

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。Flutter 兼容现有的代码，免费并且开源，在全球开发者中广泛被使用。

WeWork ∙ Plasma

WeWork 为他们的内部数字产品创建的设计系统，用以满足他们的业务需求。其创建过程对我们相当有参考意义。

饿了么 ∙ Element

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

Adobe ∙ Spectrum

Adobe 的设计系统 Spectrum。

Teambition ∙ Clarity Design

Teambition 的设计系统 Clarity Design。

TalkingData ∙ iView

一套基于 Vue.js 的高质量 UI 组件库。

UX Power Tools

UX Power Tools 同时包含 Web 与移动端的设计系统，Sketch 组件比较全面、完整，且包含共享样式、支持内容自适应等，还有 Style Guide。但是，收费，可在 Gumroad 上购买。

Buninux ∙ Frames | Buninux ∙ Plaster

Frames 和 Plaster 分别是针对 Web 和移动端的设计系统，这 2 个设计系统最大的特点是，提供了大量的模板页面，且支持内容自适应。但也是收费的。

Rojcyk ∙ iOS Blueprint

iOS Blueprint 是一个专注于 iOS 的设计系统，业界知名度相当高。除了基本的 Library 之外，也提供了一些通用模板。这个也是收费的，可在 Gumroad 上购买。

janlosert ∙ Nested Symbols & Auto-Updating Styleguides

累了，不写了。

GE Digital ∙ Predix

主要针对 Web 应用的设计系统，组件库也不是很全，Sketch 中也没有共享样式等，相对而言，比较粗糙。

有赞 ∙ Zan Design

Zent 是有赞的 PC 端组件库，基于 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件，这些组件都已经在有赞的各类 PC 业务中使用。
Vant 是有赞的移动端 Vue 组件库，Vant Weapp 是 Vant 的小程序版本，这两者基于相同的视觉规范，提供一致的 API 接口。

Semantic ∙ Semantic UI

一个具有响应性的 UI 组件框架，支持网站在多个设备上的扩展。

Liferay ∙ Lexicon | Liferay ∙ Clay

Lexicon 是 Liferay 提出的一种设计语言 ，包含用户界面组件、模式和用例等指南。Clay 是以 Lexicon 为基础实践的一套 Web 应用组件库 Clay，包含大量代码示例。

GOV.UK ∙ GOV.UK Design System

英国内阁办公室的 GDS 做的一套设计系统，UI 样式看起来有点乱，但其中一些组件的使用方法也可以看一看。

Material-UI

基于 Material Design 的 React UI 框架。

上海畅控 ∙ Admui

企业级通用管理系统的快速开发框架，注册登录后可进行在线体验。

MDUI

一套用于开发 Material Design 网页的前端框架。

云适配 ∙ Amaze UI

一个轻量级、Mobile first 的前端框架， 基于开源社区流行前端框架编写。

新浪 UED 的 HIG

新浪 UED 为新浪产品编写的人机交互指南，包括 PC、iOS、Android、HTML5 等各个平台的设计原则，还有新浪的 VI 体系介绍，相当全面了，推荐阅读、学习（但有些内容没有更新，可能现在已经不适用了）。

饿了么 ∙ Mint UI

基于 Vue.js 的移动端组件库， CSS 和 JS 组件等。

Layui ∙ layuiAdmin

由 layui 自建的一套前端架构实现而成的通用型后台管理模板系统。

[Akveo ∙ Eva Design System](https://eva.design/](https://eva.design/)

Akveo 设计的移动端和 PC 端的组件库，提供了 Sketch 和 Figma 的组件库资源，Figma 组件库和 Sketch 暗黑模式组件库需要购买使用。

[Julien Rioux ∙ Flawwwless ui](https://eva.design/](https://eva.design/)

全栈开发工程师 Julien Rioux 设计开发的 UI 组件库。

Progress ∙ Kendo UI

JavaScript UI 组件的最终集合，包含用于 jQuery、Angular、React 和 Vue 的库，用于快速构建响应式 Web 应用。

附：​以下是网页设计资源相关网站推荐

​Website Style Guide Resources

​网站设计指南合集，包括组件库示例，关于设计指南的文章、书籍以及工具等等。

​Envato ∙ HTML Admin Website Templates

​Envato 的 envatomarket 上的网站设计模板合集。

以上内容整理自网络，仅作为个人学习笔记使用。感谢这些设计团队和所有分享想法与经验的人～