⚡

UI-UX全能专家Skill ui-ux-pro-max

UI/UX设计智能工具，提供50+种风格、161种颜色调色板、57种字体搭配、161种产品类型、99条UX准则和25种图表类型，覆盖React Native等10个技术栈。适用于页面设计、组件创建、颜色系统、排版、动画、表单、导航、图表的规划、构建、审查、修复和优化。关键词：UI设计、UX设计、前端开发、移动端设计、颜色调色板、字体搭配、风格选择、React Native、设计系统、可访问性、交互设计。

前端开发 0 次安装 6 次浏览 更新于 6/26/2026

名称: ui-ux-pro-max 描述: “适用于 Web 和移动端的 UI/UX 设计智能。包含 50+ 种风格、161 种颜色调色板、57 种字体搭配、161 种产品类型、99 条 UX 准则和 25 种图表类型，覆盖 10 个技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 和 HTML/CSS）。操作：规划、构建、创建、设计、实施、审查、修复、改进、优化、增强、重构和检查 UI/UX 代码。项目：网站、落地页、仪表盘、管理面板、电商、SaaS、作品集、博客和移动应用。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单和图表。风格：玻璃态、粘土态、极简主义、粗野主义、新拟态、便当网格、暗黑模式、响应式、拟物化和扁平化设计。主题：颜色系统、可访问性、动画、布局、排版、字体搭配、间距、交互状态、阴影和渐变。集成：shadcn/ui MCP 用于组件搜索和示例。”

UI/UX Pro Max - 设计智能

面向 Web 和移动应用的全面设计指南。包含 50+ 种风格、161 种颜色调色板、57 种字体搭配、161 种产品类型并附推理规则、99 条 UX 准则以及 25 种图表类型，覆盖 10 个技术栈。可搜索数据库，提供基于优先级的推荐。

适用场景

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

必须使用

以下情况必须调用本技能：

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

推荐使用

以下情况推荐使用本技能：

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

不必使用

以下情况不需要本技能：

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

决策标准：如果任务会改变一个功能的外观、感受、动效或交互方式，则应使用本技能。

按优先级排列的规则类别

供人类/AI参考：按优先级 1→10 决定先聚焦哪个规则类别；需要详情时使用 --domain <Domain> 查询。脚本不会读取此表。

