> 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-styleguides.md). # awesome-styleguides ## awesome-styleguides ![Awesome](https://raw.githubusercontent.com/sindresorhus/awesome/0c8952c98f9ac61b23148f9cb64abbcb34be7b16/media/logo.svg) ## 風格指南 \ \\ * [**AgnosticUI**](https://www.agnosticui.com) — 適用於 React、Vue 3、Svelte 和 Angular 的可訪問 CSS 組件原語。 * [**Apple 人機界面指南**](https://developer.apple.com/design/human-interface-guidelines/) — 有關設計與 Apple 平台無縫集成的應用程序的信息。 * [**Atlassian 設計**](https://atlassian.design) — 設計、開發和交付。 * [**Audi**](https://www.audi.com/ci/en/intro/brand-appearance.html) — 態度品牌外觀。 * [**Auth0**](https://auth0-cosmos.now.sh) — Cosmos 是一個用於構建 Auth0 產品的設計系統。 * [**Disqus**](https://disqus.com/pages/style-guide/) — 顏色、字體和 Disqus 標誌。 * [**Duo Lingo**](https://www.duolingo.com/design/) — Duo Lingo 設計。 * [**Elastic UI**](https://elastic.github.io/eui/#/) — 彈性 UI 框架 * [**Helpscout**](https://style.helpscout.com) — Helpscout 風格指南。 * [**IBM 設計**](https://www.ibm.com/design/language/resources/) — 幫助您更聰明地工作的工具，而不是更努力地工作。 * [**MailChimp**](http://ux.mailchimp.com/patterns) — 模式庫。 * [**MarvelApp**](https://marvelapp.com/styleguide/overview/introduction) — MarvelApp 設計系統。 * [**Material Design**](https://material.io/design) — 使用 Material Design 創建直觀而美觀的產品。 * [**Material UI**](https://material-ui.com) — 實現 Google 的 Material Design 的 React 組件。 * [**Microsoft Fluent Design**](https://www.microsoft.com/design/fluent/) — 無需從頭開始。 * [**Microsoft UWP 設計和 UI**](https://docs.microsoft.com/en-us/windows/uwp/design/) — 設計和編碼 Windows 應用程序 * [**Mozilla**](https://www.mozilla.org/en-US/styleguide/) — 風格指南。 * [**Nebular**](https://akveo.github.io/nebular/) — Angular 8：用戶界面工具包。 * [**Operational UI**](https://operational-ui.netlify.com) — 操作 UI 組件 * [**Pajamas**](https://design.gitlab.com) — GitLab 背後的資源、組件和設計指南。 * [**Pluralsight Design**](https://design-system.pluralsight.com) — Pluralsight 設計系統。 * [**Polaris**](https://polaris.shopify.com) — Shopify 的產品組件庫。 * [**Priceline One**](https://pricelinelabs.github.io) — Priceline 設計系統。 * [**Primer**](https://primer.style) — 為 GitHub 提供支持的 CSS 設計系統。 * [**Royal Canin**](http://developer.royalcanin.com) — Royal Canin 設計系統。 * [**Salesforce**](http://sfdc-styleguide.herokuapp.com) — 閃電設計系統。 * [**SAP Fiori 基礎知識**](https://sap.github.io/fundamental/) — 一個輕量級的表示層，可以與您選擇的 UI 框架一起使用。 * [**語義 UI**](https://semantic-ui.com) — 用戶界面是網絡的語言。 * [**星巴克模式庫**](https://www.starbucks.com/developer/pattern-library/) — app.starbucks.com 的構建塊 * [**Thumbprint**](https://thumbprint.design) — 在 Thumbtack 構建高質量、一致的用戶體驗的資產。 \ \\ ## 故事書 \ \\ * [**Algolia InstantSearch**](https://community.algolia.com/react-instantsearch/storybook/) — 閃電般快速、高度可配置的搜索。 * [**Appbase Maps**](https://opensource.appbase.io/playground/) — ReactiveMaps 和 ReactiveSearch 的故事書遊樂場。 * [**Artsy Force**](https://artsy.github.io/reaction/) — Artsy 的“Force”組件庫。 * [**Buffer Components**](https://bufferapp.github.io/buffer-components/) — Buffer UI React 組件的集合。 * [**Carbon Components**](http://react.carbondesignsystem.com) — IBM 的 Carbon 設計系統在 React 中實現。 * [**Cosmos**](https://auth0-cosmos.now.sh/sandbox/) — Auth0 產品的設計系統。 * [**Coursera**](https://building.coursera.org/coursera-ui/) — Coursera UI 組件庫。 * [**Fyndiq**](https://fyndiq.github.io/fyndiq-ui/) — Fyndiq UI 組件庫。 * [**Grafana UI**](https://github.com/grafana/grafana/tree/master/packages/grafana-ui) — Grafana UI 組件庫。 * [**Grommet**](https://storybook.grommet.io) — Reactjs 的樣式化組件。 * [**GumGum**](https://storybook.gumgum.com) — GumGum（計算機視覺公司）組件庫。 * [**Hack Oregon**](https://hackoregon.github.io/component-library/) — Hack Oregon 的官方組件庫和故事書。 * [**孤獨星球**](https://lonelyplanet.github.io/backpack-ui/) — 構建 Lonely Planet UI 體驗所需的所有工具。 * [**Lucid UI**](https://appnexus.github.io/lucid/) — AppNexus 的組件和圖表庫。 * [**MockingBot**](https://ibot.guide) — MockingBot UI 組件庫（ibot）。 * [**Quran.com**](https://quran.github.io/common-components/) — Quran.com、Quranicaudio.com 和 Salah.com 的組件庫。 * [**React 事件時間線**](https://rcdexta.github.io/react-event-timeline/) — 事件時間線組件。 * [**React Native Web**](https://necolas.github.io/react-native-web/storybook/) — React Native Web 的 Storybook 演示。 * [**Semantic-UI**](https://white-rabbit-japan.github.io/Semantic-UI-React-Storybook/) — Semantic-UI React 組件的故事書。 * [**Tachyons 組件**](https://www.tachyonstemplates.com/components/) — Tachyons 組件的可搜索目錄。 * [**TodoMVC with Specs**](https://thorjarhun.github.io/react-storybook-todolist/) — 帶有內置單元測試的 Todo 應用故事書。 * [**Trunx**](https://g14n.info/trunx) — 超級賽亞人反應組件，真棒布爾瑪的兒子。 * [**Uber React-Vis**](https://uber.github.io/react-vis/website/dist/storybook/index.html) — 一個可組合的圖表庫。 * [**Wix Style React**](https://github.com/wix/wix-style-react) — 符合 Wix 風格的組件。 \ \\ ## 資源 \ \\ * [**AirBnB 設計**](https://airbnb.design) * [**ArtLebedev**](https://www.artlebedev.com) \ \\ ## 視頻 \ \\ * [**System of Systems**](https://vimeo.com/262959101) — [*內森·柯蒂斯*](https://twitter.com/nathanacurtis) * [**當我們使用系統時**](https://vimeo.com/262959714) — [*卡里沙裡寧*](https://twitter.com/karrisaarinen?lang=en) \ \\ ## 比較器 \ \\ * [**Adele**](https://adele.uxpin.com) — [*UXPin*](https://www.uxpin.com) 提供的公開可用設計系統和模式庫的存儲庫。 * [**awesome-design-systems**](https://github.com/alexpate/awesome-design-systems) — 一組很棒的設計系統。 * [**Design System Repo**](https://designsystemsrepo.com/design-systems/) — 設計系統畫廊 * [**styleguides.io**](http://styleguides.io) — 網站風格指南資源。 \ \\ ## 工具 \ \\ * [**react-sketchapp**](https://github.com/airbnb/react-sketchapp) — 將 React 組件渲染到 Sketch --- # 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-styleguides.md?ask=&goal= ``` `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.