mcpField
U
ui-design

ui-design

github.com/pymodel设计与 UI40528 次安装4 周前更新
代码仓库

关于 ui-design

ui-design 是面向前端开发的 UI/UX 实践指南，供设计和实现界面时参考。它按影响优先级整理 8 类共 42 条规则，涉及无障碍、Core Web Vitals、响应式布局和表单体验。

主要功能

  1. 01涵盖 8 个设计类别
  2. 02提供 42 条规则
  3. 03聚焦无障碍与 WCAG
  4. 04包含 Core Web Vitals 优化
  5. 05指导响应式布局与表单体验

适用场景

  1. 01检查 HTML 语义和键盘导航
  2. 02优化图片及页面核心指标
  3. 03规划移动优先的响应式布局
  4. 04改进表单验证和错误提示

安装

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

$npx skills add https://github.com/pymodel/react-frontend-skills --skill ui-design

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

包含的文件

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

references/
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
form-labels-above.md
layout-f-pattern.md
layout-grid-system.md
layout-proximity-grouping.md
layout-single-cta.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表单与验证体验MEDIUMform-
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 - 将最大内容绘制（LCP）时间优化到 2.5s 以内
  • cwv-minimize-cls - 将累积布局偏移（CLS）控制在 0.1 以内
  • cwv-improve-inp - 将交互到下一次绘制（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 - 为每个任务场景设置清晰的主要操作
  • 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 元标签
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. 表单与验证体验（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 - 使用合适的动画时长和缓动效果

使用方法

对于上述与任务匹配的每条规则，阅读 references/<rule-id>.md：了解其重要性，然后查看错误与正确的代码。

评论

支持 Markdown