优先级 类别 影响 域 关键检查（必须满足） 反模式（避免）
1 可访问性 关键 ux 对比度 4.5:1, 替代文本, 键盘导航, Aria-标签 移除焦点环, 无标签的图标按钮
2 触控与交互 关键 ux 最小尺寸 44×44px, 8px+ 间距, 加载反馈 仅依赖悬停, 瞬间状态变化 (0ms)
3 性能 高 ux WebP/AVIF, 懒加载, 预留空间 (CLS < 0.1) 布局抖动, 累积布局偏移
4 风格选择 高 style, product 匹配产品类型, 一致性, SVG 图标 (非表情) 随机混合扁平与拟物, 使用表情作为图标
5 布局与响应式 高 ux 移动优先断点, 视口 meta, 无水平滚动 水平滚动, 固定 px 容器宽度, 禁用缩放
6 排版与颜色 中 typography, color 基础字号 16px, 行高 1.5, 语义颜色令牌 正文文字 < 12px, 灰上加灰, 组件内直接写十六进制颜色
7 动画 中 ux 时长 150–300ms, 动效传达含义, 空间连续性 仅装饰性动画, 对宽度/高度做动画, 不考虑减少动效
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 - 有意义图像的描述性替代文本
  • aria-labels - 图标按钮使用 aria-label；原生端使用 accessibilityLabel (Apple HIG)
  • 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)

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 - 按压时的视觉反馈（波纹/高亮；MD 状态层）
  • haptic-feedback - 对确认和重要操作使用触觉反馈；避免滥用 (Apple HIG)
  • gesture-alternative - 不要依赖纯手势交互；始终为关键操作提供可见控件
  • safe-area-awareness - 将主要触控目标远离刘海、灵动岛、手势条和屏幕边缘
  • no-precision-required - 避免要求对小图标或细边缘进行精确点击
  • swipe-clarity - 滑动操作必须显示清晰的可供性提示（箭头、标签、教程）
  • 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 - 仅预加载关键字体；避免对每个变体都过度使用 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），而非表情符号
  • 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 - 每个屏幕应只有一个主要号召性用语；次要操作在视觉上层级降低 (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 - 通过大小、间距、对比度建立层次 —— 而非仅通过颜色

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 - 定义语义颜色令牌（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 - 对数据列、价格和计时器使用等宽 / 表格数字，以防止布局偏移
  • whitespace-balance - 有意使用留白来分组相关项目并分隔区域；避免视觉混乱 (Apple HIG)

7. 动画 (中)

  • duration-timing - 微交互使用 150–300ms；复杂过渡 ≤400ms；避免 >500ms (MD)
  • transform-performance - 只使用 transform/opacity；避免对 width/height/top/left 做动画
  • loading-states - 加载超过 300ms 时显示骨架或进度指示器
  • excessive-motion - 每个视图最多动画化 1-2 个关键元素
  • easing - 进入使用 ease-out，退出使用 ease-in；避免 UI 过渡使用线性缓动
  • motion-meaning - 每个动画都必须表达因果关系，而不仅仅是装饰 (Apple HIG)
  • state-transition - 状态变化（悬停 / 激活 / 展开 / 折叠 / 模态框）应平滑过渡，而非瞬间跳变
  • continuity - 页面/屏幕过渡应保持空间连续性（共享元素，方向性滑动）(Apple HIG)
  • parallax-subtle - 谨慎使用视差；必须尊重减少动效，且不引起方向迷失 (Apple HIG)
  • spring-physics - 优先使用弹性/物理曲线，而非线性或三次贝塞尔，以获得自然感觉 (Apple HIG fluid animations)
  • exit-faster-than-enter - 退出动画短于进入动画（约为进入时长的 60–70%），以感觉响应更快 (MD motion)
  • stagger-sequence - 列表/网格项的入场错开 30–50ms 每项；避免全部同时出现或过慢显露 (MD)
  • shared-element-transition - 在屏幕间使用共享元素 / 主角过渡，以保持视觉连续性 (MD, HIG)
  • interruptible - 动画必须可中断；用户点击/手势应立即可取消进行中的动画 (Apple HIG)
  • no-blocking-animation - 动画期间绝不可阻塞用户输入；UI 必须保持可交互 (Apple HIG)
  • fade-crossfade - 在相同容器内替换内容时使用淡入淡出 (MD)
  • scale-feedback - 可点击的卡片/按钮在按下时做微缩放 (0.95–1.05)；释放时恢复 (HIG, MD)
  • gesture-feedback - 拖拽、滑动和捏合必须提供实时视觉响应以跟随手指 (MD Motion)
  • hierarchy-motion - 使用移动/缩放方向来表达层级：从下方进入 = 更深层，向上退出 = 返回 (MD)
  • motion-consistency - 全局统一时长/缓动令牌；所有动画共享相同的节奏和感觉
  • opacity-threshold - 淡出元素不应停留在不透明度 0.2 以下；要么完全淡出，要么保持可见
  • modal-motion - 模态框/表单应从其触发源动画出现（缩放+淡入或滑入），以提供空间上下文 (HIG, MD)
  • navigation-direction - 向前导航向左/上动画；向后导航向右/下动画 —— 保持方向逻辑一致 (HIG)
  • layout-shift-avoid - 动画不得引起布局回流或 CLS；使用 transform 进行位置变化

8. 表单与反馈 (中)

  • input-labels - 每个输入框有可见标签（非仅占位符）
  • error-placement - 在相关字段下方显示错误
  • submit-feedback - 提交时显示加载中，然后显示成功/错误状态
  • required-indicators - 标记必填字段（例如星号）
  • empty-states - 无内容时显示有帮助的消息和操作
  • toast-dismiss - 3-5 秒内自动关闭提示
  • confirmation-dialogs - 对破坏性操作前进行确认
  • input-helper-text - 在复杂输入框下方提供持久的辅助文本，而非仅占位符 (Material Design)
  • disabled-states - 禁用元素使用降低的不透明度 (0.38–0.5) + 光标变化 + 语义属性 (MD)
  • progressive-disclosure - 逐步揭示复杂选项；不要一开始就给用户过多信息 (Apple HIG)
  • inline-validation - 在失焦时（非每次按键）进行验证；仅在用户完成输入后显示错误 (MD)
  • input-type-keyboard - 使用语义输入类型（email, tel, number）以调出正确的移动键盘 (HIG, MD)
  • password-toggle - 为密码字段提供显示/隐藏切换 (MD)
  • autofill-support - 使用 autocomplete / textContentType 属性以让系统自动填充 (HIG, MD)
  • undo-support - 对于破坏性或批量操作允许撤销（例如“撤销删除”提示）(Apple HIG)
  • success-feedback - 用简短的视觉反馈确认已完成操作（对勾、提示、颜色闪现）(MD)
  • error-recovery - 错误消息必须包含清晰的恢复路径（重试、编辑、帮助链接）(HIG, MD)
  • multi-step-progress - 多步骤流程显示步骤指示器或进度条；允许后退导航 (MD)
  • form-autosave - 长表单应自动保存草稿，以防意外退出时丢失数据 (Apple HIG)
  • sheet-dismiss-confirm - 在表单/抽屉有未保存更改时，关闭前进行确认 (Apple HIG)
  • error-clarity - 错误消息必须说明原因 + 如何修复（而非仅仅“输入无效”）(HIG, MD)
  • field-grouping - 逻辑分组相关字段（使用 fieldset/legend 或视觉分组）(MD)
  • read-only-distinction - 只读状态应在视觉和语义上与禁用状态不同 (MD)
  • focus-management - 提交错误后，自动聚焦第一个无效字段 (WCAG, MD)
  • error-summary - 对于多个错误，在顶部显示摘要，包含指向每个字段的锚链接 (WCAG)
  • touch-friendly-input - 移动端输入框高度 ≥44px 以满足触控目标要求 (Apple HIG)
  • destructive-emphasis - 破坏性操作使用语义危险颜色（红色），并与主要操作在视觉上分离 (HIG, MD)
  • toast-accessibility - 提示不得夺取焦点；使用 aria-live=“polite” 供屏幕阅读器播报 (WCAG)
  • aria-live-errors - 表单错误使用 aria-live 区域或 role=“alert” 通知屏幕阅读器 (WCAG)
  • contrast-feedback - 错误和成功状态颜色必须满足 4.5:1 对比度 (WCAG, MD)
  • timeout-feedback - 请求超时必须显示明确反馈，并提供重试选项 (MD)

9. 导航模式 (高)

  • bottom-nav-limit - 底部导航最多 5 个条目；使用带标签的图标 (Material Design)
  • drawer-usage - 将抽屉/侧边栏用于次要导航，而非主要操作 (Material Design)
  • back-behavior - 后退导航必须可预测且一致；保留滚动/状态 (Apple HIG, MD)
  • deep-linking - 所有关键屏幕必须可通过深度链接/URL 到达，用于分享和通知 (Apple HIG, MD)
  • tab-bar-ios - iOS：使用底部标签栏进行顶层导航 (Apple HIG)
  • top-app-bar-android - Android：使用带导航图标的顶部应用栏作为主要结构 (Material Design)
  • nav-label-icon - 导航项必须有图标和文字标签；仅图标导航会损害可发现性 (MD)
  • nav-state-active - 当前所在位置必须在导航中以视觉高亮（颜色、字重、指示器）(HIG, MD)
  • nav-hierarchy - 主导航（标签/底部栏）与二级导航（抽屉/设置）必须清晰分隔 (MD)
  • modal-escape - 模态框和表单必须提供清晰的关闭/取消方式；移动端可向下滑动关闭 (Apple HIG)
  • search-accessible - 搜索必须易于找到（顶栏或标签）；提供最近/建议的查询 (MD)
  • breadcrumb-web - Web：对 3 层以上深的层级使用面包屑辅助定位 (MD)
  • state-preservation - 后退导航时必须恢复之前的滚动位置、筛选状态和输入 (HIG, MD)
  • gesture-nav-support - 支持系统手势导航（iOS 滑动后退，Android 预测性后退）且不冲突 (HIG, MD)
  • tab-badge - 谨慎使用导航项上的角标来指示未读/待处理；用户访问后清除 (HIG, MD)
  • overflow-menu - 当操作超出可用空间时，使用溢出/更多菜单而不是硬塞 (MD)
  • bottom-nav-top-level - 底部导航仅用于顶层屏幕；切勿在其中嵌套子导航 (MD)
  • adaptive-navigation - 大屏幕（≥1024px）优先使用侧边栏；小屏幕使用底部/顶部导航 (Material Adaptive)
  • back-stack-integrity - 决不可悄然重置导航栈或突然跳转到首屏 (HIG, MD)
  • navigation-consistency - 导航位置在所有页面间必须保持一致；不因页面类型而改变
  • avoid-mixed-patterns - 不要在同一层级混合使用标签页 + 侧边栏 + 底部导航
  • modal-vs-navigation - 模态框不得用于主导航流程；它们会打断用户的路径 (HIG)
  • focus-on-route-change - 页面切换后，将焦点移动到主内容区域，以利屏幕阅读器用户 (WCAG)
  • persistent-nav - 核心导航必须能从深层页面访问；不要在子流程中完全隐藏 (HIG, MD)
  • destructive-nav-separation - 危险操作（注销账号、登出）必须在视觉和空间上与普通导航项分离 (HIG, MD)
  • empty-nav-state - 当导航目的地不可用时，解释原因而不是静默隐藏 (MD)

10. 图表与数据 (低)

  • chart-type - 根据数据类型匹配图表类型（趋势 → 折线图，比较 → 柱状图，比例 → 饼图/环形图）
  • color-guidance - 使用可访问的调色板；避免仅用红/绿色对，考虑色盲用户 (WCAG, MD)
  • data-table - 提供表格替代方案以实现可访问性；单独的图表不利于屏幕阅读器 (WCAG)
  • pattern-texture - 通过图案、纹理或形状补充颜色，使得在不依赖颜色的情况下也能区分数据 (WCAG, MD)
  • legend-visible - 总是显示图例；靠近图表放置，不要位于需滚动才能看到的折叠区域下方 (MD)
  • tooltip-on-interact - 在悬停（Web）或点击（移动端）时提供工具提示/数据标签以显示精确值 (HIG, MD)
  • axis-labels - 为坐标轴添加单位和可读刻度的标签；避免在移动端使用截断或旋转的标签
  • responsive-chart - 图表必须在小屏幕上重排或简化（例如用水平柱状图代替垂直，减少刻度）
  • empty-data-state - 无数据时显示有意义的空状态（“暂无数据”+ 引导），而不是空图表 (MD)
  • loading-chart - 图表数据加载时使用骨架屏或微光占位符；不要显示空的坐标轴框架
  • animation-optional - 图表入场动画必须尊重 prefers-reduced-motion；数据应立即可读 (HIG)
  • large-dataset - 对于 1000+ 数据点，进行聚合或采样；提供向下钻取查看详情，而非全部渲染 (MD)
  • number-formatting - 对轴上数字、日期、货币使用符合区域习惯的格式化 (HIG, MD)
  • touch-target-chart - 交互式图表元素（点、段）必须具有 ≥44pt 点击区域，或在触摸时扩展 (Apple HIG)
  • no-pie-overuse - 避免对超过 5 个类别使用饼图/环形图；改用柱状图以获得清晰度
  • contrast-data - 数据线/柱与背景对比度 ≥3:1；数据文本标签 ≥4.5:1 (WCAG)
  • legend-interactive - 图例应可点击以切换系列可见性 (MD)
  • direct-labeling - 对于小数据集，直接在图表上标注数值以减少视线移动
  • tooltip-keyboard - 工具提示内容必须可通过键盘访问，不能仅依赖悬停 (WCAG)
  • sortable-table - 数据表必须支持排序，并用 aria-sort 指示当前排序状态 (WCAG)
  • axis-readability - 坐标轴刻度不得过于密集；保持可读间距，小屏幕自动跳过
  • data-density - 限制每个图表的信息密度以避免认知过载；必要时拆分成多个图表
  • trend-emphasis - 强调数据趋势而非装饰；避免使用遮挡数据的重渐变/阴影
  • gridline-subtle - 网格线应为低对比度（例如 gray-200），以免与数据竞争
  • focusable-elements - 交互式图表元素（点、柱、扇区）必须可通过键盘导航 (WCAG)
  • screen-reader-summary - 提供文本摘要或 aria-label，描述图表的关键见解，供屏幕阅读器使用 (WCAG)
  • error-state-chart - 数据加载失败时显示错误消息和重试操作，而非损坏的/空图表
  • export-option - 对于数据密集型产品，提供图表数据的 CSV/图像导出
  • drill-down-consistency - 向下钻取交互必须保持清晰的返回路径和层级面包屑
  • time-scale-clarity - 时间序列图表必须清晰标注时间粒度（日/周/月），并允许切换

如何使用

使用下方的命令行工具搜索特定领域。

前提条件

检查是否已安装 Python：

python3 --version || python --version

如果未安装 Python，根据用户操作系统进行安装：

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

如何使用此技能

当用户请求以下任何内容时，使用此技能：

场景 触发示例 起始步骤
新项目 / 页面 “构建一个落地页”，“构建一个仪表盘” 第 1 步 → 第 2 步 (设计系统)
新组件 “创建一个定价卡片”，“添加一个模态框” 第 3 步 (领域搜索: style, ux)
选择风格 / 颜色 / 字体 “哪种风格适合金融科技应用？”，“推荐一个调色板” 第 2 步 (设计系统)
审查现有 UI “审查此页面的 UX 问题”，“检查可访问性” 上方快速参考检查表
修复 UI 错误 “按钮悬停失效”，“加载时布局偏移” 快速参考 → 相关部分
改进 / 优化 “让它更快”，“改善移动体验” 第 3 步 (领域搜索: ux, react)
实现暗黑模式 “添加暗黑模式支持” 第 3 步 (领域: style “dark mode”)
添加图表 / 数据可视化 “添加分析仪表盘图表” 第 3 步 (领域: chart)
技术栈最佳实践 “React 性能技巧”、“SwiftUI 导航” 第 4 步 (技术栈搜索)

遵循以下工作流程：

第 1 步：分析用户需求

从用户请求中提取关键信息：

  • 产品类型：娱乐（社交、视频、音乐、游戏）、工具（扫描器、编辑器、转换器）、生产力（任务管理器、笔记、日历）或混合
  • 目标受众：C 端消费者用户；考虑年龄段、使用场景（通勤、休闲、工作）
  • 风格关键词：趣味、活力、极简、暗黑模式、内容优先、沉浸式等
  • 技术栈：React Native（本项目的唯一技术栈）

第 2 步：生成设计系统（必须）

始终先从 --design-system 开始，以获得包含推理的全面推荐：

python3 skills/ui-ux-pro-max/scripts/search.py "<产品类型> <行业> <关键词>" --design-system [-p "项目名称"]

此命令会：

  1. 并行搜索多个领域（product, style, color, landing, typography）
  2. 从 ui-reasoning.csv 中应用推理规则，选择最佳匹配
  3. 返回完整设计系统：模式、风格、颜色、排版、效果
  4. 包含应避免的反模式

示例：

python3 skills/ui-ux-pro-max/scripts/search.py "美容水疗健康服务" --design-system -p "宁怡水疗"

第 2b 步：持久化设计系统（主文件 + 覆盖模式）

若要将设计系统保存为跨会话的分层检索，添加 --persist：

python3 skills/ui-ux-pro-max/scripts/search.py "<查询>" --design-system --persist -p "项目名称"

这会创建：

  • design-system/MASTER.md —— 包含所有设计规则的全局单一事实来源
  • design-system/pages/ —— 用于存放页面特定覆盖的文件夹

带页面特定覆盖的用法：

python3 skills/ui-ux-pro-max/scripts/search.py "<查询>" --design-system --persist -p "项目名称" --page "仪表盘"

这还会创建：

  • design-system/pages/dashboard.md —— 与该主文件不同的页面特定规则

分层检索的工作方式：

  1. 当构建特定页面（例如“结账”）时，首先检查 design-system/pages/checkout.md
  2. 如果页面文件存在，其规则覆盖主文件中的规则
  3. 如果不存在，则仅使用 design-system/MASTER.md

上下文感知检索提示词：

我正在构建 [页面名称] 页面。请阅读 design-system/MASTER.md。
同时检查 design-system/pages/[page-name].md 是否存在。
如果页面文件存在，优先使用其规则。
否则，仅使用主文件中的规则。
现在，生成代码...

第 3 步：按需使用详细搜索补充

在获得设计系统后，使用领域搜索获取更多细节：

python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]

