ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

面向网页和移动应用的全量设计指南，覆盖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标签	移除焦点框、无标签的纯图标按钮
2	触摸与交互	严重	`ux`	最小尺寸44×44px、8px以上间距、加载反馈	仅依赖hover交互、0ms即时状态切换
3	性能	高	`ux`	WebP/AVIF格式、懒加载、预留空间（CLS < 0.1）	布局抖动、累积布局偏移
4	样式选择	高	`style` , `product`	匹配产品类型、一致性、SVG图标（不使用emoji）	随机混合扁平化和拟物化风格、用emoji作为图标
5	布局与响应式	高	`ux`	移动端优先断点、视口元标签、无横向滚动	横向滚动、固定px容器宽度、禁用缩放
6	排版与色彩	中	`typography` , `color`	基础字号16px、行高1.5、语义化颜色token	正文小于12px、灰底灰字、组件内直接写原始hex色值
7	动效	中	`ux`	时长150–300ms、动效传递含义、空间连续性	纯装饰性动效、对宽高属性做动画、无减少动效适配
8	表单与反馈	中	`ux`	可见标签、错误提示靠近字段、帮助文本、渐进式展示	仅用占位符作为标签、错误提示仅放在顶部、一次性展示过多内容
9	导航模式	高	`ux`	可预测的返回逻辑、底部导航≤5项、深度链接	导航过载、返回行为异常、无深度链接
10	图表与数据	低	`chart`	图例、提示框、无障碍配色	仅依赖颜色传递含义

Quick Reference

