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. 可访问性（关键）

• 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 - 主要触控目标远离刘海、Dynamic Island、手势条和屏幕边缘
• 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），不要使用 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 - 通过大小、间距、对比度建立层级——而非仅靠颜色

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 - 尊重每个平台的默认字间距；避免正文 tight tracking（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 - 谨慎使用视差；必须遵循 reduced-motion 且不引起迷失方向（Apple HIG）
• spring-physics - 优先使用弹簧/物理曲线而非线性或 cubic-bezier，以获得自然感（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 - 使用 translate/scale 方向表达层级：从下方进入=更深，向上退出=返回（MD）
• motion-consistency - 全局统一持续时间/缓动 token；所有动画共享相同的节奏和感觉
• 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 - 不要在同一个层级混合 Tab + 侧边栏 + 底部导航
• 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：分析用户需求

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

• 产品类型：娱乐（社交、视频、音乐、游戏）、工具（扫描仪、编辑器、转换器）、生产力（任务管理、笔记、日历）或混合型
• 目标用户：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 "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 "项目名称"

这将创建：

• 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 — 与主文件不同的页面特定规则

层级检索的工作原理：

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 <最大结果数>]

何时使用详细搜索：

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

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

python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack 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

常见难点

交付前检查清单

• 在实现前，运行 --domain ux "animation accessibility z-index loading" 作为 UX 验证检查
• 遍历快速参考 §1–§3（关键 + 高）作为最终审查
• 在 375px（小屏手机）和横屏方向测试
• 启用 reduced-motion 和 Dynamic Type 最大字号时验证行为
• 单独检查暗色模式对比度（不要假设亮色模式值也适用）
• 确认所有触控目标 ≥44pt，且没有内容被安全区域遮挡

---

专业 UI 的通用规则

这些是经常被忽略且使 UI 看起来不专业的问题：

范围说明：以下规则适用于 App UI（iOS/Android/React Native/Flutter），而非桌面 Web 交互模式。

图标与视觉元素

交互（App）

亮/暗模式对比度

布局与间距

---

交付前检查清单

在交付 UI 代码前，验证以下项目：

范围说明：此清单适用于 App UI（iOS/Android/React Native/Flutter）。

视觉质量

• [ ] 未使用 emoji 作为图标（使用 SVG 代替）
• [ ] 所有图标来自一致的图标家族和风格
• [ ] 使用官方品牌资源，比例和清晰空间正确
• [ ] 按下状态视觉不改变布局边界或引起抖动
• [ ] 语义化主题 token 一致使用（无每个屏幕临时硬编码的颜色）

交互

• [ ] 所有可点击元素提供清晰的按下反馈（涟漪/不透明度/高度）
• [ ] 触控目标达到最小尺寸（>=44x44pt iOS，>=48x48dp Android）
• [ ] 微交互时机保持在 150-300ms 范围，使用自然感觉的缓动
• [ ] 禁用状态视觉清晰且不可交互
• [ ] 屏幕阅读器焦点顺序与视觉顺序一致，交互标签描述性
• [ ] 手势区域避免嵌套/冲突交互（点击/拖拽/返回滑动冲突）

亮/暗模式

• [ ] 主要文本对比度在亮色和暗色模式下均 >=4.5:1
• [ ] 次要文本对比度在亮色和暗色模式下均 >=3:1
• [ ] 分割线/边框和交互状态在两种模式下均可区分
• [ ] 模态/抽屉的半透明背景强度足以保持前景可读性（通常 40-60% 黑色）
• [ ] 交付前两种主题都已测试（不是从单个主题推断）

布局

• [ ] 安全区域在头部、标签栏和底部 CTA 栏中得到尊重
• [ ] 滚动内容不被固定/粘性栏遮挡
• [ ] 在小屏手机、大屏手机和平板（竖屏 + 横屏）上验证
• [ ] 水平内边距/外边距根据设备尺寸和方向正确适配
• [ ] 4/8dp 间距节奏在组件、章节和页面级别保持一致
• [ ] 长篇文本在较大设备上保持可读宽度（无边缘到边缘段落）

可访问性

• [ ] 所有有意义的图片/图标都有可访问性标签
• [ ] 表单字段有标签、提示和清晰的错误消息
• [ ] 颜色不是唯一指示符
• [ ] 支持 reduced-motion 和动态文本大小，布局不损坏
• [ ] 可访问性特征/角色/状态（selected、disabled、expanded）正确播报