Awesome UX Design Styleguides

用戶體驗風格指南和設計系統和工具包的精選列表

設計系統 - 設計系統綜合指南

相關列表 - Awesome UI 組件庫 用於樣式指南的組件庫實現（React、Vue、Angular 等）

＃＃ 內容

• 風格指南

• 資源

• 貢獻

• 許可證

---

指南/樣式指南

• Altinn 設計系統  by Altinn- 設計系統基於所謂的原子設計方法，而不是設計頁面設計組件，可以在不同的環境中組裝和重用網絡解決方案。

• 螞蟻設計  by Ant Financial - 一個具有自然和確定性價值的設計系統，用於更好的企業應用程序用戶體驗。

• Atlassian Design by Atlassian - Atlassian 產品中使用的 Atlassian 設計指南。

• 奧迪 UI  由奧迪 - 基於奧迪外觀的原則：多樣性、誠實和平衡。

• 極光設計系統  由加拿大政府提供 - Aurora 設計系統是由加拿大政府數字合作部為其數字化設計的核心設計指南產品。

• 澳大利亞政府設計系統  by Commonwealth of Australia - 澳大利亞政府設計系統提供了一個框架和一套工具來幫助設計師和開發人員構建政府產品和服務更輕鬆

• auth0 Cosmos by auth0 - Cosmos 是一個用於構建 Auth0 產品的設計系統。

• auth0 Styleguide by auth0 - auth0 產品中使用的設計模式、組件和資源的結合。

• 背包  Skyscanner - Backpack 是設計資源、可重用組件和創建 Skyscanner 產品的指南的集合。

• Blackboard 的 Blackboard Design - 為教育體驗而設計

• Bloom by Appear Here - Bloom 是 Appear Here 的設計模式和指南的中央存儲庫。

• 愛沙尼亞品牌 by estonia - 愛沙尼亞設計團隊創建的愛沙尼亞品牌視覺語言

• Brainly 風格指南 由 Brainly - 此風格指南用於 Brainly 網站的所有語言版本。

• Carbon 由 IBM - Carbon 是 IBM 的開源數字產品和體驗設計系統。

• Cedar  by Rei - REI 數字設計系統演示框架

• CFPB 設計手冊  - 消費者金融保護局的用戶界面框架

• 變色龍 by Pusher - Chameleon 是 Pusher 使用的前端模式、變量和助手庫

