前端设计系统

一个用于生产级用户界面设计的技能。通过清晰的设计令牌、布局规则、动效指南和可访问性检查，支持一致、可扩展的前端开发。

何时使用此技能

• 需要生产质量的用户界面：根据提示生成高质量用户界面
• 一致的设计语言：在多个屏幕间保持统一的视觉语言
• 排版/布局/动效指导：系统化的设计系统

操作说明

步骤 1：定义设计令牌

// design-tokens.ts
export const tokens = {
  // 颜色
  colors: {
    primary: {
      50: '#EFF6FF',
      100: '#DBEAFE',
      500: '#3B82F6',
      600: '#2563EB',
      700: '#1D4ED8',
    },
    secondary: {
      500: '#6366F1',
      600: '#4F46E5',
    },
    accent: '#F59E0B',
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444',
    background: {
      primary: '#FFFFFF',
      secondary: '#F9FAFB',
      tertiary: '#F3F4F6',
    },
    text: {
      primary: '#1F2937',
      secondary: '#6B7280',
      tertiary: '#9CA3AF',
      inverse: '#FFFFFF',
    },
  },

  // 排版
  typography: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace'],
    },
    fontSize: {
      xs: '0.75rem',     // 12px
      sm: '0.875rem',    // 14px
      base: '1rem',      // 16px
      lg: '1.125rem',    // 18px
      xl: '1.25rem',     // 20px
      '2xl': '1.5rem',   // 24px
      '3xl': '1.875rem', // 30px
      '4xl': '2.25rem',  // 36px
    },
    fontWeight: {
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
    },
    lineHeight: {
      tight: 1.25,
      normal: 1.5,
      relaxed: 1.75,
    },
  },

  // 间距（8px 基础单位）
  spacing: {
    0: '0',
    1: '0.25rem',  // 4px
    2: '0.5rem',   // 8px
    3: '0.75rem',  // 12px
    4: '1rem',     // 16px
    5: '1.25rem',  // 20px
    6: '1.5rem',   // 24px
    8: '2rem',     // 32px
    10: '2.5rem',  // 40px
    12: '3rem',    // 48px
    16: '4rem',    // 64px
  },

  // 边框圆角
  borderRadius: {
    none: '0',
    sm: '0.25rem',  // 4px
    md: '0.375rem', // 6px
    lg: '0.5rem',   // 8px
    xl: '0.75rem',  // 12px
    '2xl': '1rem',  // 16px
    full: '9999px',
  },

  // 阴影
  shadows: {
    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',
  },

  // 断点
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
  },
};

步骤 2：定义布局 + 用户体验目标

页面规格:
  类型: "着陆页" | "仪表盘" | "表单" | "博客" | "电商"

  层次结构:
    主要操作: [主要行动号召按钮]
    次要操作: [次要操作]
    信息架构:
      - 区块: 英雄区
        优先级: 1
      - 区块: 功能特点
        优先级: 2
      - 区块: 社会证明
        优先级: 3
      - 区块: 行动号召
        优先级: 4

  响应式:
    移动优先: true
    断点:
      - 移动端: "< 640px"
      - 平板: "640px - 1024px"
      - 桌面端: "> 1024px"
    堆叠行为: "移动端垂直堆叠，桌面端水平排列"

步骤 3：生成用户界面输出

按区块划分的组件结构：

// 英雄区
<section className="hero">
  <div className="container">
    <div className="hero-content">
      <Badge>新品发布</Badge>
      <Heading level={1}>
        主要标题在此
      </Heading>
      <Paragraph size="lg">
        用1-2句话解释价值主张的辅助文案。
      </Paragraph>
      <div className="cta-group">
        <Button variant="primary" size="lg">
          主要行动号召
        </Button>
        <Button variant="secondary" size="lg">
          次要行动号召
        </Button>
      </div>
    </div>
    <div className="hero-visual">
      <Image src="hero-image.png" alt="产品截图" />
    </div>
  </div>
</section>

动效/交互说明：

/* 动效指南 */
:root {
  /* 持续时间 */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* 缓动函数 */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* 悬停状态 */
.button {
  transition: all var(--duration-fast) var(--ease-in-out);
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 页面过渡 */
.page-enter {
  opacity: 0;
  transform: translateY(10px);
}
.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--duration-normal) var(--ease-out);
}

步骤 4：验证可访问性

## 可访问性检查清单

### 颜色对比度
- [ ] 文本/背景：至少 4.5：1（普通文本）
- [ ] 文本/背景：至少 3：1（大号文本）
- [ ] 用户界面组件：至少 3：1

