mcpField
V
visual-design-foundations

visual-design-foundations

github.com/wshobson设计与 UI41.9k13.8k 次安装2 周前更新
代码仓库

关于 visual-design-foundations

面向设计师和开发者的视觉系统设计技能，适用于创建或审查设计规范。内容涵盖字体、颜色、间距和图标，并提供无障碍、设计令牌与主题设计指南。

主要功能

  1. 01字体层级与搭配
  2. 02间距和尺寸系统
  3. 03语义化颜色令牌
  4. 04WCAG 对比度指南
  5. 05图标尺寸与组件
  6. 06暗色模式与主题

适用场景

  1. 01为项目定义设计令牌
  2. 02构建无障碍配色方案
  3. 03改善可读性和视觉层级
  4. 04审查视觉一致性

安装

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

$npx skills add https://github.com/wshobson/agents --skill visual-design-foundations

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
color-systems.md
spacing-iconography.md
typography-systems.md

详细介绍

视觉设计基础

使用字体排印、色彩、间距和图标设计的基础知识，构建统一且易于访问的视觉系统。

何时使用此技能

  • 为新项目建立设计令牌
  • 创建或完善间距与尺寸系统
  • 选择和搭配字体
  • 构建易于访问的调色板
  • 设计图标系统和视觉资产
  • 改善视觉层次和可读性
  • 审查设计以确保视觉一致性
  • 实现深色模式或主题化

核心系统

1. 字体排印比例

模块化比例（基于比率的尺寸设定）：

:root {
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
}

行高指南：

文本类型行高
标题1.1 - 1.3
正文文本1.5 - 1.7
UI 标签1.2 - 1.4
2. 间距系统

8 点网格（行业标准）：

:root {
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
}
3. 色彩系统

语义化颜色令牌：

:root {
  /* Brand */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e40af;

  /* Semantic */
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-error: #dc2626;
  --color-info: #0891b2;

  /* Neutral */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
}

快速开始：Tailwind 中的设计令牌

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      fontSize: {
        xs: ["0.75rem", { lineHeight: "1rem" }],
        sm: ["0.875rem", { lineHeight: "1.25rem" }],
        base: ["1rem", { lineHeight: "1.5rem" }],
        lg: ["1.125rem", { lineHeight: "1.75rem" }],
        xl: ["1.25rem", { lineHeight: "1.75rem" }],
        "2xl": ["1.5rem", { lineHeight: "2rem" }],
      },
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
        },
      },
      spacing: {
        // Extends default with custom values
        18: "4.5rem",
        88: "22rem",
      },
    },
  },
};

字体排印最佳实践

字体搭配

安全组合：

  • 标题：Inter / 正文：Inter（单一字体家族）
  • 标题：Playfair Display / 正文：Source Sans Pro（对比）
  • 标题：Space Grotesk / 正文：IBM Plex Sans（几何风格）
响应式字体排印
/* Fluid typography using clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
}

p {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem);
  line-height: 1.6;
  max-width: 65ch; /* Optimal reading width */
}
字体加载
/* Prevent layout shift */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 700;
}

色彩理论

对比度要求（WCAG）
元素最低比率
正文文本4.5:1 (AA)
大号文本（18px+）3:1 (AA)
UI 组件3:1 (AA)
增强7:1 (AAA)
深色模式策略
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}
色彩可访问性
// Check contrast programmatically
function getContrastRatio(foreground: string, background: string): number {
  const getLuminance = (hex: string) => {
    const rgb = hexToRgb(hex);
    const [r, g, b] = rgb.map((c) => {
      c = c / 255;
      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  };

  const l1 = getLuminance(foreground);
  const l2 = getLuminance(background);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);

  return (lighter + 0.05) / (darker + 0.05);
}

间距指南

组件间距
Card padding:      16-24px (--space-4 to --space-6)
Section gap:       32-64px (--space-8 to --space-16)
Form field gap:    16-24px (--space-4 to --space-6)
Button padding:    8-16px vertical, 16-24px horizontal
Icon-text gap:     8px (--space-2)
视觉节奏
/* Consistent vertical rhythm */
.prose > * + * {
  margin-top: var(--space-4);
}

.prose > h2 + * {
  margin-top: var(--space-2);
}

.prose > * + h2 {
  margin-top: var(--space-8);
}

图标设计

图标尺寸系统
:root {
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
}
图标组件
interface IconProps {
  name: string;
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  className?: string;
}

const sizeMap = {
  xs: 12,
  sm: 16,
  md: 20,
  lg: 24,
  xl: 32,
};

export function Icon({ name, size = "md", className }: IconProps) {
  return (
    <svg
      width={sizeMap[size]}
      height={sizeMap[size]}
      className={cn("inline-block flex-shrink-0", className)}
      aria-hidden="true"
    >
      <use href={`/icons.svg#${name}`} />
    </svg>
  );
}

最佳实践

  1. 建立约束：限制选择以保持一致性
  2. 记录决策：创建一份持续更新的样式指南
  3. 测试可访问性：验证对比度、尺寸、触摸目标
  4. 使用语义化令牌：按用途命名，而非按外观
  5. 移动优先设计：从约束开始，再增加复杂度
  6. 保持垂直节奏：一致的间距创造和谐
  7. 限制字重：每个字体家族 2-3 种字重已足够

常见问题

  • 间距不一致：未使用已定义的尺度
  • 对比度不佳：未满足 WCAG 要求
  • 字体过载：字体家族或字重过多
  • 魔法数字：使用任意值而非令牌
  • 缺少状态：忘记悬停、聚焦、禁用状态
  • 没有深色模式规划：事后改造比预先规划更难

评论

支持 Markdown