ui-ux-pro-max

UI/UX Pro Max - 设计智能

适用于 Web 和移动应用的综合设计指南。包含 50+ 种风格、161 个配色方案、57 组字体搭配、161 种带推理规则的产品类型、99 条 UX 指南，以及涵盖 10 种技术栈的 25 种图表类型。可搜索数据库，并提供基于优先级的建议。

适用场景

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

必须使用

在以下情况下必须调用此 Skill：

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

推荐使用

在以下情况下推荐使用此 Skill：

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

可跳过

在以下情况下无需使用此 Skill：

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

判断标准：如果任务会改变某项功能的外观、感觉、动效或交互方式，就应使用此 Skill。

按优先级划分的规则类别

供人类/AI 参考：按优先级 1→10 判断应优先关注的规则类别；需要时使用 --domain <Domain> 查询详情。脚本不会读取此表。

优先级	类别	影响	Domain	关键检查项（必须具备）	反模式（应避免）
1	无障碍性	CRITICAL	ux	对比度 4.5:1、替代文本、键盘导航、Aria-label	移除焦点环、没有标签的纯图标按钮
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、灰字配灰底、在组件中直接写十六进制颜色值
7	动画	MEDIUM	ux	时长 150–300ms、动效传达含义、空间连续性	纯装饰性动画、对宽度/高度添加动画、不支持减少动态效果
8	表单与反馈	MEDIUM	ux	显示标签、在字段附近显示错误、辅助文本、渐进式披露	仅用占位符作为标签、仅在顶部显示错误、一开始就展示过多信息
9	导航模式	HIGH	ux	可预测的返回行为、底部导航 ≤5 项、深层链接	导航过载、返回行为失效、没有深层链接
10	图表与数据	LOW	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 - 使用带有 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 - 在模态框和多步骤流程中提供取消/返回选项（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 - 声明宽度/高度或使用 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 项以上的列表进行虚拟化，以提升内存效率和滚动性能
• 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 - 使阴影、模糊、圆角与所选样式相匹配（glass / flat / clay 等）
• platform-adaptive - 遵循平台惯例（iOS HIG 与 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. 布局与响应式（HIGH）

• 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. 字体排印与颜色（MEDIUM）

• 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 - 使用 font-weight 强化层次：粗体标题（600–700）、常规正文（400）、中等字重标签（500）（MD）
• color-semantic - 定义语义颜色标记（primary、secondary、error、surface、on-surface），组件中不要使用原始十六进制颜色值（Material color system）
• 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 - 优先使用基于弹簧 / 物理效果的曲线，而非线性或 cubic-bezier，以获得自然的观感（Apple HIG 流畅动画）
• exit-faster-than-enter - 退出动画应比进入动画短（约为进入时长的 60–70%），让交互显得更灵敏（MD 动效）
• stagger-sequence - 列表 / 网格项进入时，每项依次错开 30–50ms；避免同时显示或显示得过慢（MD）
• shared-element-transition - 使用共享元素 / Hero 过渡，保持屏幕间的视觉连续性（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-5s 后自动关闭提示消息
• 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. 导航模式（HIGH）

• 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 - 时间序列图表必须清楚标注时间粒度（日／周／月），并允许切换

使用方法

使用以下 CLI 工具搜索特定领域。

---

前置条件

检查是否已安装 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 "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此命令会：

1. 并行搜索各个领域（产品、风格、颜色、落地页、排版）
2. 应用 ui-reasoning.csv 中的推理规则，选择最合适的匹配项
3. 返回完整的设计系统：模式、风格、颜色、排版、效果
4. 列出需要避免的反模式

示例：

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

步骤 2b：保存设计系统（主规则 + 覆盖规则模式）

若要跨会话分层检索设计系统，请添加 --persist：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

这会创建：

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

添加特定页面的覆盖规则：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

这也会创建：

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

分层检索的工作方式：

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

上下文感知检索提示词：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

第 3 步：通过详细搜索补充信息（按需）

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

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

何时使用详细搜索：

