UI/UX Pro Max - 设计智能体

UX Pro Max - 设计智能体 是做什么的？

面向 Web、移动端和桌面的 UI/UX 设计智能体。在涉及设计、构建、审查或修复界面（包括页面、组件、设计系统、可访问性、交互、响应式布局、排版、色彩、图表及特定框架的 UI 实现）时，应使用此技能。可搜索本地数据包含：79 种可搜索样式（50 个激活）、192 个产品调色板与推理方案、74 种字体搭配、119 条 UX 指南、105 个图标、17 个 GSAP 预设、25 种图表类型和 22 个技术栈。

何时应用

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

主要用例

在以下情况此技能最为有用：

• 设计新的页面（Landing Page、Dashboard、Admin、SaaS、Mobile App）
• 创建或重构 UI 组件（按钮、弹窗、表单、表格、图表等）
• 选择配色方案、字体系统、间距规范或布局体系
• 审查 UI 代码的用户体验、可访问性或视觉一致性
• 实现导航结构、动效或响应式行为
• 做产品层级的设计决策（风格、信息层级、品牌表达）
• 提升界面的感知质量、清晰度或可用性

推荐

在以下情况建议使用此技能：

• UI 看起来“不够专业”，但原因不明确
• 收到可用性或体验方面的反馈
• 准备上线前的 UI 质量优化
• 需要对齐跨平台设计（Web / iOS / Android）
• 构建设计系统或可复用组件库

跳过

在以下情况无需使用此技能：

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

判断准则：如果任务会改变某个功能 看起来如何、使用起来如何、如何运动或如何被交互，就应该使用此技能。

按优先级划分的规则类别

供人工/AI 查阅：按 1→10 决定先关注哪类规则；需要细则时用 --domain <Domain> 查询。脚本不读取本表。

优先级	类别	影响	领域	关键检查（必须满足）	反模式（避免）
1	可访问性	关键	ux	对比度 4.5:1，Alt 文本，键盘导航，Aria-labels	移除焦点环，仅有图标的按钮不带标签
2	触控与交互	关键	ux	最小尺寸 44×44px，8px+ 间距，加载反馈	仅依赖悬停，瞬间状态变化 (0ms)
3	性能	高	ux	WebP/AVIF，懒加载，预留空间 (CLS < 0.1)	布局震荡，累积布局偏移
4	样式选择	高	style, product	匹配产品类型，一致性，SVG 图标（不使用 emoji）	随意混合扁平与拟物风格，使用 Emoji 作为图标
5	布局与响应式	高	ux	移动端优先断点，视口 meta，无水平滚动	水平滚动，固定 px 容器宽度，禁用缩放
6	排版与色彩	中	typography, color	基础字号 16px，行高 1.5，语义化色彩 token	正文小于 12px，灰底灰字，组件中使用原始十六进制颜色
7	动画	中	ux	上下文感知的时机，动效传达含义，空间连续性	所有过渡使用同一持续时间，动画宽高，无减少动效设置
8	表单与反馈	中	ux	可见标签，错误信息靠近输入框，辅助文本，渐进式披露	仅使用占位符作为标签，仅在顶部显示错误，一开始就让用户不堪重负
9	导航模式	高	ux	可预测的返回，底部导航≤5 项，深层链接	过载导航，返回行为异常，无深层链接
10	图表与数据	低	chart	图例，工具提示，无障碍颜色	仅依靠颜色来传达信息

快速参考

1. 可访问性（关键）

