> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/design/awesome-ux-design-styles.md).

# Awesome UX Design Styleguides

[![真棒](https://awesome.re/badge.svg)](https://awesome.re)

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

設計系統 - [設計系統綜合指南](https://www.invisionapp.com/inside-design/guide-to-design-systems/)

### 相關列表 - [Awesome UI 組件庫](https://github.com/anubhavsrivastava/awesome-ui-component-library) 用於樣式指南的組件庫實現（React、Vue、Angular 等）

＃＃ 內容

* [風格指南](#styleguides)
* [資源](#resources)
* [貢獻](#contribution)
* [許可證](#license)

***

## 指南/樣式指南

* [Altinn 設計系統](https://altinn.github.io/designsystem-styleguide/) [!\[Repo Star\](https://img.shields.io/github/stars/Altinn/DesignSystem.svg?label =\&style=social)](https://github.com/Altinn/DesignSystem) by Altinn- 設計系統基於所謂的原子設計方法，而不是設計頁面設計組件，可以在不同的環境中組裝和重用網絡解決方案。
* [螞蟻設計](https://ant.design/) [!\[Repo Star\](https://img.shields.io/github/stars/ant-design/ant-design.svg?label=\&style= social)](https://github.com/ant-design/ant-design/) by Ant Financial - 一個具有自然和確定性價值的設計系統，用於更好的企業應用程序用戶體驗。
* [Atlassian Design](https://atlassian.design/) by Atlassian - Atlassian 產品中使用的 Atlassian 設計指南。
* [奧迪 UI](https://www.audi.com/ci/en/guides/user-interface/introduction.html) [!\[Repo Star\](https://img.shields.io/github/stars /audi/audi-ui.svg?label=\&style=social)](https://github.com/audi/audi-ui) 由奧迪 - 基於奧迪外觀的原則：多樣性、誠實和平衡。
* [極光設計系統](https://design.gccollab.ca/) [!\[Repo Star\](https://img.shields.io/github/stars/gctools-outilsgc/aurora-website.svg?label =\&style=social)](https://github.com/gctools-outilsgc/aurora-website) 由加拿大政府提供 - Aurora 設計系統是由加拿大政府數字合作部為其數字化設計的核心設計指南產品。
* [澳大利亞政府設計系統](https://designsystem.gov.au/) [!\[Repo Star\](https://img.shields.io/github/stars/govau/design-system-components.svg? label=\&style=social)](https://github.com/govau/design-system-components) by Commonwealth of Australia - 澳大利亞政府設計系統提供了一個框架和一套工具來幫助設計師和開發人員構建政府產品和服務更輕鬆
* [auth0 Cosmos](https://auth0-cosmos.now.sh) [![Repo Star](https://img.shields.io/github/stars/auth0/cosmos.svg?label=\&style=social)](https://github.com/auth0/cosmos) by auth0 - Cosmos 是一個用於構建 Auth0 產品的設計系統。
* [auth0 Styleguide](https://styleguide.auth0.com/) [![Repo Star](https://img.shields.io/github/stars/auth0/styleguide.svg?label=\&style=social) ](https://github.com/auth0/styleguide)by auth0 - auth0 產品中使用的設計模式、組件和資源的結合。
* [背包](https://backpack.github.io/) [!\[Repo Star\](https://img.shields.io/github/stars/backpack/backpack.github.io.svg?label=\&style =social)](https://github.com/backpack/backpack.github.io) Skyscanner - Backpack 是設計資源、可重用組件和創建 Skyscanner 產品的指南的集合。
* Blackboard 的 [Blackboard Design](https://design.blackboard.com/) - 為教育體驗而設計
* [Bloom](http://bloom.appearhere.co.uk/) by Appear Here - Bloom 是 Appear Here 的設計模式和指南的中央存儲庫。
* [愛沙尼亞品牌](https://brand.estonia.ee/) by estonia - 愛沙尼亞設計團隊創建的愛沙尼亞品牌視覺語言
* [Brainly 風格指南](https://styleguide.brainly.com) [![Repo Star](https://img.shields.io/github/stars/brainly/style-guide.svg?label=\&style=%E7%A4%BE%E4%BA%A4)](https://github.com/brainly/style-guide) 由 Brainly - 此風格指南用於 Brainly 網站的所有語言版本。
* [Carbon](http://carbondesignsystem.com/) 由 IBM - Carbon 是 IBM 的開源數字產品和體驗設計系統。
* [Cedar](http://rei.github.io/rei-cedar/) [!\[Repo Star\](https://img.shields.io/github/stars/rei/rei-cedar.svg?label =\&style=social)](https://github.com/rei/rei-cedar) by Rei - REI 數字設計系統演示框架
* [CFPB 設計手冊](https://cfpb.github.io/design-manual/) [!\[Repo Star\](https://img.shields.io/github/stars/cfpb/capital-framework.svg ?label=\&style=social)](https://github.com/cfpb/capital-framework) - 消費者金融保護局的用戶界面框架
* [變色龍](https://pusher.github.io/chameleon/) [![Repo Star](https://img.shields.io/github/stars/pusher/chameleon.svg?label=\&style=social)](https://github.com/pusher/chameleon) by Pusher - Chameleon 是 Pusher 使用的前端模式、變量和助手庫
* [Clarity 設計系統](https://clarity.design/) \[![Repo Star](https://img.shields.io/github/stars/vmware/clarity.svg?label=\&style=social)] (<https://github.com/vmware/clarity>) 由 VMWare 提供 - UX 指南、HTML/CSS 框架和 Angular 組件協同工作以創造卓越的體驗
* [CNVS UI 系統](http://mesosphere.github.io/cnvs/) [!\[Repo Star\](https://img.shields.io/github/stars/mesosphere/cnvs.svg?label=\&style =social)](https://github.com/mesosphere/cnvs) 由 Mesosphere - CNVS（發音為“Canvas”）是一個用戶界面元素和組件系統，用於跨 Mesosphere 站點和產品使用
* [COOP 設計手冊](https://coop-design-system.herokuapp.com/) [!\[Repo Star\](https://img.shields.io/github/stars/coopdigital/coop-frontend-toolkit .svg?label=\&style=social)](https://github.com/coopdigital/coop-frontend-toolkit) by COOP - 包含樣式和靜態資產的前端工具包，用於構建 Co-op 品牌的數字內容。
* [Design Language](http://developer.royalcanin.com/) by Royal Canin - Design Language 是一個共享設計系統，統一了 Royal Canin 的全球數字風格。
* [Duolingo Design](https://www.duolingo.com/design/) by Duolingo - [Duolingo Design Team](https://medium.com/duolingo-design) 的設計語言
* Eurostar 的 [Eurostar GLU](https://style.eurostar.com/) - Eurostar Web UI 的構建塊。
* [Fabric UI](https://developer.microsoft.com/en-us/fabric) [!\[Repo Star\](https://img.shields.io/github/stars/OfficeDev/office-ui-fabric -core.svg?label=\&style=social)](https://github.com/OfficeDev/office-ui-fabric-core) by Microsoft - 用於構建無縫融入 Office 和 Office 的體驗的官方前端框架365.
* [羽毛](https://design.alfabank.ru/) [!\[Repo Star\](https://img.shields.io/github/stars/alfa-laboratory/arui-feather.svg?label=\&style =social)](https://github.com/alfa-laboratory/arui-feather) by Alfa-Bank - Alfa-Bank 中的設計系統
* [Feelix](https://feelix.myob.com/) by MYOB - 前端界面元素的集合，可以在 MYOB 基於瀏覽器的產品中重複使用。
* 家庭搜索的 [Frontier](https://www.familysearch.org/frontier/styleguide/) - FamilySearch.org 網站的全球風格
* [基礎設計系統](https://envato.github.io/foundation-design-system/) [!\[Repo Star\](https://img.shields.io/github/stars/envato/foundation-design -system-tokens.svg?label=\&style=social)](https://github.com/envato/foundation-design-system-tokens) by Envato - 基礎設計系統是預定義令牌、用戶界面組件的集合及其使用指南。
* [保險絲設計系統](https://ni.github.io/design-system/) [!\[Repo Star\](https://img.shields.io/github/stars/ni/design-system.svg ?label=\&style=social)](https://github.com/ni/design-system) by National Instruments - 用於設計和開發 National Instruments 軟件的系統
* [凝膠](http://www.bbc.co.uk/gel/) [!\[Repo Star\](https://img.shields.io/github/stars/bbc/gel-foundations.svg?label =\&style=social)](https://github.com/bbc/gel-foundations) by BBC - Global Experience Language(GEL) 是 BBC 的共享設計框架。一個可重複使用的交互模式系統，用於組裝 BBC 的整個在線輸出。
* [格式塔](https://pinterest.github.io/gestalt/) [![Repo Star](https://img.shields.io/github/stars/pinterest/gestalt.svg?label=\&style=social)](https://github.com/pinterest/gestalt) by Pinterest - Pinterest 跨產品使用的設計語言
* [GOV.UK 設計系統](https://design-system.service.gov.uk/) by GOV.UK - GOV.UK 設計系統由政府數字服務維護
* [Grommet](https://v2.grommet.io/) \[![Repo Star](https://img.shields.io/github/stars/grommet/grommet.svg?label=\&style=social)] (<https://github.com/grommet/grommet>) 由 HP Enterprise - 提供可訪問性、模塊化、響應性和主題的部件設計系統、部件框架 (react)
* [Hedwig](https://hedwig-docs.herokuapp.com) [![Repo Star](https://img.shields.io/github/stars/bring/hedwig.svg?label=\&style=social) ](https://github.com/bring/hedwig)by Bring & Posten - 可以組裝在一起以構建任意數量的應用程序的設計組件的集合。
* [Help Scout 風格指南](http://style.helpscout.com/) [!\[Repo Star\](https://img.shields.io/github/stars/helpscout/seed-base.svg?label= \&style=social)](https://github.com/helpscout/seed-base) 由 Help Scout 提供 - 本風格指南是幫助 Help Scout 團隊成員快速行動並獲得一致體驗的一種方式
* [HubSpot Canvas](https://canvas.hubspot.com/) by HubSpot - HubSpot Canvas 是 HubSpot 用於構建產品的設計系統。
* [Lexicon](https://lexicondesign.io/) \[![Repo Star](https://img.shields.io/github/stars/liferay/lexicon-site.svg?label=\&style=social)] (<https://github.com/liferay/lexicon-site>) 由 Liferay - Lexicon 是一種設計語言，為在 Liferay 產品生態系統中構建接口提供通用框架。
* [閃電設計系統](https://www.lightningdesignsystem.com/) [!\[Repo Star\](https://img.shields.io/github/stars/salesforce-ux/design-system.svg?label =\&style=social)](https://github.com/salesforce-ux/design-system) by Salesforce - Salesforce Lightning 設計系統包括創建符合 Salesforce Lightning 原則、設計語言和最佳用戶界面的資源實踐
* Mailchimp 的 [Mailchimp 模式](https://ux.mailchimp.com/patterns) - Mailchimp 的產品線指南
* Marvel 的 [Marvel Styleguide](https://marvelapp.com/styleguide/) - Marvel 產品的 UI 組件、設計模式、品牌資產和代碼指南的實時清單
* [材質設計](https://material.io/design) [!\[Repo Star\](https://img.shields.io/github/stars/mui-org/material-ui.svg?label=\&style =social)](https://github.com/mui-org/material-ui) by Google - Material 是一個適應性強的指南、組件和工具系統，支持用戶界面設計的最佳實踐
* [Mineral UI](https://mineral-ui.com/) [!\[Repo Star\](https://img.shields.io/github/stars/mineral-ui/mineral-ui.svg?label= \&style=social)](https://github.com/mineral-ui/mineral-ui) - 一個網絡設計系統，可讓您快速構建高質量、可訪問的應用程序。由 [CA Technologies](https://www.ca.com) 創建
* [MongoDB的UI設計系統](http://mongodb.design/#/ui-design-system/welcome) [!\[Repo Star\](https://img.shields.io/github/stars/mongodb/design .svg?label=\&style=social)](https://github.com/mongodb/design) by MongoDB - MongoDB 設計系統包含構成所有 MongoDB 產品用戶體驗的 UI 構建塊。
* [Morningstar Design System](http://designsystem.morningstar.com/) by Morningstar - 品牌、視覺、用戶體驗和技術標準的集合，內置於中央庫中，以便團隊可以快速構建高質量、一致的體驗.
* [Mozilla 協議](https://protocol.mozilla.org/) [![Repo Star](https://img.shields.io/github/stars/mozilla/protocol.svg?label=\&style=social) ](https://github.com/mozilla/protocol)by Mozilla - Mozilla 網站的設計系統
* [Nachos](https://design.trello.com/) by Trello - Nachos 是跨產品使用的 Trello 設計系統
* Opower 的 [OPattern](https://ux.opower.com/opattern) - Opattern 是一個設計系統和風格指南，適用於所有創建 Opower 產品的人。
* [Origami](https://origami.ft.com/) [![Repo Star](https://img.shields.io/github/stars/Financial-Times/origami.svg?label=\&style=social)](https://github.com/Financial-Times/origami) by Financial Times - Origami 是一組用於幫助構建網站的服務、組件和工具。
* [Pajamas Design System](https://design.gitlab.com/) by Gitlab - 也稱為 GitLab 的開源設計系統，作為 GitLab 背後的資源、組件和設計指南
* FutureLearn 的 [模式庫](https://www.futurelearn.com/pattern-library) - 這是 FutureLearn 設計系統。
* [Photon](https://design.firefox.com/photon/) [![Repo Star](https://img.shields.io/github/stars/FirefoxUX/photon.svg?label=\&style=social)](https://github.com/FirefoxUX/photon) by Mozilla Firefox - Firefox 的光子設計系統
* [Plasma](http://plasma.guide/) \[![Repo Star](https://img.shields.io/github/stars/wework/plasma.svg?label=\&style=social)]\(https ://github.com/wework/plasma) 由 WeWork - Plasma 是 WeWork 用於創建合理、現代界面的設計系統
* [Pluralsight 設計系統](https://design-system.pluralsight.com/) [!\[Repo Star\](https://img.shields.io/github/stars/pluralsight/design-system.svg?label =\&style=social)](https://github.com/pluralsight/design-system) 由 Pluralsight - 用於跨 Pluralsight 產品創建有凝聚力的設計的 UI 構建塊。
* [Pivotal UI](https://styleguide.pivotal.io) [!\[Repo Star\](https://img.shields.io/github/stars/pivotal-cf/pivotal-ui.svg?label=\&style =social)](https://github.com/pivotal-cf/pivotal-ui) 由 Pivotal Software - Pivotal UI 是為 Pivotal 品牌設計的 React 組件的集合
* [Polaris](https://polaris.shopify.com/) \[![Repo Star](https://img.shields.io/github/stars/Shopify/polaris.svg?label=\&style=social)] (<https://github.com/Shopify/polaris>) 由 Shopify - 實用指南，幫助人們了解如何使用 Polaris 為 Shopify 平台進行設計。
* [Predix 設計系統](https://www.predix-ui.com/#/home) 由 GE Digital 提供 - Predix 設計系統是使用現代 Web 組件標準構建的，因此開發人員可以以最小的坡度開始使用我們的構建塊-向上。
* [PricelineOne](https://pricelinelabs.github.io/design-system/) [!\[Repo Star\](https://img.shields.io/github/stars/pricelinelabs/design-system.svg?label =\&style=social)](https://github.com/pricelinelabs/design-system/) by Priceline - Priceline.com 設計系統，為用戶創造始終如一的出色體驗
* [Primer](https://styleguide.github.com/primer/) [![Repo Star](https://img.shields.io/github/stars/primer/css.svg?label=\&style=social)](https://github.com/primer/css) 由 Github - 使用 GitHub 的前端框架 Primer 構建網站的資源、工具和設計指南。
* Heroku 的 [Purple3](https://design.herokai.com/purple3) - Purple 為用戶界面的美學、功能和形式提供了指導，以提供一致的體驗。
* Intuit 的 [Quickbooks](https://designsystem.quickbooks.com/) - QuickBooks 設計系統的使命是提供提升 Intuit 品牌的令人愉悅的客戶體驗。
* [RingUI](https://jetbrains.github.io/ring-ui/) [!\[Repo Star\](https://img.shields.io/github/stars/JetBrains/ring-ui.svg?label =\&style=social)](https://github.com/JetBrains/ring-ui) by JetBrains - 這個 UI 組件集合旨在為 JetBrains 內部構建的基於 Web 的產品提供所有必要的構建塊
* [Rizzo](https://rizzo.lonelyplanet.com/styleguide/) [![Repo Star](https://img.shields.io/github/stars/lonelyplanet/rizzo.svg?label=\&style=social)](https://github.com/lonelyplanet/rizzo) by Lonely Planet - Rizzo 是lonelyplanet.com 的 UI 層。Rizzo 還為 LP 的頁眉和頁腳、資產和样式指南提供服務。
* [Seek 風格指南](https://seek-oss.github.io/seek-style-guide/) by Seek [!\[Repo Star\](https://img.shields.io/github/stars/seek -oss/seek-style-guide.svg?label=\&style=social)](https://github.com/seek-oss/seek-style-guide) - SEEK 的生活方式指南，由 React、webpack、 CSS 模塊和更少
* [小吃](https://instacart.github.io/Snacks/) [![Repo Star](https://img.shields.io/github/stars/instacart/Snacks.svg?label=\&style=social)](https://github.com/instacart/Snacks) by Instacart -Snacks 是一個基於 JavaScript 和 React 的組件庫。它有一個與 Instacart 風格相匹配的默認主題。
* Buzzfeed 的 [Solid](https://solid.buzzfeed.com/) - Solid 是 BuzzFeed 的 CSS 樣式指南。您可以在 [博客文章](https://medium.com/buzzfeed-design/introducing-solid-1c16b1bf4868#.b8sqi9a73) 中閱讀有關 Solid 的更多信息。
* SpareBank1 的 [SpareBank1 設計系統](https://design.sparebank1.no/) - SpareBank1 跨學科的通用語言，以確保 SpareBank1 解決方案中的設計一致。
* [Spark 設計系統](https://sparkdesignsystem.com/) [!\[Repo Star\](https://img.shields.io/github/stars/sparkdesignsystem/spark-design-system.svg?label=\&style =social)](https://github.com/sparkdesignsystem/spark-design-system) by Quicken Loans - Spark Design System 是一個模式和組件系統，用於為 Quicken Loans 金融科技產品系列創建用戶界面
* [Stacks](https://stackoverflow.design/) \[![Repo Star](https://img.shields.io/github/stars/StackExchange/Stacks.svg?label=\&style=social)]\(https ://github.com/StackExchange/Stacks) by Stack Overflow - Stacks 提供您在整個 Stack Overflow 中快速設計、構建和交付連貫體驗所需的一切
* ACL 的 [Starling 設計系統](https://design.acl.com/page/Home) - Starling 設計系統是實現一致性、更好地記錄模式和展望我們未來的一個組成部分。
* StudyPortals 的 [StudyPortals 風格指南](https://styleguide.studyportals.com) - 基於 StudyPortal 的設計原則進行設計。
* [Swarm 設計系統](https://meetup.github.io/swarm-design-system/) [!\[Repo Star\](https://img.shields.io/github/stars/meetup/swarm-design -system.svg?label=\&style=social)](https://github.com/meetup/swarm-design-system) 由 Meetup - Meetup 產品設計指南。包括我們設計團隊的流程和原則以及視覺設計
* [Uniform](http://uniform.hudl.com/) by Hudl - Uniform 是 Hudl 的設計系統。它的存在是為了通過設計和代碼實現來統一 Hudl 的產品。
* [美國網頁設計系統](https://designsystem.digital.gov/) [!\[Repo Star\](https://img.shields.io/github/stars/uswds/uswds.svg?label=\&style= social)](https://github.com/uswds/uswds) 美國政府 - 美國網頁設計系統幫助聯邦政府建立快速、可訪問、適合移動設備的網站。
* [USAJOBS 設計系統](https://usajobs.github.io/design-system/) [!\[Repo Star\](https://img.shields.io/github/stars/USAJOBS/design-system.svg ?label=\&style=social)](https://github.com/USAJOBS/design-system) by USAJOBS - 描述 USAJOBS、Open Opportunities 和 Agency Talent Portal 的設計語言和可重用組件
* [uStyle](https://ustyle.guide/) \[![Repo Star](https://img.shields.io/github/stars/uswitch/ustyle.svg?label=\&style=social)]\(https uSwitch-uStyle 包含與 uSwitch 核心設計原則相關的文檔和指南
* [VTEX 風格指南](https://styleguide.vtex.com/) [![Repo Star](https://img.shields.io/github/stars/vtex/styleguide.svg?label=\&style=social) ](https://github.com/vtex/styleguide)by VTEX - 由 React 組件庫支持的 VTEX 設計系統
* [Wonderbly Design System](http://design-system.lostmy.name/) by Wonderbly - 基於 Wonderbly 設計原則的設計系統
* [Workday Canvas Design System](https://design.workday.com/) by Workday - 深入研究 Workday 設計標準、寫作指南和劇本，以創造卓越的企業體驗。
* [Zendesk Garden](https://garden.zendesk.com/) \[!\[Repo Star]\(<https://img.shields.io/github/stars/zendeskgarden/css-components.svg?label=\\&style=社交）]（https://github.com/zendeskgarden/css-components）由> Zendesk - Garden 是 Zendesk 產品的用戶界面組件。

＃＃ 資源

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

＃＃ 貢獻

歡迎提出建議和 PR！

請閱讀 [貢獻指南](https://github.com/tentenco/awesome/blob/main/design/awesome-ux-design-styles/CONTRIBUTING.md) 以開始使用。

[![HitCount](http://hits.dwyl.io/anubhavsrivastava/awesome-ux-design-styles.svg)](http://hits.dwyl.io/anubhavsrivastava/awesome-ux-design-styles)

***

＃＃ 執照

知識共享零 v1.0 通用 [![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/awesome/design/awesome-ux-design-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.