ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Precedence: Use this skill when the primary goal is design system intelligence — structured style/palette/font/guideline selection. For distinctive visual aesthetics, use
frontend-design
. For React/Next.js performance, use
vercel-react-best-practices
.

优先级： 当主要目标是_设计系统智能_——结构化地选择样式、配色、字体和指南时，使用此 skill。对于独特的视觉美学，使用
frontend-design
。对于 React/Next.js 性能，使用
vercel-react-best-practices
。

UI/UX Pro Max - Design Intelligence

UI/UX Pro Max - 设计智能

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.

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

When to Apply

何时使用

This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

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

Must Use

必须使用

This Skill must be invoked in the following situations:

Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
Choosing color schemes, typography systems, spacing standards, or layout systems
Reviewing UI code for user experience, accessibility, or visual consistency
Implementing navigation structures, animations, or responsive behavior
Making product-level design decisions (style, information hierarchy, brand expression)
Improving perceived quality, clarity, or usability of interfaces

以下情况必须调用此 Skill：

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

Skip

跳过

This Skill is not needed in the following situations:

Pure backend logic development
Only involving API or database design
Performance optimization unrelated to the interface
Infrastructure or DevOps work
Non-visual scripts or automation tasks

Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used.

以下情况无需使用此 Skill：

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

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

Rule Categories by Priority

按优先级划分的规则类别

For human/AI reference: follow priority 1→10 to decide which rule category to focus on first; use
--domain <Domain>
to query details when needed. Scripts do not read this table.


ux
ux
ux
style
ux
typography
ux
ux
ux
chart

Priority	Category	Impact	Domain	Key Checks (Must Have)	Anti-Patterns (Avoid)
1	Accessibility	CRITICAL	`ux`	Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels	Removing focus rings, Icon-only buttons without labels
2	Touch & Interaction	CRITICAL	`ux`	Min size 44×44px, 8px+ spacing, Loading feedback	Reliance on hover only, Instant state changes (0ms)
3	Performance	HIGH	`ux`	WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1)	Layout thrashing, Cumulative Layout Shift
4	Style Selection	HIGH	`style` , `product`	Match product type, Consistency, SVG icons (no emoji)	Mixing flat & skeuomorphic randomly, Emoji as icons
5	Layout & Responsive	HIGH	`ux`	Mobile-first breakpoints, Viewport meta, No horizontal scroll	Horizontal scroll, Fixed px container widths, Disable zoom
6	Typography & Color	MEDIUM	`typography` , `color`	Base 16px, Line-height 1.5, Semantic color tokens	Text < 12px body, Gray-on-gray, Raw hex in components
7	Animation	MEDIUM	`ux`	Duration 150–300ms, Motion conveys meaning, Spatial continuity	Decorative-only animation, Animating width/height, No reduced-motion
8	Forms & Feedback	MEDIUM	`ux`	Visible labels, Error near field, Helper text, Progressive disclosure	Placeholder-only label, Errors only at top, Overwhelm upfront
9	Navigation Patterns	HIGH	`ux`	Predictable back, Bottom nav ≤5, Deep linking	Overloaded nav, Broken back behavior, No deep links
10	Charts & Data	LOW	`chart`	Legends, Tooltips, Accessible colors	Relying on color alone to convey meaning

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


ux
ux
ux
style
ux
typography
ux
ux
ux
chart

优先级	类别	影响	领域	关键检查项（必备）	反模式（避免）
1	无障碍	关键	`ux`	对比度 4.5:1、替代文本、键盘导航、Aria-label	移除焦点环、仅含图标的按钮没有标签
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、灰字叠灰、在组件中使用原始十六进制色值
7	动画	中	`ux`	时长 150–300ms、动效传达含义、空间连续性	纯装饰动画、动画化 width/height、未适配 reduced-motion
8	表单与反馈	中	`ux`	可见标签、字段旁错误、辅助文本、渐进披露	仅用 placeholder 作为标签、错误仅显示在顶部、一开始就展示过多信息
9	导航模式	高	`ux`	可预测的返回、底部导航不超过 5 项、深度链接	导航过载、返回行为失效、没有深度链接
10	图表与数据	低	`chart`	图例、提示工具、无障碍配色	仅依赖颜色传达含义

Quick Reference

快速参考

Private Component Registries

私有组件注册表

When a UI task uses shadcn/ui MCP, shadcnblocks, or private component registries, check for encrypted component config before concluding a registry is unavailable. In Darkmatter UI projects,

components.sops.json

may contain additional registries; use the

sops-secret-access

skill and decrypt with

sops -d components.sops.json

without printing decrypted contents.

当 UI 任务使用 shadcn/ui MCP、shadcnblocks 或私有组件注册表时，应先检查是否存在加密的组件配置，再判断注册表是否不可用。在 Darkmatter UI 项目中，

components.sops.json

可能包含其他注册表；使用

sops-secret-access

skill，并通过

sops -d components.sops.json

解密，且不得打印解密后的内容。

1. Accessibility (CRITICAL)

1. 无障碍（关键）

```
color-contrast
```
- Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design
```
focus-states
```
- Visible focus rings on interactive elements (2–4px; Apple HIG, MD)
```
alt-text
```
- Descriptive alt text for meaningful images
```
aria-labels
```
- aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)
```
keyboard-nav
```
- Tab order matches visual order; full keyboard support (Apple HIG)
```
form-labels
```
- Use label with for attribute
```
skip-links
```
- Skip to main content for keyboard users
```
heading-hierarchy
```
- Sequential h1→h6, no level skip
```
color-not-only
```
- Don't convey info by color alone (add icon/text)
```
dynamic-type
```
- Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)
```
reduced-motion
```
- Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD)
```
voiceover-sr
```
- Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD)
```
escape-routes
```
- Provide cancel/back in modals and multi-step flows (Apple HIG)
```
keyboard-shortcuts
```
- Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)