• 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）
• icon-context - 语义依赖于使用场景：位于可见文本旁的装饰性图标应从无障碍树中隐藏；有意义的图标需要文本替代；图标控件需要无障碍名称和适用的状态
• keyboard-nav - Tab 键顺序与视觉顺序一致；支持完整键盘操作（遵循 Apple HIG）
• form-labels - 使用 label 标签配合 for 属性
• 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 - 在模态框和多步骤流程中提供取消/返回功能（遵循 Apple HIG）
• keyboard-shortcuts - 保留系统和无障碍快捷键；为拖放操作提供键盘替代方案（遵循 Apple HIG）
• focus-not-obscured - 粘性 UI、覆盖层和横幅不得遮挡键盘焦点控件（WCAG 2.2 AA）
• focus-not-obscured-enhanced - 保持整个焦点组件可见（WCAG 2.2 AAA）
• focus-appearance - 验证焦点指示器区域和 3:1 状态对比度；仅可见焦点不足（WCAG 2.2 AAA）
• dragging-alternative - 每个作者控制的拖拽动作都需要单指针和键盘替代方案（WCAG 2.2 AA）
• web-target-size - Web 指针目标需要 24×24 CSS px 或有文档记录的例外；不得使用原生单位替代（WCAG 2.2 AA）
• consistent-help - 重复的帮助机制在同一页面集合中应保持相同的相对顺序（WCAG 2.2 A）
• redundant-entry - 在同一流程中复用已经提供的信息，除非重新输入是必需的（WCAG 2.2 A）
• accessible-authentication - 允许密码管理器和粘贴；提供非认知性的身份验证路径（WCAG 2.2 最低标准, AA）。增强的 AAA 标准不在数据集中表示
• auto-rotation-controls - 轮播和移动内容需要暂停/停止控件，并在焦点或减少动效时停止（WAI）
• contextual-live-badge-updates - 以完整的上下文短语宣布更改的计数/状态，而不移动焦点；使用一个合适的 live/status 区域，仅在需要时进行原子更新

2. 触控与交互（关键）

• touch-target-size - 最小 44×44pt（Apple）/ 48×48dp（Material）；必要时在视觉边界外扩展点击区域
• touch-spacing - 触控目标之间最小 8px/8dp 间距（Apple HIG, MD）
• hover-vs-tap - 主要交互使用点击/触摸；不要仅依赖悬停
• loading-buttons - 异步操作期间禁用按钮；显示加载指示器或进度
• error-feedback - 清晰且靠近问题的错误信息
• cursor-pointer - 为可点击元素添加 cursor-pointer（Web）
• gesture-conflicts - 避免主导内容上的水平滑动；优先使用垂直滚动
• tap-delay - 使用 touch-action: manipulation 减少 300ms 延迟（Web）
• standard-gestures - 一致地使用平台标准手势；不要重新定义（例如，滑动返回、双指缩放）（Apple HIG）
• system-gestures - 不要阻止系统手势（控制中心、返回滑动等）（Apple HIG）
• press-feedback - 按下时提供视觉反馈（水波纹/高亮；遵循 Material 状态层）
• haptic-feedback - 在确认和重要操作时使用触觉反馈；避免过度使用（Apple HIG）
• gesture-alternative - 不要依赖仅手势交互；始终为关键操作提供可见控件
• safe-area-awareness - 将主要触控目标远离刘海屏、灵动岛、手势条和屏幕边缘
• no-precision-required - 避免要求对小图标或薄边缘进行像素级别的精确点击
• swipe-clarity - 滑动操作必须显示清晰的提示（V 形标记、标签、引导）
• drag-threshold - 在开始拖拽前使用移动阈值，以避免意外拖拽

3. 性能（高）

• 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 - 异步/延迟加载第三方脚本；审计并移除不必要的脚本（MD）
• reduce-reflows - 避免频繁的布局读写；批量读取 DOM 后再批量写入
• content-jumping - 为异步内容预留空间以避免布局跳动（Core Web Vitals: CLS）
• lazy-load-below-fold - 对首屏以下的图片和重型媒体使用 loading="lazy"
• virtualize-lists - 对包含 50 项以上的列表进行虚拟化，以提高内存效率和滚动性能
• main-thread-budget - 保持每帧工作在 16ms 以下以实现 60fps；将繁重任务移出主线程（HIG, MD）
• progressive-loading - 对于耗时超过 1s 的操作，使用骨架屏/微光闪烁效果代替长时间阻塞的加载指示器（Apple HIG）
• input-latency - 保持触摸/滚动的输入延迟在 100ms 以下（Material 响应性标准）
• tap-feedback-speed - 在点击后 100ms 内提供视觉反馈（Apple HIG）
• debounce-throttle - 对高频事件（滚动、调整大小、输入）使用防抖/节流
• offline-support - 提供离线状态消息和基本降级方案（PWA / 移动端）
• network-fallback - 为慢速网络提供降级模式（低分辨率图片、更少的动画）

