网页移动端UI/UX Pro Max - 设计智能skill

适用于网页和移动端的 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、作品集、博客和移动应用。元素：butt

bash 复制代码

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max

全面的网页和移动应用设计指南。包含 50 多种样式、161 种配色方案、57 种字体组合、161 种产品类型及其设计原则、99 条用户体验指南，以及涵盖 10 种技术栈的 25 种图表类型。提供基于优先级的可搜索推荐数据库。

何时申请

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

必须使用

此技能必须在下列情况下使用：

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

受到推崇的

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

用户界面看起来"不够专业"，但原因尚不清楚。
收到关于可用性或体验的反馈
上线前用户界面质量优化
跨平台设计（Web/iOS/Android）的协调统一
建筑设计系统或可重用组件库

跳过

在以下情况下不需要这项技能：

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

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

按优先级划分的规则类别

供人/AI参考：按照优先级1→10决定首先关注哪个规则类别；--domain <Domain>需要时可查询详细信息。脚本不会读取此表。

优先事项	类别	影响	领域	关键检查（必备）	反模式（避免）
1	无障碍	批判的	`ux`	对比度 4.5:1，替代文本，键盘导航，ARIA 标签	移除对焦环，仅保留图标按钮而不加标签
2	触摸与互动	批判的	`ux`	最小尺寸 44×44 像素，间距 8 像素以上，加载反馈	仅依赖悬停，瞬时状态改变（0毫秒）
3	表现	高的	`ux`	WebP/AVIF，延迟加载，预留空间（CLS < 0.1）	布局抖动，累积布局偏移
4	款式选择	高的	`style`，`product`	匹配产品类型，保持一致性，使用SVG图标（不含表情符号）	随机混合扁平化和拟物化设计，使用表情符号作为图标
5	布局和响应式	高的	`ux`	移动优先断点、视口元数据、无水平滚动	水平滚动条，固定像素容器宽度，禁用缩放
6	字体和色彩	中等的	`typography`，`color`	基准像素 16px，行高 1.5，语义颜色标记	文本 < 12px body，灰底灰字，组件中的原始十六进制代码
7	动画片	中等的	`ux`	持续时间150-300毫秒，运动传达意义，空间连续性	仅用于装饰的动画，宽度/高度动画，无减速动画
8	表格和反馈	中等的	`ux`	可见标签、错误提示、辅助文本、渐进式披露	仅占位符标签，错误信息显示在顶部，信息过载显示在最前面
9	导航模式	高的	`ux`	可预测的返回，底部导航≤5，深度链接	导航过载、返回功能失效、缺少深层链接
10	图表与数据	低的	`chart`	图例、工具提示、无障碍颜色	仅依靠色彩来传达意义

快速参考

1. 可访问性（至关重要）

color-contrast- 普通文本的最小宽高比为 4.5:1（大号文本为 3:1）；Material Design 设计
focus-states- 交互元素上可见的焦点环（2--4像素；Apple HIG，MD）
alt-text- 为有意义的图像添加描述性替代文本
aria-labels- 仅图标按钮的 aria-label；原生属性中的 accessibilityLabel（Apple HIG）
keyboard-nav- Tab 键顺序与视觉顺序一致；完全支持键盘输入（Apple HIG）
form-labels- 使用带有属性的标签
skip-links- 键盘用户跳转至主要内容
heading-hierarchy- 顺序 h1→h6，无跳级
color-not-only- 不要仅用颜色传达信息（添加图标/文字）
dynamic-type- 支持系统文本缩放；避免文本增长时被截断（Apple Dynamic Type，MD）
reduced-motion- 尊重首选的减少动态效果；根据请求减少/禁用动画（Apple Reduced Motion API，MD）
voiceover-sr- 有意义的辅助功能标签/辅助功能提示；适用于 VoiceOver/屏幕阅读器的逻辑阅读顺序（Apple HIG，MD）
escape-routes- 在模态框和多步骤流程中提供取消/返回功能（Apple HIG）
keyboard-shortcuts- 保留系统和辅助功能快捷键；提供拖放操作的键盘替代方案（Apple HIG）

2. 触摸与交互（至关重要）