需求	领域	示例
产品类型模式	product	--domain product "entertainment social"
更多风格选项	style	--domain style "glassmorphism dark"
配色方案	color	--domain color "entertainment vibrant"
字体搭配	typography	--domain typography "playful modern"
图表建议	chart	--domain chart "real-time dashboard"
UX 最佳实践	ux	--domain ux "animation accessibility"
备选字体	typography	--domain typography "elegant luxury"
单个 Google Fonts 字体	google-fonts	--domain google-fonts "sans serif popular variable"
落地页结构	landing	--domain landing "hero social-proof"
React Native 性能	react	--domain react "rerender memo list"
应用界面无障碍设计	web	--domain web "accessibilityLabel touch safe-areas"
AI 提示词 / CSS 关键词	prompt	--domain prompt "minimalism"

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

获取 React Native 实现专属的最佳实践：

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

---

搜索参考

可用领域

领域	用途	示例关键词
product	产品类型建议	SaaS、电商、作品集、医疗保健、美容、服务
style	UI 风格、颜色、效果	玻璃拟态、极简主义、深色模式、粗野主义
typography	字体搭配、Google Fonts	优雅、活泼、专业、现代
color	按产品类型划分的配色方案	saas、电商、医疗保健、美容、金融科技、服务
landing	页面结构、CTA 策略	主视觉区、以主视觉区为核心、用户评价、定价、社交证明
chart	图表类型、库推荐	趋势、对比、时间线、漏斗、饼图
ux	最佳实践、反模式	动画、无障碍设计、z-index、加载
google-fonts	单个 Google Fonts 字体查询	无衬线字体、等宽字体、日文字体、可变字体、热门字体
react	React/Next.js 性能	瀑布流、打包、suspense、memo、重新渲染、缓存
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 search tool modern minimal" --design-system -p "AI Search"

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

第 3 步：通过详细搜索补充信息（按需）

# Get style options for a modern tool product
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style

# Get UX best practices for search interaction and loading
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux

第 4 步：技术栈指南

python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native

**然后：**综合设计系统和详细搜索结果，并实现设计。

---

输出格式

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

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

提升结果的技巧

查询策略

• 使用多维关键词——组合产品、行业、调性和信息密度："entertainment social vibrant content-dense"，而不只是 "app"
• 针对同一需求尝试不同关键词："playful neon" → "vibrant dark" → "content-first minimal"
• 首先使用 --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（CRITICAL + HIGH）
• 在 375px（小屏手机）和横屏方向下测试
• 验证启用 reduced-motion 和最大尺寸的 Dynamic Type 时的表现
• 单独检查深色模式下的对比度（不要假设浅色模式的数值也适用）
• 确认所有触控目标 ≥44pt，且安全区域后方没有内容被遮挡

---

专业 UI 通用规则

这些是常被忽略、会让 UI 显得不专业的问题： 适用范围说明：以下规则适用于 App UI（iOS/Android/React Native/Flutter），不适用于桌面网页交互模式。

图标与视觉元素

规则	标准	避免	重要性
不要将表情符号用作结构性图标	使用基于矢量的图标（例如 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。	使用与背景融为一体的低对比度图标。	确保图标在浅色和深色模式下均易于辨识。

交互（应用）

规则	应做	不应做
点击反馈	在 80-150ms 内提供明确的按下反馈（涟漪／不透明度／高度变化）	点击时没有视觉反馈
动画时长	将微交互控制在 150-300ms 左右，并使用平台原生缓动	使用瞬时过渡或过慢的动画（>500ms）
无障碍焦点	确保屏幕阅读器的焦点顺序与视觉顺序一致，并使用描述性标签	使用没有标签的控件，或造成焦点遍历混乱
清晰显示禁用状态	使用禁用语义（disabled／原生禁用属性）、降低视觉强调，并禁用点击操作	控件看起来可以点击，实际却没有反应
触控目标最小尺寸	点击区域至少为 44x44pt（iOS）或 48x48dp（Android）；图标较小时扩大触控区域	点击目标过小，或图标周围没有内边距、只能点击图标本身
避免手势冲突	每个区域只设置一个主要手势，并避免嵌套的点击／拖动冲突	手势重叠，导致意外操作
使用语义化原生控件	优先使用原生交互组件（Button、Pressable、平台对应组件），并设置正确的无障碍角色	将通用容器用作主要控件，却不赋予语义

浅色/深色模式对比度

