frontend-design

前端设计

这项技能使 Agent 能够设计和实现视觉精致、响应迅速、易于访问且易于维护的前端界面。Agent 使用设计系统——组件库、间距尺度、颜色令牌和字体排版尺度——生成一致的 UI 代码。它可以输出可用于生产环境的 HTML、CSS（包括 Tailwind CSS）以及框架组件（React、Vue、Svelte），并内置符合 WCAG 标准的无障碍功能和深色模式支持。

工作流

1. 分析需求和约束：确定目标平台（桌面、平板、移动设备）、使用的框架（React、Vue、纯 HTML）、样式方案（Tailwind、CSS Modules、styled-components），以及现有设计令牌或品牌指南。确定所需的关键页面或组件及其优先级。

2. 建立设计系统基础：在编写任何组件代码之前定义核心令牌。其中包括间距尺度（以 4px 为基准：4、8、12、16、24、32、48、64）、字号尺度（从 xs 到 4xl，并配有相应的行高）、包含语义令牌（primary、secondary、success、warning、error、neutral）的颜色调色板（同时提供浅色和深色变体），以及边框圆角和阴影令牌。这些令牌可确保每个组件在视觉上保持一致。

3. 构建带变体的组件：为每个组件实现明确定义的变体（尺寸、颜色、状态）。使用 props 或 CSS 类控制变体，而不是重复编写标记。包含所有交互状态：默认、悬停、焦点可见、激活、禁用。确保每个交互元素都有可见的焦点环，以便通过键盘导航。

4. 实现响应式布局：使用 CSS Grid 构建二维页面布局，使用 Flexbox 对齐一维组件。定义断点（sm：640px、md：768px、lg：1024px、xl：1280px），采用移动端优先的设计方式，并在更大的断点下逐步增加复杂度。测试确保不会出现水平滚动，并且触控设备上的点击目标至少达到 44x44px。

5. 从一开始就融入无障碍功能：在添加 ARIA 属性之前，先使用语义化 HTML 元素（nav、main、article、section、aside）。确保颜色对比度符合 WCAG 2.1 AA 标准（普通文本为 4.5:1，大号文本为 3:1）。仅在语义化 HTML 不足以表达时，才添加 aria-label、aria-describedby 和 role 属性。使用 Tab 和 Shift+Tab 测试键盘导航顺序。

6. 添加深色模式支持：使用 CSS 自定义属性方案或 Tailwind 的 dark: 变体实现深色模式。切换背景、文本和边框令牌，同时保持足够的对比度。避免使用纯黑（#000）背景，改用深灰色（#0f172a 或 #1e293b）以减轻眼睛疲劳。确保图像、阴影和层级效果能够相应调整。

用法

向 Agent 提供所需界面的描述，包括框架、样式方案和任何现有设计令牌。Agent 将生成组件代码，并包含响应式行为、无障碍属性和深色模式支持。

示例

示例 1：使用 Tailwind CSS 变体的 React 卡片组件

用户请求：“使用 Tailwind CSS 在 React 中创建一个可复用的 Card 组件。我需要默认、凸起和描边变体，并支持深色模式。”

Agent 响应：

function Card({ variant = 'default', children, className = '' }) {
  const base = 'rounded-lg p-6 transition-colors duration-200';

  const variants = {
    default:
      'bg-white text-gray-900 dark:bg-slate-800 dark:text-gray-100',
    elevated:
      'bg-white text-gray-900 shadow-lg hover:shadow-xl dark:bg-slate-800 dark:text-gray-100 dark:shadow-slate-900/30',
    outlined:
      'bg-transparent text-gray-900 border border-gray-200 dark:text-gray-100 dark:border-slate-700',
  };

  return (
    <div className={`${base} ${variants[variant]} ${className}`}>
      {children}
    </div>
  );
}

function CardHeader({ title, subtitle }) {
  return (
    <div className="mb-4">
      <h3 className="text-lg font-semibold leading-tight">{title}</h3>
      {subtitle && (
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
          {subtitle}
        </p>
      )}
    </div>
  );
}

function CardFooter({ children }) {
  return (
    <div className="mt-6 flex items-center gap-3 pt-4 border-t border-gray-100 dark:border-slate-700">
      {children}
    </div>
  );
}