4. 样式选择（高）

• 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 - 使悬停/按下/禁用状态在视觉上可区分且保持风格一致（Material 状态层）
• elevation-consistent - 为卡片、面板、模态框使用一致的阴影层级；避免随机阴影值
• dark-mode-pairing - 同时设计浅色/深色变体，以保持品牌、对比度和风格一致
• icon-style-consistent - 在整个产品中使用同一套图标集/视觉语言（笔画宽度、圆角）
• system-controls - 优先使用原生/系统控件而非完全自定义控件；仅在品牌要求时自定义（Apple HIG）
• blur-purpose - 使用模糊来表示背景可被关闭（模态框、面板），而非作为装饰（Apple HIG）
• primary-action - 每个屏幕只能有一个主要 CTA；次要操作在视觉上从属于主操作（Apple HIG）

5. 布局与响应式（高）

• viewport-meta - width=device-width initial-scale=1（永远不要禁用缩放）
• 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 - 固定的导航栏/底部栏必须为下方内容预留安全的填充空间
• scroll-behavior - 避免干扰主滚动体验的嵌套滚动区域
• viewport-units - 在移动端优先使用 min-h-dvh 而非 100vh
• orientation-support - 在横屏模式下保持布局可读和可操作
• content-priority - 在移动端优先展示核心内容；折叠或隐藏次要内容
• visual-hierarchy - 通过大小、间距、对比度而非颜色来建立视觉层级
• compact-label-overflow - 根据语义选择徽标、状态标签、筛选标签或可移除的值；保持重要标签可见，并向指针和键盘用户公布不可避免的截断
• chip-collection-reflow - 在缩小标签之前先进行集合换行；使用一个 +n 的溢出摘要作为可操作的披露项，而不是隐藏值

6. 排版与色彩（中）

• line-height - 正文使用 1.5-1.75 的行高
• line-length - 将每行字符数限制在 65-75 个
• font-pairing - 匹配标题/正文字体的调性
• font-scale - 使用一致的字体比例（例如 12 14 16 18 24 32）
• contrast-readability - 浅色背景上使用深色文本（例如 slate-900 搭配白色背景）
• text-styles-system - 使用平台文字系统：iOS 11 Dynamic Type 样式 / Material 5 种文字角色（display, headline, title, body, label）（HIG, MD）
• weight-hierarchy - 使用字重来强化层级：粗体标题 (600–700)，常规正文 (400)，中粗标签 (500)（MD）
• color-semantic - 定义语义化色彩 token（primary, secondary, error, surface, on-surface），避免在组件中使用原始十六进制值（Material 色彩系统）
• color-dark-mode - 深色模式使用去饱和/更亮的色调变体，而非反转颜色；单独测试对比度（HIG, MD）
• color-accessible-pairs - 前景/背景组合必须满足 4.5:1 (AA) 或 7:1 (AAA)；使用工具验证（WCAG, MD）
• color-not-decorative-only - 功能性颜色（错误红、成功绿）必须包含图标/文本；避免仅靠颜色传达含义（HIG, MD）
• truncation-strategy - 优先使用换行而非截断；当必须截断时使用省略号，并通过工具提示/展开按钮提供完整文本（Apple HIG）
• letter-spacing - 尊重平台默认字间距；避免正文字体紧凑的字间距（HIG, MD）
• number-tabular - 数据列、价格和计时器使用表格/等宽数字（HIG, MD）
• text-resize-support - 文本大小调整至 200% 时内容不丢失功能或重叠（WCAG AA）
• color-dark-disable - 深色模式中必须禁用已禁用状态的深色，以提高对比度（Material）
• table-color-access - 表格特定：使用交替行条纹，避免文本与背景之间的对比度过低（HIG, MD）
• platform-font-stack - 为平台校准字体栈：San Francisco（Apple）、Roboto/Noto（Android/Web 通用）（HIG, MD）
• dynamic-type-named-styles - 使用 iOS 命名样式（Large Title, Title 1-3, Headline, Body, Caption 1-2）而非 UIKit 标准值（Apple HIG）
• semantic-color-role - 在整个 --color-system 中使用语义角色（Apple HIG）