何时使用详细搜索：

需求 领域 示例
产品类型模式 product --domain product "娱乐 社交"
更多风格选项 style --domain style "玻璃态 暗黑"
颜色调色板 color --domain color "娱乐 活力"
字体搭配 typography --domain typography "趣味 现代"
图表推荐 chart --domain chart "实时 仪表盘"
UX 最佳实践 ux --domain ux "动画 可访问性"
替代字体 typography --domain typography "优雅 奢华"
单个 Google 字体 google-fonts --domain google-fonts "无衬线 流行 变量"
落地页结构 landing --domain landing "首屏 社会认同"
React Native 性能 react --domain react "重新渲染 memo 列表"
应用界面辅助功能 web --domain web "accessibilityLabel 触控 安全区域"
AI 提示词 / CSS 关键词 prompt --domain prompt "极简主义"

第 4 步：技术栈指南（React Native）

获取 React Native 实现相关的特定最佳实践：

python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack react-native

搜索参考

可用领域

领域 用途 示例关键词
product 产品类型推荐 SaaS、电商、作品集、医疗健康、美容、服务
style UI 风格、颜色、效果 玻璃态、极简主义、暗黑模式、粗野主义
typography 字体搭配、Google Fonts 优雅、趣味、专业、现代
color 按产品类型的调色板 SaaS、电商、医疗健康、美容、金融科技、服务
landing 页面结构、CTA 策略 首屏、首屏中心、评价、定价、社会认同
chart 图表类型、库推荐 趋势、比较、时间线、漏斗、饼图
ux 最佳实践、反模式 动画、可访问性、z-index、加载
google-fonts 单个 Google 字体查找 无衬线、等宽、日语、可变字体、流行
react React/Next.js 性能 waterfall、bundle、suspense、memo、rerender、cache
web 应用界面指南（iOS/Android/React Native） accessibilityLabel、触控目标、安全区域、Dynamic Type
prompt AI 提示词、CSS 关键词 （风格名称）

