> 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-design-systems.md).

# awesome-design-systems

![封面](https://github.com/tentenco/awesome/blob/main/cover.png)

![歡迎投稿](https://img.shields.io/badge/Contributions-welcome-blue.svg)

知道下面未列出的資源嗎？隨意創建一個新的 [pull request](https://github.com/alexpate/awesome-design-systems/pulls)。

> 設計系統是關於原則和最佳實踐的文檔集合，有助於指導團隊構建數字產品。它們通常包含在 UI 庫和模式庫中，但可以擴展到包括其他領域的指南，例如“語音和音調”。

***

### 標籤

* 組件：包含編碼模式和示例。
* Voice & Tone：提供有關如何使用語言的指導。
* 設計師工具包：包括草圖/Photoshop/Figma/等。設計師的文件。
* 源代碼：公開可見的源代碼

***

\| | 組件 | 語音和音調 | 設計師套件 | 源代碼\* | | -------------------------------------------------- -------------------------------------------------- ---------- | :--------: | :------------: | :-----------: | :------------------------------------------------ --------------------------: | | [Adobe Spectrum](https://spectrum.adobe.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/adobe/react-spectrum) | | [阿爾法銀行](https://design.alfabank.ru) | 👍 | | 👍 | [:octocat:](https://github.com/alfa-laboratory/arui-feather) | | 【阿里巴巴螞蟻設計】(<https://ant.design>) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/ant-design/ant-design/) | | [放大 UI](https://ui.docs.amplify.aws) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/aws-amplify/amplify-ui/) | | [出現在這里風格指南](https://bloom.appearhere.co.uk) | 👍 | | | [:octocat:](https://github.com/appearhere/bloom) | | 【蘋果開發者設計指南】(<https://developer.apple.com/design/>) | | | 👍 | | | [阿拉貢用戶界面](https://ui.aragon.org) | 👍 | | | [:octocat:](https://github.com/aragon/ui) | | [藝術調色板](https://palette.artsy.net) | 👍 | | | [:octocat:](https://github.com/artsy/palette) | | [Astro UXDS](https://astrouxds.com) | 👍 | | 👍 | [:octocat:](https://github.com/RocketCommunicationsInc/astro-components) | | [在 UIKIT](https://at-ui.github.io/at-ui/#/en) | 👍 | | | [:octocat:](https://github.com/at-ui/at-ui) | | [Atlassian 設計系統](https://atlassian.design) | 👍 | 👍 | 👍 | | | [奧迪 UI 套件](https://www.audi.com/ci/en/guides/user-interface/introduction.html) | 👍 | | 👍 | [:octocat:](https://github.com/audi/audi-ui) | | [Aurora（加拿大政府）](https://design.gccollab.ca) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/gctools-outilsgc/design-system) | | [澳大利亞政府設計系統](https://designsystem.gov.au) | 👍 | | 👍 | [:octocat:](https://github.com/govau/design-system-components/) | | [AutoGuru Overdrive](http://overdrive.autoguru.io) | 👍 | | | [:octocat:](https://github.com/autoguru-au/overdrive) | | [背包 (Skyscanner)](https://skyscanner.design) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/skyscanner/backpack) | | [巴納多的設計系統](https://design-system.barnardos.org.uk) | 👍 | 👍 | | [:octocat:](https://github.com/barnardos/design-system) | | [基礎設計系統](https://basis.now.sh) | 👍 | | | [:octocat:](https://github.com/moroshko/basis) | | [BBC GEL（全球體驗語言）](https://www.bbc.co.uk/gel) | 👍 | 👍 | 👍 | | | [BCC - 設計系統](https://designsystem.bccfilkom.net) | 👍 | | 👍 | [:octocat:](https://github.com/bccfilkom/designsystem) | | [BLiP](https://design.blip.ai) | 👍 | | | [:octocat:](https://github.com/takenet/blip-toolkit) | | [螺栓設計系統](https://boltdesignsystem.com) | 👍 | | | [:octocat:](https://github.com/boltdesignsystem/bolt) | | [粗體（橋樑設計系統）](https://bold.bridge.ufsc.br) | 👍 | | 👍 | [:octocat:](https://github.com/laboratoriobridge/bold) | | [藍圖](https://blueprintjs.com) | 👍 | | 👍 | [:octocat:](https://github.com/palantir/blueprint) | | 【編織設計系統】(<https://seek-oss.github.io/braid-design-system/>) | 👍 | | | [:octocat:](https://github.com/seek-oss/braid-design-system) | | [英國氣體核](https://britishgas.design) | 👍 | 👍 | | | | [Buildit Gravity](http://style.buildit.digital) | 👍 | | | [:octocat:](https://github.com/buildit/gravity-ui-web) | | [燈泡設計系統](https://design.bulb.co.uk) | 👍 | 👍 | | | | [BuzzFeed Solid](https://solid.buzzfeed.com) | 👍 | | 👍 | [:octocat:](https://github.com/buzzfeed/solid) | | [Bumbag UI](https://bumbag.style) | 👍 | | | [:octocat:](https://github.com/bumbag/bumbag-ui) | | [易趣皮膚](https://ebay.github.io/skin/) | 👍 | | | [:octocat:](https://github.com/eBay/skin) | | [謎無界](https://boundless.js.org) | 👍 | | | [:octocat:](https://github.com/enigma-io/boundless) | | [CA Technologies 礦物 UI](https://mineral-ui.netlify.app) | 👍 | | | [:octocat:](https://github.com/mineral-ui/mineral-ui) | | [卡片二進制設計](https://github.com/opensource-cards/binary-ui) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/opensource-cards/binary-ui) | | [CBRE 塊](https://blocks.cbrebuild.com) | 👍 | 👍 | | | | [雪松](https://rei.github.io/rei-cedar-docs/) | 👍 | | 👍 | [:octocat:](https://github.com/rei/rei-cedar) | | [censhare禪](https://design.censhare.com) | 👍 | 👍 | | | | [脈輪用戶界面](https://chakra-ui.com) | 👍 | | | [:octocat:](https://github.com/chakra-ui/chakra-ui) | | [Cloudflare](https://cloudflare.github.io/cf-ui/) | 👍 | | | [:octocat:](https://github.com/cloudflare/cf-ui) | | [波士頓艦隊城市](https://patterns.boston.gov) | 👍 | 👍 | | [:octocat:](https://github.com/CityOfBoston/digital) | | [合作設計手冊](https://coop-design-manual.herokuapp.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/coopdigital/design-system) | | [內容形式 36](https://f36.contentful.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/contentful/forma-36) | | 【迪卡儂設計系統-維他命】(<https://decathlon.design/>) | 👍 | | 👍 | [:octocat:](https://github.com/decathlon/vitamin-web) | | [Decentraland 用戶界面](https://ui.decentraland.org) | 👍 | | | [:octocat:](https://github.com/decentraland/ui) | | [二重唱](https://www.duetds.com) | 👍 | | 👍 | | | [多鄰國](https://design.duolingo.com) | | 👍 | | | | [ENGIE流體設計系統](https://www.engie.design) | 👍 | | 👍 | | | [愛沙尼亞國家設計指南](https://brand.estonia.ee) | 👍 | 👍 | 👍 | | | 【彈性UI框架】(<https://elastic.github.io/eui/>) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/elastic/eui) | | [長青](https://evergreen.surge.sh) | 👍 | | | [:octocat:](https://github.com/segmentio/evergreen) | | [Figma UI 組件](https://figma-ui.lessmess.dev) | 👍 | | | [:octocat:](https://github.com/lessmess-dev/figma-ui-components) | | [金融時報摺紙](https://origami.ft.com) | 👍 | | | [:octocat:](https://github.com/Financial-Times/origami) | | [Finastra 設計系統](https://design.fusionfabric.cloud) | 👍 | | 👍 | [:octocat:](https://github.com/fusionfabric/finastra-design-system) | | [芬蘭工具箱](https://toolbox.finland.fi) | | 👍 | 👍 | | | 【火狐光子設計系統】(<https://design.firefox.com/photon>) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/FirefoxUX/photon) | | [魚缸設計系統](https://fishtank.bna.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/bloombergindustry/fishtank-vue) | | [Flame Design System Santander](https://bancosantander.invisionapp.com/dsm/santander-group/flame-ds-santander) | 👍 | 👍 | 👍 | | | 【大堂設計系統】(<https://design.foyer.lu/>) | 👍 | | 👍 | :close\_lock\_with\_key: | | [FutureLearn 模式庫](https://www.futurelearn.com/pattern-library) | 👍 | | | | | [基金會](https://get.foundation) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/foundation/foundation-sites) | | [GitHub 入門](https://primer.style) | 👍 | | 👍 | [:octocat:](https://github.com/primer/) | | [GitLab 設計系統-睡衣](https://design.gitlab.com) | 👍 | 👍 | 👍 | [:fox\_face:](https://gitlab.com/gitlab-org/design.gitlab.com) | | [谷歌材料設計](https://material.io/guidelines/#introduction-goals) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/material-components/material-components) | | [GOV.UK 設計系統](https://www.gov.uk/design-system) | 👍 | | | [:octocat:](https://github.com/alphagov/govuk-design-system) | | [體操瑜伽](https://gympass.github.io/yoga/) | 👍 | 👍 | | [:octocat:](https://github.com/gympass/yoga) | | [Halstack](https://developer.dxc.com/design/guidelines/principles/overview) | 👍 | | 👍 | [:octocat:](https://github.com/dxc-technology/halstack-style-guide) | | [幫助偵察員](https://style.helpscout.com) | 👍 | 👍 | | [:octocat:](https://github.com/helpscout/seed-framework) | | [Heroku Purple3](https://design.herokai.com) | 👍 | | | | | [惠普索環](https://grommet.github.io) | 👍 | | | [:octocat:](https://github.com/grommet/grommet) | | [HubSpot 畫布](https://canvas.hubspot.com) | 👍 | 👍 | | [:octocat:](https://github.com/HubSpot/canvas) | | [Hudl 設計系統](https://uniform.hudl.com) | 👍 | 👍 | | | | [IBM Carbon](https://www.carbondesignsystem.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/ibm/carbon-components) | | [IBM 設計語言](https://www.ibm.com/design/language/) | 👍 | 👍 | | | | [IBM 北極星](https://www.ibm.com/standards/web/) | 👍 | 👍 | | | | [直覺和諧](https://designsystem.quickbooks.com) | 👍 | 👍 | 👍 | | | [JetBrains Ring UI](https://jetbrains.github.io/ring-ui) | 👍 | | | [:octocat:](https://github.com/JetBrains/ring-ui) | | [卡洛用戶界面](https://kalo.design) | 👍 | | | [:octocat:](https://github.com/kalohq/ui) | | [Kiwi.com 軌道](https://orbit.kiwi) | 👍 | | 👍 | [:octocat:](https://github.com/kiwicom/orbit-components/) | | [Kontur](https://guides.kontur.ru) | 👍 | | 👍 | [:octocat:](https://github.com/skbkontur/retail-ui/) | | [緯度](https://www.flexport.com/design) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/flexport/latitude/) | | [詞典](https://lexicondesign.io) | 👍 | 👍 | | | | [孤獨星球里佐](https://rizzo.lonelyplanet.com) | 👍 | | | [:octocat:](https://github.com/lonelyplanet/rizzo) | | 【響亮十倍手冊】(<https://www.louderthanten.com/manual>) | 👍 | 👍 | | | | [Lost My Name 設計系統](http://design-system.lostmy.name) | 👍 | | | | | [Mailchimp 內容風格指南](https://styleguide.mailchimp.com) | | 👍 | | | | [Mailchimp 模式](https://ux.mailchimp.com/patterns) | 👍 | | | | | [Mantine](https://mantine.dev) | 👍 | | | [:octocat:](https://github.com/mantinedev/mantine) | | [漫威風格指南](https://marvelapp.com/styleguide) | 👍 | | | | | [Meetup Swarm](https://meetup.github.io/swarm-design-system/) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/meetup/swarm-design-system/) | | [網格設計系統](https://www.meshdesignsystem.com) | 👍 | | 👍 | | | [中間層 CNVS](https://mesosphere.github.io/cnvs/) | 👍 | | | [:octocat:](https://github.com/mesosphere/cnvs/) | | [微軟流利](https://www.microsoft.com/design/fluent/) | 👍 | | 👍 | [:octocat:](https://github.com/microsoft/fluentui) | | [Mixpanel 設計系統](https://design.mixpanel.com) | 👍 | 👍 | | | | 【MongoDB設計系統】(<http://mongodb.design>) | 👍 | | 👍 | [:octocat:](https://github.com/mongodb/design) | | [Monzo 音調](https://monzo.com/tone-of-voice/) | | 👍 | | | | 【晨星設計系統】(<http://designsystem.morningstar.com/>) | 👍 | 👍 | 👍 | | | [Mozilla 協議](https://protocol.mozilla.org) | 👍 | | | [:octocat:](https://github.com/mozilla/protocol) | | [NASA網頁設計系統](https://nasa.github.io/nasawds-site/) | 👍 | | | [:octocat:](https://github.com/nasa/nasawds) | | [NationBuilder 半徑](https://www.nationbuilder.design) | 👍 | | | | | [NHS.UK 服務手冊（測試版）](https://beta.nhs.uk/service-manual/) | 👍 | 👍 | | | | [Nordnet](https://brand.nordnet.se) | 👍 | 👍 | | | | [Nutanix 棱鏡](https://nutanix.design) | 👍 | | | | | [Okta Odyssey 設計系統](https://odyssey.okta.design) | 👍 | | 👍 | [:octocat:](https://github.com/okta/odyssey) | | [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/microsoft/fluentui) | | [模式](https://ux.opower.com/opattern) | 👍 | 👍 | | | | [Oracle Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta/index.html) | 👍 | | | | | [Mail.ru 集團範式](https://design.mail.ru) | 👍 | 👍 | 👍 | | | [Patternfly](https://www.patternfly.org/v4/) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/patternfly) | | [Pearson UX 框架](https://uxframework.pearson.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/Pearson-Higher-Ed/design) | | [Pharos：JSTOR 的設計系統](https://pharos.jstor.org) | 👍 | 👍 | | [:octocat:](https://github.com/ithaka/pharos) | | [Pinterest 格式塔](https://pinterest.github.io/gestalt/#/) | 👍 | | | [:octocat:](https://github.com/pinterest/gestalt) | | [關鍵](https://styleguide.pivotal.io) | 👍 | | | [:octocat:](https://github.com/pivotal-cf/pivotal-ui) | | [Pluralsight 設計系統](https://design-system.pluralsight.com) | 👍 | | | [:octocat:](https://github.com/pluralsight/design-system) | | [Predix 設計系統](https://www.predix-ui.com) | 👍 | 👍 | 👍 | | | [Priceline 設計系統](https://priceline.github.io/design-system/) | 👍 | 👍 | | [:octocat:](https://github.com/priceline/design-system) | | 【脈衝設計系統】(<https://pulse.heartbeat.ua/>) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/heartbeatua/Pulse-Boilerplate) | | [推桿變色龍](https://pusher.github.io/chameleon/) | 👍 | | | [:octocat:](https://github.com/pusher/chameleon) | | [基數](https://radix.modulz.app/docs/getting-started/) | 👍 | | | [:octocat:](https://github.com/modulz/radix) | | [漫步者](https://rambler-digital-solutions.github.io/rambler-ui/) | 👍 | | | [:octocat:](https://github.com/rambler-digital-solutions/rambler-ui) | | [再現](https://balena-io-modules.github.io/rendition/) | 👍 | | | [:octocat:](https://github.com/balena-io-modules/rendition/) | | [Salesforce Lightning 設計系統](https://www.lightningdesignsystem.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/salesforce-ux/design-system) | | [SAP Fiori](https://experience.sap.com/fiori-design/) | 👍 | | | | | [SAP 基礎](https://github.com/SAP/fundamental) | 👍 | | | [:octocat:](https://github.com/SAP/fundamental) | | [SAP OpenUI](https://github.com/SAP/openui5) | 👍 | | | [:octocat:](https://github.com/SAP/openui5) | | [種子](https://sproutsocial.com/seeds) | 👍 | 👍 | 👍 | | | [SEEK 風格指南](https://seek-oss.github.io/seek-style-guide/) | 👍 | | | [:octocat:](https://github.com/seek-oss/seek-style-guide) | | [半設計](https://semi.design/en-US) | 👍 | | 👍 | [:octocat:](https://github.com/DouyinFE/semi-design) | | [Semrush 星際設計系統](https://i.semrush.com) | 👍 | | 👍 | [:octocat:](https://github.com/semrush/intergalactic) | | [Shopify Polaris](https://polaris.shopify.com) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/Shopify/polaris) | | [新加坡政府設計系統](https://www.designsystem.tech.gov.sg) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/govtechsg/sgds) | | [堆棧 – 堆棧溢出](https://stackoverflow.design) | 👍 | 👍 | | [:octocat:](https://github.com/StackExchange/Stacks) | | 【星巴克風格指南】(<https://www.starbucks.com/static/reference/styleguide/>) | 👍 | | | | | [天空工具包](https://www.sky.com/toolkit) | 👍 | | | [:octocat:](https://github.com/sky-uk/toolkit) | | 【墨爾本大學設計系統】(<https://web.unimelb.edu.au/>) | 👍 | | | [:octocat:](https://github.com/unimelb/unimelb-design-system) | | [Teambition 清晰設計](https://design.teambition.com) | 👍 | | | | | [Telefónica Mística](https://brandfactory.telefonica.com/mistica) | 👍 | | 👍 | [:octocat:](https://github.com/Telefonica/mistica) | | [指紋](https://thumbprint.design) | 👍 | | | [:octocat:](https://github.com/thumbtack/thumbprint) | | [Tizen CircularUI](https://developer.samsung.com/one-ui-watch-tizen) | 👍 | | 👍 | [:octocat:](https://github.com/Samsung/Tizen.CircularUI) | | [Twilio 粘貼](https://paste.twilio.design) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/twilio-labs/paste) | | [Uber 的基礎網絡](https://baseweb.design) | 👍 | | | [:octocat:](https://github.com/uber-web/baseui) | | [Ubuntu Vanilla 框架](https://vanillaframework.io) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/canonical-web-and-design/vanilla-framework) | | [USPTO UI 設計庫](https://uspto.github.io/designpatterns/index.html) | 👍 | | 👍 | [:octocat:](https://github.com/uspto/designpatterns) | | [uSwitch風格指南](https://ustyle.guide) | 👍 | 👍 | | [:octocat:](https://github.com/uswitch/ustyle) | | [美國網頁設計標準](https://designsystem.digital.gov) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/uswds/uswds) | | [美國CMS.gov設計系統](https://design.cms.gov) | 👍 | | | | | 【Vimeo設計系統】(<https://vimeo.github.io/iris/>) | 👍 | | | [:octocat:](https://github.com/vimeo/iris) | | [VMware Clarity 設計系統](https://clarity.design) | 👍 | 👍 | 👍 | [:octocat:](https://github.com/vmware/clarity) | | [VTEX 風格指南](https://styleguide.vtex.com) | 👍 | | 👍 | [:octocat:](https://github.com/vtex/styleguide) | | 【Vue設計系統】(<https://vueds.com/>) | 👍 | | | [:octocat:](https://github.com/viljamis/vue-design-system) | | [WeWork 等離子](http://plasma.guide) | 👍 | | | | | [Ray by WeWork](https://ray.wework.com) | 👍 | | | [:octocat:](https://github.com/wework/ray) | | [歡迎界面](http://www.welcome-ui.com) | 👍 | | | [:octocat:](https://github.com/WTTJ/welcome-ui) | | [西米德蘭茲網絡設計系統](https://designsystem.wmnetwork.co.uk) | 👍 | 👍 | | [:octocat:](https://github.com/wmcadigital/wmn-design-system) | | [Vercel](https://vercel.com/design) | 👍 | | | | | [工作日畫布](https://design.workday.com) | 👍 | 👍 | | [:octocat:](https://github.com/Workday/canvas-kit) | | [Yelp 風格指南](https://www.yelp.com/styleguide) | 👍 | 👍 | | | | [Zendesk 花園](https://garden.zendesk.com) | 👍 | | | [:octocat:](https://github.com/zendeskgarden) |

### 備註

\**標記為開源的項目可能並不總是開放使用。在使用這些項目之前，請務必檢查它們的許可證。*

儘管“設計系統”、“用戶界面庫”和“模式庫”是不同的東西，但它們經常可以互換使用。此列表包含所有三個。

### 學分

封面圖標：來自 Noun Project 的 Andrejs Kirma 的“太陽系”


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.tenten.co/awesome/design/awesome-design-systems.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.