快速参考

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）

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
```
- 异步操作期间禁用按钮；显示加载动画或进度
```
error-feedback
```
- 错误位置附近展示清晰的错误信息
```
cursor-pointer
```
- 可点击元素添加cursor-pointer样式（Web端）
```
gesture-conflicts
```
- 主内容区域避免横向滑动；优先使用垂直滚动
```
tap-delay
```
- 使用touch-action: manipulation减少300ms点击延迟（Web端）
```
standard-gestures
```
- 一致使用平台标准手势；不重新定义标准手势（如滑动返回、捏合缩放）（遵循Apple HIG）
```
system-gestures
```
- 不阻断系统手势（控制中心、滑动返回等）（遵循Apple HIG）
```
press-feedback
```
- 按下时提供视觉反馈（涟漪/高亮；遵循MD状态层规范）
```
haptic-feedback
```
- 确认和重要操作使用触觉反馈；避免过度使用（遵循Apple HIG）
```
gesture-alternative
```
- 不单独依赖手势交互；关键操作始终提供可见控件
```
safe-area-awareness
```
- 主要触摸目标远离刘海、灵动岛、手势栏和屏幕边缘
```
no-precision-required
```
- 避免要求用户精准点击小图标或细边缘
```
swipe-clarity
```
- 滑动操作必须展示清晰的提示（箭头、标签、引导）
```
drag-threshold
```
- 开始拖拽前设置移动阈值，避免意外拖拽

3. 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
```
- 声明宽高或使用aspect-ratio避免布局偏移（Core Web Vitals：CLS）
```
font-loading
```
- 使用font-display: swap/optional避免文字不可见（FOIT）；预留空间减少布局偏移（遵循MD规范）
```
font-preload
```
- 仅预加载关键字体；避免预加载所有字体变体
```
critical-css
```
- 优先加载首屏CSS（内联关键CSS或提前加载样式表）
```
lazy-loading
```
- 非首屏组件通过动态导入/路由拆分实现懒加载
```
bundle-splitting
```
- 按路由/功能拆分代码（React Suspense / Next.js dynamic）减少首次加载时间和TTI
```
third-party-scripts
```
- 第三方脚本使用async/defer加载；审计并移除不必要的脚本（遵循MD规范）
```
reduce-reflows
```
- 避免频繁的布局读写；批量执行DOM读取后再执行写入
```
content-jumping
```
- 异步内容预留空间避免布局跳动（Core Web Vitals：CLS）
```
lazy-load-below-fold
```
- 首屏以下的图片和重型媒体使用loading="lazy"
```
virtualize-lists
```
- 50项以上的列表使用虚拟滚动提升内存效率和滚动性能
```
main-thread-budget
```
- 每帧工作控制在~16ms以内以实现60fps；重型任务移出主线程（遵循HIG、MD规范）
```
progressive-loading
```
- 超过1s的操作使用骨架屏/微光效果替代长时间阻塞的加载动画（遵循Apple HIG）
```
input-latency
```
- 点击/滚动的输入延迟控制在~100ms以内（Material响应性标准）
```
tap-feedback-speed
```
- 点击后100ms内提供视觉反馈（遵循Apple HIG）
```
debounce-throttle
```
- 高频事件（滚动、resize、输入）使用防抖/节流
```
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 vs Material）：导航、控件、排版、动效
```
state-clarity
```
- hover/按下/禁用状态视觉上清晰区分，同时保持风格统一（遵循Material状态层规范）
```
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
```
- 使用字重强化层级：标题加粗（600–700）、正文常规（400）、标签中等（500）（遵循MD规范）
```
color-semantic
```
- 定义语义化颜色token（primary、secondary、error、surface、on-surface），组件内不直接写原始hex值（遵循Material色彩系统）
```
color-dark-mode
```
- 深色模式使用低饱和度/更浅的色调变体，不是反色；单独测试对比度（遵循HIG、MD规范）
```
color-accessible-pairs
```
- 前景/背景配色对必须满足4.5:1（AA级）或7:1（AAA级）；使用工具验证（遵循WCAG、MD规范）
```
color-not-decorative-only
```
- 功能性颜色（错误红、成功绿）必须搭配图标/文字；避免仅通过颜色传递含义（遵循HIG、MD规范）
```
truncation-strategy
```
- 优先换行而非截断；截断时使用省略号并通过提示框/展开提供完整文本（遵循Apple HIG）
```
letter-spacing
```
- 遵循平台默认的字间距；正文避免过紧的字距（遵循HIG、MD规范）
```
number-tabular
```
- 数据列、价格和计时器使用等宽数字，避免布局偏移
```
whitespace-balance
```
- 有意使用留白分组相关内容、分隔区块；避免视觉杂乱（遵循Apple HIG）

7. 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做动画；避免对宽高/top/left做动画
```
loading-states
```
- 加载超过300ms时展示骨架屏或进度指示器
```
excessive-motion
```
- 每个视图最多同时动效1-2个关键元素
```
easing
```
- 入场使用ease-out，退场使用ease-in；UI转场避免线性动画
```
motion-meaning
```
- 每个动效必须表达因果关系，不只是装饰（遵循Apple HIG）
```
state-transition
```
- 状态变化（hover / 激活 / 展开 / 收起 / 模态框）平滑过渡，不生硬跳转
```
continuity
```
- 页面/屏幕转场保持空间连续性（共享元素、定向滑动）（遵循Apple HIG）
```
parallax-subtle
```
- 谨慎使用视差效果；必须适配减少动效设置且不会导致定向障碍（遵循Apple HIG）
```
spring-physics
```
- 优先使用弹簧/物理曲线而非线性或三次贝塞尔曲线，实现更自然的效果（遵循Apple HIG流体动效规范）
```
exit-faster-than-enter
```
- 退场动画比入场短（约为入场时长的60–70%），提升响应感（遵循MD动效规范）
```
stagger-sequence
```
- 列表/网格项入场间隔30–50ms；避免一次性全部展示或过慢的显示效果（遵循MD规范）
```
shared-element-transition
```
- 使用共享元素/英雄转场实现屏幕间的视觉连续性（遵循MD、HIG规范）
```
interruptible
```
- 动效可中断；用户点击/手势立即取消进行中的动效（遵循Apple HIG）
```
no-blocking-animation
```
- 动效期间永不阻塞用户输入；UI保持可交互（遵循Apple HIG）
```
fade-crossfade
```
- 同一容器内的内容替换使用交叉淡入淡出（遵循MD规范）
```
scale-feedback
```
- 可点击的卡片/按钮按下时提供轻微缩放（0.95–1.05）；释放后恢复（遵循HIG、MD规范）
```
gesture-feedback
```
- 拖拽、滑动、捏合操作提供跟随手指的实时视觉响应（遵循MD动效规范）
```
hierarchy-motion
```
- 使用位移/缩放方向表达层级：从下方入场=更深层级，向上退场=返回（遵循MD规范）
```
motion-consistency
```
- 全局统一时长/缓动token；所有动效保持相同的节奏和风格
```
opacity-threshold
```
- 渐隐元素不低于0.2的透明度停留；要么完全淡出要么保持可见
```
modal-motion
```
- 模态框/底部弹窗从触发源位置开始动画（缩放+淡入或滑入），提供空间上下文（遵循HIG、MD规范）
```
navigation-direction
```
- 向前导航向左/上动效；向后导航向右/下动效；方向逻辑保持一致（遵循HIG规范）
```
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
```
- 每个输入框有可见标签（不只用占位符）
```
error-placement
```
- 错误提示展示在相关字段下方
```
submit-feedback
```
- 提交时展示加载状态，之后展示成功/错误状态
```
required-indicators
```
- 必填字段做标记（如星号）
```
empty-states
```
- 无内容时展示有用的提示和操作选项
```
toast-dismiss
```
- Toast 3-5秒自动消失
```
confirmation-dialogs
```
- 破坏性操作前要求确认
```
input-helper-text
```
- 复杂输入框下方提供持久化的帮助文本，不只用占位符（遵循Material Design规范）
```
disabled-states
```
- 禁用元素使用降低的透明度（0.38–0.5）+ 光标变化 + 语义化属性（遵循MD规范）
```
progressive-disclosure
```
- 逐步展示复杂选项；不一次性展示过多内容让用户不知所措（遵循Apple HIG）
```
inline-validation
```
- 失焦时验证（不是按键时）；用户完成输入后再展示错误（遵循MD规范）
```
input-type-keyboard
```
- 使用语义化输入类型（email、tel、number）触发正确的移动端键盘（遵循HIG、MD规范）
```
password-toggle
```
- 密码字段提供显示/隐藏切换（遵循MD规范）
```
autofill-support
```
- 使用autocomplete / textContentType属性让系统可以自动填充（遵循HIG、MD规范）
```
undo-support
```
- 破坏性或批量操作支持撤销（如“撤销删除”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、MD规范）
```
tab-bar-ios
```
- iOS端：底部标签栏用于顶层导航（遵循Apple HIG）
```
top-app-bar-android
```
- Android端：顶部应用栏搭配导航图标作为主结构（遵循Material Design规范）
```
nav-label-icon
```
- 导航项必须同时有图标和文字标签；纯图标导航会降低可发现性（遵循MD规范）
```
nav-state-active
```
- 当前位置在导航中视觉高亮（颜色、字重、指示器）（遵循HIG、MD规范）
```
nav-hierarchy
```
- 主导航（标签/底部栏）和次要导航（抽屉/设置）清晰区分（遵循MD规范）
```
modal-escape
```
- 模态框和底部弹窗必须提供清晰的关闭/退出操作；移动端支持向下滑动关闭（遵循Apple HIG）
```
search-accessible
```
- 搜索功能易于访问（顶部栏或标签）；提供最近/推荐查询（遵循MD规范）
```
breadcrumb-web
```
- Web端：3级以上层级使用面包屑辅助定位（遵循MD规范）
```
state-preservation
```
- 返回导航时恢复之前的滚动位置、筛选状态和输入内容（遵循HIG、MD规范）
```
gesture-nav-support
```
- 支持系统手势导航（iOS滑动返回、Android预测返回）无冲突（遵循HIG、MD规范）
```
tab-badge
```
- 导航项上谨慎使用角标表示未读/待办；用户访问后清除（遵循HIG、MD规范）
```
overflow-menu
```
- 操作超出可用空间时使用更多菜单，不强行挤压（遵循MD规范）
```
bottom-nav-top-level
```
- 底部导航仅用于顶层屏幕；内部不嵌套子导航（遵循MD规范）
```
adaptive-navigation
```
- 大屏幕（≥1024px）优先使用侧边栏；小屏幕使用底部/顶部导航（遵循Material自适应规范）
```
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. 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规范）
```
pattern-texture
```
- 用图案、纹理或形状补充颜色，无需颜色也可区分数据（遵循WCAG、MD规范）
```
legend-visible
```
- 始终展示图例；位置靠近图表，不要放在滚动折叠区下方（遵循MD规范）
```
tooltip-on-interact
```
- hover（Web）或点击（移动端）时展示提示框/数据标签，显示精确值（遵循HIG、MD规范）
```
axis-labels
```
- 坐标轴标注单位和可读刻度；移动端避免截断或旋转标签
```
responsive-chart
```
- 小屏幕上图表自适应或简化（如用横向柱状图替代纵向、减少刻度）
```
empty-data-state
```
- 无数据时展示有意义的空状态（“暂无数据”+引导），不是空白图表（遵循MD规范）
```
loading-chart
```
- 图表数据加载时使用骨架屏或微光占位符；不展示空白坐标轴框架
```
animation-optional
```
- 图表入场动效适配prefers-reduced-motion设置；数据立即可读（遵循HIG规范）
```
large-dataset
```
- 1000个以上数据点做聚合或采样；提供下钻查看详情的能力，不全部渲染（遵循MD规范）
```
number-formatting
```
- 坐标轴和标签上的数字、日期、货币使用本地化格式（遵循HIG、MD规范）
```
touch-target-chart
```
- 可交互图表元素（点、分段）点击区域≥44pt或点击时扩大（遵循Apple HIG）
```
no-pie-overuse
```
- 分类超过5个时避免使用饼图/环形图；改用柱状图提升清晰度
```
contrast-data
```
- 数据线/柱与背景对比度≥3:1；数据文本标签对比度≥4.5:1（遵循WCAG规范）
```
legend-interactive
```
- 图例可点击切换系列可见性（遵循MD规范）
```
direct-labeling
```
- 小数据集直接在图表上标注数值，减少用户视线移动
```
tooltip-keyboard
```
- 提示框内容可通过键盘访问，不单独依赖hover（遵循WCAG规范）
```
sortable-table
```
- 数据表格支持排序，用aria-sort标识当前排序状态（遵循WCAG规范）
```
axis-readability
```
- 坐标轴刻度不拥挤；保持可读间距，小屏幕自动跳过
```
data-density
```
- 控制每个图表的信息密度，避免认知过载；必要时拆分为多个图表
```
trend-emphasis
```
- 突出数据趋势而非装饰；避免过重的渐变/阴影遮挡数据
```
gridline-subtle
```
- 网格线使用低对比度（如gray-200），不与数据竞争注意力
```
focusable-elements
```
- 可交互图表元素（点、柱、扇区）支持键盘导航（遵循WCAG规范）
```
screen-reader-summary
```
- 为屏幕阅读器提供文本摘要或aria-label描述图表的核心结论（遵循WCAG规范）
```
error-state-chart
```
- 数据加载失败展示错误信息和重试操作，不是损坏/空白的图表
```
export-option
```
- 数据密集型产品提供图表数据的CSV/图片导出能力
```
drill-down-consistency
```
- 下钻交互保持清晰的返回路径和层级面包屑
```
time-scale-clarity
```
- 时间序列图表清晰标注时间粒度（日/周/月）并支持切换

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 bug	"按钮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端消费者用户；考虑年龄组、使用场景（通勤、休闲、工作）
风格关键词： playful、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
```
中的推理规则选择最佳匹配
返回完整设计系统：模式、样式、颜色、排版、效果
包含需避免的反模式

示例：

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：持久化设计系统（主配置+覆盖模式）

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
```
— 页面级与主配置的差异规则

