name: ui-ux-pro-max description: “用于 Web 和移动应用的 UI/UX 设计智能。包含 50+ 种风格、161 种调色板、57 种字体配对、161 种产品类型、99 条 UX 指南，以及 10 个技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 和 HTML/CSS）下的 25 种图表类型。操作：规划、构建、创建、设计、实现、审查、修复、改进、优化、增强、重构和检查 UI/UX 代码。项目：网站、落地页、仪表盘、管理面板、电子商务、SaaS、作品集、博客和移动应用。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单和图表。风格：玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当网格、暗黑模式、响应式、拟物化和扁平设计。主题：色彩系统、可访问性、动画、布局、排版、字体配对、间距、交互状态、阴影和渐变。集成：shadcn/ui MCP 用于组件搜索和示例。”
UI/UX Pro Max - 设计智能
面向 Web 和移动应用的全面设计指南。包含 50+ 种风格、161 种调色板、57 种字体配对、161 种产品类型及其推理规则、99 条 UX 指南，以及 10 个技术栈下的 25 种图表类型。可搜索数据库，提供基于优先级的建议。
何时应用
当任务涉及 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 图标（非 emoji） | 随机混合扁平和拟物风格、用 emoji 作图标 |
| 5 | 布局与响应式 | 高 | ux |
移动优先断点、viewport meta、无水平滚动 | 水平滚动、固定 px 容器宽度、禁用缩放 |
| 6 | 排版与色彩 | 中 | typography、color |
基准字号 16px、行高 1.5、语义化颜色令牌 | 正文小于 12px、灰上灰、组件中直接写 hex |
| 7 | 动画 | 中 | ux |
时长 150–300ms、动效传达含义、空间连续性 | 纯装饰性动画、使用 width/height 做动画、不尊重减少动画偏好 |
| 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- 使用带有 for 属性的 labelskip-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 防止布局偏移（核心 Web 指标：CLS）font-loading- 使用 font-display: swap/optional 避免不可见文本闪烁（FOIT）；预留空间减少布局偏移（MD）font-preload- 仅预加载关键字体；避免对所有变体过度使用预加载critical-css- 优先处理首屏 CSS（内联关键 CSS 或尽早加载样式表）lazy-loading- 通过动态导入/路由级拆分懒加载非首屏组件bundle-splitting- 按路由/功能拆分代码（React Suspense / Next.js dynamic）以缩短初始加载和可交互时间third-party-scripts- 异步/延迟加载第三方脚本；审计并移除不必要的（MD）reduce-reflows- 避免频繁的布局读取/写入；批量读取 DOM 后再写入content-jumping- 为异步内容预留空间以避免布局跳动（核心 Web 指标：CLS）lazy-load-below-fold- 对首屏以下的图片和重度资源使用 loading=“lazy”virtualize-lists- 对超过 50 项的列表进行虚拟化，提升内存效率和滚动性能main-thread-budget- 确保每帧工作量不超过 ~16ms 以实现 60fps；将重任务移出主线程（HIG、MD）progressive-loading- 超过 1 秒的操作使用骨架屏/微光效果代替长时间加载旋转器（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），而非 emojicolor-palette-from-product- 从产品/行业选择调色板（搜索--domain color）effects-match-style- 阴影、模糊、圆角与所选风格协调（玻璃/扁平/粘土等）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. 布局与响应式（高）
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-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 而非 100vhorientation-support- 确保布局在横屏模式下可读和可操作content-priority- 在移动端首先展示核心内容；次要内容折叠或隐藏visual-hierarchy- 通过尺寸、间距、对比度建立层级——而非仅靠颜色
6. 排版与色彩（中）
line-height- 正文行高使用 1.5–1.75line-length- 每行字符数限制在 65–75 个font-pairing- 匹配标题和正文字体的个性font-scale- 使用一致的字号层级（如 12 14 16 18 24 32）contrast-readability- 浅色背景上使用更深的文字（如 white 上的 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），而非组件中直接写 hex（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/leftloading-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 流体动画）exit-faster-than-enter- 退出动画时长比进入更短（约为进入的 60–70%），以显得响应迅速（MD 动效）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- 淡出元素不应长时间停留在 opacity 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- 图表入场动画需尊重减少动画偏好；数据应立即可读（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 "<产品类型> <行业> <关键词>" --design-system [-p "项目名称"]
此命令：
- 并行搜索多个领域（product、style、color、landing、typography）
- 应用
ui-reasoning.csv中的推理规则选择最佳匹配 - 返回完整设计系统：模式、风格、颜色、排版、效果
- 包含应避免的反模式
示例：
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
步骤 2b：持久化设计系统（Master + Overrides 模式）
为了跨会话进行分层检索，添加 --persist 以保存设计系统：
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "项目名称"
这将创建：
design-system/MASTER.md— 全局单一事实来源，包含所有设计规则design-system/pages/— 页面级覆盖文件夹
带有页面级覆盖：
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "项目名称" --page "dashboard"
此外还会创建：
design-system/pages/dashboard.md— 该页面相对于 Master 的偏差
分层检索工作方式：
- 构建特定页面时（如“结账”），首先检查
design-system/pages/checkout.md - 如果页面文件存在，其规则覆盖 Master 文件
- 如果不存在，则仅使用
design-system/MASTER.md
上下文感知检索提示：
我正在构建 [页面名称] 页面。请阅读 design-system/MASTER.md。
同时检查 design-system/pages/[page-name].md 是否存在。
如果页面文件存在，优先使用其规则。
否则，仅使用 Master 规则。
现在，生成代码...
步骤 3：补充详细搜索（按需）
获得设计系统后，使用领域搜索获取更多细节：
python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
何时使用详细搜索：
| 需求 | 领域 | 示例 |
|---|---|---|
| 产品类型模式 | 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 Font | 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 "<关键词>" --stack react-native
搜索参考
可用领域
| 领域 | 用途 | 示例关键词 |
|---|---|---|
product |
产品类型推荐 | SaaS、电子商务、作品集、医疗、美容、服务 |
style |
UI 风格、颜色、效果 | 玻璃拟态、极简主义、暗黑模式、粗野主义 |
typography |
字体配对、Google Fonts | 优雅、有趣、专业、现代 |
color |
按产品类型的调色板 | saas、ecommerce、healthcare、beauty、fintech、service |
landing |
页面结构、CTA 策略 | hero、hero-centric、testimonial、pricing、social-proof |
chart |
图表类型、库建议 | 趋势、比较、时间线、漏斗、饼图 |
ux |
最佳实践、反模式 | 动画、可访问性、z-index、加载 |
google-fonts |
单个 Google Font 查找 | 无衬线、等宽、日文、可变字体、热门 |
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：补充详细搜索（按需）
# 为现代工具产品获取风格选项
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
# 获取搜索交互和加载的 UX 最佳实践
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 框（默认） - 最适合终端显示
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - 最适合文档
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（严重 + 高）进行最终审查
- 在 375px（小屏手机）和横屏方向下测试
- 验证启用减少动画偏好和最大动态字体时的行为
- 独立检查暗黑模式对比度（不要假设浅色模式的值可用）
- 确认所有触摸目标 ≥44pt，且没有内容隐藏在安全区域后
专业 UI 的通用规则
以下常见疏漏会使 UI 显得不专业： 范围说明：以下规则适用于 App UI（iOS/Android/React Native/Flutter），而非桌面网页交互模式。
图标与视觉元素
| 规则 | 标准 | 避免 | 重要性 |
|---|---|---|---|
| 不使用 Emoji 作为结构图标 | 使用基于矢量的图标（如 Lucide、react-native-vector-icons、@expo/vector-icons） | 将 emoji（🎨 🚀 ⚙️）用于导航、设置或系统控件 | Emoji 依赖于字体，跨平台不一致，且无法通过设计令牌控制 |
| 仅使用矢量资源 | 使用可缩放并支持主题的 SVG 或平台矢量图标 | 模糊或像素化的栅格 PNG 图标 | 确保可扩展性、清晰渲染和暗/浅模式自适应 |
| 稳定的交互状态 | 使用颜色、不透明度或高度变化实现按下状态，而不改变布局边界 | 导致周围内容移动或触发视觉抖动的布局偏移变换 | 防止不稳定的交互，保持移动端流畅动效/感知质量 |
| 正确的品牌标志 | 使用官方品牌资产并遵循其使用指南（间距、颜色、留白） | 猜测标志路径、非官方重着色或修改比例 | 防止品牌误用，确保法律/平台合规 |
| 一致的图标尺寸 | 将图标尺寸定义为设计令牌（如 icon-sm、icon-md = 24pt、icon-lg） | 随机混用 20pt / 24pt / 28pt 等任意值 | 维护界面的节奏和视觉层次 |
| 描边一致性 | 在同一视觉层内使用一致的描边宽度（如 1.5px 或 2px） | 随意混用粗细描边样式 | 不一致的描边会降低精致感和凝聚力 |
| 实心 vs 轮廓的纪律 | 每个层级使用一种图标风格 | 在同一层级混用实心和轮廓图标 | 保持语义清晰和风格协调 |
| 触摸目标最小值 | 交互区域最小 44×44pt（若图标较小则使用 hitSlop 扩展） | 未扩展点击区域的小图标 | 满足可访问性和平台可用性标准 |
| 图标对齐 | 将图标与文本基线对齐并保持均匀内边距 | 图标错位或间距不一致 | 防止微妙的视觉不平衡，降低感知质量 |
| 图标对比度 | 遵循 WCAG 对比标准：小元素 4.5:1，较大 UI 符号至少 3:1 | 与背景融合的低对比度图标 | 确保浅色和深色模式下的可访问性 |
交互（App）
| 规则 | 要做的 | 不要做的 |
|---|---|---|
| 点击反馈 | 在 80-150ms 内提供清晰的按下反馈（涟漪/不透明度/高度） | 点击无视觉响应 |
| 动画时长 | 微交互保持在 150-300ms，使用平台原生缓动 | 瞬时过渡或慢速动画（>500ms） |
| 无障碍焦点 | 确保屏幕阅读器焦点顺序与视觉顺序一致，标签描述清晰 | 未标注的控件或混乱的焦点遍历 |
| 禁用状态清晰度 | 使用禁用语义（disabled/原生 disabled 属性）、降低强调且无点击动作 |
看起来可点击但无行为的控件 |
| 触摸目标最小值 | 保持点击区域 >=44x44pt（iOS）或 >=48x48dp（Android），图标较小时扩展点击区域 | 过小的点击目标或仅图标的区域未加内边距 |
| 手势冲突预防 | 每个区域保留一种主要手势，避免嵌套点击/拖拽冲突 | 重叠手势导致意外操作 |
| 语义化原生控件 | 优先使用原生交互原语（Button、Pressable、平台等效组件）并赋予适当的无障碍角色 |
使用普通容器作为主要控件且缺少语义 |
浅/暗模式对比度
| 规则 | 要做的 | 不要做的 |
|---|---|---|
| 表面可读性（浅色） | 确保卡片/表面与背景清晰分离，使用足够的不透明度/高度 | 过于透明的表面模糊层次 |
| 文字对比度（浅色） | 正文与浅色表面保持 >=4.5:1 对比度 | 低对比度的灰色正文 |
| 文字对比度（深色） | 深色表面上主要文字对比度 >=4.5:1，次要文字 >=3:1 | 深色模式下文字融入背景 |
| 边框和分隔线可见性 | 确保分隔线在两种主题下均可见（不只是浅色模式） | 仅在一种模式下可见的特定主题边框 |
| 状态对比度一致性 | 确保按下/聚焦/禁用状态在浅色和深色主题中同等可区分 | 仅为一种主题定义交互状态 |
| 令牌驱动主题化 | 使用按主题映射的语义化颜色令牌，覆盖表面/文字/图标 | 每个屏幕硬编码 hex 值 |
| 遮罩和模态清晰度 | 使用强度足够隔离前景内容的模态遮罩（通常 40-60% 黑色） | 遮罩太弱导致背景视觉竞争 |
布局与间距
| 规则 | 要做的 | 不要做的 |
|---|---|---|
| 安全区域遵守 | 为所有固定头部、标签栏和 CTA 栏尊重顶部/底部安全区域 | 将固定 UI 放置在刘海、状态栏或手势区域下方 |
| 系统栏避让 | 为状态/导航栏和手势主屏幕指示器添加间距 | 可点击内容与系统 UI 发生碰撞 |
| 一致的内容宽度 | 每类设备（手机/平板）保持可预测的内容宽度 | 各屏幕间混用任意宽度 |
| 8dp 间距节奏 | 内边距/间距/区块间距使用统一的 4/8dp 系统 | 无节奏的随机间距增量 |
| 可读文本宽度 | 在大设备上保持长文本可读（避免平板上的边到边段落） | 全宽长文本损害可读性 |
| 区块间距层次 | 按层级定义清晰的垂直节奏（如 16/24/32/48） | UI 层级相似但间距不一致 |
| 按断点自适应间距 | 在更大宽度和横屏模式下增加水平内边距 | 所有设备尺寸/方向使用相同窄间距 |
| 滚动与固定元素共存 | 为列表添加底部/顶部内容内边距，避免被固定栏遮挡 | 滚动内容被粘性头部/底部遮挡 |
交付前检查清单
交付 UI 代码前，验证以下项目： 范围说明：此清单适用于 App UI（iOS/Android/React Native/Flutter）。
视觉质量
- [ ] 未使用 emoji 作为图标（使用 SVG）
- [ ] 所有图标来自一致的图标系列和风格
- [ ] 官方品牌资产使用正确的比例和留白
- [ ] 按下状态视觉不改变布局边界或引起抖动
- [ ] 语义主题令牌使用一致（无临时硬编码的每屏颜色）
交互
- [ ] 所有可点击元素提供清晰的按下反馈（涟漪/不透明度/高度）
- [ ] 触摸目标满足最小尺寸（iOS >=44x44pt，Android >=48x48dp）
- [ ] 微交互时长保持在 150-300ms，缓动效果自然
- [ ] 禁用状态视觉清晰且无交互
- [ ] 屏幕阅读器焦点顺序与视觉顺序一致，交互标签描述清晰
- [ ] 手势区域避免嵌套/冲突交互（点击/拖拽/返回滑动冲突）
浅/暗模式
- [ ] 浅色和深色模式下主要文字对比度 >=4.5:1
- [ ] 浅色和深色模式下次要文字对比度 >=3:1
- [ ] 分隔线/边框和交互状态在两种模式下均可区分
- [ ] 模态/抽屉遮罩不透明度足够以保证前景可读性（通常 40-60% 黑色）
- [ ] 两种主题在交付前均经过测试（而非仅推断自单一主题）
布局
- [ ] 安全区域对头部、标签栏和底部 CTA 栏均得到遵守
- [ ] 滚动内容不被固定/粘性栏遮挡
- [ ] 在小型手机、大型手机和平板上验证（纵向+横向）
- [ ] 水平内边距/间距根据设备尺寸和方向正确适配
- [ ] 4/8dp 间距节奏在组件、区块和页面级别保持一致
- [ ] 大设备上长文本宽度保持可读（无边到边段落）
可访问性
- [ ] 所有有意义的图片/图标具有可访问性标签
- [ ] 表单字段有标签、提示和清晰的错误信息
- [ ] 颜色不是唯一的指示方式
- [ ] 减少动画偏好和动态字体大小受支持且无布局破坏
- [ ] 可访问性特征/角色/状态（selected、disabled、expanded）正确播报