mcpField
U
ui-design

ui-design

github.com/thongdn-it设计与 UI5123 次安装40 周前更新
代码仓库

关于 ui-design

面向前端开发者的 UI/UX 设计规范，包含 42 条按影响排序的规则，涵盖无障碍、性能、响应式布局、表单与动画。

主要功能

  1. 0142 条优先级设计规则
  2. 02无障碍与 WCAG 指南
  3. 03Core Web Vitals 优化
  4. 04响应式布局实践
  5. 05表单验证与动画建议

适用场景

  1. 01检查语义化 HTML 和键盘导航
  2. 02改进移动端布局与触控区域
  3. 03优化图片和字体加载
  4. 04设计表单验证与错误提示

安装

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

$npx skills add https://github.com/thongdn-it/react-agent-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