mcpField
U
ui-design

ui-design

github.com/pproenca设计与 UI220820 次安装11 周前更新
代码仓库

关于 ui-design

面向开发者与 AI Agent 的前端 UI/UX 最佳实践技能，帮助构建无障碍且高性能的界面。42 条分级规则涵盖无障碍、Web Vitals、响应式布局、表单和动画。

主要功能

  1. 01涵盖八类的 42 条规则
  2. 02无障碍与 WCAG 指引
  3. 03Core Web Vitals 优化
  4. 04响应式布局实践
  5. 05表单验证与动画

适用场景

  1. 01检查界面无障碍性
  2. 02提升前端性能
  3. 03构建移动优先的响应式布局
  4. 04设计无障碍表单

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pproenca/dot-skills --skill ui-design

安装后在 Claude Code 中输入/ui-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
access-alt-text.md
access-aria-labels.md
access-focus-indicators.md
access-heading-hierarchy.md
access-keyboard-navigation.md
access-semantic-html.md
access-target-size.md
anim-duration-easing.md
anim-gpu-properties.md
anim-reduced-motion.md
anim-will-change.md
color-contrast-ratio.md
color-dark-mode.md
color-not-only-indicator.md
color-semantic-palette.md
cwv-critical-css.md
cwv-improve-inp.md
cwv-lazy-load-offscreen.md
cwv-minimize-cls.md
cwv-optimize-lcp.md
cwv-responsive-images.md
form-autocomplete.md
form-error-messages.md
form-inline-validation.md
form-input-types.md

详细介绍

UI/UX 最佳实践：前端设计

全面的 UI/UX 和前端设计最佳实践指南。包含 8 个类别、42 条规则，并按影响程度排序，帮助打造无障碍、高性能且易于使用的界面。

适用场景

在以下情况下参考这些指南：

  • 构建 HTML 结构，确保无障碍性和语义化
  • 编写 CSS，实现响应式布局和视觉层次
  • 优化图片和字体，提升 Core Web Vitals 表现
  • 设计表单，确保验证和错误处理得当
  • 添加动画和交互元素

按优先级划分的规则类别

优先级类别影响程度前缀
1无障碍性与 WCAG 合规CRITICALaccess-
2Core Web Vitals 优化CRITICALcwv-
3视觉层次与布局HIGHlayout-
4响应式与移动优先设计HIGHresp-
5排版与字体加载MEDIUM-HIGHtypo-
6色彩与对比度MEDIUMcolor-
7表单与验证 UXMEDIUMform-
8动画与性能LOW-MEDIUManim-

快速参考

1. 无障碍性与 WCAG 合规（CRITICAL）
  • 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 - 保持标题层级逻辑清晰
2. Core Web Vitals 优化（CRITICAL）
  • 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 内联，并延迟加载其余部分
3. 视觉层次与布局（HIGH）
  • layout-visual-hierarchy - 建立清晰的视觉层次
  • layout-whitespace - 利用留白提升可读性
  • layout-f-pattern - 根据 F 型阅读习惯进行设计
  • layout-grid-system - 使用一致的网格系统
  • layout-single-cta - 每个屏幕仅设置一个主要 CTA
  • layout-proximity-grouping - 将相关元素就近分组
4. 响应式与移动优先设计（HIGH）
  • resp-mobile-first - 采用移动优先设计，并使用 min-width 查询
  • resp-fluid-typography - 使用 clamp() 实现流体排版
  • resp-container-queries - 使用容器查询适配组件
  • resp-touch-targets - 设置适合移动设备的触控目标尺寸（44×44px）
  • resp-viewport-meta - 正确配置 viewport meta 标签
5. 排版与字体加载（MEDIUM-HIGH）
  • 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 元素使用系统字体栈
6. 色彩与对比度（MEDIUM）
  • color-contrast-ratio - 满足 WCAG 对比度要求（4.5:1）
  • color-not-only-indicator - 切勿仅用颜色传达信息
  • color-dark-mode - 使用 prefers-color-scheme 支持深色模式
  • color-semantic-palette - 在设计令牌中使用语义化颜色名称
7. 表单与验证 UX（MEDIUM）
  • 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 - 使用合适的动画时长和缓动效果

使用方法

阅读各个参考文件，了解详细说明和代码示例：

完整汇编文档

查看包含所有完整规则的指南：AGENTS.md

评论

支持 Markdown