7. 动画（中）

• performance - 使用 transform / opacity 实现动画以触发合成层
• timing - 使用上下文相关的时长：UI 元素 200-350ms，大型元素/页面过渡 400-600ms
• easing - 使用上下文相关的缓动：进入 ease-out，退出 ease-in，强调 ease-in-out
• meaningful - 动效应传达含义（方向、层级、焦点、状态）
• spatial-continuity - 保持元素的空间连续性：新元素不应随机出现
• not-excessive - 避免过度使用；动效应服务于体验而非分散注意力
• reduced-motion - 尊重 prefers-reduced-motion；提供设计良好的替代方案
• scroll-trigger - 使用 IntersectionObserver 触发滚动动画
• entrance-timing - 错开入场时间，使用 50-100ms 的延迟间隔
• hover-subtle - 悬停效果应微妙且轻量
• loading-skeleton - 使用骨架屏/微光闪烁效果代替旋转加载
• animation-standardization - 使用 GSAP 等工具实现一致的动画参数
• motion-language - 建立并应用一致的动效语言（动画原则、变体、共享动效词汇）

8. 表单与反馈（中）

• visible-labels - 所有输入框都有可见、清晰的标签
• error-proximity - 错误信息显示在相关输入框附近
• helper-text - 提供有意义的帮助文本或占位符示例
• progressive - 分步显示复杂表单；不要在开始时暴露一切（Apple HIG）
• validation-timing - 考虑后验证（失焦时）和现场验证（按键时）的不同模式（MD）
• empty-states - 为空/无数据状态设计有意义的界面（Apple HIG）
• loading-inline - 在按钮和内容区域内使用内联加载指示器（MD）
• feedback-toast - 快速操作使用非模态反馈（Toast/Snackbar）（Mart 16.5.1内部引用）
• search-clarity - 预先输入搜索（autocomplete）；无结果和错误状态的清晰处理（MD）
• list-loading - 列表加载使用微光/骨架屏，避免闪烁
• form-validation - 异步提交使用客户端和服务器端验证
• progressive-disclosure - 通过逐步展开而非一次性全部展示来减少认知负荷（Apple HIG）

9. 导航模式（高）

• predictable-back - 返回行为一致且可预测；在 Web 上使用 history.pushState/spa 路由
• bottom-nav-max - 底部导航限制为最多 5 个目标（MD）
• deep-linking - 支持到特定内容片段的深层链接；确保新用户直接跳转后仍能返回（Apple HIG）
• blocking-overlays - 模态框动作（确认/关闭）清晰；通过向后滑动可以正常关闭
• vibrant-layers - 在多个视觉层上保持导航可理解（Apple HIG）
• chunking-grouping - 信息分组：< 7 个 / < 20 个 / ≥ 20 个的区别（MD）
• step-progress - 多步骤流程显示步骤数量和当前位置
• instant-transitions - 保持页面/视图过渡快速；使用预取和骨架屏
• search-reachable - 在内容较多的应用中，搜索应可快速访问（MD）
• nested-nav-clarity - 面包屑 / 分层导航显示当前路径

10. 图表与数据（低）

