web-design-guidelines

Web 设计指南

属于 Agent Skills™，由 googleadsagent.ai™ 提供

描述

Web 设计指南编入了 100 多条规则，涵盖无障碍、焦点状态、表单、动画、排版、图像、性能、导航、深色模式、触控目标和国际化。Agent 在生成 UI 代码、审查设计或构建新页面时会应用这些规则，默认生成无障碍、高性能且视觉风格一致的界面。

这些指南将 WCAG 2.2 AA 要求、特定平台的 HIG 规范以及经实证验证的 UX 模式整合为一套可直接执行的规则集。规则不会将无障碍视为事后补充或合规打勾项，而是将其融入生成流程：每个组件都可通过键盘导航，每张图像都有替代文本，每种颜色组合都符合对比度要求，每个交互元素都有可见的焦点指示器。

这些规则不仅涵盖无障碍，还涉及全面的设计质量：响应式排版缩放、动画偏好、表单验证模式、图像优化、导航层级、深色模式实现、适合触控的尺寸，以及 RTL/i18n 支持。最终生成的 UI 代码可用于生产环境，适用于各种场景下的所有用户。

使用场景

• 生成新的 UI 组件或页面
• 审查前端代码是否符合无障碍要求
• 实现深色模式或主题切换
• 构建带验证功能的表单
• 添加动画或过渡效果
• 优化图像和媒体
• 支持国际化或 RTL 布局

工作原理

graph TD
    A[UI Code Generation] --> B[Apply Rule Categories]
    B --> C[Accessibility: WCAG 2.2 AA]
    B --> D[Focus States: Visible + Logical]
    B --> E[Forms: Validation + Labels]
    B --> F[Animation: prefers-reduced-motion]
    B --> G[Typography: Fluid Scale]
    B --> H[Images: Responsive + Alt Text]
    B --> I[Performance: Lazy Load + CLS]
    B --> J[Navigation: Keyboard + Hierarchy]
    B --> K[Dark Mode: System Preference]
    B --> L[Touch: 44px Min Target]
    B --> M[i18n: RTL + Locale]
    C --> N[Validated UI Output]
    D --> N
    E --> N
    F --> N
    G --> N
    H --> N
    I --> N
    J --> N
    K --> N
    L --> N
    M --> N

输出前，每个生成的组件都会通过所有适用类别的规则检查。无障碍规则不可妥协；其他类别则根据组件类型应用。

实现

/* Focus: Always visible, high contrast */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Animation: Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Typography: Fluid responsive scale */
:root {
  --step-0: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --step-1: clamp(1.2rem, 0.61vw + 1.07rem, 1.58rem);
  --step-2: clamp(1.44rem, 0.98vw + 1.24rem, 2.11rem);
}

/* Dark mode: System preference + manual toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --fg: #ededed;
  }
}

/* Touch: Minimum 44px targets */
button, a, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

// Form: Accessible label + validation + error association
function EmailField({ error }: { error?: string }) {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Email address</label>
      <input
        id={id}
        type="email"
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        autoComplete="email"
      />
      {error && <p id={`${id}-error`} role="alert">{error}</p>}
    </div>
  );
}

最佳实践

• 发布前，使用纯键盘导航测试每个页面
• 普通文本的对比度至少保持在 4.5:1，大号文本至少为 3:1
• 优先使用语义化 HTML 元素，而不是直接使用 ARIA 属性
• 提供在浅色和深色背景下都适用的可见焦点指示器
• 为图像设置明确的 width 和 height，以防止 CLS
• 支持 prefers-reduced-motion、prefers-color-scheme 和 prefers-contrast

平台兼容性

平台	支持情况	备注
Cursor	完全支持	CSS + JSX 生成
VS Code	完全支持	axe-core 集成
Windsurf	完全支持	支持无障碍的输出
Claude Code	完全支持	HTML/CSS 生成
Cline	完全支持	基于规则的 UI 审查
aider	部分支持	设计上下文有限

相关技能

• 组合模式
• React 最佳实践
• 视图过渡
• 边缘渲染

关键词

web-design accessibility wcag dark-mode responsive typography forms focus-states touch-targets i18n animation performance

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License