设计系统创建指南：构建跨团队一致的UI组件库与设计规范

design-system-creation by secondsky/claude-skills

73 周安装量

90 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/secondsky/claude-skills --skill design-system-creation

设计用户体验前端架构

🇨🇳中文介绍

设计系统创建

构建全面的设计系统，实现跨团队一致的 UI 开发。

设计系统层级

基础层 : 颜色、排版、间距、层级
组件层 : 按钮、输入框、卡片、导航
模式层 : 表单、布局、空状态

基础层 - 设计令牌

:root {
  /* Colors */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  /* Semantic colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

组件文档

## Button

### Anatomy
- Container (padding, background)
- Label (text)
- Icon (optional)

### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Subtle actions

### States
- Default, Hover, Active, Disabled, Loading

### Accessibility
- Role: button
- Keyboard: Enter/Space to activate
- Focus: Visible focus ring

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Design System Creation

Build comprehensive design systems for consistent UI development across teams.

Design System Layers

Foundation : Colors, typography, spacing, elevation
Components : Buttons, inputs, cards, navigation
Patterns : Forms, layouts, empty states

Foundation - Design Tokens

:root {
  /* Colors */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  /* Semantic colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

Component Documentation

## Button

### Anatomy
- Container (padding, background)
- Label (text)
- Icon (optional)

### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Subtle actions

### States
- Default, Hover, Active, Disabled, Loading

### Accessibility
- Role: button
- Keyboard: Enter/Space to activate
- Focus: Visible focus ring

Component Example (React)

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
}

function Button({ variant = 'primary', size = 'md', loading, disabled, children }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled || loading}
      aria-busy={loading}
    >
      {loading ? <Spinner /> : children}
    </button>
  );
}

Governance

Review Committee : Approves new components
Contribution Process : RFC → Review → Implementation
Versioning : Semantic versioning for releases
Deprecation : 3-month notice with migration guide

Best Practices

Start with foundational tokens
Document every component thoroughly
Ensure WCAG 2.1 AA compliance
Support dark mode from the start
Include usage guidelines with do/don't examples

Weekly Installs

Repository

secondsky/claude-skills

GitHub Stars

First Seen

Jan 23, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code63

gemini-cli59

codex58

cursor57

opencode56

github-copilot55