design-systems

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Systems

设计系统

What is a Design System?

什么是设计系统？

A collection of reusable components, guided by clear standards, that can be assembled to build applications.

设计系统是由遵循明确标准的可复用组件集合组成，可用于组装构建应用程序。

Components

组件

Atomic Design

Atoms: Basic building blocks

Buttons, inputs, labels, icons

Molecules: Simple combinations

Search bar (input + button)
Form field (label + input + error)

Organisms: Complex components

Header, sidebar, card

Templates: Page layouts

Dashboard, settings page

Pages: Specific instances

User dashboard, admin settings

Atoms: 基础构建模块

按钮、输入框、标签、图标

Molecules: 简单组合组件

搜索栏（输入框 + 按钮）
表单字段（标签 + 输入框 + 错误提示）

Organisms: 复杂组件

页头、侧边栏、卡片

Templates: 页面布局

仪表盘、设置页面

Pages: 具体实例

用户仪表盘、管理员设置页面

Design Tokens

json

{
  "color": {
    "primary": {
      "50": "#f0f9ff",
      "500": "#0ea5e9",
      "900": "#0c4a6e"
    },
    "neutral": {
      "100": "#f5f5f5",
      "900": "#171717"
    }
  },
  "spacing": {
    "1": "0.25rem",
    "2": "0.5rem",
    "4": "1rem",
    "8": "2rem"
  },
  "font": {
    "family": {
      "sans": "Inter, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "size": {
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem"
    }
  },
  "radius": {
    "sm": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem"
  }
}

json

{
  "color": {
    "primary": {
      "50": "#f0f9ff",
      "500": "#0ea5e9",
      "900": "#0c4a6e"
    },
    "neutral": {
      "100": "#f5f5f5",
      "900": "#171717"
    }
  },
  "spacing": {
    "1": "0.25rem",
    "2": "0.5rem",
    "4": "1rem",
    "8": "2rem"
  },
  "font": {
    "family": {
      "sans": "Inter, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "size": {
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem"
    }
  },
  "radius": {
    "sm": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem"
  }
}

Component API

typescript

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  children: ReactNode;
  onClick?: () => void;
}

typescript

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  children: ReactNode;
  onClick?: () => void;
}

Documentation

文档

Each component should document:

Usage: When to use
Props: Available options
Examples: Common patterns
Accessibility: A11y considerations
Do/Don't: Best practices

每个组件都应包含以下文档内容：

使用场景: 何时使用该组件
Props: 可用选项
示例: 常见使用模式
Accessibility（A11y）: 无障碍访问注意事项
Do/Don't: 最佳实践

Resources

资源

Design Framework Template

设计框架模板