```
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、MD）

2. Touch & Interaction (CRITICAL)

2. 触控与交互（关键）

```
touch-target-size
```
- Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed
```
touch-spacing
```
- Minimum 8px/8dp gap between touch targets (Apple HIG, MD)
```
hover-vs-tap
```
- Use click/tap for primary interactions; don't rely on hover alone
```
loading-buttons
```
- Disable button during async operations; show spinner or progress
```
error-feedback
```
- Clear error messages near problem
```
cursor-pointer
```
- Add cursor-pointer to clickable elements (Web)
```
gesture-conflicts
```
- Avoid horizontal swipe on main content; prefer vertical scroll
```
tap-delay
```
- Use touch-action: manipulation to reduce 300ms delay (Web)
```
standard-gestures
```
- Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)
```
system-gestures
```
- Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)
```
press-feedback
```
- Visual feedback on press (ripple/highlight; MD state layers)
```
haptic-feedback
```
- Use haptic for confirmations and important actions; avoid overuse (Apple HIG)
```
gesture-alternative
```
- Don't rely on gesture-only interactions; always provide visible controls for critical actions
```
safe-area-awareness
```
- Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges
```
no-precision-required
```
- Avoid requiring pixel-perfect taps on small icons or thin edges
```
swipe-clarity
```
- Swipe actions must show clear affordance or hint (chevron, label, tutorial)
```
drag-threshold
```
- Use a movement threshold before starting drag to avoid accidental drags

```
touch-target-size
```
- 最小 44×44pt（Apple）/ 48×48dp（Material）；必要时将点击区域扩展到视觉边界之外
```
touch-spacing
```
- 触控目标之间至少保留 8px/8dp 间距（Apple HIG、MD）
```
hover-vs-tap
```
- 主要交互使用 click/tap；不要仅依赖 hover
```
loading-buttons
```
- 异步操作期间禁用按钮；显示 spinner 或进度
```
error-feedback
```
- 在问题附近显示清晰的错误消息
```
cursor-pointer
```
- 为可点击元素添加 cursor-pointer（Web）
```
gesture-conflicts
```
- 避免在主要内容上使用横向滑动；优先使用纵向滚动
```
tap-delay
```
- 使用 touch-action: manipulation 减少 300ms 延迟（Web）
```
standard-gestures
```
- 一致使用平台标准手势；不要重新定义（如 swipe-back、pinch-zoom）（Apple HIG、MD）
```
system-gestures
```
- 不要阻止系统手势（控制中心、返回滑动等）（Apple HIG、MD）
```
press-feedback
```
- 按下时提供视觉反馈（波纹/高亮；MD state layers）
```
haptic-feedback
```
- 对确认和重要操作使用 haptic；避免过度使用
```
gesture-alternative
```
- 不要仅依赖手势交互；关键操作始终提供可见控件
```
safe-area-awareness
```
- 主要触控目标应避开刘海、Dynamic Island、手势条和屏幕边缘
```
no-precision-required
```
- 避免要求用户精确点击小型图标或细窄边缘
```
swipe-clarity
```
- 滑动操作必须提供明确的可供性或提示（chevron、标签、教程）
```
drag-threshold
```
- 拖动开始前设置移动阈值，避免误操作

3. Performance (HIGH)

3. 性能（高）

```
image-optimization
```
- Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets
```
image-dimension
```
- Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)
```
font-loading
```
- Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)
```
font-preload
```
- Preload only critical fonts; avoid overusing preload on every variant
```
critical-css
```
- Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)
```
lazy-loading
```
- Lazy load non-hero components via dynamic import / route-level splitting
```
bundle-splitting
```
- Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI
```
third-party-scripts
```
- Load third-party scripts async/defer; audit and remove unnecessary ones (MD)
```
reduce-reflows
```
- Avoid frequent layout reads/writes; batch DOM reads then writes
```
content-jumping
```
- Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)
```
lazy-load-below-fold
```
- Use loading="lazy" for below-the-fold images and heavy media
```
virtualize-lists
```
- Virtualize lists with 50+ items to improve memory efficiency and scroll performance
```
main-thread-budget
```
- Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)
```
progressive-loading
```
- Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG)
```
input-latency
```
- Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard)
```
tap-feedback-speed
```
- Provide visual feedback within 100ms of tap (Apple HIG)
```
debounce-throttle
```
- Use debounce/throttle for high-frequency events (scroll, resize, input)
```
offline-support
```
- Provide offline state messaging and basic fallback (PWA / mobile)
```
network-fallback
```
- Offer degraded modes for slow networks (lower-res images, fewer animations)

```
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
```
- 仅预加载关键字体；避免在每个变体中过度使用预加载
```
critical-css
```
- 优先处理首屏 CSS（内联关键 CSS 或提前加载样式表）
```
lazy-loading
```
- 通过 dynamic import/路由级拆分延迟加载非首屏组件
```
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 的操作使用 skeleton screen/shimmer，而不是长时间阻塞式 spinner
```
input-latency
```
- 点击和滚动的输入延迟保持在约 100ms 以内（Material 响应性标准）
```
tap-feedback-speed
```
- 点击后 100ms 内提供视觉反馈（Apple HIG）
```
debounce-throttle
```
- 对高频事件（滚动、缩放、输入）使用 debounce/throttle
```
offline-support
```
- 提供离线状态提示和基础降级方案（PWA/移动端）
```
network-fallback
```
- 为慢速网络提供降级模式（较低分辨率图片、减少动画）

4. Style Selection (HIGH)

4. 样式选择（高）

```
style-match
```
- Match style to product type (use
```
--design-system
```
for recommendations)
```
consistency
```
- Use same style across all pages
```
no-emoji-icons
```
- Use SVG icons (Heroicons, Lucide), not emojis
```
color-palette-from-product
```
- Choose palette from product/industry (search
```
--domain color
```
)
```
effects-match-style
```
- Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.)
```
platform-adaptive
```
- Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion
```
state-clarity
```
- Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
```
elevation-consistent
```
- Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
```
dark-mode-pairing
```
- Design light/dark variants together to keep brand, contrast, and style consistent
```
icon-style-consistent
```
- Use one icon set/visual language (stroke width, corner radius) across the product
```
system-controls
```
- Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
```
blur-purpose
```
- Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)
```
primary-action
```
- Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)

```
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 与 Material）：导航、控件、排版和动效
```
state-clarity
```
- hover、pressed、disabled 状态应有明显视觉区别，同时保持风格一致（Material state layers）
```
elevation-consistent
```
- 卡片、抽屉和模态框使用统一的高度/阴影层级；避免随机阴影值
```
dark-mode-pairing
```
- 同步设计浅色和深色变体，保持品牌、对比度和风格一致
```
icon-style-consistent
```
- 在整个产品中使用同一套图标和视觉语言（描边宽度、圆角）
```
system-controls
```
- 优先使用原生或系统控件；仅在品牌要求时定制（Apple HIG）
```
blur-purpose
```
- 使用模糊表示背景关闭（模态框、抽屉），不要将其作为装饰（Apple HIG）
```
primary-action
```
- 每个屏幕只应有一个主要 CTA；次要操作在视觉上处于次要地位（Apple HIG）

5. Layout & Responsive (HIGH)

5. 布局与响应式（高）

```
viewport-meta
```
- width=device-width initial-scale=1 (never disable zoom)
```
mobile-first
```
- Design mobile-first, then scale up to tablet and desktop
```
breakpoint-consistency
```
- Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)
```
readable-font-size
```
- Minimum 16px body text on mobile (avoids iOS auto-zoom)
```
line-length-control
```
- Mobile 35–60 chars per line; desktop 60–75 chars
```
horizontal-scroll
```
- No horizontal scroll on mobile; ensure content fits viewport width
```
spacing-scale
```
- Use 4pt/8dp incremental spacing system (Material Design)
```
touch-density
```
- Keep component spacing comfortable for touch: not cramped, not causing mis-taps
```
container-width
```
- Consistent max-width on desktop (max-w-6xl / 7xl)
```
z-index-management
```
- Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)
```
fixed-element-offset
```
- Fixed navbar/bottom bar must reserve safe padding for underlying content
```
scroll-behavior
```
- Avoid nested scroll regions that interfere with the main scroll experience
```
viewport-units
```
- Prefer min-h-dvh over 100vh on mobile
```
orientation-support
```
- Keep layout readable and operable in landscape mode
```
content-priority
```
- Show core content first on mobile; fold or hide secondary content
```
visual-hierarchy
```
- Establish hierarchy via size, spacing, contrast — not color alone

```
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. Typography & Color (MEDIUM)

6. 排版与颜色（中）

```
line-height
```
- Use 1.5-1.75 for body text
```
line-length
```
- Limit to 65-75 characters per line
```
font-pairing
```
- Match heading/body font personalities
```
font-scale
```
- Consistent type scale (e.g. 12 14 16 18 24 32)
```
contrast-readability
```
- Darker text on light backgrounds (e.g. slate-900 on white)
```
text-styles-system
```
- Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
```
weight-hierarchy
```
- Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
```
color-semantic
```
- Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
```
color-dark-mode
```
- Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
```
color-accessible-pairs
```
- Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
```
color-not-decorative-only
```
- Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
```
truncation-strategy
```
- Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)
```
letter-spacing
```
- Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)
```
number-tabular
```
- Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift
```
whitespace-balance
```
- Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)

