做 Web/移动端 UI 设计与 UX 质量把控时…

当任务涉及界面结构、视觉设计、交互模式或用户体验质量（新建页面/组件、选风格配色字体、审查 UI 代码、优化可用性）时，按优先级规则与可检索设计库给出推荐并逐项自检。

适用场景

解决思路

1. 先判断任务是否属于 UI/UX 范畴：只要会改变功能的“外观、手感、动效或交互方式”，就应使用本技能；纯后端逻辑、API/数据库设计、与界面无关的性能优化、基础设施/DevOps、非可视化脚本则跳过。
2. 按优先级 1→10 依次聚焦规则类别：1 无障碍（CRITICAL）、2 触控与交互（CRITICAL）、3 性能（HIGH）、4 风格选择（HIGH）、5 布局与响应式（HIGH）、6 排版与颜色（MEDIUM）、7 动画（MEDIUM）、8 表单与反馈（MEDIUM）、9 导航模式（HIGH）、10 图表与数据（LOW）；需要细节时用 `--domain <Domain>` 查询。
3. 无障碍必查项：正文对比度至少 4.5:1（大文本 3:1）；交互元素保留 2–4px 可见焦点环；有意义的图片写描述性 alt 文本；纯图标按钮加 aria-label（原生用 accessibilityLabel）；Tab 顺序与视觉顺序一致并支持全键盘操作；表单用带 for 属性的 label；提供跳转到主内容的 skip link；标题按 h1→h6 顺序不跳级；不只用颜色传达信息（补图标/文字）；支持系统文字缩放且放大后不截断；尊重 prefers-reduced-motion；为 VoiceOver/读屏提供有意义的 accessibilityLabel/accessibilityHint 与合理阅读顺序；模态与多步流程提供取消/返回；保留系统与无障碍快捷键，拖拽操作提供键盘替代。
4. 触控与交互必查项：触控目标最小 44×44pt（Apple）/48×48dp（Material），图标小则扩大命中区域；触控目标间距至少 8px/8dp；主要交互用点击/轻触而非仅 hover；异步操作时禁用按钮并显示 spinner 或进度；错误信息就近显示；Web 可点击元素加 cursor-pointer；主内容避免横向滑动，优先纵向滚动；Web 用 touch-action: manipulation 减少 300ms 延迟；使用平台标准手势不重定义（如滑动返回、捏合缩放）；不阻塞系统手势（控制中心、返回滑动等）；按压有视觉反馈（ripple/highlight，MD state layers）；确认与重要操作用触觉反馈且不过度；关键操作不只靠手势，始终提供可见控件；主要触控目标避开刘海、灵动岛、手势条与屏幕边缘；不要求像素级精准点击小图标或细边缘；滑动操作要有明确提示（箭头、标签、教程）；拖拽前设移动阈值避免误触。
5. 性能必查项：图片用 WebP/AVIF、响应式图（srcset/sizes）、非关键资源懒加载；声明 width/height 或用 aspect-ratio 防止布局偏移（CLS < 0.1）；字体用 font-display: swap/optional 避免 FOIT 并预留空间；只预加载关键字体，不要对每个字重都 preload；优先首屏关键 CSS（内联或提前加载样式表）；非首屏组件用动态 import/路由级拆分懒加载；按路由/功能拆包（React Suspense / Next.js dynamic）降低首屏与 TTI；第三方脚本 async/defer 加载并审计删除不必要的；避免频繁布局读写，批量先读 DOM 再写；为异步内容预留空间避免跳动；首屏以下图片与重媒体用 loading="lazy"；50 条以上列表做虚拟化；每帧工作量控制在约 16ms 内以保 60fps，重任务移出主线程；超过 1s 的操作使用骨架屏/微光而非长时间阻塞 spinner；点击/滚动输入延迟控制在约 100ms 内；点击后 100ms 内给出视觉反馈；滚动、resize、输入等高频事件做 debounce/throttle；提供离线状态提示与基本降级（PWA/移动端）；弱网提供降级模式（低分辨率图片、更少动画）。
6. 风格选择必查项：风格匹配产品类型（用 `--design-system` 获取推荐）；所有页面保持同一风格；用 SVG 图标（Heroicons、Lucide）而非 emoji；配色从产品/行业出发（搜索 `--domain color`）；阴影、模糊、圆角与所选风格一致（glass/flat/clay 等）；尊重平台习惯（iOS HIG vs Material）的导航、控件、排版、动效；hover/pressed/disabled 状态清晰可辨且不脱离风格（Material state layers）；卡片、面板、模态使用一致的 elevation/阴影层级，避免随机阴影值；明暗两套主题一起设计以保持品牌、对比度与风格一致；全产品使用同一套图标语言（线宽、圆角）；优先原生/系统控件，仅在品牌需要时自定义；模糊用于表示背景可关闭（模态、面板）而非装饰；每屏只有一个主 CTA，次要操作视觉上从属。
7. 布局与响应式必查项：设置 viewport meta 为 width=device-width initial-scale=1，绝不禁止缩放；移动优先设计再放大到平板与桌面；使用系统化断点（如 375 / 768 / 1024 / 1440）；移动端正文最小 16px（避免 iOS 自动缩放）；每行字符数移动端 35–60、桌面 60–75；移动端不出现横向滚动，内容适配视口宽度；使用 4pt/8dp 递增间距系统；组件间距适合触控，不拥挤也不易误触；桌面端统一 max-width（max-w-6xl / 7xl）；定义分层 z-index 尺度（如 0 / 10 / 20 / 40 / 100 / 1000）；固定导航栏/底栏必须为下方内容预留安全内边距；避免嵌套滚动区域干扰主滚动；移动端优先用 min-h-dvh 而非 100vh；横屏下布局仍可读可操作；移动端先展示核心内容，次要内容折叠或隐藏；用尺寸、间距、对比度建立层级，而非只靠颜色。
8. 排版与颜色必查项：正文行高 1.5–1.75；每行限制 65–75 字符；标题与正文字体气质匹配；使用一致的字号阶梯（如 12 14 16 18 24 32）；浅色背景上用深色文字（如白底 slate-900）；使用平台字体系统（iOS 11 Dynamic Type / Material 5 的 display、headline、title、body、label 角色）；用字重强化层级：标题 600–700、正文 400、标签 500；定义语义色 token（primary、secondary、error、surface、on-surface），组件中不写裸 hex；暗色模式用去饱和/更亮的色调变体而非简单反色，并单独测对比度；前景/背景组合满足 4.5:1（AA）或 7:1（AAA）并用工具验证；功能性颜色（错误红、成功绿）必须配图标/文字，不只用颜色表意；优先换行而非截断，截断时用省略号并通过 tooltip/展开提供全文；尊重各平台默认字距，正文不要收紧字距；数据列、价格、计时器用等宽数字避免布局抖动；有意识地用留白分组相关内容、分隔区块，避免视觉杂乱。
9. 动画必查项：微交互 150–300ms，复杂过渡 ≤400ms，避免 >500ms；只用 transform/opacity 动画，不动画 width/height/top/left；加载超过 300ms 显示骨架屏或进度指示；每屏最多动画 1–2 个关键元素；进入用 ease-out、退出用 ease-in，UI 过渡避免 linear；每个动画都要表达因果关系而非纯装饰；状态变化（hover/active/展开/收起/模态）平滑过渡而非突变；页面/屏幕切换保持空间连续性（共享元素、方向性滑动）；视差效果少用，必须尊重 reduced-motion 且不造成迷失；优先弹簧/物理曲线而非 linear 或 cubic-bezier；退出动画比进入短（约为进入时长的 60–70%）；列表/网格项入场按每项 30–50ms 错开，避免同时出现或过慢；屏幕间用共享元素/hero 过渡保持视觉连续；动画必须可中断，用户点击/手势立即取消进行中的动画；动画期间绝不阻塞用户输入，UI 保持可交互；同一容器内内容替换用交叉淡入淡出；可点卡片/按钮按压时轻微缩放（0.95–1.05）并在松开后恢复；拖拽、滑动、捏合必须实时跟随手指给出视觉响应；用位移/缩放方向表达层级：从下方进入=更深，向上退出=返回；全局统一时长/缓动 token，所有动画节奏一致；淡出元素不要停留在 opacity 0.2 以下，要么完全淡出要么保持可见；模态/面板从触发源动画出现（缩放+淡入或滑入）以提供空间上下文；前进导航向左/上动画，后退向右/下动画，方向逻辑保持一致；动画不得引起布局重排或 CLS，位置变化用 transform。
10. 表单与反馈必查项：每个输入都有可见 label（不能只有 placeholder）；错误显示在对应字段下方；提交时先 loading 再显示成功/错误；标记必填字段（如星号）；无内容时给出有帮助的空状态与操作；toast 3–5 秒自动消失；破坏性操作前弹确认对话框；复杂输入下方提供常驻辅助说明而非只靠 placeholder；禁用元素用降低不透明度（0.38–0.5）+ 光标变化 + 语义属性；复杂选项渐进披露，不要一上来就全铺开；在 blur 时校验（不是每次按键），用户输完再显示错误；用语义化 input type（email、tel、number）触发正确的移动键盘；密码字段提供显示/隐藏切换；用 autocomplete / textContentType 属性支持系统自动填充；破坏性或批量操作支持撤销（如“已删除”toast 带撤销）；操作完成后用简短视觉反馈确认（对勾、toast、颜色闪烁）；错误信息必须给出明确恢复路径（重试、编辑、帮助链接）；多步流程显示步骤指示或进度条并允许返回；长表单自动保存草稿防止误关丢失；有未保存更改时关闭面板/模态前先确认；错误信息说明原因+如何修复（不能只说“输入无效”）；相关字段按逻辑分组（fieldset/legend 或视觉分组）；只读状态在视觉与语义上要与禁用区分；提交出错后自动聚焦第一个无效字段；多个错误时在顶部显示汇总并带锚点链接到各字段；移动端输入框高度 ≥44px 以满足触控目标；破坏性操作使用语义危险色（红）并与主操作视觉分离；toast 不得抢焦点，用 aria-live="polite" 供读屏播报；表单错误用 aria-live 区域或 role="alert" 通知读屏；错误与成功状态颜色满足 4.5:1 对比度；请求超时必须给出明确反馈并提供重试。
11. 导航模式必查项：底部导航最多 5 项，图标配文字标签；抽屉/侧边栏用于次级导航而非主要操作；返回行为可预测且一致，保留滚动位置与状态；所有关键屏幕可通过深链/URL 到达以支持分享与通知；iOS 用底部 Tab Bar 做顶层导航；Android 用带导航图标的 Top App Bar 作为主结构；导航项必须同时有图标和文字标签，纯图标导航损害可发现性；当前位置在导航中要有视觉高亮（颜色、字重、指示器）；主导航（标签/底栏）与次级导航（抽屉/设置）明确分离；模态与面板必须提供清晰的关闭/收起入口，移动端支持下滑关闭；搜索要易于触达（顶栏或标签页），并提供最近/建议查询；Web 端 3 层以上层级用面包屑帮助定位；返回时必须恢复之前的滚动位置、筛选状态与输入；支持系统手势导航（iOS 滑动返回、Android 预测性返回）且不冲突；导航项上的角标要少用，用于未读/待处理，用户访问后清除；操作超出可用空间时用溢出/更多菜单而非硬塞；底部导航只用于顶层屏幕，绝不在其中嵌套子导航；大屏（≥1024px）优先侧边栏，小屏用底部/顶部导航；绝不静默重置导航栈或意外跳回首页；导航位置在所有页面保持一致，不因页面类型改变；不要在同一层级混用 Tab + 侧边栏 + 底部导航；模态不得用于主要导航流程，会打断用户路径；路由切换后把焦点移到主内容区域供读屏用户使用；核心导航在深层页面仍可触达，不要完全藏在子流程里；危险操作（删除账号、退出登录）在视觉与空间上与普通导航项分离；导航目标不可用时说明原因而非静默隐藏。
12. 图表与数据必查项：图表类型匹配数据类型（趋势→折线、对比→柱状、占比→饼/环）；使用无障碍配色，避免仅用红/绿对（色盲用户）；提供表格替代方案，图表本身对读屏不友好；用图案、纹理或形状补充颜色，使数据不依赖颜色也能区分；始终显示图例并靠近图表，不要放在滚动折叠线以下；hover（Web）或点击（移动端）提供 tooltip/数据标签显示精确值；坐标轴标注单位与可读刻度，移动端避免截断或旋转标签；图表在小屏上重排或简化（如横向柱状替代纵向、减少刻度）；无数据时显示有意义的空状态（“暂无数据”+引导）而非空白图表；数据加载时用骨架屏/微光占位，不要显示空坐标框；图表入场动画必须尊重 prefers-reduced-motion，数据应立即可读；1000+ 数据点做聚合或采样，用下钻看细节而非全部渲染；坐标轴与标签的数字、日期、货币使用本地化格式；交互图表元素（点、扇区）点击区域 ≥44pt 或触摸时放大；超过 5 个类别避免饼/环图，改用柱状图更清晰；数据线/柱与背景对比度 ≥3:1，数据文字标签 ≥4.5:1；图例可点击以切换系列显隐；小数据集直接在图上标注数值减少视线移动；tooltip 内容必须键盘可达，不能只靠 hover；数据表格支持排序并用 aria-sort 指示当前排序状态；坐标轴刻度不拥挤，保持可读间距，小屏自动跳过；限制单图信息密度避免认知过载，必要时拆成多图；强调数据趋势而非装饰，避免重渐变/阴影遮挡数据；网格线用低对比度（如 gray-200）以免与数据竞争；交互图表元素（点、柱、扇区）必须可键盘导航；为读屏提供描述图表关键结论的文本摘要或 aria-label；数据加载失败必须显示错误信息与重试操作，而非破损/空图表；数据密集型产品提供图表数据的 CSV/图片导出；下钻交互必须保持清晰的返回路径与层级面包屑；时间序列图必须明确标注时间粒度（日/周/月）并允许切换。
13. 按场景选择入口：新项目/新页面从“分析需求 → 生成设计系统”开始；新组件从领域搜索（style、ux）开始；选风格/配色/字体从生成设计系统开始；审查现有 UI 用上面的优先级清单；修 UI bug 定位到对应清单章节；改进/优化搜索 ux、react 领域；实现暗色模式搜索 style 的 dark mode；加图表搜索 chart 领域；技术栈最佳实践搜索对应 stack。
14. 分析需求时提取：产品类型（娱乐/工具/生产力或混合）、目标受众（C 端用户，考虑年龄、使用场景）、风格关键词（playful、vibrant、minimal、dark mode、content-first、immersive 等）、技术栈。
15. 生成设计系统（必做）：运行 `python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]`，它会并行搜索 product、style、color、landing、typography 领域，应用 `ui-reasoning.csv` 推理规则选出最佳匹配，返回完整设计系统（pattern、style、colors、typography、effects）及需避免的反模式。
16. 持久化设计系统以支持跨会话分层检索：加 `--persist` 运行 `python3 scripts/search.py "<query>" --design-system --persist -p "Project Name"`，生成 `design-system/MASTER.md`（全局唯一事实来源）与 `design-system/pages/` 目录；加 `--page "dashboard"` 还会生成 `design-system/pages/dashboard.md` 作为该页对 Master 的偏离覆盖。检索时先查 `design-system/pages/<page>.md`，存在则其规则覆盖 Master，否则只用 Master。
17. 用领域搜索补充细节：`python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]`；可用领域包括 product（产品类型模式）、style（风格选项）、color（配色）、typography（字体搭配）、chart（图表推荐）、ux（UX 最佳实践）、google-fonts（单个 Google 字体）、landing（落地页结构）、react（React/Next.js 性能）、web（App 界面指南）、prompt（AI 提示/CSS 关键词）。
18. 用技术栈搜索获取实现级最佳实践：`python3 scripts/search.py "<keyword>" --stack react-native`（可用 stack：react-native，聚焦组件、导航、列表）。
19. 输出格式：`--design-system` 默认 ASCII 框（适合终端），加 `-f markdown` 输出 Markdown（适合文档）。
20. 查询技巧：用多维关键词组合产品+行业+语气+密度（如 `"entertainment social vibrant content-dense"` 而非 `"app"`）；同一需求换关键词多试（`"playful neon"` → `"vibrant dark"` → `"content-first minimal"`）；先用 `--design-system` 拿整体推荐，再用 `--domain` 深挖不确定的维度；实现级指导始终加 `--stack react-native`。
21. 常见卡点对应处理：定不下风格/配色就换关键词重跑 `--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`。
22. 交付前检查：先跑 `--domain ux "animation accessibility z-index loading"` 做 UX 验证；再过一遍 §1–§3（CRITICAL + HIGH）；在 375px 小屏与横屏下测试；开启 reduced-motion 与最大 Dynamic Type 验证；单独检查暗色模式对比度（不要假设浅色值可用）；确认所有触控目标 ≥44pt 且无内容被安全区遮挡。
23. 图标与视觉元素规范：不用 emoji 作结构性图标，改用矢量图标（Lucide、react-native-vector-icons、@expo/vector-icons）；只用 SVG 或平台矢量图标（可缩放、可主题化），不用会模糊的 PNG 位图；按压状态用颜色/不透明度/elevation 过渡，不改变布局边界；使用官方品牌资产并遵守其间距、颜色、留白规范；图标尺寸定义为设计 token（如 icon-sm、icon-md = 24pt、icon-lg），不随机混用 20/24/28pt；同一视觉层内线宽一致（如 1.5px 或 2px）；同一层级只用一种图标风格（填充或描边）；触控区域最小 44×44pt（图标更小则用 hitSlop 扩大）；图标与文字基线对齐并保持一致的 padding；图标对比度遵循 WCAG：小元素 4.5:1，较大 UI 字形至少 3:1。
24. App 交互规范：点击后 80–150ms 内给出清晰按压反馈（ripple/不透明度/elevation）；微交互保持约 150–300ms 并用平台原生缓动；读屏焦点顺序与视觉顺序一致且标签有描述性；禁用状态用 disabled 语义 + 降低强调 + 不可点击；触控区域 ≥44×44pt（iOS）或 ≥48×48dp（Android），图标小则扩大命中区；每个区域只保留一个主手势，避免嵌套点击/拖拽冲突；优先使用原生交互原语（Button、Pressable 及平台等价物）并带正确的无障碍角色。
25. 明暗模式对比规范：浅色下卡片/表面与背景要有足够不透明度/elevation 清晰分离；浅色正文对比度 ≥4.5:1；暗色主文字对比度 ≥4.5:1、次要文字 ≥3:1；分隔线与边框在两种主题下都可见；pressed/focused/disabled 状态在明暗两套主题下同样可区分；用按主题映射的语义色 token 覆盖表面/文字/图标，不写死每屏 hex；模态遮罩要足够强以隔离前景（通常 40–60% 黑）。
26. 布局与间距规范：所有固定头部、标签栏、CTA 栏尊重上下安全区；为状态栏/导航栏与手势 home 指示器留出间距，不让可点内容与系统 UI 冲突；按设备类别（手机/平板）保持可预测的内容宽度；使用一致的 4/8dp 间距系统；大设备上长文本保持可读行宽（平板不要边到边段落）；按层级定义清晰的垂直节奏层级（如 16/24/32/48）；更大宽度与横屏下增大水平内边距；为列表加底部/顶部内容内边距，避免被固定栏遮挡。
27. 交付前最终核对清单：视觉质量——无 emoji 图标、图标来自同一家族与风格、品牌资产比例与留白正确、按压态不移动布局、语义主题 token 一致使用；交互——所有可点元素有按压反馈、触控目标达标、微交互 150–300ms 且缓动原生、禁用态清晰不可交互、读屏焦点顺序与视觉一致且标签有描述、手势区域无嵌套冲突；明暗模式——主文字两模式 ≥4.5:1、次要文字 ≥3:1、分隔线与交互态两模式可辨、模态遮罩足够强（通常 40–60% 黑）、两套主题都实测过；布局——安全区被尊重、滚动内容不被固定栏遮挡、在小/大手机与平板（竖屏+横屏）验证、水平内边距按尺寸与方向自适应、4/8dp 节奏贯穿组件/区块/页面、大设备长文本行宽可读；无障碍——有意义的图片/图标有标签、表单字段有 label/提示/清晰错误、颜色不是唯一指示、支持 reduced motion 与动态字号且不破版、无障碍 traits/roles/states（selected、disabled、expanded）正确播报。

适用边界 · 注意事项

• 纯后端逻辑开发、仅涉及 API 或数据库设计、与界面无关的性能优化、基础设施或 DevOps 工作、非可视化脚本或自动化任务。
• 任务不会改变功能的“外观、手感、动效或交互方式”时无需使用。
• 本技能的规则与检查清单面向 App UI（iOS/Android/React Native/Flutter），不适用于桌面 Web 交互模式。