可用技术栈

技术栈 关注点
react-native 组件、导航、列表

示例工作流程

用户请求：“制作一个 AI 搜索首页。”

第 1 步：分析需求

  • 产品类型：工具（AI 搜索引擎）
  • 目标受众：寻求快速、智能搜索的 C 端用户
  • 风格关键词：现代、极简、内容优先、暗黑模式
  • 技术栈：React Native

第 2 步：生成设计系统（必须）

python3 skills/ui-ux-pro-max/scripts/search.py "AI 搜索 工具 现代 极简" --design-system -p "AI 搜索"

输出： 包含模式、风格、颜色、排版、效果和反模式的完整设计系统。

第 3 步：按需使用详细搜索补充

# 获取现代工具产品的风格选项
python3 skills/ui-ux-pro-max/scripts/search.py "极简主义 暗黑模式" --domain style

# 获取搜索交互和加载的 UX 最佳实践
python3 skills/ui-ux-pro-max/scripts/search.py "搜索 加载 动画" --domain ux

第 4 步：技术栈指南

python3 skills/ui-ux-pro-max/scripts/search.py "列表 性能 导航" --stack react-native

然后： 综合设计系统 + 详细搜索并实施设计。

输出格式

--design-system 标志支持两种输出格式：

# ASCII 框格（默认）- 最适合终端展示
python3 skills/ui-ux-pro-max/scripts/search.py "金融科技 加密货币" --design-system