层级检索逻辑：

构建特定页面（如“结算页”）时，首先检查
```
design-system/pages/checkout.md
```
如果页面文件存在，其规则覆盖主配置文件
如果不存在，仅使用
```
design-system/MASTER.md
```

上下文感知检索提示：

我正在构建[页面名称]页面，请读取design-system/MASTER.md，同时检查design-system/pages/[page-name].md是否存在。如果页面文件存在，优先使用其规则；如果不存在，仅使用主配置规则。现在生成代码...

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样式、颜色、效果	玻璃拟态、极简主义、深色模式、粗野主义
`typography`	字体搭配、Google Fonts	优雅、活泼、专业、现代
`color`	按产品类型的调色板	SaaS、电商、医疗、美容、金融科技、服务
`landing`	页面结构、CTA策略	首屏、首屏优先、 testimonials、定价、社交证明
`chart`	图表类型、库推荐	趋势、对比、时间线、漏斗、饼图
`ux`	最佳实践、反模式	动效、无障碍、z-index、加载
`google-fonts`	单个Google Fonts查询	无衬线、等宽、日文、可变字体、热门
`react`	React/Next.js性能	waterfall、bundle、suspense、memo、重渲染、缓存
`web`	应用界面指南（iOS/Android/React Native）	accessibilityLabel、触摸目标、安全区域、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"

