mcpField
D
design-systems

design-systems

github.com/dralgorhythm设计与 UI12960 次安装14 周前更新
代码仓库

关于 design-systems

面向使用可复用 UI 组件构建一致应用的设计系统技能，涵盖原子化组件层级、设计令牌、组件 API 和文档实践。

主要功能

  1. 01按原子设计组织组件
  2. 02定义可复用设计令牌
  3. 03描述组件 API
  4. 04记录用法与无障碍要求

适用场景

  1. 01规划组件库层级
  2. 02规范共享颜色和组件变体
  3. 03编写组件属性与用法指南

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill design-systems

安装后在 Claude Code 中输入/design-systems确认已加载。

详细介绍

设计系统

什么是设计系统？

一组可重复使用的组件，由明确的标准指导，可组合起来构建应用程序。

组件

原子设计

原子：基本构建模块

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

分子：简单组合

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

有机体：复杂组件

  • 页眉、侧边栏、卡片

模板：页面布局

  • 仪表板、设置页面

页面：具体实例

  • 用户仪表板、管理员设置

设计令牌

{
  "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"
  }
}

组件 API

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

文档

每个组件都应记录：

  • 用法：何时使用
  • 属性：可用选项
  • 示例：常见模式
  • 无障碍性：无障碍方面的注意事项
  • 应做/不应做：最佳实践

资源

评论

支持 Markdown