# Markdown - 最适合文档
python3 skills/ui-ux-pro-max/scripts/search.py "金融科技 加密货币" --design-system -f markdown

获得更好结果的技巧

查询策略

  • 使用多维关键词 — 组合产品、行业、风格、密度："娱乐 社交 活力 内容密集" 而不只是 "应用"
  • 对相同需求尝试不同关键词："趣味 霓虹" → "活力 暗黑" → "内容优先 极简"
  • 首先使用 --design-system 获取完整推荐，然后对不确定的维度使用 --domain 深入
  • 始终添加 --stack react-native 以获取实现相关的具体指导

常见卡点

问题 应对措施
无法决定风格/颜色 使用不同的关键词重新运行 --design-system
暗黑模式对比度问题 快速参考 §6：color-dark-mode + color-accessible-pairs
动画感觉不自然 快速参考 §7：spring-physics + easing + exit-faster-than-enter
表单 UX 很差 快速参考 §8：inline-validation + error-clarity + focus-management
导航感觉混乱 快速参考 §9：nav-hierarchy + bottom-nav-limit + back-behavior
小屏幕布局错乱 快速参考 §5：mobile-first + breakpoint-consistency
性能/卡顿 快速参考 §3：virtualize-lists + main-thread-budget + debounce-throttle