组件用法：

<Card variant="elevated">
  <CardHeader title="Monthly Revenue" subtitle="Jan 2026" />
  <p className="text-3xl font-bold">$48,250</p>
  <CardFooter>
    <span className="text-sm text-green-600 dark:text-green-400">+12.5% from last month</span>
  </CardFooter>
</Card>

示例 2：使用 CSS Grid 构建响应式仪表盘布局

用户请求：“构建一个响应式仪表盘布局，包含侧边栏、顶部导航和主要内容区域。侧边栏应在移动设备上折叠。”

Agent 响应：

<div class="dashboard">
  <nav class="dashboard__topbar" role="navigation" aria-label="Primary">
    <button class="sidebar-toggle" aria-label="Toggle sidebar" aria-expanded="false">☰</button>
    <h1 class="topbar-title">Dashboard</h1>
    <div class="topbar-actions"></div>
  </nav>
  <aside class="dashboard__sidebar" role="navigation" aria-label="Sidebar">
    <ul role="list">
      <li><a href="/overview" aria-current="page">Overview</a></li>
      <li><a href="/analytics">Analytics</a></li>
      <li><a href="/settings">Settings</a></li>
    </ul>
  </aside>
  <main class="dashboard__content" id="main-content" role="main">
    
  </main>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
}
.dashboard__topbar { grid-column: 1 / -1; }
.dashboard__sidebar { display: none; }

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 240px 1fr;
    grid-template-rows: 56px 1fr;
  }
  .dashboard__sidebar { display: flex; flex-direction: column; }
  .sidebar-toggle { display: none; }
}

在宽度低于 768px 的屏幕上，侧边栏会隐藏，顶部栏中会显示汉堡菜单切换按钮。在平板和桌面设备上，侧边栏会一直显示，宽度为 240px，主要内容区域则填充剩余空间。

最佳实践

• 先使用语义化 HTML，再添加样式：<button> 总是优于添加样式的 <div onClick>。语义化元素自带键盘处理、屏幕阅读器播报和表单提交行为。
• 使用设计令牌，而非硬编码值：每种颜色、间距、字号和阴影都应引用令牌。这样，切换主题和深色模式只需替换令牌集，而不必在组件文件中逐一查找。
• 先面向移动设备设计，再逐步增强：为最小视口编写基础样式。在更大的断点处使用 min-width 媒体查询增加复杂度。这样可以避免桌面端假设破坏移动端布局。
• 发布前用键盘测试：仅使用 Tab、Enter、Space、Escape 和方向键浏览每个交互流程。如果不使用鼠标就无法完成任务，说明组件存在无障碍问题。
• 保持组件 API 精简：有 15 个属性的组件很难正确使用。优先采用组合（子元素、插槽），而不是配置（标志、模式字符串）。将大型组件拆分为更小、可组合的部分。
• 在真实设备上测量性能：在中端 Android 手机上通过限速连接进行测试。大型 DOM 树、未经优化的图片和过大的 JavaScript 包会导致性能受限的硬件上出现明显卡顿。

边缘情况

• 用户未提供设计令牌或品牌指南：默认使用中性方案：Inter 或 system-ui 字体栈、板岩灰中性色调，以及蓝色主强调色。这些选择专业且不突兀，也便于日后自定义。
• 不同实例的内容长度差异很大：使用 min-height 代替固定的 height，对卡片描述使用 text-overflow: ellipsis 和 -webkit-line-clamp，并分别用单个词和完整段落进行测试，以验证布局稳定性。
• 深色模式下的图片显得褪色或过亮：在深色模式下为照片应用轻微的 brightness(0.9) 滤镜。对于装饰性 SVG，使用 currentColor 或 CSS 自定义属性切换填充颜色。
• 需要支持从右到左（RTL）的语言：使用逻辑 CSS 属性（例如，用 margin-inline-start 代替 margin-left，用 padding-inline-end 代替 padding-right）。在根元素上设置 dir="rtl"，并确认布局能正确镜像。
• 目标框架未知，或用户想要纯 HTML：默认使用语义化 HTML 和原生 CSS 自定义属性。无需重构即可将输出用于任何框架。