name: design-systems-index description: >- External-link index of major companies' design systems (Material, Fluent, Carbon, Polaris, Atlassian, Lightning), design-token tools and specs, pattern-library tooling, and React/React Native design-system component libraries. Use this skill whenever the user wants to reference or adopt an existing design system, study a company's DS, look up design-token tooling, or evaluate React/RN component libraries — consult this before web-searching. Token-architecture methodology lives in the separate design-system skill; this is the link index only.

設計系統外部連結索引

各公司 / 社群公開設計系統的外部連結導航索引，用於參考現成 DS 的設計令牌、元件與規範。

來源於7w4.net。

⚠️ 本 skill 是資源索引層：只收錄連結與一句簡介，不展開方法論。Token 架構、命名分層、跨平臺落地的方法論見本地 design-system skill——兩個 skill 各司其職，此處不重複。

如何使用（progressive disclosure）

本 SKILL.md 是排程索引層：5 個分類各列 2-3 條最經典條目，附"是什麼 / 何時去讀"。需要更長清單時，按指引讀取對應 references/<category>.md（一層深，不再巢狀）。

先根據下方分類判斷你要的是哪一類，再按需讀對應 reference，避免一次性載入全部。

資料來源：klaufel/awesome-design-systems + jbranchaud/awesome-react-design-systems。

觸發示例：參考各大公司設計系統 / 找一份 React 元件庫選型 / design tokens 工具和規範 / 挑一個 pattern library 工具。

分類速查（先定位再下鑽）

判斷不清晰時先查這張表，再去對應檔案下鑽，避免把 5 份全讀一遍：

邊界提示：想"怎麼設計 token 架構"不在本索引，去本地 design-system skill；想"怎麼用 React 寫元件"去 react-best-practices，本索引只回答"有哪些現成 DS/庫可參考或採用"。

路由示例（progressive disclosure 怎麼走）

使用者："幫我給企業後臺選個 React 元件庫" 1. 定位分類 → 這是"React 設計系統庫"類，不是 tokens / pattern library。 2. 先看下文該類精選（Ant Design / MUI / Blueprint），多數情況已夠回答。 3. 要更多候選 → 讀 references/react-ds-libraries.md；仍不夠 → 跳 awesome 原目錄。 4. 選定後，落地實現細節交給 react-best-practices / frontend-design，不在本索引展開。

主要公司設計系統

是什麼：各大公司公開的完整設計系統（令牌 + 元件 + 規範 + 文件）。 何時去讀：要參考某家公司的 DS、挑選可借鑑的成熟體系、做設計語言競品調研時。

精選（最經典）： - Google Material Design - Google's design system for intuitive, beautiful products. - Microsoft Fluent UI - Microsoft's open-source cross-platform design system (web/Apple/Android). - IBM Carbon - IBM's open-source design system for products and experiences.

→ 完整列表見 references/major-company-systems.md（Polaris、Atlassian、Lightning、Primer、Pajamas、Photon、Atlaskit + 通用 DS 資源）。

設計 tokens 資源

是什麼：design tokens 的規範、生成、轉換與跨平臺同步工具。 何時去讀：要選 token 工具鏈、對齊 W3C 規範、從 Figma 抽取 token、做多端 token 分發時。

精選： - Design Tokens W3C Community Group - W3C community group defining a design tokens format spec. - Style Dictionary - Amazon's build system to define styles once and use them on any platform. - Theo - Salesforce's abstraction for transforming and formatting design tokens.

→ 完整列表見 references/design-tokens.md（DesignTokens.dev、Diez、Figmagic、Superposition、Validator、Awesome Design Tokens、Abstract Connect、Zeplin export 等）。

pattern library 資源

是什麼：元件隔離開發環境與模式庫編排工具（Storybook 類）。 何時去讀：要搭元件開發環境 / 文件站 / 原子設計工作流、選文件協作平臺時。

精選： - Storybook - Build UI components in isolation for React, Vue, Angular and more. - Pattern Lab - Build pattern-driven UIs using atomic design principles. - React Styleguidist - Isolated React component dev environment with a living style guide.

→ 完整列表見 references/pattern-libraries.md（Styled System、Stencil、Zeroheight、Backlight、Storybook DS、addons 清單等）。

React 設計系統庫

是什麼：可直接採用的 React 元件庫 / 企業級設計系統，開箱即用。 何時去讀：為 SaaS / 後臺 / dashboard 選 React 元件庫、評估企業級 DS 採用方案時。

精選： - Ant Design - Ant Financial - design system for enterprise applications (Nature & Determinacy). - Material UI - React components that implement Google's Material Design. - Blueprint - Palantir - React-based UI toolkit for the web.

→ 完整列表見 references/react-ds-libraries.md（Grommet、Garden、Backpack、Ring UI、Canvas、Atlaskit、cf-ui、Mineral UI、Spark、Swarm、Uniform、Lightning React 等 20+）。

React Native 設計系統庫

是什麼：React Native 跨平臺開箱即用 UI 工具包。 何時去讀：為 RN App 選成型元件庫、避免從零搭 UI 時。

精選： - React Native Elements - Cross-platform React Native UI toolkit. - React Native Paper - Material Design-compliant React Native components. - NativeBase - GeekyAnts - essential cross-platform UI components for React Native & Vue Native.

→ 完整列表見 references/react-native-ds-libraries.md（Shoutem UI、Teaset 等）。

awesome 總目錄指標

更全的 awesome 設計相關總目錄見 sindresorhus/awesome。本 skill 主要從以下兩份精煉：

• klaufel/awesome-design-systems — 主要公司 DS / tokens / pattern library 的母目錄。
• jbranchaud/awesome-react-design-systems — React / RN DS 庫的母目錄。

相關本地 skill

本索引只負責"有哪些現成 DS 可參考 / 採用"，方法論與實現細節交給下列本地 skill：

• design-system — token 架構、命名分層、跨平臺落地方法論（本索引的方法論後端）。
• react-native-skills — React Native 元件與樣式模式。
• react-best-practices / frontend-design — React 與前端實現、設計落地細節。
• design-assets-index — 設計資源（圖示、字型、插畫等）索引。

這個 Skill 質量不錯，內容實用。它彙集了 Google、Microsoft、IBM 等大公司的設計系統資料，還有 React 元件庫和各種工具推薦，分類清晰、查詢方便。文件裡對使用風險也有說明，用起來比較放心。不過有個小遺憾：SKILL.md 提到可以檢視更完整的資源列表，但這些檔案實際沒有提供，想深入瞭解時找不到。建議補充缺失內容以獲得更完整的體驗。整體上這是一個值得使用的設計系統參考資料。