touch-target-size- 最小尺寸 44×44pt（苹果）/ 48×48dp（Material）；如有需要，可将点击区域扩展到视觉边界之外
touch-spacing- 触摸目标之间最小间距为 8px/8dp（Apple HIG、MD）
hover-vs-tap- 主要交互方式请使用点击/轻触；不要仅仅依赖悬停效果。
loading-buttons- 异步操作期间禁用按钮；显示加载指示器或进度条
error-feedback- 清除问题附近的错误信息
cursor-pointer- 为可点击元素添加光标指针（网页）
gesture-conflicts- 避免在主要内容上进行水平滑动；优先选择垂直滚动。
tap-delay- 使用触摸操作：减少 300 毫秒延迟（网页）
standard-gestures- 始终使用平台标准手势；不要重新定义（例如，向后滑动、捏合缩放）（Apple HIG）
system-gestures- 不要阻止系统手势（控制中心、向后滑动等）（Apple HIG）
press-feedback- 按下时的视觉反馈（波纹/高亮；MD状态层）
haptic-feedback- 使用触觉反馈进行确认和重要操作；避免过度使用（苹果人机交互指南）
gesture-alternative- 不要依赖纯手势交互；始终为关键操作提供可见的控件
safe-area-awareness- 使主要触控目标远离刘海、动态岛、手势栏和屏幕边缘。
no-precision-required- 避免要求在小图标或细边上进行像素级精准点击。
swipe-clarity- 滑动操作必须提供清晰的提示或指示（箭头、标签、教程）
drag-threshold- 在开始拖动之前设置移动阈值，以避免意外拖动。

3. 性能（高）

image-optimization- 使用 WebP/AVIF 格式，响应式图片（设置 srcset/sizes），并对非关键资源进行延迟加载。
image-dimension- 声明宽度/高度或使用宽高比以防止布局偏移（核心 Web 指标：CLS）
font-loading- 使用 font-display: swap/optional 避免文本不可见（FOIT）；预留空间以减少布局偏移（MD）
font-preload- 仅预加载关键字体；避免对所有变体过度使用预加载。
critical-css- 优先考虑首屏 CSS（内联关键 CSS 或早期加载样式表）
lazy-loading- 通过动态导入/路由级拆分实现非核心组件的延迟加载
bundle-splitting- 按路由/功能拆分代码（React Suspense / Next.js 动态），以减少初始加载和 TTI
third-party-scripts- 异步/延迟加载第三方脚本；审核并删除不必要的脚本（MD）
reduce-reflows- 避免频繁的布局读写；批量进行 DOM 读取和写入。
content-jumping- 为异步内容预留空间，以避免布局跳转（核心 Web 指标：CLS）
lazy-load-below-fold- 对首屏下方的图片和大文件使用"加载延迟"功能
virtualize-lists- 对包含 50 个以上项目的列表进行虚拟化，以提高内存效率和滚动性能
main-thread-budget- 保持每帧运算时间在 16 毫秒以内，以达到 60fps 的帧率；将繁重任务移出主线程（HIG、MD）。
progressive-loading- 对于持续时间超过 1 秒的操作，请使用骨架屏/闪烁效果代替长时间阻塞的旋转指示器（Apple HIG）。
input-latency- 将点击/滚动操作的输入延迟保持在 100 毫秒以内（符合 Material Design 的响应式设计标准）
tap-feedback-speed- 在点击后 100 毫秒内提供视觉反馈（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 与 Material Design 的区别）：导航、控件、字体、动态效果
state-clarity- 使悬停/按下/禁用状态在视觉上有所区别，同时保持样式一致（Material 状态层）
elevation-consistent- 对卡片、纸张和模型使用一致的阴影/高低比例；避免使用随机的阴影值。
dark-mode-pairing- 同时设计浅色/深色版本，以保持品牌、对比度和风格的一致性。
icon-style-consistent- 在整个产品中使用同一套图标集/视觉语言（笔画宽度、圆角半径）
system-controls- 优先使用原生/系统控件，而非完全自定义的控件；仅在品牌需要时才进行自定义（Apple HIG）。
blur-purpose- 使用模糊效果来表示背景被移除（例如模态框、表格），而不是作为装饰（Apple HIG）。
primary-action每个屏幕应该只有一个主要行动号召按钮；次要行动号召按钮在视觉上应从属于该按钮（苹果人机交互指南）

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 增量间距系统（材料设计）
touch-density- 保持元件间距舒适，便于触摸：不拥挤，避免误触
container-width- 桌面端最大宽度保持一致（max-w-6xl / 7xl）
z-index-management- 定义分层 z 指数标度（例如 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- 浅色背景上的深色文字（例如白色背景上的石板灰-900 字样）
text-styles-system- 使用平台类型系统：iOS 11 动态类型样式 / Material 5 类型角色（display、headline、title、body、label）（HIG、MD）
weight-hierarchy- 使用字体粗细来强化层级关系：粗体标题（600--700），正文常规字体（400），中等字体标签（500）（MD）
color-semantic- 在组件中定义语义颜色标记（主色、辅助色、错误色、表面色、表面内色），而不是原始十六进制颜色代码（材质颜色系统）
color-dark-mode- 深色模式使用低饱和度/较浅色调的变体，而不是反转颜色；请分别测试对比度（高对比度、中对比度）。
color-accessible-pairs- 前景/背景色对必须满足 4.5:1 (AA) 或 7:1 (AAA) 的要求；使用工具进行验证（WCAG、MD）
color-not-decorative-only- 功能性颜色（错误红色，成功绿色）必须包含图标/文本；避免仅使用颜色含义（高、中）
truncation-strategy- 尽量使用换行而非截断；如果必须截断，请使用省略号，并通过工具提示/展开功能提供全文（Apple HIG）。
letter-spacing- 尊重各平台默认的字间距；避免正文字间距过小（高、中）。
number-tabular- 使用表格/等宽字体显示数据列、价格和计时器，以防止布局偏移
whitespace-balance- 巧妙运用留白，将相关项目分组并分隔不同部分；避免视觉杂乱（苹果人机交互指南）