```
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
```
- 优先换行而非截断；需要截断时使用省略号，并通过 tooltip/展开提供完整文本（Apple HIG）
```
letter-spacing
```
- 尊重各平台默认 letter-spacing；避免正文使用过紧的字距（HIG、MD）
```
number-tabular
```
- 数据列、价格和计时器使用等宽数字，防止布局偏移
```
whitespace-balance
```
- 有意识地使用留白来组织相关内容并分隔章节；避免视觉杂乱（Apple HIG）

7. Animation (MEDIUM)

7. 动画（中）

```
duration-timing
```
- Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
```
transform-performance
```
- Use transform/opacity only; avoid animating width/height/top/left
```
loading-states
```
- Show skeleton or progress indicator when loading exceeds 300ms
```
excessive-motion
```
- Animate 1-2 key elements per view max
```
easing
```
- Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions
```
motion-meaning
```
- Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
```
state-transition
```
- State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
```
continuity
```
- Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
```
parallax-subtle
```
- Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
```
spring-physics
```
- Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)
```
exit-faster-than-enter
```
- Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
```
stagger-sequence
```
- Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)
```
shared-element-transition
```
- Use shared element / hero transitions for visual continuity between screens (MD, HIG)
```
interruptible
```
- Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG)
```
no-blocking-animation
```
- Never block user input during an animation; UI must stay interactive (Apple HIG)
```
fade-crossfade
```
- Use crossfade for content replacement within the same container (MD)
```
scale-feedback
```
- Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)
```
gesture-feedback
```
- Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)
```
hierarchy-motion
```
- Use translate/scale direction to express hierarchy: enter from below = deeper, exit upward = back (MD)
```
motion-consistency
```
- Unify duration/easing tokens globally; all animations share the same rhythm and feel
```
opacity-threshold
```
- Fading elements should not linger below opacity 0.2; either fade fully or remain visible
```
modal-motion
```
- Modals/sheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD)
```
navigation-direction
```
- Forward navigation animates left/up; backward animates right/down — keep direction logically consistent (HIG)
```
layout-shift-avoid
```
- Animations must not cause layout reflow or CLS; use transform for position changes

```
duration-timing
```
- 微交互使用 150–300ms；复杂转场不超过 400ms；避免超过 500ms（MD）
```
transform-performance
```
- 仅动画化 transform/opacity；避免动画化 width/height/top/left
```
loading-states
```
- 加载超过 300ms 时显示 skeleton 或进度指示器
```
excessive-motion
```
- 每个视图最多动画化 1-2 个关键元素
```
easing
```
- 进入动画使用 ease-out，退出动画使用 ease-in；UI 转场避免 linear
```
motion-meaning
```
- 每个动画都必须表达因果关系，而不只是装饰（Apple HIG）
```
state-transition
```
- 状态变化（hover / active / expanded / collapsed / modal）应平滑动画过渡，而不是瞬间切换
```
continuity
```
- 页面或屏幕转场应保持空间连续性（共享元素、方向性滑动）（Apple HIG）
```
parallax-subtle
```
- 谨慎使用视差效果；必须尊重 reduced-motion，且不得造成方向迷失（Apple HIG）
```
spring-physics
```
- 为获得自然体验，优先使用弹簧/物理曲线，而非 linear 或 cubic-bezier（Apple HIG fluid animations）
```
exit-faster-than-enter
```
- 退出动画应比进入动画短（约为进入时长的 60–70%），以提升响应速度（MD motion）
```
stagger-sequence
```
- 列表或网格项进入时按每项 30–50ms 错开；避免同时出现或过慢显示（MD motion）
```
shared-element-transition
```
- 使用共享元素/主视觉转场，保持屏幕间的视觉连续性（MD、HIG）
```
interruptible
```
- 动画必须可中断；用户点击或手势应立即取消正在进行的动画（Apple HIG）
```
no-blocking-animation
```
- 动画期间绝不能阻止用户输入；UI 必须保持可交互（Apple HIG）
```
fade-crossfade
```
- 同一容器中的内容替换使用交叉淡化（MD）
```
scale-feedback
```
- 按下可点击卡片或按钮时轻微缩放（0.95–1.05）；释放时恢复（Apple HIG、MD）
```
gesture-feedback
```
- 拖动、滑动和捏合操作必须提供实时视觉反馈并跟随手指（MD Motion）
```
hierarchy-motion
```
- 使用 translate/scale 方向表达层级：从下方进入表示更深层级，向上退出表示返回（MD）
```
motion-consistency
```
- 全局统一时长和缓动令牌；所有动画应共享一致的节奏和感觉
```
opacity-threshold
```
- 淡出元素不应停留在低于 0.2 的不透明度；应完全淡出或保持可见
```
modal-motion
```
- 模态框和抽屉应从触发源动画出现（缩放+淡化或滑动），以提供空间上下文（HIG、MD）
```
navigation-direction
```
- 正向导航向左或向上动画；返回导航向右或向下动画——保持方向逻辑一致
```
layout-shift-avoid
```
- 动画不得引起布局重排或 CLS；位置变化使用 transform

8. Forms & Feedback (MEDIUM)

8. 表单与反馈（中）

```
input-labels
```
- Visible label per input (not placeholder-only)
```
error-placement
```
- Show error below the related field
```
submit-feedback
```
- Loading then success/error state on submit
```
required-indicators
```
- Mark required fields (e.g. asterisk)
```
empty-states
```
- Helpful message and action when no content
```
toast-dismiss
```
- Auto-dismiss toasts in 3-5s
```
confirmation-dialogs
```
- Confirm before destructive actions
```
input-helper-text
```
- Provide persistent helper text below complex inputs, not just placeholder (Material Design)
```
disabled-states
```
- Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)
```
progressive-disclosure
```
- Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)
```
inline-validation
```
- Validate on blur (not keystroke); show error only after user finishes input (MD)
```
input-type-keyboard
```
- Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)
```
password-toggle
```
- Provide show/hide toggle for password fields (MD)
```
autofill-support
```
- Use autocomplete / textContentType attributes so the system can autofill (HIG, MD)
```
undo-support
```
- Allow undo for destructive or bulk actions (e.g. "Undo delete" toast) (Apple HIG)
```
success-feedback
```
- Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD)
```
error-recovery
```
- Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD)
```
multi-step-progress
```
- Multi-step flows show step indicator or progress bar; allow back navigation (MD)
```
form-autosave
```
- Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG)
```
sheet-dismiss-confirm
```
- Confirm before dismissing a sheet/modal with unsaved changes (Apple HIG)
```
error-clarity
```
- Error messages must state cause + how to fix (not just "Invalid input") (HIG, MD)
```
field-grouping
```
- Group related fields logically (fieldset/legend or visual grouping) (MD)
```
read-only-distinction
```
- Read-only state should be visually and semantically different from disabled (MD)
```
focus-management
```
- After submit error, auto-focus the first invalid field (WCAG, MD)
```
error-summary
```
- For multiple errors, show summary at top with anchor links to each field (WCAG)
```
touch-friendly-input
```
- Mobile input height ≥44px to meet touch target requirements (Apple HIG)
```
destructive-emphasis
```
- Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD)
```
toast-accessibility
```
- Toasts must not steal focus; use aria-live="polite" for screen reader announcement (WCAG)
```
aria-live-errors
```
- Form errors use aria-live region or role="alert" to notify screen readers (WCAG)
```
contrast-feedback
```
- Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD)
```
timeout-feedback
```
- Request timeout must show clear feedback with retry option (MD)

