SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ui-ux-pro-max

ui-ux-pro-max

设计与创作

查看项目

更新于 10-16 02:04

技能介绍

用途

UI/UX Pro Max 是一套面向 Web 与移动应用的综合设计指南，定位为可搜索的设计智能数据库，提供基于优先级的推荐。它用于在涉及 UI 结构、视觉设计决策、交互模式或用户体验质量控制的任务中提供设计参考。

主要能力

该技能包含以下设计资源：

  • 50+ 种设计风格
  • 161 套配色方案
  • 57 组字体搭配
  • 161 种产品类型及推理规则
  • 99 条 UX 准则
  • 覆盖 10 个技术栈的 25 种图表类型

这些内容以可搜索数据库的形式组织，并支持基于优先级的推荐。

使用方式

该技能按 10 个优先级类别组织规则，供人或 AI 参考：按优先级 1→10 决定先关注哪一类规则；需要查询细节时使用 --domain <Domain>。资料说明脚本不读取该优先级表。

各优先级类别及其领域、关键检查项与反模式如下：

  1. 可访问性（CRITICAL，领域 ux）：对比度 4.5:1、Alt 文本、键盘导航、Aria 标签；避免移除焦点环、仅图标按钮无标签。
  2. 触控与交互（CRITICAL，领域 ux）：最小尺寸 44×44px、8px+ 间距、加载反馈；避免仅依赖悬停、瞬时状态变化（0ms）。
  3. 性能（HIGH，领域 ux）：WebP/AVIF、懒加载、预留空间（CLS < 0.1）；避免布局抖动、累积布局偏移。
  4. 风格选择（HIGH，领域 style、product）：匹配产品类型、一致性、SVG 图标（不用 emoji）；避免随机混用扁平与拟物、用 emoji 当图标。
  5. 布局与响应式（HIGH，领域 ux）：移动优先断点、viewport meta、无横向滚动；避免横向滚动、固定 px 容器宽度、禁用缩放。
  6. 排版与颜色（MEDIUM，领域 typography、color）：基础 16px、行高 1.5、语义化颜色令牌；避免正文小于 12px、灰底灰字、组件中使用原始 hex。
  7. 动画（MEDIUM，领域 ux）：时长 150–300ms、动效传达含义、空间连续性；避免纯装饰动画、动画化 width/height、无 reduced-motion 处理。
  8. 表单与反馈（MEDIUM，领域 ux）：可见标签、错误靠近字段、辅助文本、渐进式披露；避免仅用占位符作标签、错误只在顶部显示、一次性信息过载。
  9. 导航模式（HIGH，领域 ux）：可预测的返回、底部导航 ≤5、深度链接；避免导航过载、返回行为异常、无深度链接。
  10. 图表与数据（LOW，领域 chart）：图例、工具提示、可访问颜色；避免仅靠颜色传达含义。

适用场景

必须使用该技能的情况：

  • 设计新页面（落地页、仪表盘、后台、SaaS、移动应用）
  • 创建或重构 UI 组件（按钮、模态框、表单、表格、图表等）
  • 选择配色方案、排版系统、间距标准或布局系统
  • 审查 UI 代码的用户体验、可访问性或视觉一致性
  • 实现导航结构、动画或响应式行为
  • 做出产品级设计决策（风格、信息层级、品牌表达）
  • 改善界面的感知质量、清晰度或可用性

推荐使用该技能的情况：

  • UI 看起来“不够专业”但原因不明
  • 收到关于可用性或体验的反馈
  • 发布前的 UI 质量优化
  • 对齐跨平台设计（Web / iOS / Android）
  • 构建设计系统或可复用组件库

限制

以下情况不需要该技能：

  • 纯后端逻辑开发
  • 仅涉及 API 或数据库设计
  • 与界面无关的性能优化
  • 基础设施或 DevOps 工作
  • 非视觉脚本或自动化任务

判断标准：如果任务会改变某个功能的观感、感觉、动效或交互方式，则应使用该技能。

补充说明

资料还列出了各优先级类别下的详细检查条目，例如可访问性下的 color-contrast、focus-states、alt-text、aria-labels、keyboard-nav、form-labels、skip-links、heading-hierarchy、color-not-only、dynamic-type、reduced-motion、voiceover-sr、escape-routes、keyboard-shortcuts；触控与交互下的 touch-target-size、touch-spacing、hover-vs-tap、loading-buttons、error-feedback、cursor-pointer、gesture-conflicts、tap-delay、standard-gestures、system-gestures、press-feedback、haptic-feedback、gesture-alternative、safe-area-awareness、no-precision-required、swipe-clarity、drag-threshold；性能下的 image-optimization、image-dimension、font-loading、font-preload、critical-css、lazy-loading、bundle-splitting、third-party-scripts、reduce-reflows、content-jumping、lazy-load-below-fold、virtualize-lists、main-thread-budget、progressive-loading、input-latency、tap-feedback-speed、debounce-throttle、offline-support、network-fallback；风格选择下的 style-match、consistency、no-emoji-icons、color-palette-from-product、effects-match-style、platform-adaptive、state-clarity、elevation-consistent、dark-mode-pairing、icon-style-consistent、system-controls、blur-purpose、primary-action；布局与响应式下的 viewport-meta、mobile-first、breakpoint-consistency、readable-font-size、line-length-control、horizontal-scroll、spacing-scale、touch-density、container-width、z-index-management、fixed-element-offset、scroll-behavior、viewport-units、orientation-support、content-priority、visual-hierarchy；排版与颜色下的 line-height、line-length、font-pairing、font-scale、contrast-readability、text-styles-system、weight-hierarchy、color-semantic、color-dark-mode、color-accessible-pairs、color-not-decorative-only、truncation-strategy、letter-spacing、number-tabular、whitespace-balance；动画下的 duration-timing、transform-performance、loading-states、excessive-motion、easing、motion-meaning、state-transition、continuity、parallax-subtle、spring-physics、exit-faster-than-enter、stagger-sequence、shared-element-transition、interruptible、no-blocking-animation、fade-crossfade、scale-feedback、gesture-feedback、hierarchy-motion、motion-consistency、opacity-threshold、modal-motion、navigation-direction、layout-shift-avoid；表单与反馈下的 input-labels、error-placement、submit-feedback、required-indicators、empty-states、toast-dismiss、confirmation-dialogs、input-helper-text、disabled-states、progressive-disclosure、inline-validation、input-type-keyboard、password-toggle 等。这些条目为设计检查参考，具体实现细节以资料为准。