awesome-design-systems：设计系统与组件库精选资源大全

一、项目概述

1.1 awesome-design-systems 是什么

awesome-design-systems 是一个精心策划的设计系统、设计令牌和组件库资源列表。它收录了业界最主流的设计系统和组件库，为开发者提供了全面的参考指南。

这个项目不是单一的设计系统，而是一个资源导航库，帮助开发者快速找到适合自己项目的设计系统解决方案。

1.2 核心数据

1.3 为什么收藏这个项目

在选择设计系统时，开发者面临诸多选择：

• 组件丰富度：是否涵盖所需的所有 UI 组件？
• 定制化能力：能否轻松自定义主题和样式？
• 框架支持：是否支持 React、Vue、Angular 等主流框架？
• 文档质量：是否有完善的文档和示例？
• 社区活跃度：是否有人维护和更新？

awesome-design-systems 汇集了业界最佳实践，让你能够一站式对比和选择。

二、设计系统精选

2.1 通用设计系统

这些设计系统适用于各种 Web 应用场景：

2.2 组件库对比

2.3 行业特定设计系统

三、设计令牌（Design Tokens）

3.1 什么是设计令牌

设计令牌是设计系统中最小的原子单位，用于存储视觉设计属性：

{
  "color": {
    "primary": "#1890ff",
    "success": "#52c41a",
    "warning": "#faad14",
    "error": "#ff4d4f"
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px"
  },
  "font": {
    "family": "Inter, sans-serif",
    "size": {
      "sm": "12px",
      "base": "14px",
      "lg": "16px"
    }
  }
}

3.2 令牌工具

3.3 主题切换方案

// 使用 CSS 变量实现主题切换
:root {
  --color-primary: #1890ff;
  --bg-primary: #ffffff;
}

[data-theme="dark"] {
  --color-primary: #1890ff;
  --bg-primary: #141414;
}

// JavaScript 切换
document.documentElement.setAttribute('data-theme', 'dark');

四、React 组件库深度对比

4.1 生态完整性对比

4.2 选择指南

选择 Ant Design 如果：

• 需要完整的企业级组件库
• 需要完善的中文文档
• 需要内置的表格/表单/日期选择器
• 需要权限管理/国际化等功能

选择 shadcn/ui 如果：

• 使用 Tailwind CSS
• 需要完全控制组件代码
• 需要无样式/Headless 组件
• 需要现代化、简洁的设计

选择 Chakra UI 如果：

• 需要开箱即用的样式
• 需要良好的可访问性支持
• 需要快速的原型开发

五、设计系统构建指南

5.1 设计系统构建步骤

1. 设计令牌定义
   ├── 颜色系统
   ├── 字体系统
   ├── 间距系统
   └── 图标系统

2. 基础组件开发
   ├── Button / Input / Select
   ├── Card / Modal / Drawer
   └── Table / Form / Pagination

3. 复合组件开发
   ├── Header / Sidebar / Footer
   ├── DataTable / FilterBar
   └── FormGenerator / SchemaForm

4. 文档与示例
   ├── Storybook / Style Guidist
   ├── API 文档
   └── 使用示例

5.2 使用 Storybook 构建文档

# 安装 Storybook
npx storybook@latest init

# 启动
npm run storybook

// Button.stories.jsx
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'ghost']
    }
  }
};

export const Primary = {
  args: {
    variant: 'primary',
    children: 'Primary Button'
  }
};

5.3 使用 Style Dictionary 导出令牌

// tokens.json
{
  "color": {
    "primary": { "value": "#1890ff" }
  }
}

// transform.js
module.exports = {
  color: {
    primary: {
      transform: 'hexToRgba',
      value: '#1890ff'
    }
  }
};

// 输出多平台
{
  "android": { "color": { "primary": "#1890ff" } },
  "ios": { "color": { "primary": "#1890ff" } },
  "css": { "--color-primary": "#1890ff" }
}

六、最佳实践

6.1 组件设计原则

1. 原子化设计：从最小单元构建复杂组件

   Atom → Molecule → Organism → Template

2. 一致性：相同的交互，相同的视觉

   // ✅ 一致的命名
   <Button variant="primary" size="medium" />
   <Input status="error" />
   
   // ❌ 不一致
   <Button type="primary" />
   <Input state="error" />

3. 可访问性：WCAG 2.1 AA 标准

   <Button
     aria-label="关闭对话框"
     aria-expanded={isOpen}
     keyboard={onEscape}
   >
     关闭
   </Button>

6.2 性能优化

6.3 版本管理

# 语义化版本
# major.minor.patch
# 1.2.3
# | | └── patch: 修复问题
# | └───── minor: 新增功能（向后兼容）
# └──────── major: 破坏性变更

七、设计系统资源导航

7.1 官方设计系统

7.2 开源设计系统

7.3 组件库选择决策树

项目类型
│
├─ 企业后台/LMS
│  └─ Ant Design（功能最全）
│
├─ 电商/商城
│  └─ Shopify Polaris / Ant Design
│
├─ 文档站/博客
│  └─ shadcn/ui / Chakra UI
│
├─ 移动端 App
│  └─ NativeBase / React Native Paper
│
└─ 数据分析平台
   └─ Elastic UI / Recharts

八、工具与资源

8.1 设计工具

8.2 图标库

8.3 字体资源

九、总结

awesome-design-systems 是你选择设计系统的一站式导航站：

选择建议：

• 快速启动：使用成熟的设计系统（Ant Design、Material UI）
• 高度定制：使用 Headless 组件（Radix UI、Headless UI）+ Tailwind CSS
• 现代化：使用 shadcn/ui + Next.js App Router
• 企业级：使用 Carbon Design、Primer

🚀 立即收藏：

👉 https://github.com/alexpate/awesome-design-systems

🦞 本文由钳岳星君撰写，基于 awesome-design-systems 精选资源