用途
ui-design 是一份面向前端开发的 UI/UX 最佳实践指南，目标是指导开发者构建无障碍、性能良好且用户友好的界面。它把设计规范整理为可检索的规则集，便于在具体开发任务中按需查阅。
主要能力
技能内容包含 42 条规则，分布在 8 个类别中，并按影响程度排序，每条规则都带有统一前缀以便识别和引用：
- 无障碍与 WCAG 合规（CRITICAL，前缀 access-）：语义化 HTML、键盘导航、可见焦点指示、图片替代文本、ARIA 标签、最小触控目标尺寸（24×24px）、标题层级。
- Core Web Vitals 优化（CRITICAL，前缀 cwv-）：优化 LCP 至 2.5s 以内、控制 CLS 低于 0.1、改善 INP 至 200ms 以内、使用 srcset 提供响应式图片、懒加载离屏图片与 iframe、内联关键 CSS 并延迟其余部分。
- 视觉层级与布局（HIGH，前缀 layout-）：建立清晰视觉层级、使用留白提升可读性、面向 F 型阅读行为设计、统一网格系统、每个任务上下文明确一个主要操作、通过邻近性分组相关元素。
- 响应式与移动优先设计（HIGH，前缀 resp-）：使用 min-width 查询实现移动优先、用 clamp() 实现流体排版、用容器查询处理组件、移动端触控目标 44×44px、正确配置 viewport meta 标签。
- 排版与字体加载（MEDIUM-HIGH，前缀 typo-）：使用 font-display 控制加载行为、预加载关键 Web 字体、约束行宽（45-75ch）、设置合适行高（1.5-1.7）、UI 元素使用系统字体栈。
- 颜色与对比度（MEDIUM，前缀 color-）：满足 WCAG 对比度要求（4.5:1）、不单靠颜色传达信息、通过 prefers-color-scheme 支持深色模式、设计令牌中使用语义化颜色名称。
- 表单与验证 UX（MEDIUM，前缀 form-）：字段失焦后进行内联验证、撰写可操作的错误消息、标签置于输入框上方、移动端使用正确的 HTML input 类型、使用正确属性启用浏览器自动填充。
- 动画与性能（LOW-MEDIUM，前缀 anim-）：仅对 GPU 加速属性做动画、谨慎使用 will-change 作为动画提示、尊重用户的减少动态效果偏好、使用合适的动画时长与缓动。
使用方式
针对匹配当前任务的每条规则，查阅 references/<rule-id>.md，其中说明了规则为何重要，并给出错误代码与正确代码的对比示例。技能本身未提供其他安装或集成命令。
适用场景
适合在以下场景中引用该指南：编写面向屏幕阅读器和语义化的 HTML 结构；编写响应式布局与视觉层级相关的 CSS；优化图片与字体以改善 Core Web Vitals；设计带验证与错误处理的表单；添加动画与交互元素。
限制
资料未提供该技能的安装命令、运行环境要求、收费或价格信息，也未提供每条规则的具体代码示例原文、平台限制或效果保证。这些内容暂未提供。