```
input-labels
```
- 每个输入框都有可见标签（不能仅依赖 placeholder）
```
error-placement
```
- 在相关字段下方显示错误
```
submit-feedback
```
- 提交后依次显示加载、成功或错误状态
```
required-indicators
```
- 标记必填字段（如星号）
```
empty-states
```
- 无内容时提供有帮助的说明和操作
```
toast-dismiss
```
- Toast 在 3-5s 后自动消失
```
confirmation-dialogs
```
- 执行破坏性操作前进行确认
```
input-helper-text
```
- 复杂输入框下方持续提供辅助文本，而不只是 placeholder（Material Design）
```
disabled-states
```
- 禁用元素使用降低的不透明度（0.38–0.5）、光标变化和语义属性（MD）
```
progressive-disclosure
```
- 逐步展示复杂选项；不要一开始就向用户呈现全部内容（Apple HIG）
```
inline-validation
```
- 在失焦时验证（而不是每次按键都验证）；仅在用户完成输入后显示错误（MD）
```
input-type-keyboard
```
- 使用语义化 input type（email、tel、number）触发正确的移动键盘（HIG、MD）
```
password-toggle
```
- 为密码字段提供显示/隐藏切换（MD）
```
autofill-support
```
- 使用 autocomplete/textContentType 属性，让系统能够自动填充（HIG、MD）
```
undo-support
```
- 对破坏性或批量操作提供撤销能力（如“撤销删除”Toast）（Apple HIG）
```
success-feedback
```
- 操作完成后提供简短视觉反馈（勾选、Toast、颜色闪烁）（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
```
- Toast 不得抢占焦点；使用 aria-live="polite" 供屏幕阅读器播报（WCAG）
```
aria-live-errors
```
- 表单错误使用 aria-live 区域或 role="alert" 通知屏幕阅读器（WCAG）
```
contrast-feedback
```
- 错误和成功状态颜色必须达到 4.5:1 对比度（WCAG、MD）
```
timeout-feedback
```
- 请求超时必须显示清晰反馈和重试选项（MD）

9. Navigation Patterns (HIGH)

9. 导航模式（高）

```
bottom-nav-limit
```
- Bottom navigation max 5 items; use labels with icons (Material Design)
```
drawer-usage
```
- Use drawer/sidebar for secondary navigation, not primary actions (Material Design)
```
back-behavior
```
- Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD)
```
deep-linking
```
- All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD)
```
tab-bar-ios
```
- iOS: use bottom Tab Bar for top-level navigation (Apple HIG)
```
top-app-bar-android
```
- Android: use Top App Bar with navigation icon for primary structure (Material Design)
```
nav-label-icon
```
- Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)
```
nav-state-active
```
- Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)
```
nav-hierarchy
```
- Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD)
```
modal-escape
```
- Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG)
```
search-accessible
```
- Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD)
```
breadcrumb-web
```
- Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)
```
state-preservation
```
- Navigating back must restore previous scroll position, filter state, and input (HIG, MD)
```
gesture-nav-support
```
- Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)
```
tab-badge
```
- Use badges on nav items sparingly to indicate unread/pending; clear after user visits (HIG, MD)
```
overflow-menu
```
- When actions exceed available space, use overflow/more menu instead of cramming (MD)
```
bottom-nav-top-level
```
- Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)
```
adaptive-navigation
```
- Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav (Material Adaptive)
```
back-stack-integrity
```
- Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)
```
navigation-consistency
```
- Navigation placement must stay the same across all pages; don't change by page type
```
avoid-mixed-patterns
```
- Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level
```
modal-vs-navigation
```
- Modals must not be used for primary navigation flows; they break the user's path (HIG)
```
focus-on-route-change
```
- After page transition, move focus to main content region for screen reader users (WCAG)
```
persistent-nav
```
- Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD)
```
destructive-nav-separation
```
- Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD)
```
empty-nav-state
```
- When a nav destination is unavailable, explain why instead of silently hiding it (MD)

```
bottom-nav-limit
```
- 底部导航最多 5 项；使用带图标的标签（Material Design）
```
drawer-usage
```
- 抽屉或侧边栏用于次要导航，而不是主要操作（Material Design）
```
back-behavior
```
- 返回导航必须可预测且一致；保留滚动位置和状态（Apple HIG、MD）
```
deep-linking
```
- 所有关键屏幕都必须可通过深度链接或 URL 访问，以便分享和通知（Apple HIG）
```
tab-bar-ios
```
- iOS：使用底部 Tab Bar 作为顶层导航（Apple HIG）
```
top-app-bar-android
```
- Android：使用带导航图标的 Top App Bar 作为主要结构（Material Design）
```
nav-label-icon
```
- 导航项必须同时包含图标和文字标签；仅含图标的导航会降低可发现性（MD）
```
nav-state-active
```
- 当前位置必须通过颜色、字重或指示器进行视觉突出（Apple HIG、MD）
```
nav-hierarchy
```
- 主要导航（标签页/底部栏）与次要导航（抽屉/设置）必须清晰区分（MD）
```
modal-escape
```
- 模态框和抽屉必须提供清晰的关闭/取消操作；移动端支持下滑关闭（Apple HIG）
```
search-accessible
```
- 搜索应易于访问（顶部栏或标签页）；提供最近搜索或搜索建议（MD）
```
breadcrumb-web
```
- Web：对于 3 层以上的深层结构，使用面包屑帮助用户定位（MD）
```
state-preservation
```
- 返回时必须恢复之前的滚动位置、筛选状态和输入内容（Apple HIG、MD）
```
gesture-nav-support
```
- 支持系统手势导航（iOS swipe-back、Android predictive back），且不与其冲突（Apple HIG、MD）
```
tab-badge
```
- 谨慎使用导航徽标表示未读或待处理状态；用户访问后清除（Apple HIG、MD）
```
overflow-menu
```
- 当操作数量超出可用空间时，使用溢出/更多菜单，而不是强行挤入（MD）
```
bottom-nav-top-level
```
- 底部导航仅用于顶层屏幕；绝不在其中嵌套次级导航（MD）
```
adaptive-navigation
```
- 大屏幕（≥1024px）优先使用侧边栏；小屏幕使用底部或顶部导航（Material Adaptive）
```
back-stack-integrity
```
- 绝不能静默重置导航栈或意外跳转到首页（Apple HIG、MD）
```
navigation-consistency
```
- 导航位置必须在所有页面保持一致；不要按页面类型更改
```
avoid-mixed-patterns
```
- 不要在同一层级混用 Tab + Sidebar + Bottom Nav
```
modal-vs-navigation
```
- 模态框不得用于主要导航流程；否则会破坏用户路径（HIG）
```
focus-on-route-change
```
- 页面转场后，将焦点移至主内容区域，供屏幕阅读器用户使用（WCAG）
```
persistent-nav
```
- 核心导航必须能从深层页面访问；不要在子流程中完全隐藏（Apple HIG、MD）
```
destructive-nav-separation
```
- 危险操作（删除账户、退出登录）必须与普通导航项在视觉和空间上分隔（Apple HIG、MD）
```
empty-nav-state
```
- 当导航目标不可用时，应说明原因，而不是静默隐藏（MD）

10. Charts & Data (LOW)

10. 图表与数据（低）

```
chart-type
```
- Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut)
```
color-guidance
```
- Use accessible color palettes; avoid red/green only pairs for colorblind users (WCAG, MD)
```
data-table
```
- Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)
```
pattern-texture
```
- Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)
```
legend-visible
```
- Always show legend; position near the chart, not detached below a scroll fold (MD)
```
tooltip-on-interact
```
- Provide tooltips/data labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)
```
axis-labels
```
- Label axes with units and readable scale; avoid truncated or rotated labels on mobile
```
responsive-chart
```
- Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)
```
empty-data-state
```
- Show meaningful empty state when no data exists ("No data yet" + guidance), not a blank chart (MD)
```
loading-chart
```
- Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame
```
animation-optional
```
- Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)
```
large-dataset
```
- For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)
```
number-formatting
```
- Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)
```
touch-target-chart
```
- Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)
```
no-pie-overuse
```
- Avoid pie/donut for >5 categories; switch to bar chart for clarity
```
contrast-data
```
- Data lines/bars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)
```
legend-interactive
```
- Legends should be clickable to toggle series visibility (MD)
```
direct-labeling
```
- For small datasets, label values directly on the chart to reduce eye travel
```
tooltip-keyboard
```
- Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)
```
sortable-table
```
- Data tables must support sorting with aria-sort indicating current sort state (WCAG)
```
axis-readability
```
- Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens
```
data-density
```
- Limit information density per chart to avoid cognitive overload; split into multiple charts if needed
```
trend-emphasis
```
- Emphasize data trends over decoration; avoid heavy gradients/shadows that obscure the data
```
gridline-subtle
```
- Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data
```
focusable-elements
```
- Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG)
```
screen-reader-summary
```
- Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG)
```
error-state-chart
```
- Data load failure must show error message with retry action, not a broken/empty chart
```
export-option
```
- For data-heavy products, offer CSV/image export of chart data
```
drill-down-consistency
```
- Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb
```
time-scale-clarity
```
- Time series charts must clearly label time granularity (day/week/month) and allow switching

```
chart-type
```
- 根据数据类型匹配图表类型（趋势→折线图，比较→柱状图，占比→饼图/环形图）
```
color-guidance
```
- 使用无障碍配色；避免仅使用红/绿组合以照顾色觉障碍用户（WCAG、MD）
```
data-table
```
- 提供表格替代方案以实现无障碍；仅使用图表不利于屏幕阅读器（WCAG、MD）
```
pattern-texture
```
- 使用图案、纹理或形状补充颜色，使数据在不依赖颜色时仍可区分（WCAG、MD）
```
legend-visible
```
- 始终显示图例；将其放在图表附近，而不是滚动区域下方（MD）
```
tooltip-on-interact
```
- 在 Web 端 hover 或移动端 tap 时提供提示工具/数据标签，显示精确值（Apple HIG、MD）
```
axis-labels
```
- 为坐标轴标注单位和易读刻度；移动端避免截断或旋转标签
```
responsive-chart
```
- 图表必须能在小屏幕上重排或简化（如将纵向柱状图改为横向、减少刻度）
```
empty-data-state
```
- 没有数据时显示有意义的状态（“暂无数据”及引导），而不是空白图表（MD）
```
loading-chart
```
- 图表数据加载时使用 skeleton 或 shimmer 占位；不要显示空坐标轴框架
```
animation-optional
```
- 图表进入动画必须尊重 prefers-reduced-motion；数据应立即可读（Apple HIG）
```
large-dataset
```
- 超过 1000 个数据点时进行聚合或采样；提供下钻查看详情，而不是全部渲染（MD）
```
number-formatting
```
- 坐标轴和标签中的数字、日期、货币应使用适合当前区域设置的格式（Apple HIG、MD）
```
touch-target-chart
```
- 交互式图表元素（数据点、片段）必须具有至少 44pt 的点击区域，或在触控时扩展（HIG）
```
no-pie-overuse
```
- 超过 5 个分类时避免使用饼图/环形图；改用柱状图以提升清晰度
```
contrast-data
```
- 数据线/柱与背景的对比度至少为 3:1；数据文字标签至少为 4.5:1（WCAG、MD）
```
legend-interactive
```
- 图例应可点击，用于切换系列可见性（MD）
```
direct-labeling
```
- 对于小型数据集，直接在图表上标注数值，减少视线移动
```
tooltip-keyboard
```
- 提示工具内容必须可通过键盘访问，不能仅依赖 hover（WCAG、MD）
```
sortable-table
```
- 数据表必须支持排序，并使用 aria-sort 指示当前排序状态（WCAG）
```
axis-readability
```
- 坐标轴刻度不得过于拥挤；保持可读间距，并在小屏幕上自动跳过部分刻度
```
data-density
```
- 限制单个图表的信息密度，避免认知负担；必要时拆分为多个图表
```
trend-emphasis
```
- 强调数据趋势而非装饰；避免厚重渐变和阴影遮挡数据
```
gridline-subtle
```
- 网格线应使用低对比度（如 gray-200），避免与数据竞争
```
focusable-elements
```
- 交互式图表元素（数据点、柱、切片）必须可通过键盘导航（WCAG、MD）
```
screen-reader-summary
```
- 为屏幕阅读器提供文本摘要或 aria-label，描述图表的关键洞察（WCAG、MD）
```
error-state-chart
```
- 数据加载失败时显示错误消息和重试操作，而不是损坏或空白的图表
```
export-option
```
- 对于数据密集型产品，提供图表数据的 CSV/图片导出
```
drill-down-consistency
```
- 下钻交互必须保持清晰的返回路径和层级面包屑
```
time-scale-clarity
```
- 时间序列图表必须清晰标注时间粒度（天/周/月），并允许切换

How to Use

使用方法

Search specific domains using the CLI tool below.

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

Prerequisites

前置条件

Check if Python is installed:

bash

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

bash

brew install python3

Ubuntu/Debian:

bash

sudo apt update && sudo apt install python3

Windows:

powershell

winget install Python.Python.3.12

检查是否已安装 Python：

bash

python3 --version || python --version

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

macOS：

bash

brew install python3

Ubuntu/Debian：

bash

sudo apt update && sudo apt install python3

Windows：

powershell

winget install Python.Python.3.12

How to Use This Skill

如何使用此 Skill

Use this skill when the user requests any of the following:

Scenario	Trigger Examples	Start From
New project / page	"Build a landing page", "Build a dashboard"	Step 1 → Step 2 (design system)
New component	"Create a pricing card", "Add a modal"	Step 3 (domain search: style, ux)
Choose style / color / font	"What style fits a fintech app?", "Recommend a color palette"	Step 2 (design system)
Review existing UI	"Review this page for UX issues", "Check accessibility"	Quick Reference checklist above
Fix a UI bug	"Button hover is broken", "Layout shifts on load"	Quick Reference → relevant section
Improve / optimize	"Make this faster", "Improve mobile experience"	Step 3 (domain search: ux, react)
Implement dark mode	"Add dark mode support"	Step 3 (domain: style "dark mode")
Add charts / data viz	"Add an analytics dashboard chart"	Step 3 (domain: chart)
Stack best practices	"React performance tips"、"SwiftUI navigation"	Step 4 (stack search)

Follow this workflow:

当用户提出以下要求时，使用此 Skill：

场景	触发示例	起始步骤
新项目/页面	“构建落地页”、“构建仪表盘”	步骤 1 → 步骤 2（设计系统）
新组件	“创建定价卡片”、“添加模态框”	步骤 3（领域搜索：style、ux）
选择样式/颜色/字体	“哪种风格适合金融科技应用？”、“推荐一套配色”	步骤 2（设计系统）
审查现有 UI	“审查此页面的 UX 问题”、“检查无障碍性”	上方快速参考清单
修复 UI 缺陷	“按钮 hover 失效”、“加载时发生布局偏移”	快速参考 → 相关章节
改进/优化	“让它更快”、“改善移动端体验”	步骤 3（领域搜索：ux、react）
实现深色模式	“添加深色模式支持”	步骤 3（领域：style “dark mode”）
添加图表/数据可视化	“添加分析仪表盘图表”	步骤 3（领域：chart）
技术栈最佳实践	“React 性能建议”、“SwiftUI 导航”	步骤 4（技术栈搜索）

遵循以下工作流：

Step 1: Analyze User Requirements

步骤 1：分析用户需求

Extract key information from user request:

Product type: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
Target audience: C-end consumer users; consider age group, usage context (commute, leisure, work)
Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
Stack: React Native (this project's only tech stack)

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

产品类型：娱乐（社交、视频、音乐、游戏）、工具（扫描器、编辑器、转换器）、生产力（任务管理器、笔记、日历）或混合类型
目标受众：C 端消费者；考虑年龄、使用场景（通勤、休闲、工作）
样式关键词：俏皮、 vibrant、极简、深色模式、内容优先、沉浸式等
技术栈：React Native（本项目唯一的技术栈）

Step 2: Generate Design System (REQUIRED)

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

Always start with
--design-system
to get comprehensive recommendations with reasoning:

bash

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

This command:

Searches domains in parallel (product, style, color, landing, typography)
Applies reasoning rules from
```
ui-reasoning.csv
```
to select best matches
Returns complete design system: pattern, style, colors, typography, effects
Includes anti-patterns to avoid

Example:

bash

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

始终先使用
--design-system
，以获得附带推理的全面建议：

bash

python3 skills/ui-ux-pro-max/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
包含需要避免的反模式

示例：

bash

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

Step 2b: Persist Design System (Master + Overrides Pattern)

步骤 2b：持久化设计系统（Master + Overrides 模式）

To save the design system for hierarchical retrieval across sessions, add

--persist

bash

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

This creates:

```
design-system/MASTER.md
```
— Global Source of Truth with all design rules
```
design-system/pages/
```
— Folder for page-specific overrides

With page-specific override:

bash

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

This also creates:

```
design-system/pages/dashboard.md
```
— Page-specific deviations from Master

How hierarchical retrieval works:

When building a specific page (e.g., "Checkout"), first check
```
design-system/pages/checkout.md
```
If the page file exists, its rules override the Master file
If not, use
```
design-system/MASTER.md
```
exclusively

Context-aware retrieval prompt:

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

如需保存设计系统，以支持跨会话的分层检索，请添加

--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
```
— 相对于 Master 的页面特定偏差