• chart-type-fit - 根据数据和意图选择合适的图表类型（-图表-类型-拟合）
• legend-access - 所有图表必须有图例；确保图例本身可访问
• tooltip-detail - 悬停或触摸时显示精确数值；在触摸屏上提供长按提示
• colorblind-palette - 使用色盲友好的配色方案（例如，色盲友好的调色板，避免仅红绿）
• label-rotation - 标签清晰可读，不重叠；必要时旋转或隐藏
• data-ink-ratio - 通过移除不必要的网格线、阴影和 3D 效果来最大化数据墨水比例
• precision-consistent - 在单个图表和仪表板中保持一致的数据精度（小数位数）
• empty-chart-state - 设计清晰、有意义的空状态，而非空白区域
• responsive-chart - 图表容器在调整大小时正确重新计算和重新渲染
• animation-intro - 数据入场动画快速（< 1s），并使用缓动效果以感觉流畅
• no-3d-default - 避免默认使用 3D 图表；仅在使用允许旋转等性能增强功能时使用
• sparkline-context - 提供最短和最终值上下文
• bar-axis-start - 条形图从零基线开始；否则会夸大差异
• dual-axis-warning - 双轴图表需要明确标记两侧的轴以避免视觉误导
• data-update-animation - 在数据刷新时使用最小动画（过渡 200-400ms）以表明变化

架构与知识图谱

架构旨在通过两层设计知识提供上下文感知的 UI 指导。

第一层：领域结构和 --domain 查询

知识库按领域组织。每个领域包含一组规则、风格、参考和设计目标。

核心领域： ux, style, product, color, typography, animation, icon, chart, stack, pattern

缩合领域： interaction, brand

复合领域（来自 --domain 查询系统）： landing, dashboard, admin, mobile, desktop, ecommerce, saas 及其他。

每个复合领域从核心领域和缩合领域提取相关元素，以为特定产品类型提供有针对性的建议。

建议始终从“选择”开始：为特定项目选择调色板、字体搭配、样式、交互模式和指示器。

任何 --domain 查询都将返回该特定领域或复合领域的完整可用数据。

第二层：大规模设计参数

除了显式领域之外，架构还包括大型设计参数，这些参数基于产品和复合领域隐式设置。

• 品牌特质参数： 语气、视觉密度、形式感、唤起的情感
• 布局参数： 设备画布、组件行为、翻译方式、使用与关系
• 资源参数： 字体选择、图标风格、动画库、技术栈

这些参数应从章节中找到的具体数据中填写，并在使用前合并成连贯的配置。

操作流程

1. 识别领域 → 找到关于产品的第一条线索。识别复合领域（例如，landing, dashboard, mobile），然后分解为核心领域。当复合领域未知时，从混合匹配中推断。
2. 查询数据 → 使用 --query <领域> 在每个核心或复合领域中提取相关样式、调色板、UX 指南、字体搭配、图标和动画预设。
3. 分析参数 → 从数据中填充隐含的设计参数：语气、密度、情感、布局、字体、图标、动画、技术栈。
4. 合并 & 建议 → 合并所有数据以设计连贯的 UI。始终首先建议“选择”，然后通过已选“样式”和“产品”分析器进行细化。

复合领域的 --domain 示例

• --domain landing → 从多个核心领域返回针对登陆页面设计的关键样式、调色板、排版指南、UX 建议、图标选择和 GSAP 预设。
• --domain dashboard → 返回针对仪表盘设计的相同组合，专门挑选适用于数据密集型应用的指南。
• --domain mobile → 返回针对移动端设计的 UI 指南、交互模式、字体和图标。
• --domain saas → 返回针对 SaaS 产品的工具和指导。
• --domain ecommerce → 返回针对电子商务网站的特定指南。

技术栈 & 框架

• 浏览器（Web）
• 移动端原生（iOS / Android）
• 桌面框架（Electron, Tauri, Flutter）
• 响应式 Web（移动优先）
• 跨平台（React Native, Flutter）
• 丰富交互体验（GSAP, Three.js）
• AI 驱动的 UI（Gen UI）