### 键盘导航
- [ ] 所有交互元素都可聚焦
- [ ] 焦点顺序符合逻辑（从左到右，从上到下）
- [ ] 焦点指示器可见
- [ ] 存在跳过链接

### 屏幕阅读器
- [ ] 使用语义化的 HTML
- [ ] 图片有替代文本
- [ ] 表单标签已关联
- [ ] 必要时使用 ARIA 标签

### 文本与可读性
- [ ] 正文字体最小 16px
- [ ] 行高 ≥ 1.5
- [ ] 段落宽度 < 80 字符
- [ ] 图片中不包含文本

步骤 5：移交

## 设计移交包

### 组件分解
| 组件 | 属性 | 变体 |
|-----------|-------|----------|
| 按钮 | 大小、变体、禁用 | 主要、次要、幽灵 |
| 输入框 | 大小、错误、占位符 | 默认、错误、成功 |
| 卡片 | 内边距、阴影 | 凸起、扁平、轮廓 |

### CSS/令牌摘要
- 颜色：[调色板链接]
- 排版：[字体比例链接]
- 间距：8px 基础单位
- 断点：640/768/1024/1280px

### 文件
- Figma：[链接]
- 令牌：design-tokens.ts
- 组件：/src/components/

示例

示例 1：软件即服务着陆页

提示词：

设计一个软件即服务着陆页，使用现代排版、
柔和渐变和微妙的动效。
包含英雄区、功能特点、定价和行动号召。

预期输出：

• 带有视觉指导的区块布局
• 排版比例（H1：48px → 正文：16px）
• 包含渐变定义的调色板
• 动效/交互规格说明
• 带有属性的组件列表

示例 2：管理仪表盘

提示词：

创建一个简洁的管理仪表盘，包含数据卡片、
筛选器和表格。注重清晰度和快速浏览。

预期输出：

• 网格布局（12列）
• 组件分解（卡片、表格、筛选器）
• 视觉层次文档
• 响应式行为说明

示例 3：移动优先表单

提示词：

设计一个为移动端优化的多步骤表单。
包含进度指示器、验证状态和成功确认。

预期输出：

• 分步流程图
• 表单字段规格
• 错误/成功状态设计
• 触摸友好尺寸（最小 44px 点击区域）

最佳实践

1. 从内容层次开始：用户界面遵循内容优先级
2. 一致的间距尺度：基于 8px 的系统，无临时间距
3. 有意图的动效：仅对有意义的过渡进行动画
4. 在移动设备上测试：验证布局完整性
5. 可访问性优先：在设计阶段就考虑可访问性

常见陷阱

• 过度使用效果和渐变：保持简洁
• 排版比例不一致：使用定义的尺度
• 忽略可访问性：检查颜色对比度和键盘导航

故障排除

问题：用户界面感觉太通用

原因：未定义视觉方向或令牌
解决方案：提供样式参考和调色板

问题：布局在移动端错乱

原因：未定义响应式网格规则
解决方案：定义断点和堆叠行为

问题：组件不一致

原因：未使用设计令牌
解决方案：所有值都从令牌引用

输出格式

## 设计系统报告

### 已应用的令牌
- **颜色**：[主色、辅助色、强调色]
- **排版**：[字体族、比例]
- **间距**：[基础单位、比例]
- **阴影**：[级别]

### 区块布局
| 区块 | 网格 | 组件 |
|---------|------|------------|
| 英雄区 | 2列 | 徽章、标题、行动号召 |
| 功能特点 | 3列 | 卡片、图标 |
| 定价 | 3列 | 定价卡片 |
| 行动号召 | 1列 | 按钮 |

### 组件列表
- [ ] 按钮（主要、次要、幽灵）
- [ ] 卡片（凸起、扁平）
- [ ] 输入框（默认、错误）
- [ ] 徽章
- [ ] 图标

### 可访问性审核
- [x] 对比度通过
- [x] 焦点指示器可见
- [x] 语义化的 HTML

多代理工作流

验证与回顾

• 第一轮（协调者）：视觉方向、区块完整性
• 第二轮（分析师）：可访问性、层次结构审查
• 第三轮（执行者）：移交清单验证

代理角色

元数据

版本

• 当前版本： 1.0.0
• 最后更新： 2026-01-21
• 兼容平台： Claude, ChatGPT, Gemini, Codex

相关技能

• 用户界面组件模式
• 响应式设计
• 网页可访问性
• 图像生成

标签

#frontend #design #ui #ux #typography #animation #design-tokens #accessibility