分层检索的工作方式：

构建特定页面（如“Checkout”）时，先检查
```
design-system/pages/checkout.md
```
如果页面文件存在，其规则将覆盖 Master 文件中的规则
如果不存在，则仅使用 Master 规则

上下文感知检索提示词：

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

Step 3: Supplement with Detailed Searches (as needed)

步骤 3：按需补充详细搜索

After getting the design system, use domain searches to get additional details:

bash

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

When to use detailed searches:

Need	Domain	Example
Product type patterns	`product`	`--domain product "entertainment social"`
More style options	`style`	`--domain style "glassmorphism dark"`
Color palettes	`color`	`--domain color "entertainment vibrant"`
Font pairings	`typography`	`--domain typography "playful modern"`
Chart recommendations	`chart`	`--domain chart "real-time dashboard"`
UX best practices	`ux`	`--domain ux "animation accessibility"`
Alternative fonts	`typography`	`--domain typography "elegant luxury"`
Individual Google Fonts	`google-fonts`	`--domain google-fonts "sans serif popular variable"`
Landing structure	`landing`	`--domain landing "hero social-proof"`
React Native perf	`react`	`--domain react "rerender memo list"`
App interface a11y	`web`	`--domain web "accessibilityLabel touch safe-areas"`
AI prompt / CSS keywords	`prompt`	`--domain prompt "minimalism"`

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

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 最佳实践	`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"`