7. 动画（中级）

duration-timing- 微交互使用 150--300 毫秒；复杂过渡 ≤400 毫秒；避免 >500 毫秒（MD）
transform-performance- 仅使用变换/不透明度；避免对宽度/高度/顶部/左侧进行动画处理
loading-states- 加载超过 300 毫秒时显示骨架或进度指示器
excessive-motion每个视图最多可动画化 1-2 个关键元素。
easing- 使用缓出效果实现进入，缓入效果实现退出；避免使用线性过渡效果来实现用户界面过渡。
motion-meaning- 所有动画都必须表达因果关系，而不仅仅是装饰性的（苹果人机交互指南）
state-transition- 状态变化（悬停/激活/展开/折叠/模态）应采用平滑动画，而非突兀的弹出。
continuity- 页面/屏幕过渡应保持空间连续性（共享元素、单向滑动）（Apple HIG）
parallax-subtle- 谨慎使用视差效果；必须尊重减少运动，且不得造成方向感错乱（苹果人机交互指南）
spring-physics- 为了获得更自然的感觉，优先选择基于弹簧/物理的曲线，而不是线性或三次贝塞尔曲线（Apple HIG 流体动画）。
exit-faster-than-enter- 退出动画比进入动画短（约为进入动画时长的 60-70%），以保持响应灵敏（MD 运动）。
stagger-sequence- 将列表/网格项的进入时间错开 30-50 毫秒，避免一次性全部显示或显示速度过慢（MD）
shared-element-transition- 使用共享元素/主视觉过渡效果，以实现屏幕之间的视觉连续性（MD、HIG）
interruptible- 动画必须可中断；用户点击/手势可立即取消正在进行的动画（Apple HIG）
no-blocking-animation- 动画播放期间切勿阻止用户输入；用户界面必须保持交互性（苹果人机交互指南）
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；请使用变换进行位置更改。

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- 逐步展示复杂选项；不要一开始就让用户感到不知所措（苹果人机交互指南）
inline-validation- 仅在失去焦点时（而非按键时）进行验证；仅在用户完成输入后显示错误（MD）
input-type-keyboard- 使用语义输入类型（电子邮件、电话、号码）来触发正确的移动键盘（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- 将相关字段按逻辑分组（字段集/图例或视觉分组）（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- 网站：使用面包屑导航来辅助定位三层及以上深度的层级结构（MD）
state-preservation- 返回操作必须恢复之前的滚动位置、筛选状态和输入（高、中）
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- 鼠标悬停（网页）或点击（移动设备）时提供工具提示/数据标签，显示确切值（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网格线应采用低对比度（例如灰度-200），以免与数据冲突。
focusable-elements- 交互式图表元素（点、柱状图、扇形图）必须支持键盘导航（符合 WCAG 标准）
screen-reader-summary- 为屏幕阅读器提供描述图表关键信息的文本摘要或 aria-label（WCAG）。
error-state-chart数据加载失败必须显示错误信息并说明重试操作，而不是显示损坏/空白的图表。
export-option- 对于数据量大的产品，提供图表数据的 CSV/图像导出功能
drill-down-consistency- 向下钻取交互必须保持清晰的返回路径和层级结构。
time-scale-clarity时间序列图必须清晰地标明时间粒度（日/周/月），并允许切换。

