Design Systems Index

设计系统外部链接索引

各公司 / 社区公开设计系统的外部链接导航索引，用于参考现成 DS 的设计令牌、组件与规范。

⚠️ 本 skill 是资源索引层：只收录链接与一句简介，不展开方法论。Token 架构、命名分层、跨平台落地的方法论见本地 design-system skill——两个 skill 各司其职，此处不重复。

如何使用（progressive disclosure）

本 SKILL.md 是调度索引层：5 个分类各列 2-3 条最经典条目，附"是什么 / 何时去读"。需要更长清单时，按指引读取对应 references/.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 — 设计资源（图标、字体、插画等）索引。