Step 4: Stack Guidelines (React Native)

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

Get React Native implementation-specific best practices:

bash

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

获取 React Native 实现相关的最佳实践：

bash

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

Search Reference

搜索参考

Available Domains

可用领域

Domain	Use For	Example Keywords
`product`	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty, service
`style`	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
`typography`	Font pairings, Google Fonts	elegant, playful, professional, modern
`color`	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech, service
`landing`	Page structure, CTA strategies	hero, hero-centric, testimonial, pricing, social-proof
`chart`	Chart types, library recommendations	trend, comparison, timeline, funnel, pie
`ux`	Best practices, anti-patterns	animation, accessibility, z-index, loading
`google-fonts`	Individual Google Fonts lookup	sans serif, monospace, japanese, variable font, popular
`react`	React/Next.js performance	waterfall, bundle, suspense, memo, rerender, cache
`web`	App interface guidelines (iOS/Android/React Native)	accessibilityLabel, touch targets, safe areas, Dynamic Type
`prompt`	AI prompts, CSS keywords	(style name)

领域	用途	示例关键词
`product`	产品类型建议	SaaS、电子商务、作品集、医疗健康、美容、服务
`style`	UI 样式、颜色、特效	glassmorphism、minimalism、dark mode、brutalism
`typography`	字体搭配、Google Fonts	elegant、playful、professional、modern
`color`	按产品类型选择的配色	saas、ecommerce、healthcare、beauty、fintech、service
`landing`	页面结构、CTA 策略	hero、hero-centric、testimonial、pricing、social-proof
`chart`	图表类型、库推荐	trend、comparison、timeline、funnel、pie
`ux`	最佳实践、反模式	animation、accessibility、z-index、loading
`google-fonts`	查询单独的 Google Fonts	sans serif、monospace、japanese、variable font、popular
`react`	React/Next.js 性能	waterfall、bundle、suspense、memo、rerender、cache
`web`	应用界面指南（iOS/Android/React Native）	accessibilityLabel、touch targets、safe areas、Dynamic Type
`prompt`	AI 提示词、CSS 关键词	（样式名称）

Available Stacks

可用技术栈

Stack	Focus
`react-native`	Components, Navigation, Lists

技术栈	关注点
`react-native`	组件、导航、列表

Example Workflow

示例工作流

User request: "Make an AI search homepage."

用户请求： “制作一个 AI 搜索首页。”

Step 1: Analyze Requirements

步骤 1：分析需求

Product type: Tool (AI search engine)
Target audience: C-end users looking for fast, intelligent search
Style keywords: modern, minimal, content-first, dark mode
Stack: React Native

产品类型：工具（AI 搜索引擎）
目标受众：寻找快速、智能搜索体验的 C 端用户
样式关键词：现代、极简、内容优先、深色模式
技术栈：React Native

Step 2: Generate Design System (REQUIRED)

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

bash

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

Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.

bash

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

输出： 包含 pattern、style、colors、typography、effects 和反模式的完整设计系统。

Step 3: Supplement with Detailed Searches (as needed)

步骤 3：按需补充详细搜索

bash

undefined

bash

undefined

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

undefined

python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux

undefined

Step 4: Stack Guidelines

步骤 4：技术栈指南

bash

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

Then: Synthesize design system + detailed searches and implement the design.

bash

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

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

Output Formats

输出格式

The

--design-system

flag supports two output formats:

bash

undefined

--design-system

标志支持以下输出格式：

bash

undefined

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

---

python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

Tips for Better Results

获得更好结果的建议

Query Strategy

查询策略

