ui-ux-pro-max

UI/UX Pro Max - 设计智囊

全套 Web 与 Mobile 应用设计指南。内置 50+ 种设计风格、161 种调色板、57 种字体搭配方案、161 种带推导规则的产品类型、99 条 UX 交互指南以及 25 种图表类型，覆盖 10 大主流技术栈。支持基于优先级的搜索与推荐数据库。

适用场景

当任务涉及 UI 结构、视觉设计决策、交互模式或用户体验质量控制 时，应当使用此 Skill。

必须使用

在以下场景下，必须调用此 Skill：

• 设计新页面（落地页 Landing Page、仪表盘 Dashboard、后台管理系统 Admin、SaaS、移动端 App）
• 创建或重构 UI 组件（按钮、弹窗 Modal、表单、表格、图表等）
• 选择配色方案、排版字体系统、间距规范或布局体系
• 审查 UI 代码的用户体验、无障碍访问 (accessibility) 或视觉一致性
• 实现导航结构、动画效果或响应式适配行为
• 做出产品层面的设计决策（风格类型、信息层级、品牌视觉表达）
• 提升界面的质感、视觉精细度或易用度

推荐使用

在以下场景下，推荐使用此 Skill：

• UI 看上去“不够专业”但又说不清具体问题出在哪
• 收到关于易用性或用户体验方面的反馈
• 上线前进行 UI 质量终极打磨与优化
• 对齐多端设计规范（Web / iOS / Android）
• 搭建设计系统 (Design System) 或可复用组件库

无需使用

在以下场景下，无需使用此 Skill：

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

判定标准：只要该任务会改变功能看起来如何、用起来感觉如何、动效如何或如何交互，就应该使用此 Skill。

规则分类（按优先级排序）

供人工/AI 参考：请按 1→10 的优先级决定优先关注哪个规则分类；必要时可使用 --domain <Domain> 查询具体细节。脚本不会读取此表格。

优先级	分类	影响等级	领域 (Domain)	关键检查项（必须具备）	反模式（避坑指南）
1	无障碍访问	极度关键	ux	对比度 4.5:1、Alt 文本、键盘导航、Aria-labels	移除焦点环 (focus rings)、无 Label 标签的纯图标按钮
2	触控与交互	极度关键	ux	最小尺寸 44×44px、8px+ 间距、加载态反馈	仅依赖 Hover 悬停、瞬时状态切换 (0ms)
3	性能	高	ux	WebP/AVIF、懒加载、预留布局空间 (CLS < 0.1)	布局抖动 (Layout thrashing)、累积布局偏移 (CLS)
4	风格选择	高	style, product	匹配产品类型、保持一致性、SVG 图标（不用 Emoji）	随机混搭扁平与拟物风、把 Emoji 当图标用
5	布局与响应式	高	ux	移动端优先断点、Viewport meta、无横向滚动条	产生横向滚动条、容器宽度写死 px、禁用缩放
6	排版与色彩	中	typography, color	基准 16px、行高 1.5、语义化颜色 Token	正文小字 < 12px、灰上加灰 (Gray-on-gray)、组件内硬编码 HEX 色值
7	动效	中	ux	时长 150–300ms、动效传递意图、空间连续性	纯装饰性无意义动效、对 width/height 做动画、忽略减弱动效设置 (reduced-motion)
8	表单与反馈	中	ux	显式 Label、字段就近报错、引导提示文案、渐进式呈现	仅用 Placeholder 当 Label、错误信息集中在顶部、一股脑展示过多内容
9	导航模式	高	ux	行为可预期的返回、底部导航 ≤5 个、深层链接 (Deep linking)	导航项过载、破坏返回键逻辑、缺少深层链接支持
10	图表与数据	低	chart	图例说明、Tooltip 浮层、无障碍配色	仅靠颜色传递核心数据含义

快速参考手册

1. 无障碍访问 (CRITICAL)

