? 站點
Design Systems Repo
設計系統(tǒng)相關案例、文章、工具巍糯、演講的合集啸驯，資源非常全面！
Figma ? Design Systems
Figma 創(chuàng)建的網(wǎng)站祟峦，發(fā)布了很多設計系統(tǒng)相關的文章罚斗，包含設計、開發(fā)方法等等宅楞。
Jun ? DesignSystem.cc
產(chǎn)品設計師 Jun 設計開發(fā)的網(wǎng)站针姿，收集了設計系統(tǒng)相關的教程、文章厌衙、書籍和案例距淫。
? 演講
Jina AnneClarity Conf
Jina Anne 發(fā)起的設計系統(tǒng)主題大會，有很多嘉賓分享來關于設計系統(tǒng)的方方面面婶希。
UXPin ? UXPin Virtual Summit
UXPin 主辦的設計系統(tǒng)主題峰會榕暇，有 IBM Carbon、Salesforce Lightning 等很多知名設計系統(tǒng)背后的故事喻杈。
? 工具
zeroheight
用于記錄設計系統(tǒng)彤枢，包括創(chuàng)建在線 styleguide、管理組件代碼筒饰、存放設計資源等等缴啡。
? 文章、書籍
?Brad Frost ? 《Atomic Design》
原子化設計瓷们，構(gòu)建設計系統(tǒng)的核心指導理論业栅，由 Brad Frost 提出。
?Alla Kholmatova ? 《Design Systems》
作者 ?Alla Kholmatova换棚，向我們介紹了設計體系的基礎構(gòu)成和創(chuàng)建方法等等式镐。
?C7210 ? 設計體系相關文章
UX 設計師 C7210 發(fā)布的系列文章反镇，包含設計體系固蚤、Sketch Library 功能等方面的內(nèi)容。
?Airbnb Design ? Building a Visual Language
來自 Airbnb Design 官方博客歹茶，介紹了設計系統(tǒng)的價值夕玩、創(chuàng)建思路等等方面的內(nèi)容。
Alibaba Fusion Design ? 如何為 UX 團隊挑選一個適合的設計系統(tǒng)
文中主要介紹了設計系統(tǒng)的發(fā)展歷程（Design Guideline - DPL - Design System）惊豺、設計系統(tǒng)的類型及適用場景燎孟。
孫浩 ? Scope Lane
設計師孫浩的知乎專欄，翻譯了國外一些設計系統(tǒng)相關的文章尸昧，介紹了創(chuàng)建設計系統(tǒng)的技巧揩页、方法。
閱文 YUX ? 視覺工作流優(yōu)化 —— 如何構(gòu)建組件庫
閱文 YUX 的文章烹俗，分享了構(gòu)建產(chǎn)品組件庫的思路和方法爆侣，很受用萍程！
Rojcyk ? 我們?nèi)绾问褂?Figma 處理 Kiwi.com 設計體系
作者 Rojcyk 介紹了他在加入 Kiwi.com 的移動端設計團隊之后，是怎么使用 Figma 來構(gòu)建設計體系的兔仰。
? 在線設計系統(tǒng)茫负、設計規(guī)范、組件庫
Apple ? Human Interface Guidelines
Apple 官方的人機交互指南乎赴，除提供 Apple 平臺相關 UI 資源外忍法，還包含了一系列的設計原則、設計建議等等榕吼。
Google ? Material Design
Google 的 Material Design 設計系統(tǒng)饿序，包含設計指南、設計與開發(fā)組件等等羹蚣。
Microsoft ? Fluent Design System
Microsoft 的 Fluent 設計系統(tǒng)嗤堰，包含用于在 Windows 10 上創(chuàng)建應用體驗的設計準則與 UI 代碼示例。
Microsoft ? Office UI Fabric
Office 的官方前端框架度宦，提供了使用 React 構(gòu)建的組件踢匣，以及用 Adobe XD 創(chuàng)建的控件、布局模板等等戈抄。
SAP ? Fiori Design Guidelines
SAP 公司提供的一套 Web 應用程序的用戶界面設計指南离唬，其中的 UI 元素使用指南真是相當詳盡了。
Salesforce ? Lightning Design System
Salesforce 公司的 Lightning 設計系統(tǒng)划鸽，包含了用于創(chuàng)建符合 Salesforce Lightning 原則输莺、設計語言和最佳實踐的用戶界面的資源。
IBM ? Carbon Design System
IBM 的開源設計系統(tǒng)裸诽，以 IBM Design Language 為基礎嫂用，包括開源代碼、設計工具和資源丈冬、人機界面指南等內(nèi)容嘱函。
Atlassian ? Atlassian Design
Atlassian 依據(jù) Atlassian Design Guidelines 構(gòu)建的一套 UI 組件庫。
Sipgate ? Unser Design
Sipgate 模式庫建立于 2015 年埂蕊，但一年之后往弓，團隊發(fā)現(xiàn)由于產(chǎn)品團隊之間缺乏溝通而導致加入了太多的組件。最近蓄氧，他們正在開發(fā)一個新的模式庫函似，以實現(xiàn)在多個產(chǎn)品網(wǎng)站上統(tǒng)一設計語言的目標。
TED ? TED Swatches
TED 的設計系統(tǒng)喉童，由幾個 UX 設計師和前端開發(fā)人員組成的小團隊負責撇寞。基于對他們的 patterns 的理解的共識，他們將這些模式 patterns 以一種簡單的方式整理了出來蔑担。
Eurostar ? GLU
由 Eurostar 的一個專門小組負責露氮，系統(tǒng)中的組件是真的按「原子化設計（Atomic Design）」進行組織的，包括 Atoms 原子钟沛、Molecules 分子畔规、Organisms 有機體、Templates 模板恨统、Pages 頁面叁扫。
Yahoo! ? PURE
雅虎公司出品的一組輕量級、響應式純 CSS 模塊畜埋，適用于任何 Web 項目莫绣。
Intuit ? QuickBooks Design System
Intuit 的設計系統(tǒng)，包含了各種組件和設計原則說明悠鞍，但是其中部分資源只有 Intuit 內(nèi)部員工才能訪問对室、下載。
GitHub ? Primer
Github 的在線設計系統(tǒng) Primer咖祭，包含各種設計與代碼資源掩宜、工具以及設計指南。
螞蟻金服 ? Ant Design
服務于企業(yè)級產(chǎn)品的設計體系么翰，基于確定和自然的設計價值觀上的模塊化解決方案牺汤，讓設計者和開發(fā)者專注于更好的用戶體驗。
阿里巴巴 ? ICE Design
飛冰是一套基于 React 的中后臺應用解決方案浩嫌，由淘寶前端團隊發(fā)起檐迟，與淘寶 UED 及后端開發(fā)同學共同打造，旨在「提高中后臺系統(tǒng)的開發(fā)效率」码耐。
阿里巴巴 ? Fusion Design
Alibaba Fusion Design 是一套旨在全面提升設計追迟、開發(fā)效率的工作方式。 通過協(xié)助企業(yè)構(gòu)建設計系統(tǒng)骚腥，提供系統(tǒng)化工具協(xié)助設計師敦间、前端使用設計系統(tǒng)，提供一站式設計項目協(xié)助平臺桦沉，打通互聯(lián)網(wǎng)產(chǎn)品從設計到開發(fā)的工作流每瞒。
滴滴出行 ? Cube-UI
滴滴出行從內(nèi)部組件庫精簡提煉而來的移動端組件庫金闽，基于 Vue.js 實現(xiàn)纯露。
微信 ? WeUI
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設計代芜，令用戶的使用感知更加統(tǒng)一埠褪。
Google ? Flutter
Flutter 是 Google 用以幫助開發(fā)者在 iOS 和 Android 兩個平臺開發(fā)高質(zhì)量原生 UI 的移動 SDK。Flutter 兼容現(xiàn)有的代碼，免費并且開源钞速，在全球開發(fā)者中廣泛被使用贷掖。
WeWork ? Plasma
WeWork 為他們的內(nèi)部數(shù)字產(chǎn)品創(chuàng)建的設計系統(tǒng)，用以滿足他們的業(yè)務需求渴语。其創(chuàng)建過程對我們相當有參考意義苹威。
餓了么 ? Element
一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的桌面端組件庫驾凶。
Adobe ? Spectrum
Adobe 的設計系統(tǒng) Spectrum牙甫。
Teambition ? Clarity Design
Teambition 的設計系統(tǒng) Clarity Design。
TalkingData ? iView
一套基于 Vue.js 的高質(zhì)量 UI 組件庫调违。
UX Power Tools
UX Power Tools 同時包含 Web 與移動端的設計系統(tǒng)窟哺，Sketch 組件比較全面、完整技肩，且包含共享樣式且轨、支持內(nèi)容自適應等，還有 Style Guide虚婿。但是旋奢，收費，可在 Gumroad 上購買然痊。
Buninux ? Frames | Buninux ? Plaster
Frames 和 Plaster 分別是針對 Web 和移動端的設計系統(tǒng)黄绩，這 2 個設計系統(tǒng)最大的特點是，提供了大量的模板頁面玷过，且支持內(nèi)容自適應爽丹。但也是收費的。
Rojcyk ? iOS Blueprint
iOS Blueprint 是一個專注于 iOS 的設計系統(tǒng)辛蚊，業(yè)界知名度相當高粤蝎。除了基本的 Library 之外，也提供了一些通用模板袋马。這個也是收費的初澎，可在 Gumroad 上購買。
janlosert ? Nested Symbols & Auto-Updating Styleguides
累了虑凛，不寫了碑宴。
GE Digital ? Predix
主要針對 Web 應用的設計系統(tǒng)，組件庫也不是很全桑谍，Sketch 中也沒有共享樣式等延柠，相對而言，比較粗糙锣披。
有贊 ? Zan Design
Zent 是有贊的 PC 端組件庫贞间，基于 React 實現(xiàn)贿条，提供了一整套基礎的 UI 組件以及一些常用的業(yè)務組件，這些組件都已經(jīng)在有贊的各類 PC 業(yè)務中使用增热。
Vant 是有贊的移動端 Vue 組件庫整以，Vant Weapp 是 Vant 的小程序版本，這兩者基于相同的視覺規(guī)范峻仇，提供一致的 API 接口公黑。
Semantic ? Semantic UI
一個具有響應性的 UI 組件框架，支持網(wǎng)站在多個設備上的擴展摄咆。
Liferay ? Lexicon | Liferay ? Clay
Lexicon 是 Liferay 提出的一種設計語言 帆调，包含用戶界面組件、模式和用例等指南豆同。Clay 是以 Lexicon 為基礎實踐的一套 Web 應用組件庫 Clay番刊，包含大量代碼示例。
GOV.UK ? GOV.UK Design System
英國內(nèi)閣辦公室的 GDS 做的一套設計系統(tǒng)影锈，UI 樣式看起來有點亂芹务，但其中一些組件的使用方法也可以看一看。
Material-UI
基于 Material Design 的 React UI 框架鸭廷。
上海暢控 ? Admui
企業(yè)級通用管理系統(tǒng)的快速開發(fā)框架枣抱，注冊登錄后可進行在線體驗。
MDUI
一套用于開發(fā) Material Design 網(wǎng)頁的前端框架辆床。
云適配 ? Amaze UI
一個輕量級佳晶、Mobile first 的前端框架， 基于開源社區(qū)流行前端框架編寫讼载。
新浪 UED 的 HIG
新浪 UED 為新浪產(chǎn)品編寫的人機交互指南轿秧，包括 PC、iOS咨堤、Android菇篡、HTML5 等各個平臺的設計原則，還有新浪的 VI 體系介紹一喘，相當全面了驱还，推薦閱讀、學習（但有些內(nèi)容沒有更新凸克，可能現(xiàn)在已經(jīng)不適用了）议蟆。
餓了么 ? Mint UI
基于 Vue.js 的移動端組件庫， CSS 和 JS 組件等萎战。
Layui ? layuiAdmin
由 layui 自建的一套前端架構(gòu)實現(xiàn)而成的通用型后臺管理模板系統(tǒng)咐容。
[Akveo ? Eva Design System](https://eva.design/](https://eva.design/)
Akveo 設計的移動端和 PC 端的組件庫，提供了 Sketch 和 Figma 的組件庫資源撞鹉，F(xiàn)igma 組件庫和 Sketch 暗黑模式組件庫需要購買使用疟丙。
[Julien Rioux ? Flawwwless ui](https://eva.design/](https://eva.design/)
全棧開發(fā)工程師 Julien Rioux 設計開發(fā)的 UI 組件庫颖侄。
Progress ? Kendo UI
JavaScript UI 組件的最終集合鸟雏，包含用于 jQuery享郊、Angular、React 和 Vue 的庫孝鹊，用于快速構(gòu)建響應式 Web 應用炊琉。
附：?以下是網(wǎng)頁設計資源相關網(wǎng)站推薦
?Website Style Guide Resources
?網(wǎng)站設計指南合集，包括組件庫示例又活，關于設計指南的文章苔咪、書籍以及工具等等。
?Envato ? HTML Admin Website Templates
?Envato 的 envatomarket 上的網(wǎng)站設計模板合集柳骄。
以上內(nèi)容整理自網(wǎng)絡团赏，僅作為個人學習筆記使用。感謝這些設計團隊和所有分享想法與經(jīng)驗的人～