规则	应做	不应做
表面可读性（浅色）	确保卡片/表面与背景清晰区分，并具有足够的不透明度/海拔值	表面过于透明，导致层级模糊
文本对比度（浅色）	确保正文文本与浅色表面的对比度 >=4.5:1	使用对比度低的灰色正文文本
文本对比度（深色）	确保深色表面上的主要文本对比度 >=4.5:1，次要文本对比度 >=3:1	深色模式文本与背景融为一体
边框和分隔线可见性	确保分隔线在两种主题下均清晰可见（不只是在浅色模式下）	主题专属边框在某种模式下消失
状态对比度一致性	确保按下/聚焦/禁用状态在浅色和深色主题下同样易于区分	只为一种主题定义交互状态
由令牌驱动的主题设置	使用按主题映射、适用于应用表面/文本/图标的语义颜色令牌	按屏幕硬编码十六进制颜色值
遮罩和模态框的易读性	使用足够强的模态框遮罩隔离前景内容（通常为 40-60% 黑色）	遮罩过弱，导致背景在视觉上争抢注意力

布局与间距

规则	应做	不应做
遵循安全区域	所有固定标题栏、标签栏和 CTA 栏都应遵循顶部/底部安全区域	将固定 UI 放在刘海、状态栏或手势区域下方
系统栏留白	为状态栏/导航栏和手势 Home 指示条留出间距	让可点击内容与操作系统界面元素冲突
内容宽度一致	按设备类型（手机/平板）保持可预测的内容宽度	在不同屏幕间混用任意宽度
8dp 间距节奏	对内边距/间隔/区块间距使用一致的 4/8dp 间距系统	使用没有规律的随机间距增量
文本行宽易读性	确保大尺寸设备上的长文本易于阅读（避免平板上段落铺满屏幕宽度）	长文本占满屏幕宽度，影响可读性
区块间距层级	按层级定义清晰的垂直间距层级（例如 16/24/32/48）	相似的 UI 层级使用不一致的间距
按断点自适应边距	在更宽的屏幕和横屏模式下增加水平内边距	所有设备尺寸/方向都使用相同的窄边距
滚动内容与固定元素共存	增加顶部/底部内容内边距，避免列表被固定栏遮挡	滚动内容被粘性页眉/页脚遮挡

---

交付前检查清单

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

视觉质量

• 不使用表情符号作为图标（改用 SVG）
• 所有图标都来自风格一致的图标系列
• 使用官方品牌素材，并确保比例正确且留白充足
• 按下状态的视觉效果不会改变布局边界或造成抖动
• 始终使用语义主题令牌（不按屏幕随意硬编码颜色）

交互

• 所有可点击元素都提供清晰的按下反馈（波纹/不透明度/海拔值）
• 触摸目标达到最小尺寸（iOS >=44x44pt，Android >=48x48dp）
• 微交互时长保持在 150-300ms 范围内，并采用符合原生体验的缓动效果
• 禁用状态清晰可见且不可交互
• 屏幕阅读器的焦点顺序与视觉顺序一致，交互标签描述明确
• 手势区域避免嵌套/冲突交互（点击/拖动/返回滑动冲突）

浅色/深色模式

• 两种模式下的主要文本对比度均 >=4.5:1
• 两种模式下的次要文本对比度均 >=3:1
• 两种模式下的分隔线/边框和交互状态均易于区分
• 模态框/抽屉遮罩的不透明度足够，以确保前景内容易读（通常为 40-60% 黑色）
• 交付前测试两种主题（不能根据单一主题推断）

布局

• 标题栏、标签栏和底部 CTA 栏均遵循安全区域规范
• 滚动内容不会被固定栏或粘性栏遮挡
• 已在小型手机、大型手机和平板设备（竖屏 + 横屏）上验证
• 水平内边距/间距会根据设备尺寸和方向正确调整
• 在组件、分区和页面层级均保持 4/8dp 间距节奏
• 长篇文本在较大设备上仍易于阅读（段落不会从屏幕一边延伸到另一边）

无障碍

• 所有有意义的图像/图标均带有无障碍标签
• 表单字段均带有标签、提示和清晰的错误消息
• 颜色不是唯一的指示方式
• 支持减少动态效果和动态文本大小，且不会破坏布局
• 无障碍特征/角色/状态（已选中、已禁用、已展开）均能正确播报