• color-contrast - 普通文本对比度至少 4.5:1（大文本 3:1）；遵循 Material Design 标准
• focus-states - 交互元素保留清晰可见的焦点环（2–4px；参考 Apple HIG, MD）
• alt-text - 为有实际意义的图片提供描述性 alt 文本
• aria-labels - 纯图标按钮需补全 aria-label；原生应用提供 accessibilityLabel (Apple HIG)
• keyboard-nav - Tab 聚焦顺序须与视觉展示顺序一致；提供完整的键盘支持 (Apple HIG)
• form-labels - 使用关联了 for 属性的 label 标签
• skip-links - 为键盘用户提供“跳过至主要内容”的快捷链接
• heading-hierarchy - 严格按 h1→h6 顺序设置标题层级，切勿跨级
• color-not-only - 不要单靠颜色传递信息（需搭配图标或文字提示）
• dynamic-type - 支持系统级字体缩放；避免随字体变大而出现截断 (Apple Dynamic Type, MD)
• reduced-motion - 尊重 prefers-reduced-motion 设置；当用户开启时减少或关闭动画 (Apple Reduced Motion API, MD)
• voiceover-sr - 设置具备明确含义的 accessibilityLabel/accessibilityHint；为 VoiceOver/屏幕阅读器提供合理的朗读顺序 (Apple HIG, MD)
• escape-routes - 在 Modal 弹窗和多步骤流程中提供取消/返回入口 (Apple HIG)
• keyboard-shortcuts - 保留系统及无障碍默认快捷键；为拖拽操作提供键盘替代方案 (Apple HIG)

2. 触控与交互 (CRITICAL)

• touch-target-size - 最小触控区域 44×44pt (Apple) / 48×48dp (Material)；必要时可将热区扩大至视觉边界之外
• touch-spacing - 触控目标之间至少保持 8px/8dp 的间距 (Apple HIG, MD)
• hover-vs-tap - 核心交互使用点击/轻触 (tap)；不要单独依赖 hover 悬停效果
• loading-buttons - 异步操作期间禁用按钮；显示 loading 菊花图或进度条
• error-feedback - 在发生问题的字段附近就近显示清晰的报错信息
• cursor-pointer - Web 端为可点击元素加上 cursor-pointer 属性
• gesture-conflicts - 主内容区域避免左右滑动手势；优先采用垂直滚动
• tap-delay - 使用 touch-action: manipulation 消除 Web 端 300ms 点击延迟
• standard-gestures - 保持平台标准手势的互通一致，切勿重定义（如滑动返回、双指缩放）(Apple HIG)
• system-gestures - 切勿阻塞系统级手势（控制中心、边缘滑动返回等）(Apple HIG)
• press-feedback - 按下时提供明确视觉反馈（水波纹/高亮；MD 状态层 state layers）
• haptic-feedback - 在确认操作和重要动作时加入触觉反馈；切忌滥用 (Apple HIG)
• gesture-alternative - 不要依赖“仅手势操作”；关键功能务必提供可视化按钮控件
• safe-area-awareness - 核心触控按键避开刘海屏、灵动岛、底部手势条及屏幕边缘
• no-precision-required - 避免要求用户精准点击极小图标或极细边缘
• swipe-clarity - 滑动手势操作必须提供明确的视觉预告或提示（箭头指示、Label 说明、操作引导）
• drag-threshold - 在启动拖拽之前设置位移阈值，避免误触发拖拽

3. 性能 (HIGH)