Use multi-dimensional keywords — combine product + industry + tone + density:
```
"entertainment social vibrant content-dense"
```
not just
```
"app"
```

Try different keywords for the same need:

"playful neon"

→

"vibrant dark"

→

"content-first minimal"

Use
```
--design-system
```
first for full recommendations, then
```
--domain
```
to deep-dive any dimension you're unsure about
Always add
```
--stack react-native
```
for implementation-specific guidance

使用多维关键词——组合产品、行业、语气和信息密度：
```
"entertainment social vibrant content-dense"
```
，而不是仅使用
```
"app"
```

针对同一需求尝试不同关键词：

"playful neon"

→

"vibrant dark"

→

"content-first minimal"

首先使用
```
--design-system
```
获取完整建议，再使用
```
--domain
```
深入了解尚不明确的维度
始终添加
```
--stack react-native
```
以获取特定于实现的指导

Common Sticking Points

常见难点

Problem	What to Do
Can't decide on style/color	Re-run `--design-system` with different keywords
Dark mode contrast issues	Quick Reference §6: `color-dark-mode` + `color-accessible-pairs`
Animations feel unnatural	Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter`
Form UX is poor	Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management`
Navigation feels confusing	Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior`
Layout breaks on small screens	Quick Reference §5: `mobile-first` + `breakpoint-consistency`
Performance / jank	Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle`

问题	处理方式
无法决定样式或颜色	使用不同关键词重新运行 `--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`

Pre-Delivery Checklist

交付前检查清单

Run

--domain ux "animation accessibility z-index loading"

as a UX validation pass before implementation

Run through Quick Reference §1–§3 (CRITICAL + HIGH) as a final review
Test on 375px (small phone) and landscape orientation
Verify behavior with reduced-motion enabled and Dynamic Type at largest size
Check dark mode contrast independently (don't assume light mode values work)
Confirm all touch targets ≥44pt and no content hidden behind safe areas

实现前运行

--domain ux "animation accessibility z-index loading"

，执行 UX 验证

最终审查时逐项检查快速参考 §1–§3（关键 + 高优先级）
在 375px（小屏手机）和横屏模式下测试
在启用 reduced-motion 且 Dynamic Type 设为最大尺寸时验证行为
单独检查深色模式对比度（不要假设浅色模式数值同样适用）
确认所有触控目标均不小于 44pt，且没有内容被安全区域遮挡

Common Rules for Professional UI

专业 UI 的通用规则

These are frequently overlooked issues that make UI look unprofessional: Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.

以下问题经常被忽略，却会使 UI 显得不够专业：范围说明：以下规则适用于 App UI（iOS/Android/React Native/Flutter），不适用于桌面 Web 交互模式。

Icons & Visual Elements

图标与视觉元素

Rule	Standard	Avoid	Why It Matters
No Emoji as Structural Icons	Use vector-based icons (e.g., Lucide, react-native-vector-icons, @expo/vector-icons).	Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls.	Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens.
Vector-Only Assets	Use SVG or platform vector icons that scale cleanly and support theming.	Raster PNG icons that blur or pixelate.	Ensures scalability, crisp rendering, and dark/light mode adaptability.
Stable Interaction States	Use color, opacity, or elevation transitions for press states without changing layout bounds.	Layout-shifting transforms that move surrounding content or trigger visual jitter.	Prevents unstable interactions and preserves smooth motion/perceived quality on mobile.
Correct Brand Logos	Use official brand assets and follow their usage guidelines (spacing, color, clear space).	Guessing logo paths, recoloring unofficially, or modifying proportions.	Prevents brand misuse and ensures legal/platform compliance.
Consistent Icon Sizing	Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg).	Mixing arbitrary values like 20pt / 24pt / 28pt randomly.	Maintains rhythm and visual hierarchy across the interface.
Stroke Consistency	Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px).	Mixing thick and thin stroke styles arbitrarily.	Inconsistent strokes reduce perceived polish and cohesion.
Filled vs Outline Discipline	Use one icon style per hierarchy level.	Mixing filled and outline icons at the same hierarchy level.	Maintains semantic clarity and stylistic coherence.
Touch Target Minimum	Minimum 44×44pt interactive area (use hitSlop if icon is smaller).	Small icons without expanded tap area.	Meets accessibility and platform usability standards.
Icon Alignment	Align icons to text baseline and maintain consistent padding.	Misaligned icons or inconsistent spacing around them.	Prevents subtle visual imbalance that reduces perceived quality.
Icon Contrast	Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs.	Low-contrast icons that blend into the background.	Ensures accessibility in both light and dark modes.

规则	标准	避免	重要性
不使用 Emoji 作为结构图标	使用基于矢量的图标（如 Lucide、react-native-vector-icons、@expo/vector-icons）。	使用 emoji（🎨 🚀 ⚙️）作为导航、设置或系统控件。	Emoji 依赖字体、跨平台表现不一致，而且无法通过设计令牌控制。
仅使用矢量资源	使用可清晰缩放并支持主题的 SVG 或平台矢量图标。	使用会模糊或产生像素化的 PNG 图标。	确保资源可扩展、渲染清晰，并能适配深色/浅色模式。
稳定的交互状态	使用颜色、不透明度或高度过渡呈现按下状态，且不改变布局边界。	导致周围内容移动或产生视觉抖动的布局位移变换。	防止交互不稳定，并保持流畅动效和感知质量。
正确的品牌 Logo	使用官方品牌资源，并遵循其使用规范（间距、颜色、留白）。	猜测 Logo 路径、非正式地重新着色或修改比例。	防止品牌误用，并确保符合法律和平台规范。
一致的图标尺寸	将图标尺寸定义为设计令牌（如 icon-sm、icon-md = 24pt、icon-lg）。	随意混用 20pt / 24pt / 28pt 等尺寸。	维持界面节奏和视觉层级。
描边一致性	在同一视觉层级中使用一致的描边宽度（如 1.5px 或 2px）。	随意混用不同粗细的描边。	描边不一致会降低 perceived polish 和整体连贯性。
填充与描边风格纪律	每个层级使用一种图标风格。	在同一层级混用填充和描边图标。	保持语义清晰和风格一致。
触控目标最小尺寸	最小交互区域为 44×44pt（图标较小时使用 hitSlop）。	未扩展点击区域的小图标。	满足无障碍和平台可用性标准。
图标对齐	将图标与文字基线对齐，并保持内边距一致。	图标与文字未对齐，间距不一致。	防止细微的视觉失衡影响感知质量。
图标对比度	遵循 WCAG 对比度标准：小元素为 4.5:1，大型 UI 字形最低为 3:1。	低对比度图标融入背景。	确保浅色和深色模式中的无障碍性。

Interaction (App)

交互（App）

Rule	Do	Don't
Tap feedback	Provide clear pressed feedback (ripple/opacity/elevation) within 80-150ms	No visual response on tap
Animation timing	Keep micro-interactions around 150-300ms with platform-native easing	Instant transitions or slow animations (>500ms)
Accessibility focus	Ensure screen reader focus order matches visual order and labels are descriptive	Unlabeled controls or confusing focus traversal
Disabled state clarity	Use disabled semantics ( `disabled` /native disabled props), reduced emphasis, and no tap action	Controls that look tappable but do nothing
Touch target minimum	Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller	Tiny tap targets or icon-only hit areas without padding
Gesture conflict prevention	Keep one primary gesture per region and avoid nested tap/drag conflicts	Overlapping gestures causing accidental actions
Semantic native controls	Prefer native interactive primitives ( `Button` , `Pressable` , platform equivalents) with proper accessibility roles	Generic containers used as primary controls without semantics

