UI/UX Best Practices Frontend Design 是一份综合性的 UI/UX 与前端设计最佳实践指南，包含 42 条规则，分为 8 个类别，并按影响程度划分优先级，用于指导可访问、高性能且用户友好的界面开发。
适用时机 在以下场景中可参考本指南：为可访问性与语义化组织 HTML；编写 CSS 以实现响应式布局与视觉层级；为 Core Web Vitals 优化图片与字体；设计带适当验证与错误处理的表单；添加动画与交互元素。
规则类别与优先级
- 可访问性与 WCAG 合规（关键，前缀 access-）
- Core Web Vitals 优化（关键，前缀 cwv-）
- 视觉层级与布局（高，前缀 layout-）
- 响应式与移动优先设计（高，前缀 resp-）
- 排版与字体加载（中高，前缀 typo-）
- 颜色与对比度（中，前缀 color-）
- 表单与验证体验（中，前缀 form-）
- 动画与性能（低中，前缀 anim-）
快速参考
-
可访问性与 WCAG 合规（关键） access-semantic-html：使用语义化 HTML 元素以适配屏幕阅读器 access-keyboard-navigation：确保完整的键盘导航 access-focus-indicators：提供可见的焦点指示器 access-alt-text：为图片提供有意义的替代文本 access-aria-labels：为仅图标控件使用 ARIA 标签 access-target-size：确保最小触控目标尺寸（24×24px） access-heading-hierarchy：保持逻辑清晰的标题层级
-
Core Web Vitals 优化（关键） cwv-optimize-lcp：优化最大内容绘制，控制在 2.5s 以内 cwv-minimize-cls：最小化累积布局偏移，控制在 0.1 以内 cwv-improve-inp：改善交互到下一次绘制，控制在 200ms 以内 cwv-responsive-images：通过 srcset 提供响应式图片 cwv-lazy-load-offscreen：延迟加载屏幕外的图片与 iframe cwv-critical-css：内联关键 CSS 并延迟其余样式
-
视觉层级与布局（高） layout-visual-hierarchy：建立清晰的视觉层级 layout-whitespace：利用留白提升可读性 layout-f-pattern：针对 F 型阅读行为进行设计 layout-grid-system：使用一致的网格系统 layout-single-cta：每个屏幕限制为一个主要 CTA layout-proximity-grouping：通过接近性对相关元素进行分组
-
响应式与移动优先设计（高） resp-mobile-first：采用移动优先设计，使用 min-width 查询 resp-fluid-typography：使用 clamp() 实现流式排版 resp-container-queries：为组件使用容器查询 resp-touch-targets：为移动端设置触控目标尺寸（44×44px） resp-viewport-meta：正确配置 viewport meta 标签
-
排版与字体加载（中高） typo-font-display：使用 font-display 控制加载行为 typo-preload-fonts：预加载关键 Web 字体 typo-readable-line-length：限制行长（45-75ch） typo-line-height：设置合适的行高（1.5-1.7） typo-system-font-stack：为 UI 元素使用系统字体栈
-
颜色与对比度（中） color-contrast-ratio：满足 WCAG 对比度要求（4.5:1） color-not-only-indicator：切勿仅用颜色传达信息 color-dark-mode：通过 prefers-color-scheme 支持深色模式 color-semantic-palette：在设计令牌中使用语义化颜色名称
-
表单与验证体验（中） form-inline-validation：在字段失焦后使用内联验证 form-error-messages：编写可操作的错误消息 form-labels-above：将标签置于输入字段上方 form-input-types：为移动端使用正确的 HTML 输入类型 form-autocomplete：通过正确属性启用浏览器自动填充
-
动画与性能（低中） anim-gpu-properties：仅对 GPU 加速属性做动画 anim-will-change：谨慎使用 will-change 提供动画提示 anim-reduced-motion：尊重用户的动态效果偏好 anim-duration-easing：使用合适的动画时长与缓动
如何使用 阅读各个参考文件以获取详细说明与代码示例：章节定义——类别结构与影响级别；规则模板——用于添加新规则的模板；示例：access-semantic-html。
完整汇编文档 如需包含所有规则展开的完整指南，请见 AGENTS.md。