交付前检查清单

  • 在实施前，运行 --domain ux "animation accessibility z-index loading" 作为 UX 验证步骤
  • 快速参考 §1–§3（关键 + 高）作为最终审查
  • 在 375px（小手机）和横屏方向上测试
  • 验证启用减少动效和最大 Dynamic Type 时的行为
  • 独立检查暗黑模式对比度（不要假设浅色模式的值能正常工作）
  • 确认所有触控目标 ≥44pt，且没有内容隐藏在安全区域之后

专业 UI 通用规则

这些是经常被忽视且使 UI 看起来不专业的要点： 范围说明：以下规则适用于 App UI（iOS/Android/React Native/Flutter），而非桌面 Web 交互模式。

图标与视觉元素

规则 标准 避免 为何重要
禁止用表情符号作为结构性图标 使用基于矢量的图标（例如 Lucide、react-native-vector-icons、@expo/vector-icons）。 将表情符号（🎨 🚀 ⚙️）用于导航、设置或系统控件。 表情符号字体依赖性强，跨平台不一致，且无法通过设计令牌控制。
仅使用矢量资源 使用 SVG 或平台矢量图标，可清晰缩放并支持主题化。 模糊或像素化的栅格 PNG 图标。 确保可扩展性、渲染清晰和明暗模式适应性。
稳定的交互状态 使用颜色、不透明度或海拔过渡表示按下状态，而不改变布局边界。 导致周围内容移动或视觉抖动的布局偏移变换。 防止不稳定的交互，保持移动端流畅的动效/感知质量。
正确的品牌 Logo 使用官方品牌资源，遵循其使用指南（间距、颜色、净空区）。 猜测 Logo 路径、未经授权地重新着色或修改比例。 防止品牌误用，确保合法性与平台合规。
一致的图标尺寸 将图标尺寸定义为设计令牌（如 icon-sm、icon-md=24pt、icon-lg）。 随意混合使用 20pt / 24pt / 28pt 等任意值。 在界面中保持节奏和视觉层次。
描边一致性 在同一视觉层级内使用一致的描边宽度（例如 1.5px 或 2px）。 随意混合粗细描边风格。 不一致的描边会降低精致感和统一性。
填充与轮廓的规范 每个层级级别只使用一种图标样式。 在同一层级混合使用填充和轮廓图标。 保持语义清晰度和风格一致性。
触控目标最小尺寸 最小 44×44pt 交互区域（若图标更小，使用 hitSlop 扩展）。 小图标不扩展点击区域。 满足可访问性和平台可用性标准。
图标对齐 将图标与文本基线对齐，并保持一致的边距。 未对齐的图标或周围间距不一致。 防止细微的视觉不平衡，降低感知质量。
图标对比度 遵循 WCAG 对比度标准：小元素 4.5:1，大型 UI 图形最小 3:1。 融入背景的低对比度图标。 确保在亮色和暗色模式下均可访问。

