Know a resource that isn't listed below? Feel free to create a new pull request.
A design system is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'.
Components: Contains coded patterns and examples.
Voice & Tone: Provides guidance on how language should be used.
Designers Kit: Includes a Sketch/Photoshop/Figma/etc. file for designers.
Source code: Publically viewable source code
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
👍
*Projects marked as open source may not always be open to use. Always check the license of these projects before using them.
Although 'design systems', 'ui libraries', and 'pattern libraries' are different things, they are often used interchangeably. This list contains all three.
Cover icon: 'Solar System' by Andrejs Kirma from the Noun Project
知道下面未列出的資源嗎？隨意創建一個新的 pull request。
設計系統是關於原則和最佳實踐的文檔集合，有助於指導團隊構建數字產品。它們通常包含在 UI 庫和模式庫中，但可以擴展到包括其他領域的指南，例如“語音和音調”。
組件：包含編碼模式和示例。
Voice & Tone：提供有關如何使用語言的指導。
設計師工具包：包括草圖/Photoshop/Figma/等。設計師的文件。
源代碼：公開可見的源代碼
| | 組件 | 語音和音調 | 設計師套件 | 源代碼* | | -------------------------------------------------- -------------------------------------------------- ---------- | :--------: | :------------: | :-----------: | :------------------------------------------------ --------------------------: | | Adobe Spectrum | 👍 | 👍 | 👍 | :octocat: | | 阿爾法銀行 | 👍 | | 👍 | :octocat: | | 【阿里巴巴螞蟻設計】(https://ant.design) | 👍 | 👍 | 👍 | :octocat: | | 放大 UI | 👍 | 👍 | 👍 | :octocat: | | 出現在這里風格指南 | 👍 | | | :octocat: | | 【蘋果開發者設計指南】(https://developer.apple.com/design/) | | | 👍 | | | 阿拉貢用戶界面 | 👍 | | | :octocat: | | 藝術調色板 | 👍 | | | :octocat: | | Astro UXDS | 👍 | | 👍 | :octocat: | | 在 UIKIT | 👍 | | | :octocat: | | Atlassian 設計系統 | 👍 | 👍 | 👍 | | | 奧迪 UI 套件 | 👍 | | 👍 | :octocat: | | Aurora（加拿大政府） | 👍 | 👍 | 👍 | :octocat: | | 澳大利亞政府設計系統 | 👍 | | 👍 | :octocat: | | AutoGuru Overdrive | 👍 | | | :octocat: | | 背包 (Skyscanner) | 👍 | 👍 | 👍 | :octocat: | | 巴納多的設計系統 | 👍 | 👍 | | :octocat: | | 基礎設計系統 | 👍 | | | :octocat: | | BBC GEL（全球體驗語言） | 👍 | 👍 | 👍 | | | BCC - 設計系統 | 👍 | | 👍 | :octocat: | | BLiP | 👍 | | | :octocat: | | 螺栓設計系統 | 👍 | | | :octocat: | | 粗體（橋樑設計系統） | 👍 | | 👍 | :octocat: | | 藍圖 | 👍 | | 👍 | :octocat: | | 【編織設計系統】(https://seek-oss.github.io/braid-design-system/) | 👍 | | | :octocat: | | 英國氣體核 | 👍 | 👍 | | | | Buildit Gravity | 👍 | | | :octocat: | | 燈泡設計系統 | 👍 | 👍 | | | | BuzzFeed Solid | 👍 | | 👍 | :octocat: | | Bumbag UI | 👍 | | | :octocat: | | 易趣皮膚 | 👍 | | | :octocat: | | 謎無界 | 👍 | | | :octocat: | | CA Technologies 礦物 UI | 👍 | | | :octocat: | | 卡片二進制設計 | 👍 | 👍 | 👍 | :octocat: | | CBRE 塊 | 👍 | 👍 | | | | 雪松 | 👍 | | 👍 | :octocat: | | censhare禪 | 👍 | 👍 | | | | 脈輪用戶界面 | 👍 | | | :octocat: | | Cloudflare | 👍 | | | :octocat: | | 波士頓艦隊城市 | 👍 | 👍 | | :octocat: | | 合作設計手冊 | 👍 | 👍 | 👍 | :octocat: | | 內容形式 36 | 👍 | 👍 | 👍 | :octocat: | | 【迪卡儂設計系統-維他命】(https://decathlon.design/) | 👍 | | 👍 | :octocat: | | Decentraland 用戶界面 | 👍 | | | :octocat: | | 二重唱 | 👍 | | 👍 | | | 多鄰國 | | 👍 | | | | ENGIE流體設計系統 | 👍 | | 👍 | | | 愛沙尼亞國家設計指南 | 👍 | 👍 | 👍 | | | 【彈性UI框架】(https://elastic.github.io/eui/) | 👍 | 👍 | 👍 | :octocat: | | 長青 | 👍 | | | :octocat: | | Figma UI 組件 | 👍 | | | :octocat: | | 金融時報摺紙 | 👍 | | | :octocat: | | Finastra 設計系統 | 👍 | | 👍 | :octocat: | | 芬蘭工具箱 | | 👍 | 👍 | | | 【火狐光子設計系統】(https://design.firefox.com/photon) | 👍 | 👍 | 👍 | :octocat: | | 魚缸設計系統 | 👍 | 👍 | 👍 | :octocat: | | Flame Design System Santander | 👍 | 👍 | 👍 | | | 【大堂設計系統】(https://design.foyer.lu/) | 👍 | | 👍 | :close_lock_with_key: | | FutureLearn 模式庫 | 👍 | | | | | 基金會 | 👍 | 👍 | 👍 | :octocat: | | GitHub 入門 | 👍 | | 👍 | :octocat: | | GitLab 設計系統-睡衣 | 👍 | 👍 | 👍 | :fox_face: | | 谷歌材料設計 | 👍 | 👍 | 👍 | :octocat: | | GOV.UK 設計系統 | 👍 | | | :octocat: | | 體操瑜伽 | 👍 | 👍 | | :octocat: | | Halstack | 👍 | | 👍 | :octocat: | | 幫助偵察員 | 👍 | 👍 | | :octocat: | | Heroku Purple3 | 👍 | | | | | 惠普索環 | 👍 | | | :octocat: | | HubSpot 畫布 | 👍 | 👍 | | :octocat: | | Hudl 設計系統 | 👍 | 👍 | | | | IBM Carbon | 👍 | 👍 | 👍 | :octocat: | | IBM 設計語言 | 👍 | 👍 | | | | IBM 北極星 | 👍 | 👍 | | | | 直覺和諧 | 👍 | 👍 | 👍 | | | JetBrains Ring UI | 👍 | | | :octocat: | | 卡洛用戶界面 | 👍 | | | :octocat: | | Kiwi.com 軌道 | 👍 | | 👍 | :octocat: | | Kontur | 👍 | | 👍 | :octocat: | | 緯度 | 👍 | 👍 | 👍 | :octocat: | | 詞典 | 👍 | 👍 | | | | 孤獨星球里佐 | 👍 | | | :octocat: | | 【響亮十倍手冊】(https://www.louderthanten.com/manual) | 👍 | 👍 | | | | Lost My Name 設計系統 | 👍 | | | | | Mailchimp 內容風格指南 | | 👍 | | | | Mailchimp 模式 | 👍 | | | | | Mantine | 👍 | | | :octocat: | | 漫威風格指南 | 👍 | | | | | Meetup Swarm | 👍 | 👍 | 👍 | :octocat: | | 網格設計系統 | 👍 | | 👍 | | | 中間層 CNVS | 👍 | | | :octocat: | | 微軟流利 | 👍 | | 👍 | :octocat: | | Mixpanel 設計系統 | 👍 | 👍 | | | | 【MongoDB設計系統】(http://mongodb.design) | 👍 | | 👍 | :octocat: | | Monzo 音調 | | 👍 | | | | 【晨星設計系統】(http://designsystem.morningstar.com/) | 👍 | 👍 | 👍 | | | Mozilla 協議 | 👍 | | | :octocat: | | NASA網頁設計系統 | 👍 | | | :octocat: | | NationBuilder 半徑 | 👍 | | | | | NHS.UK 服務手冊（測試版） | 👍 | 👍 | | | | Nordnet | 👍 | 👍 | | | | Nutanix 棱鏡 | 👍 | | | | | Okta Odyssey 設計系統 | 👍 | | 👍 | :octocat: | | Fluent UI | 👍 | 👍 | 👍 | :octocat: | | 模式 | 👍 | 👍 | | | | Oracle Alta UI | 👍 | | | | | Mail.ru 集團範式 | 👍 | 👍 | 👍 | | | Patternfly | 👍 | 👍 | 👍 | :octocat: | | Pearson UX 框架 | 👍 | 👍 | 👍 | :octocat: | | Pharos：JSTOR 的設計系統 | 👍 | 👍 | | :octocat: | | Pinterest 格式塔 | 👍 | | | :octocat: | | 關鍵 | 👍 | | | :octocat: | | Pluralsight 設計系統 | 👍 | | | :octocat: | | Predix 設計系統 | 👍 | 👍 | 👍 | | | Priceline 設計系統 | 👍 | 👍 | | :octocat: | | 【脈衝設計系統】(https://pulse.heartbeat.ua/) | 👍 | 👍 | 👍 | :octocat: | | 推桿變色龍 | 👍 | | | :octocat: | | 基數 | 👍 | | | :octocat: | | 漫步者 | 👍 | | | :octocat: | | 再現 | 👍 | | | :octocat: | | Salesforce Lightning 設計系統 | 👍 | 👍 | 👍 | :octocat: | | SAP Fiori | 👍 | | | | | SAP 基礎 | 👍 | | | :octocat: | | SAP OpenUI | 👍 | | | :octocat: | | 種子 | 👍 | 👍 | 👍 | | | SEEK 風格指南 | 👍 | | | :octocat: | | 半設計 | 👍 | | 👍 | :octocat: | | Semrush 星際設計系統 | 👍 | | 👍 | :octocat: | | Shopify Polaris | 👍 | 👍 | 👍 | :octocat: | | 新加坡政府設計系統 | 👍 | 👍 | 👍 | :octocat: | | 堆棧 – 堆棧溢出 | 👍 | 👍 | | :octocat: | | 【星巴克風格指南】(https://www.starbucks.com/static/reference/styleguide/) | 👍 | | | | | 天空工具包 | 👍 | | | :octocat: | | 【墨爾本大學設計系統】(https://web.unimelb.edu.au/) | 👍 | | | :octocat: | | Teambition 清晰設計 | 👍 | | | | | Telefónica Mística | 👍 | | 👍 | :octocat: | | 指紋 | 👍 | | | :octocat: | | Tizen CircularUI | 👍 | | 👍 | :octocat: | | Twilio 粘貼 | 👍 | 👍 | 👍 | :octocat: | | Uber 的基礎網絡 | 👍 | | | :octocat: | | Ubuntu Vanilla 框架 | 👍 | 👍 | 👍 | :octocat: | | USPTO UI 設計庫 | 👍 | | 👍 | :octocat: | | uSwitch風格指南 | 👍 | 👍 | | :octocat: | | 美國網頁設計標準 | 👍 | 👍 | 👍 | :octocat: | | 美國CMS.gov設計系統 | 👍 | | | | | 【Vimeo設計系統】(https://vimeo.github.io/iris/) | 👍 | | | :octocat: | | VMware Clarity 設計系統 | 👍 | 👍 | 👍 | :octocat: | | VTEX 風格指南 | 👍 | | 👍 | :octocat: | | 【Vue設計系統】(https://vueds.com/) | 👍 | | | :octocat: | | WeWork 等離子 | 👍 | | | | | Ray by WeWork | 👍 | | | :octocat: | | 歡迎界面 | 👍 | | | :octocat: | | 西米德蘭茲網絡設計系統 | 👍 | 👍 | | :octocat: | | Vercel | 👍 | | | | | 工作日畫布 | 👍 | 👍 | | :octocat: | | Yelp 風格指南 | 👍 | 👍 | | | | Zendesk 花園 | 👍 | | | :octocat: |
*標記為開源的項目可能並不總是開放使用。在使用這些項目之前，請務必檢查它們的許可證。
儘管“設計系統”、“用戶界面庫”和“模式庫”是不同的東西，但它們經常可以互換使用。此列表包含所有三個。
封面圖標：來自 Noun Project 的 Andrejs Kirma 的“太陽系”