• Clarity 設計系統 [] (https://github.com/vmware/clarity) 由 VMWare 提供 - UX 指南、HTML/CSS 框架和 Angular 組件協同工作以創造卓越的體驗

• CNVS UI 系統  由 Mesosphere - CNVS（發音為“Canvas”）是一個用戶界面元素和組件系統，用於跨 Mesosphere 站點和產品使用

• COOP 設計手冊  by COOP - 包含樣式和靜態資產的前端工具包，用於構建 Co-op 品牌的數字內容。

• Design Language by Royal Canin - Design Language 是一個共享設計系統，統一了 Royal Canin 的全球數字風格。

• Duolingo Design by Duolingo - Duolingo Design Team 的設計語言

• Eurostar 的 Eurostar GLU - Eurostar Web UI 的構建塊。

• Fabric UI  by Microsoft - 用於構建無縫融入 Office 和 Office 的體驗的官方前端框架365.

• 羽毛  by Alfa-Bank - Alfa-Bank 中的設計系統

• Feelix by MYOB - 前端界面元素的集合，可以在 MYOB 基於瀏覽器的產品中重複使用。

• 家庭搜索的 Frontier - FamilySearch.org 網站的全球風格

• 基礎設計系統  by Envato - 基礎設計系統是預定義令牌、用戶界面組件的集合及其使用指南。

• 保險絲設計系統  by National Instruments - 用於設計和開發 National Instruments 軟件的系統

• 凝膠  by BBC - Global Experience Language(GEL) 是 BBC 的共享設計框架。一個可重複使用的交互模式系統，用於組裝 BBC 的整個在線輸出。

• 格式塔 by Pinterest - Pinterest 跨產品使用的設計語言

• GOV.UK 設計系統 by GOV.UK - GOV.UK 設計系統由政府數字服務維護

• Grommet [] (https://github.com/grommet/grommet) 由 HP Enterprise - 提供可訪問性、模塊化、響應性和主題的部件設計系統、部件框架 (react)

• Hedwig by Bring & Posten - 可以組裝在一起以構建任意數量的應用程序的設計組件的集合。

• Help Scout 風格指南  由 Help Scout 提供 - 本風格指南是幫助 Help Scout 團隊成員快速行動並獲得一致體驗的一種方式

• HubSpot Canvas by HubSpot - HubSpot Canvas 是 HubSpot 用於構建產品的設計系統。

• Lexicon [] (https://github.com/liferay/lexicon-site) 由 Liferay - Lexicon 是一種設計語言，為在 Liferay 產品生態系統中構建接口提供通用框架。

• 閃電設計系統  by Salesforce - Salesforce Lightning 設計系統包括創建符合 Salesforce Lightning 原則、設計語言和最佳用戶界面的資源實踐

• Mailchimp 的 Mailchimp 模式 - Mailchimp 的產品線指南

• Marvel 的 Marvel Styleguide - Marvel 產品的 UI 組件、設計模式、品牌資產和代碼指南的實時清單

• 材質設計  by Google - Material 是一個適應性強的指南、組件和工具系統，支持用戶界面設計的最佳實踐

• Mineral UI  - 一個網絡設計系統，可讓您快速構建高質量、可訪問的應用程序。由 CA Technologies 創建

• MongoDB的UI設計系統  by MongoDB - MongoDB 設計系統包含構成所有 MongoDB 產品用戶體驗的 UI 構建塊。

• Morningstar Design System by Morningstar - 品牌、視覺、用戶體驗和技術標準的集合，內置於中央庫中，以便團隊可以快速構建高質量、一致的體驗.

• Mozilla 協議 by Mozilla - Mozilla 網站的設計系統

• Nachos by Trello - Nachos 是跨產品使用的 Trello 設計系統

• Opower 的 OPattern - Opattern 是一個設計系統和風格指南，適用於所有創建 Opower 產品的人。

• Origami by Financial Times - Origami 是一組用於幫助構建網站的服務、組件和工具。

• Pajamas Design System by Gitlab - 也稱為 GitLab 的開源設計系統，作為 GitLab 背後的資源、組件和設計指南

• FutureLearn 的 模式庫 - 這是 FutureLearn 設計系統。

• Photon by Mozilla Firefox - Firefox 的光子設計系統

• Plasma [](https ://github.com/wework/plasma) 由 WeWork - Plasma 是 WeWork 用於創建合理、現代界面的設計系統

• Pluralsight 設計系統  由 Pluralsight - 用於跨 Pluralsight 產品創建有凝聚力的設計的 UI 構建塊。

• Pivotal UI  由 Pivotal Software - Pivotal UI 是為 Pivotal 品牌設計的 React 組件的集合

• Polaris [] (https://github.com/Shopify/polaris) 由 Shopify - 實用指南，幫助人們了解如何使用 Polaris 為 Shopify 平台進行設計。

• Predix 設計系統 由 GE Digital 提供 - Predix 設計系統是使用現代 Web 組件標準構建的，因此開發人員可以以最小的坡度開始使用我們的構建塊-向上。

• PricelineOne  by Priceline - Priceline.com 設計系統，為用戶創造始終如一的出色體驗

• Primer 由 Github - 使用 GitHub 的前端框架 Primer 構建網站的資源、工具和設計指南。

• Heroku 的 Purple3 - Purple 為用戶界面的美學、功能和形式提供了指導，以提供一致的體驗。

• Intuit 的 Quickbooks - QuickBooks 設計系統的使命是提供提升 Intuit 品牌的令人愉悅的客戶體驗。

• RingUI  by JetBrains - 這個 UI 組件集合旨在為 JetBrains 內部構建的基於 Web 的產品提供所有必要的構建塊

• Rizzo by Lonely Planet - Rizzo 是lonelyplanet.com 的 UI 層。Rizzo 還為 LP 的頁眉和頁腳、資產和样式指南提供服務。

• Seek 風格指南 by Seek  - SEEK 的生活方式指南，由 React、webpack、 CSS 模塊和更少

• 小吃 by Instacart -Snacks 是一個基於 JavaScript 和 React 的組件庫。它有一個與 Instacart 風格相匹配的默認主題。

• Buzzfeed 的 Solid - Solid 是 BuzzFeed 的 CSS 樣式指南。您可以在 博客文章 中閱讀有關 Solid 的更多信息。

• SpareBank1 的 SpareBank1 設計系統 - SpareBank1 跨學科的通用語言，以確保 SpareBank1 解決方案中的設計一致。

• Spark 設計系統  by Quicken Loans - Spark Design System 是一個模式和組件系統，用於為 Quicken Loans 金融科技產品系列創建用戶界面

• Stacks [](https ://github.com/StackExchange/Stacks) by Stack Overflow - Stacks 提供您在整個 Stack Overflow 中快速設計、構建和交付連貫體驗所需的一切

• ACL 的 Starling 設計系統 - Starling 設計系統是實現一致性、更好地記錄模式和展望我們未來的一個組成部分。

• StudyPortals 的 StudyPortals 風格指南 - 基於 StudyPortal 的設計原則進行設計。

• Swarm 設計系統  由 Meetup - Meetup 產品設計指南。包括我們設計團隊的流程和原則以及視覺設計

• Uniform by Hudl - Uniform 是 Hudl 的設計系統。它的存在是為了通過設計和代碼實現來統一 Hudl 的產品。

• 美國網頁設計系統  美國政府 - 美國網頁設計系統幫助聯邦政府建立快速、可訪問、適合移動設備的網站。

• USAJOBS 設計系統  by USAJOBS - 描述 USAJOBS、Open Opportunities 和 Agency Talent Portal 的設計語言和可重用組件

• uStyle [](https uSwitch-uStyle 包含與 uSwitch 核心設計原則相關的文檔和指南

• VTEX 風格指南 by VTEX - 由 React 組件庫支持的 VTEX 設計系統

• Wonderbly Design System by Wonderbly - 基於 Wonderbly 設計原則的設計系統

• Workday Canvas Design System by Workday - 深入研究 Workday 設計標準、寫作指南和劇本，以創造卓越的企業體驗。

• Zendesk Garden [![Repo Star](https://img.shields.io/github/stars/zendeskgarden/css-components.svg?label=&style=社交）]（https://github.com/zendeskgarden/css-components）由 Zendesk - Garden 是 Zendesk 產品的用戶界面組件。

＃＃ 資源

• AgnosticUI - 可訪問的 React 組件原語，也適用於 Vue 3、Svelte 和 Angular！(GitHub, 演示)
• Awesome UI 組件庫 用於樣式指南的組件庫實現（React、Vue、Angular 等）
• Google 設計 - 由 Google 的一組設計師、作家和開發人員領導的合作努力，以發布原創內容、舉辦活動並促進促進設計和技術的創意和教育合作夥伴關係.

＃＃ 貢獻

歡迎提出建議和 PR！

請閱讀 貢獻指南 以開始使用。

---

＃＃ 執照

知識共享零 v1.0 通用