交互（App）

规则 应该做 不应做
点击反馈 在 80-150ms 内提供清晰的按下反馈（波纹/不透明度/海拔）。 点击时无视觉响应。
动画时长 微交互保持在 150-300ms，使用平台原生缓动。 即时过渡或慢动画（>500ms）。
无障碍焦点 确保屏幕阅读器焦点顺序与视觉顺序匹配，标签具有描述性。 未标记的控件或混乱的焦点遍历。
禁用状态清晰度 使用禁用语义（disabled/原生禁用属性）、降低强调，且无点击动作。 看起来可点击但无响应的控件。
触控目标最小尺寸 触控区域 >=44x44pt（iOS）或 >=48x48dp（Android），当图标较小时扩展点击区域。 微小的触控目标或无内边距的纯图标点击区。
手势冲突预防 每个区域保持一个主要手势，避免嵌套点击/拖动冲突。 导致误操作的重叠手势。
语义化原生控件 优先使用原生交互基础组件（Button、Pressable、平台等效组件），并赋予正确的无障碍角色。 将通用容器用作主要控件而无语义。

明/暗模式对比度

规则 应该做 不应做
背景可读性（亮色） 保持卡片/表面与背景明显分离，具有足够的不透明度/海拔。 过度透明的表面模糊了层次。
文本对比度（亮色） 正文对比度 >=4.5:1（相对浅色表面）。 低对比度的灰色正文。
文本对比度（暗色） 在暗色表面上，主文本对比度 >=4.5:1，次要文本 >=3:1。 暗色模式下文本融入背景。
边框与分隔线可见性 确保分隔线在两种主题中都可见（不仅亮色模式）。 仅一种模式下消失的主题特定边框。
状态对比度一致 保持按下/聚焦/禁用状态在亮色和暗色主题中同样可区分。 仅为一种主题定义交互状态。
令牌驱动的主题化 使用语义颜色令牌，在每个主题中映射到应用的表面/文本/图标。 在每个屏幕中硬编码十六进制颜色值。
遮罩和模态框清晰度 使用足够强度的模态遮罩来隔离前景内容（通常 40-60% 黑色）。 弱遮罩导致背景视觉上仍在竞争。

