name: ui-design description: UI/UX和前端设计最佳实践指南（原前端设计）。此技能应用于编写、评审或设计前端代码时，以确保可访问性、性能和可用性。在涉及HTML结构、CSS样式、响应式布局、表单设计、动画或可访问性改进的任务时触发。
UI/UX最佳实践前端设计
全面的UI/UX和前端设计最佳实践指南。包含8个类别中的42条规则，按影响优先级排序，以指导可访问、高性能和用户友好的界面开发。
何时应用
在以下情况下参考这些指南：
- 为可访问性和语义结构HTML
- 编写CSS用于响应式布局和视觉层次
- 优化图像和字体以提升核心网页指标
- 设计具有适当验证和错误处理的表单
- 添加动画和交互元素
按优先级排序的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 可访问性与WCAG合规 | 关键 | access- |
| 2 | 核心网页指标优化 | 关键 | cwv- |
| 3 | 视觉层次与布局 | 高 | layout- |
| 4 | 响应式与移动优先设计 | 高 | resp- |
| 5 | 排版与字体加载 | 中高 | typo- |
| 6 | 颜色与对比度 | 中 | color- |
| 7 | 表单与验证用户体验 | 中 | form- |
| 8 | 动画与性能 | 低中 | anim- |
快速参考
1. 可访问性与WCAG合规（关键）
access-semantic-html- 为屏幕阅读器使用语义HTML元素access-keyboard-navigation- 确保完整的键盘导航access-focus-indicators- 提供可见的焦点指示器access-alt-text- 为图像提供有意义的替代文本access-aria-labels- 为图标控件使用ARIA标签access-target-size- 确保最小触摸目标大小（24×24像素）access-heading-hierarchy- 维护逻辑的标题层次结构
2. 核心网页指标优化（关键）
cwv-optimize-lcp- 优化最大内容绘制，使其低于2.5秒cwv-minimize-cls- 最小化累积布局偏移，使其低于0.1cwv-improve-inp- 改进交互到下一绘制，使其低于200毫秒cwv-responsive-images- 使用srcset提供响应式图像cwv-lazy-load-offscreen- 懒加载离屏图像和iframecwv-critical-css- 内联关键CSS并延迟其余部分
3. 视觉层次与布局（高）
layout-visual-hierarchy- 建立清晰的视觉层次layout-whitespace- 使用空白提高可读性layout-f-pattern- 为F型阅读行为设计layout-grid-system- 使用一致的网格系统layout-single-cta- 每个屏幕限制一个主要行动号召layout-proximity-grouping- 通过接近性分组相关元素
4. 响应式与移动优先设计（高）
resp-mobile-first- 以移动优先设计，使用最小宽度查询resp-fluid-typography- 使用clamp()实现流体排版resp-container-queries- 为组件使用容器查询resp-touch-targets- 为移动设备调整触摸目标大小（44×44像素）resp-viewport-meta- 正确配置视口meta标签
5. 排版与字体加载（中高）
typo-font-display- 使用font-display控制加载行为typo-preload-fonts- 预加载关键网络字体typo-readable-line-length- 约束行长（45-75字符）typo-line-height- 设置适当的行高（1.5-1.7）typo-system-font-stack- 为UI元素使用系统字体堆栈
6. 颜色与对比度（中）
color-contrast-ratio- 满足WCAG对比度要求（4.5:1）color-not-only-indicator- 切勿仅用颜色传达信息color-dark-mode- 使用prefers-color-scheme支持深色模式color-semantic-palette- 在设计令牌中使用语义颜色名称
7. 表单与验证用户体验（中）
form-inline-validation- 在字段失焦后使用内联验证form-error-messages- 编写可操作的错误消息form-labels-above- 将标签置于输入字段上方form-input-types- 为移动设备使用正确的HTML输入类型form-autocomplete- 使用正确属性启用浏览器自动完成
8. 动画与性能（低中）
anim-gpu-properties- 仅动画GPU加速属性anim-will-change- 谨慎使用will-change提供动画提示anim-reduced-motion- 尊重用户运动偏好anim-duration-easing- 使用适当的动画持续时间和缓动
如何使用
阅读单个参考文件以获取详细解释和代码示例：
- 章节定义 - 类别结构和影响级别
- 规则模板 - 添加新规则的模板
- 示例：access-semantic-html
完整编译文档
完整指南包含所有扩展规则：AGENTS.md