输出： 完整设计系统，包含模式、样式、颜色、排版、效果和反模式。

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

获取搜索交互和加载的UX最佳实践

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

flag支持两种输出格式：

bash

undefined

ASCII box (default) - best for terminal display

ASCII框（默认）- 最适合终端展示

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

Markdown - best for documentation

Markdown - 最适合文档

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（小屏手机）和横屏模式下测试
开启减少动效和最大字号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依赖字体，跨平台表现不一致，无法通过设计token控制。
仅使用矢量资源	使用SVG或平台矢量图标，可清晰缩放并支持主题切换。	会模糊或像素化的栅格PNG图标。	确保可扩展性、清晰渲染和深浅模式适配能力。
稳定的交互状态	按下状态使用颜色、透明度或层级过渡，不改变布局边界。	会移动周围内容或导致视觉抖动的布局变换。	避免不稳定的交互，保持移动端流畅的动效和感知质量。
正确的品牌Logo	使用官方品牌资源并遵循使用规范（间距、颜色、留白）。	猜测Logo路径、非官方改色或修改比例。	避免品牌误用，确保法律/平台合规。
一致的图标尺寸	将图标尺寸定义为设计token（如icon-sm、icon-md = 24pt、icon-lg）。	随机混合使用20pt / 24pt / 28pt等任意值。	保持界面的节奏和视觉层级。
描边一致性	同一视觉层级使用统一的描边宽度（如1.5px或2px）。	任意混合粗细描边风格。	不一致的描边会降低完成度和凝聚力。
填充与轮廓规范	同一层级使用一种图标风格。	同一层级混合填充和轮廓图标。	保持语义清晰度和风格一致性。
最小触摸目标	交互区域最小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` /原生禁用属性）、弱化样式，无点击动作	控件看起来可点击但无响应
最小触摸目标	点击区域≥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	深色模式文本融入背景
边框和分割线可见性	分隔线在两个主题下都可见（不只是浅色模式）	主题专属边框在某一模式下消失
状态对比度对等	按下/聚焦/禁用状态在深浅主题下都可清晰区分	仅为一个主题定义交互状态
Token驱动的主题	应用全表面/文本/图标使用按主题映射的语义化颜色token	每个页面硬编码hex值
遮罩和模态可读性	使用足够强的模态遮罩隔离前景内容（通常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放在刘海、状态栏或手势区域下方
系统栏留白	为状态栏/导航栏和手势主页指示器添加间距	可点击内容与系统UI重叠
一致的内容宽度	每个设备类型（手机/平板）使用可预测的内容宽度	屏幕之间随机混合宽度
8dp间距节奏	内边距/间距/区块间距使用统一的4/8dp间距系统	无节奏的随机间距增量
可读文本宽度	大设备上长文本保持可读性（平板上避免边到边的段落）	全宽长文本降低可读性
区块间距层级	按层级定义清晰的垂直节奏等级（如16/24/32/48）	相似UI层级的间距不一致
断点适配的内边距	更大宽度和横屏时增加水平内边距	所有设备尺寸/方向都使用相同的窄内边距
滚动与固定元素共存	添加底部/顶部内容内边距，避免列表被固定栏遮挡	滚动内容被粘性头部/底部遮挡

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

快速参考

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：持久化设计系统（主配置+覆盖模式）

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 UX best practices for search interaction and loading

获取搜索交互和加载的UX最佳实践

Step 4: Stack Guidelines

步骤4：技术栈指南

Output Formats

输出格式

ASCII box (default) - best for terminal display

ASCII框（默认）- 最适合终端展示

Markdown - best for documentation

Markdown - 最适合文档

Tips for Better Results