• image-optimization - 优先采用 WebP/AVIF 格式、响应式图片 (srcset/sizes)，非核心资源设置懒加载
• image-dimension - 显式声明 width/height 或使用 aspect-ratio 预防布局偏移 (Core Web Vitals: CLS)
• font-loading - 采用 font-display: swap/optional 避免文字不可见 (FOIT)；预留空间防止布局抖动 (MD)
• font-preload - 仅预加载最关键字体；切忌过度预加载每一个变体
• critical-css - 首屏临界 CSS 优先加载（内联关键 CSS 或提前加载样式表）
• lazy-loading - 对非首屏组件实施按需懒加载（动态导入 / 路由级拆分）
• bundle-splitting - 依据路由/功能模块拆分代码（React Suspense / Next.js dynamic），降低首屏加载时间与 TTI
• third-party-scripts - 第三方脚本采用 async/defer 异步加载；定期审计并剔除无用脚本 (MD)
• reduce-reflows - 避免频繁读取/写入布局；对 DOM 的读写操作进行批量处理
• content-jumping - 为异步加载的内容预留占位空间，杜绝页面跳动 (Core Web Vitals: CLS)
• lazy-load-below-fold - 首屏线以下的图片及大文件媒体一律配置 loading="lazy"
• virtualize-lists - 数据超过 50 项的列表使用虚拟滚动 (Virtualize)，提升内存利用效率与流畅度
• main-thread-budget - 每帧耗时控制在 ~16ms 以内（保 60fps）；将重度计算移出主线程 (HIG, MD)
• progressive-loading - 耗时超过 1 秒的操作使用骨架屏 (Skeleton Screen) / 闪烁占位图 (Shimmer) 代替耗时等待转圈 (Apple HIG)
• input-latency - 将点击/滚动的输入响应延迟压至 ~100ms 以内（Material 响应度标准）
• tap-feedback-speed - 点击后在 100ms 内给出视觉反馈 (Apple HIG)
• debounce-throttle - 高频事件（scroll, resize, input）必须做防抖 (debounce) 或节流 (throttle) 处理
• offline-support - 提供离线状态提示及基础的 fallback 降级方案（PWA / 移动端）
• network-fallback - 弱网环境下提供优雅降级模式（加载低清图、减少复杂动画）

4. 风格选择 (HIGH)

• style-match - 风格须契合产品类型（可使用 --design-system 获取推荐建议）
• consistency - 跨页面保持设计风格贯穿一致
• no-emoji-icons - 统一采用 SVG 图标（如 Heroicons、Lucide），不要直接把 Emoji 当图标
• color-palette-from-product - 依据产品属性与行业特性挑选配色方案（查询 --domain color）
• effects-match-style - 阴影、模糊、圆角须与选定的风格对齐（如玻璃拟态 / 扁平 / 黏土拟态等）
• platform-adaptive - 尊重各平台的惯用设计（iOS HIG vs Material）：包含导航、控件、排版与动效
• state-clarity - 让 hover/pressed/disabled 状态在保持风格统一的前提下具备清晰的视觉区分度（Material state layers）
• elevation-consistent - 卡片、抽屉 Sheet、Modal 弹窗建立一套统一的层级/阴影阶梯规范；切忌乱写阴影值
• dark-mode-pairing - 深浅色两种模式同步设计，确保品牌感、对比度及整体风格高度契合
• icon-style-consistent - 全局统一使用一套图标集/视觉语言（笔画粗细、圆角半径风格一致）
• system-controls - 优先使用原生/系统控件而非全盘自定义；仅在品牌识别度有硬性要求时进行定制 (Apple HIG)
• blur-purpose - 背景模糊 (blur) 用于表现层级遮罩与关闭暗示（Modal、Sheet），而非纯粹当做装饰 (Apple HIG)
• primary-action - 每个屏幕界面只保留一个核心主按钮 (CTA)；次要操作在视觉权重上保持从属关系 (Apple HIG)

5. 布局与响应式 (HIGH)

• viewport-meta - width=device-width initial-scale=1（切勿禁用用户手动缩放）
• mobile-first - 坚持移动端优先 (Mobile-first) 的设计思想，再逐渐适配至平板与桌面端
• breakpoint-consistency - 采用系统化的响应式断点（如 375 / 768 / 1024 / 1440）
• readable-font-size - 移动端正文小字不低于 16px（防止 iOS 自动放大页面）
• line-length-control - 移动端每行控制在 35–60 个字符；桌面端控制在 60–75 个字符
• horizontal-scroll - 移动端禁止出现横向滚动条；确保内容完全契合视口宽度
• spacing-scale - 使用 4pt/8dp 增量倍数间距系统 (Material Design)
• touch-density - 触控组件间距舒展得当：不显得拥挤，也不容易导致误触
• container-width - 桌面端保持统一的最大容器宽度（如 max-w-6xl / 7xl）
• z-index-management - 统一规划 z-index 层级规范（如 0 / 10 / 20 / 40 / 100 / 1000）
• fixed-element-offset - 悬浮/固定定位的导航栏或底部栏必须为下方页面内容留足 safe padding 边距
• scroll-behavior - 避免多层嵌套的滚动区域干扰主页面的流畅滚动体验
• `vie