#design-tokens #component-library #react #design-systems

Design Systems Index

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.

Ezra Y.Finn@ezra-y

Install

openclaw skills install @ezra-y/design-systems-index

设计系统外部链接索引

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

⚠️ 本 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 份全读一遍：

你的诉求	去读
参考某家大公司的成熟 DS	`references/major-company-systems.md`
选 design tokens 工具链 / 对齐 W3C 规范	`references/design-tokens.md`
搭组件开发环境、文档站、pattern library	`references/pattern-libraries.md`
为 React Web 项目选可采用的组件库	`references/react-ds-libraries.md`
为 React Native 项目选 UI 工具包	`references/react-native-ds-libraries.md`

边界提示：想"怎么设计 token 架构"不在本索引，去本地 design-system skill；想"怎么用 React 写组件"去 react-best-practices，本索引只回答"有哪些现成 DS/库可参考或采用"。

路由示例（progressive disclosure 怎么走）

用户："帮我给企业后台选个 React 组件库"

定位分类 → 这是"React 设计系统库"类，不是 tokens / pattern library。

先看下文该类精选（Ant Design / MUI / Blueprint），多数情况已够回答。

要更多候选 → 读 references/react-ds-libraries.md；仍不够 → 跳 awesome 原目录。

选定后，落地实现细节交给 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 库的母目录。