如何使用

使用下面的 CLI 工具搜索特定域名。

先决条件

检查是否已安装 Python：

bash 复制代码

python3 --version || python --version

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

macOS：

bash 复制代码

brew install python3

Ubuntu/Debian：

bash 复制代码

sudo apt update && sudo apt install python3

视窗：

bash 复制代码

winget install Python.Python.3.12

**注意：**在 Windows 系统中，请使用 \scripts``python而不是python3``\scripts 来运行脚本（例如，使用 \scripts``python scripts/search.py而不是 \scripts python3 scripts/search.py）。

如何运用这项技能

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

设想	触发示例	从
新项目/页面	"构建着陆页""构建仪表盘"	步骤 1 → 步骤 2（设计系统）
新组件	"创建价格卡"、"添加模态框"	步骤 3（域名搜索：style，ux）
选择样式/颜色/字体	"金融科技应用适合什么风格？"，"推荐一套配色方案？"	步骤 2（设计系统）
审查现有用户界面	"检查此页面是否存在用户体验问题""检查辅助功能"	以上快速参考清单
修复用户界面错误	"按钮悬停效果失效"、"加载时布局错位"	快速参考 → 相关章节
改进/优化	"加快速度"，"改善移动体验"	步骤 3（域名搜索：ux，react）
实现暗黑模式	添加深色模式支持	步骤 3（域：样式"深色模式"）
添加图表/数据可视化	添加分析仪表板图表	步骤 3（领域：图表）
堆栈最佳实践	React性能优化技巧、SwiftUI导航	步骤 4（栈搜索）

请按照以下步骤操作：

第一步：分析用户需求

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

产品类型：娱乐（社交、视频、音乐、游戏）、工具（扫描仪、编辑器、转换器）、效率工具（任务管理器、笔记、日历）或混合型
目标受众：C级消费用户；考虑年龄段、使用场景（通勤、休闲、工作）
风格关键词：活泼、充满活力、简约、深色模式、内容优先、沉浸式等。
Stack ：与项目的框架匹配。引擎提供了许多堆栈的指导（请参阅下面的可用堆栈）------传递匹配项--stack（例如nextjs，，，，，，，，，）。react``shadcn``vue``svelte``astro``swiftui``flutter``react-native

步骤 2：生成设计系统（必需）

**始终首先--design-system**要获得包含理由的全面建议：

bash 复制代码

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

这条命令：

并行搜索多个领域（产品、风格、颜色、着陆页、字体）
应用推理规则来ui-reasoning.csv选择最佳匹配项
返回完整的设计系统：图案、样式、颜色、字体、效果
包括避免的反模式

例子：

bash 复制代码

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

步骤 2b：持久化设计系统（主控 + 覆盖模式）

要保存设计系统以便跨会话进行层级检索 ，请添加--persist：

bash 复制代码

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

这将产生：

design-system/MASTER.md--- 包含所有设计规则的全球真理来源
design-system/pages/--- 用于存放页面特定覆盖设置的文件夹

通过页面特定覆盖：

bash 复制代码

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

这也会造成：

design-system/pages/dashboard.md--- 页面与主页面的偏差

层级式检索的工作原理：