布局与间距

规则 应该做 不应做
安全区域合规 所有固定标题栏、标签栏和 CTA 底栏都要尊重顶部/底部安全区域。 将固定 UI 放置在刘海、状态栏或手势区域下。
系统栏留白 为状态/导航栏和手势指示器添加间距。 让可点击内容与操作系统元素冲突。
一致的内容宽度 为每个设备类别（手机/平板）保持可预测的内容宽度。 屏幕之间随意混合不同宽度。
8dp 间距节奏 对边距/间隙/区域间距使用一致的 4/8dp 间距系统。 无节奏的任意间距增量。
可读的文字度量 在大设备上保持长文本可读（避免平板上的边缘到边缘段落）。 影响可读性的全宽长文本。
区域间距层次 按层级定义清晰的垂直节奏层级（例如 16/24/32/48）。 类似 UI 级别间距不一致。
按断点调整装订线 在较大宽度和横屏时增加水平内边距。 所有设备大小/方向使用相同的窄装订线。
滚动与固定元素的并存 添加底部/顶部内容内边距，使列表不被固定栏遮挡。 内容被粘性页眉/页脚遮挡。

交付前检查清单

在交付 UI 代码前，验证以下项目： 范围说明：此检查清单适用于 App UI（iOS/Android/React Native/Flutter）。

视觉质量

  • [ ] 没有使用表情符号作为图标（使用 SVG 代替）
  • [ ] 所有图标来自一致的图标系列和风格
  • [ ] 使用官方品牌资源，比例和净空区正确
  • [ ] 按下状态视觉不导致布局边界偏移或抖动
  • [ ] 语义主题令牌被一致使用（无临时的每屏硬编码颜色）

交互

  • [ ] 所有可点击元素提供清晰的按下反馈（波纹/不透明度/海拔）
  • [ ] 触控目标满足最小尺寸（>=44x44pt iOS，>=48x48dp Android）
  • [ ] 微交互时长保持在 150-300ms 范围，缓动感原生
  • [ ] 禁用状态视觉清晰且不可交互
  • [ ] 屏幕阅读器焦点顺序与视觉顺序匹配，交互标签具有描述性
  • [ ] 手势区域避免嵌套/冲突交互（点击/拖动/后退滑动手势冲突）

明/暗模式

  • [ ] 在亮色和暗色模式下主文本对比度 >=4.5:1
  • [ ] 在亮色和暗色模式下次要文本对比度 >=3:1
  • [ ] 在两种模式下分隔线/边框和交互状态均可区分
  • [ ] 模态框/抽屉遮罩不透明度足够强以保持前景清晰（通常 40-60% 黑色）
  • [ ] 交付前两种主题都经过测试（不基于单一主题推断）

布局

  • [ ] 标题栏、标签栏和底部 CTA 栏尊重安全区域
  • [ ] 滚动内容不被固定式/粘性栏遮挡
  • [ ] 在小手机、大手机和平板（竖屏 + 横屏）上已验证
  • [ ] 水平内边距/装订线按设备大小和方向正确适配
  • [ ] 组件、区域和页面级别保持 4/8dp 间距节奏
  • [ ] 长文本在对大设备上保持可读（无边缘到边缘段落）

可访问性

  • [ ] 所有有意义的图片/图标都有辅助功能标签
  • [ ] 表单字段有标签、提示和清晰的错误信息
  • [ ] 不仅用颜色作为唯一指示
  • [ ] 减少动效和动态文字大小得到支持，且布局不破坏
  • [ ] 辅助功能特性/角色/状态（选中、禁用、展开）被正确播报