规则	应当	不应
点击反馈	在 80-150ms 内提供清晰的按下反馈（波纹/不透明度/高度）	点击时没有任何视觉响应
动画时长	微交互保持在 150-300ms，并使用平台原生缓动	瞬间切换或缓慢动画（>500ms）
无障碍焦点	确保屏幕阅读器焦点顺序与视觉顺序一致，且标签具有描述性	控件没有标签或焦点遍历令人困惑
禁用状态清晰度	使用禁用语义（ `disabled` /原生 disabled 属性）、降低强调程度且不响应点击	控件看起来可点击，但实际没有任何作用
触控目标最小尺寸	点击区域保持 >=44x44pt（iOS）或 >=48x48dp（Android）；图标较小时扩展点击区域	过小的点击目标，或没有内边距的仅图标点击区域
手势冲突预防	每个区域只保留一个主要手势，并避免嵌套点击/拖动冲突	手势重叠导致意外操作
语义化原生控件	优先使用原生交互基元（ `Button` 、 `Pressable` 或平台等价组件），并设置正确的无障碍角色	使用没有语义的通用容器作为主要控件

Light/Dark Mode Contrast

浅色/深色模式对比度

Rule	Do	Don't
Surface readability (light)	Keep cards/surfaces clearly separated from background with sufficient opacity/elevation	Overly transparent surfaces that blur hierarchy
Text contrast (light)	Maintain body text contrast >=4.5:1 against light surfaces	Low-contrast gray body text
Text contrast (dark)	Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces	Dark mode text that blends into background
Border and divider visibility	Ensure separators are visible in both themes (not just light mode)	Theme-specific borders disappearing in one mode
State contrast parity	Keep pressed/focused/disabled states equally distinguishable in light and dark themes	Defining interaction states for one theme only
Token-driven theming	Use semantic color tokens mapped per theme across app surfaces/text/icons	Hardcoded per-screen hex values
Scrim and modal legibility	Use a modal scrim strong enough to isolate foreground content (typically 40-60% black)	Weak scrim that leaves background visually competing

规则	应当	不应
表面可读性（浅色）	使用足够的透明度或高度，使卡片/表面与背景清晰分离	过度透明的表面模糊了信息层级
文本对比度（浅色）	正文与浅色表面的对比度保持 >=4.5:1	低对比度灰色正文
文本对比度（深色）	主要文本与深色表面的对比度保持 >=4.5:1，次要文本保持 >=3:1	深色模式文本融入背景
边框与分隔线可见性	确保分隔线在两种主题中都可见（不能仅在浅色模式可见）	某个主题中的边框消失
状态对比度一致性	在浅色和深色主题中，按下、聚焦和禁用状态应保持同等可辨识度	仅为一个主题定义交互状态
令牌驱动的主题系统	使用语义化颜色令牌，并按主题映射到应用表面、文本和图标	在每个屏幕中硬编码十六进制色值
遮罩与模态框可读性	使用足够强的模态框遮罩来分离前景内容（通常为 40-60% 黑色）	遮罩过弱，导致背景在视觉上与前景竞争

Layout & Spacing

布局与间距

Rule	Do	Don't
Safe-area compliance	Respect top/bottom safe areas for all fixed headers, tab bars, and CTA bars	Placing fixed UI under notch, status bar, or gesture area
System bar clearance	Add spacing for status/navigation bars and gesture home indicator	Let tappable content collide with OS chrome
Consistent content width	Keep predictable content width per device class (phone/tablet)	Mixing arbitrary widths between screens
8dp spacing rhythm	Use a consistent 4/8dp spacing system for padding/gaps/section spacing	Random spacing increments with no rhythm
Readable text measure	Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets)	Full-width long text that hurts readability
Section spacing hierarchy	Define clear vertical rhythm tiers (e.g., 16/24/32/48) by hierarchy	Similar UI levels with inconsistent spacing
Adaptive gutters by breakpoint	Increase horizontal insets on larger widths and in landscape	Same narrow gutter on all device sizes/orientations
Scroll and fixed element coexistence	Add bottom/top content insets so lists are not hidden behind fixed bars	Scroll content obscured by sticky headers/footers

规则	应当	不应
安全区域适配	所有固定标题栏、标签栏和 CTA 栏都应遵循顶部/底部安全区域	将固定 UI 放在刘海、状态栏或手势区域下方
系统栏避让	为状态栏、导航栏和手势 Home Indicator 添加间距	让可点击内容与系统 UI 区域重叠
一致的内容宽度	按设备类别使用可预测的内容宽度（手机/平板）	在不同屏幕间混用任意宽度
8dp 间距节奏	在组件、区块和页面层级使用一致的 4/8dp 间距系统	随机设置没有节奏的间距增量
可读文本宽度	确保长文本在大屏设备上仍易于阅读（避免平板上段落延伸至屏幕边缘）	全文宽度的长文本影响可读性
按断点调整边距	在更宽尺寸和横屏模式下增加水平内边距	所有设备尺寸和方向都使用相同窄边距
滚动与固定元素共存	添加底部/顶部内容内边距，避免列表被固定栏遮挡	滚动内容被吸顶或吸底栏遮挡

Pre-Delivery Checklist

交付前检查清单

Before delivering UI code, verify these items: Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter).

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

ui-ux-pro-max

Original

Translation

UI/UX Pro Max - Design Intelligence

UI/UX Pro Max - 设计智能

When to Apply

何时使用

Must Use

必须使用

Recommended

推荐使用

Skip

跳过

Rule Categories by Priority

按优先级划分的规则类别

Quick Reference

快速参考

Private Component Registries

私有组件注册表

1. Accessibility (CRITICAL)

1. 无障碍（关键）

2. Touch & Interaction (CRITICAL)

2. 触控与交互（关键）

3. Performance (HIGH)

3. 性能（高）

4. Style Selection (HIGH)

4. 样式选择（高）

5. Layout & Responsive (HIGH)

5. 布局与响应式（高）

6. Typography & Color (MEDIUM)

6. 排版与颜色（中）

7. Animation (MEDIUM)

7. 动画（中）

8. Forms & Feedback (MEDIUM)

8. 表单与反馈（中）

9. Navigation Patterns (HIGH)

9. 导航模式（高）

10. Charts & Data (LOW)

10. 图表与数据（低）

How to Use

使用方法

Prerequisites

前置条件

How to Use This Skill

如何使用此 Skill

Step 1: Analyze User Requirements

步骤 1：分析用户需求

Step 2: Generate Design System (REQUIRED)

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

Step 2b: Persist Design System (Master + Overrides Pattern)

步骤 2b：持久化设计系统（Master + Overrides 模式）

Step 3: Supplement with Detailed Searches (as needed)

步骤 3：按需补充详细搜索

Step 4: Stack Guidelines (React Native)

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

Search Reference

搜索参考

Available Domains

可用领域

Available Stacks

可用技术栈

Example Workflow

示例工作流

Step 1: Analyze Requirements

步骤 1：分析需求

Step 2: Generate Design System (REQUIRED)

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

Step 3: Supplement with Detailed Searches (as needed)

步骤 3：按需补充详细搜索

Get style options for a modern tool product

Get style options for a modern tool product

Get UX best practices for search interaction and loading

Get UX best practices for search interaction and loading

Step 4: Stack Guidelines

步骤 4：技术栈指南

Output Formats

输出格式

ASCII box (default) - best for terminal display

ASCII box (default) - best for terminal display

Markdown - best for documentation