构建特定页面（例如"结账"）时，首先检查design-system/pages/checkout.md
如果页面文件存在，则其规则会覆盖主文件的规则。
否则，请design-system/MASTER.md仅使用

上下文感知检索提示：

bash 复制代码

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...

步骤三：根据需要补充详细检索

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

bash 复制代码

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`	`--domain ux "animation accessibility"`
替代字体	`typography`	`--domain typography "elegant luxury"`
单个 Google 字体	`google-fonts`	`--domain google-fonts "sans serif popular variable"`
着陆结构	`landing`	`--domain landing "hero social-proof"`
React Native 性能	`react`	`--domain react "rerender memo list"`
应用程序界面 a11y	`web`	`--domain web "accessibilityLabel touch safe-areas"`
AI提示/CSS关键词	`prompt`	`--domain prompt "minimalism"`

步骤 4：堆栈指南（与您的框架相匹配）

获取针对您正在构建的技术栈的特定实现最佳实践。

传递--stack与项目框架匹配的参数：

bash 复制代码

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <your-stack>
# e.g. --stack nextjs | react | shadcn | vue | svelte | astro | swiftui | flutter | react-native

搜索参考

可用域名

领域	用于	示例关键词
`product`	产品类型推荐	SaaS、电子商务、产品组合、医疗保健、美容、服务
`style`	UI样式、颜色、效果	玻璃变形主义、极简主义、暗黑模式、粗野主义
`typography`	字体搭配，谷歌字体	优雅、活泼、专业、现代
`color`	按产品类型分类的颜色方案	SaaS、电子商务、医疗保健、美容、金融科技、服务
`landing`	页面结构、CTA策略	英雄、以英雄为中心、证言、定价、社会认同
`chart`	图表类型、库推荐	趋势、对比、时间线、漏斗图、饼图
`ux`	最佳实践，反模式	动画、辅助功能、z-index、加载
`google-fonts`	单个 Google 字体查找	无衬线、等宽字体、日语、可变字体、流行
`react`	React/Next.js 性能	瀑布流、捆绑包、悬念、备忘录、重新渲染、缓存
`web`	应用界面设计指南（iOS/Android/React Native）	无障碍标签、触摸目标、安全区域、动态类型
`prompt`	AI提示，CSS关键词	（款式名称）

可用堆栈

快ls <skill>/data/stacks/去看现场演出！已发货的商品：

堆	重点
`react`	组件、钩子、渲染性能
`nextjs`	应用路由、RSC、服务器操作、渲染
`vue`	组件、组合 API、响应式
`nuxtjs`	Nuxt 应用模式，SSR 数据获取
`nuxt-ui`	Nuxt UI 组件模式
`svelte`	组件、存储、转换
`astro`	岛屿、内容物、部分水合
`shadcn`	shadcn/ui 基本元素，组合
`html-tailwind`	顺风实用模式
`angular`	组件、信号、服务
`laravel`	Blade/服务器渲染的UI模式
`swiftui`	视图、状态、导航（iOS/macOS）
`flutter`	小部件、状态、导航
`jetpack-compose`	可组合性、状态、导航（Android）
`react-native`	组件、导航、列表
`threejs`	3D场景、材质、性能

示例工作流程

用户请求： "制作一个AI搜索主页。"

第一步：分析需求

产品类型：工具（人工智能搜索引擎）
目标受众：寻求快速、智能搜索的C端用户
风格关键词：现代、简约、内容优先、深色模式
技术栈：Next.js（主页是一个网页表面；使用网页--stack）

步骤 2：生成设计系统（必需）

bash 复制代码

python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"

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

步骤三：根据需要补充详细检索

bash 复制代码

# 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：堆叠指南

bash 复制代码

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

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

输出格式

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

bash 复制代码

# 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与项目框架相符的实施具体指导

常见难点

问题	该怎么办
拿不定主意选什么款式/颜色	`--design-system`使用不同的关键词重新运行
暗模式对比度问题	快速参考 §6：`color-dark-mode`+`color-accessible-pairs`
动画感觉不自然。	快速参考 §7 ：`spring-physics`++easing``exit-faster-than-enter
表单用户体验差	快速参考 §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"一次用户体验验证。
最后，请通读快速参考手册第1-3节（关键+高危）。
在 375px（小屏幕手机）和横屏模式下进行测试
**启用"减少运动"和"动态类型"**选项，并将尺寸设置为最大，验证其行为。
单独检查深色模式对比度（不要假设浅色模式的值也适用）
确认所有触摸目标≥44pt，且安全区域后无任何内容被遮挡。

专业用户界面通用规则

这些经常被忽视的问题会让用户界面看起来不够专业：

范围说明：以下规则适用于应用程序用户界面（iOS/Android/React Native/Flutter），不适用于桌面网页交互模式。

图标和视觉元素

规则	标准	避免	为什么这很重要
结构图标不使用表情符号	使用基于矢量的图标（例如 Lucide、react-native-vector-icons、@expo/vector-icons）。	使用表情符号（🎨 🚀 ⚙️）进行导航、设置或系统控制。	表情符号依赖于字体，在不同平台上显示不一致，并且无法通过设计令牌进行控制。
纯矢量素材	使用可平滑缩放并支持主题化的 SVG 或平台矢量图标。	模糊或像素化的栅格PNG图标。	确保可扩展性、清晰渲染和深色/浅色模式适应性。
稳定相互作用状态	使用颜色、不透明度或高度过渡效果来表示按下状态，而无需改变布局边界。	布局偏移变换，可移动周围内容或触发视觉抖动。	防止移动设备上交互不稳定，保持流畅的运动/感知质量。
正确的品牌标识	使用官方品牌素材并遵循其使用指南（间距、颜色、留白）。	猜测标志路径、非官方地重新着色或修改比例。	防止品牌滥用，并确保符合法律/平台规定。
统一的图标尺寸	将图标大小定义为设计标记（例如，icon-sm、icon-md = 24pt、icon-lg）。	随机混合 20pt / 24pt / 28pt 等任意数值。	保持界面节奏和视觉层次感。
击球一致性	在同一视觉图层中使用一致的描边宽度（例如，1.5px 或 2px）。	随意混合使用粗细笔画风格。	笔触不一致会降低画面的精致度和连贯性。
填充式与轮廓式学科	每个层级使用一种图标样式。	在同一层级混合使用填充图标和空心图标。	保持语义清晰和风格一致。
触及目标最低	最小交互区域为 44×44pt（如果图标较小，请使用 hitSlop）。	图标太小，点击区域也不大。	符合无障碍和平台易用性标准。
图标对齐	将图标与文本基线对齐，并保持一致的边距。	图标错位或图标周围间距不一致。	防止轻微的视觉不平衡，从而降低感知质量。
图标对比度	遵循 WCAG 对比度标准：小元素对比度为 4.5:1，较大的 UI 字形对比度至少为 3:1。	低对比度图标，与背景融为一体。	确保在浅色和深色模式下均可访问。

交互（应用）

规则	做	不
点击反馈	在 80-150 毫秒内提供清晰的按压反馈（波纹/不透明度/高度）	水龙头无视觉反应
动画时序	使用平台原生缓动效果，将微交互延迟控制在 150-300 毫秒左右。	瞬时过渡或慢速动画（>500毫秒）
无障碍重点	确保屏幕阅读器的焦点顺序与视觉顺序一致，并且标签具有描述性。	未标记的控件或令人困惑的焦点遍历
禁用状态清晰度	使用禁用语义（`disabled`/native disabled 属性）、降低强调程度，并且不显示点击操作	看起来可以点击但实际上没有任何作用的控件
触及目标最低	点击区域保持大于等于 44x44pt（iOS）或大于等于 48x48dp（Android），图标较小时扩大点击区域。	极小的点击目标或仅图标点击区域，没有留白
手势冲突预防	每个区域只保留一个主要手势，避免嵌套的点击/拖拽冲突。	重叠的手势导致意外动作
语义原生控件	优先选择具有适当辅助功能角色的原生交互式原语（例如`Button`，平台等效项）。`Pressable`	用作主要控件的通用容器，不包含语义信息

浅色/深色模式对比度

规则	做	不
表面可读性（光线）	保持卡片/表面与背景之间有足够的透明度/高度差，使其清晰分隔开来。	过于透明的表面模糊了层级结构。
文本对比度（浅色）	正文与浅色表面的对比度应保持在 4.5:1 以上	低对比度灰色正文
文本对比度（深色）	在深色表面上，主文字对比度应保持在 4.5:1 以上，次文字对比度应保持在 3:1 以上。	深色模式下的文字与背景融为一体
边框和分隔线可见性	确保分隔符在两种主题下都可见（而不仅仅是浅色模式）。	在一种模式下，主题特定的边框会消失。
国家对比奇偶性	在浅色和深色主题下，保持按下/聚焦/禁用状态的区分度相同	仅针对一个主题定义交互状态
基于代币的主题	使用语义化的颜色标记，并根据主题将其映射到应用程序的各个界面/文本/图标上。	每个屏幕硬编码的十六进制值
纱幕和模态清晰度	使用足够强的模态幕布来隔离前景内容（通常为 40-60% 的黑色）。	薄弱的幕布让背景在视觉上显得杂乱无章。

布局与间距

规则	做	不
安全区域合规性	所有固定标题栏、标签栏和行动号召栏都应遵守顶部/底部安全区域的规定。	将固定 UI 放置在刘海、状态栏或手势区域下方
系统条形间隙	为状态/导航栏和手势主页指示器添加间距	让可点击内容与操作系统界面碰撞
一致的内容宽度	保持不同设备类型（手机/平板电脑）的内容宽度一致	屏幕间任意宽度混合
8dp间距节奏	衬垫/间隙/截面间距采用一致的 4/8dp 间距系统	随机间隔增量，无节奏
可读文本测量	确保长篇文本在大屏幕上也能清晰可读（避免在平板电脑上使用边缘到边缘的段落）。	全宽长文本会降低可读性
截面间距层级	通过层级结构定义清晰的垂直节奏层级（例如，16/24/32/48）。	相似的用户界面层级，但间距不一致。
按断点自适应排线	在较大宽度和横向布局中增加水平插值	所有设备尺寸/方向的沟槽都相同。
滚动元素和固定元素共存	添加底部/顶部内容内嵌元素，这样列表就不会被固定栏遮挡。	滚动内容被固定页眉/页脚遮挡

交付前检查清单

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

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

视觉质量

不使用表情符号作为图标（请改用SVG格式）
所有图标均来自同一图标系列，风格统一。
官方品牌素材以正确的比例和留白使用。
按下状态下的视觉效果不会改变布局边界或导致抖动
语义主题标记的使用保持一致（没有针对每个屏幕的临时硬编码颜色）

相互作用

所有可点击元素均提供清晰的按压反馈（涟漪/不透明度/高度）
触摸目标需满足最小尺寸要求（iOS ≥ 44x44pt，Android ≥ 48x48dp）
微交互时间保持在 150-300 毫秒范围内，并具有原生般的缓动感。
禁用状态在视觉上清晰可见且无法交互。
屏幕阅读器焦点顺序与视觉顺序一致，交互式标签具有描述性。
手势区域避免嵌套/冲突的交互（点击/拖动/向后滑动冲突）

浅色/深色模式

在浅色和深色模式下，主文本对比度均≥4.5:1
在浅色和深色模式下，辅助文本对比度均≥3:1
分隔符/边界和交互状态在两种模式下都是可区分的。
模态框/抽屉式屏幕的遮光度足以保持前景的清晰度（通常为 40-60% 的黑色）。
两个主题在交付前都会进行测试（并非从单个主题推断而来）。

布局

标题栏、标签栏和底部行动号召栏都遵循安全区域原则。
滚动内容不会被固定/粘滞栏遮挡。
已在小尺寸手机、大尺寸手机和平板电脑（竖屏+横屏）上验证。
水平嵌条/凹槽可根据设备尺寸和方向正确调整
在组件、章节和页面级别上保持 4/8dp 的间距节奏。
长篇文本在大屏幕上仍然可读（没有段落横跨屏幕边缘的情况）

无障碍

所有有意义的图像/图标都带有辅助功能标签
表单字段包含标签、提示和清晰的错误信息。
颜色并非唯一的指标
支持减少动态效果和动态文本大小，且不会破坏布局。
辅助功能特性/角色/状态（选中、禁用、展开）能够正确播报。