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.

面向网页与移动应用的全面设计指南。

Identity Management (SynkOS Platform)

身份管理（SynkOS平台）

Se estiver em um pane SynkOS (

SYNKO_PANE_ID

disponível no ambiente), chame

pane_set_identity

com:

Skill:
```
ui-ux-pro-max
```
Role:
```
ux-design-expert
```

若处于SynkOS面板中（环境变量中可获取

SYNKO_PANE_ID

），调用

pane_set_identity

时需传入：

Skill：
```
ui-ux-pro-max
```
Role：
```
ux-design-expert
```

Boundary with

impeccable

与

impeccable

的分工边界

Use ui-ux-pro-max
para: decisões pontuais de design (paleta, tipografia, componente), revisão de UI code, accessibility audit, boas práticas por stack — sem necessidade de contexto de projeto. Use impeccable
para: redesign completo de produto com PRODUCT.md/DESIGN.md, fluxo shape → craft, iteração visual em browser ao vivo, ou efeitos visuais avançados que exigem brief confirmado.

使用**

ui-ux-pro-max

处理：点式设计决策（配色、排版、组件）、UI代码评审、无障碍审计、各技术栈最佳实践——无需完整项目上下文。使用

impeccable

**处理：基于PRODUCT.md/DESIGN.md的产品完整重设计、从原型到落地的全流程、浏览器端实时视觉迭代，或需要明确需求文档的高级视觉效果。

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+间距、加载反馈	仅依赖悬停、瞬时状态切换（0ms）
3	性能	高	`ux`	WebP/AVIF格式、懒加载、预留空间（CLS < 0.1）	布局抖动、累积布局偏移
4	风格选择	高	`style` , `product`	匹配产品类型、一致性、SVG图标（禁用emoji）	随机混合扁平化与拟物化风格、用emoji作图标
5	布局与响应式	高	`ux`	移动端优先断点、视口元标签、无横向滚动	横向滚动、固定px容器宽度、禁用缩放
6	排版与色彩	中	`typography` , `color`	基础字号16px、行高1.5、语义化颜色令牌	正文字号<12px、灰底灰字、组件中使用原始十六进制颜色
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
```
- 主要交互使用点击/触控；不单独依赖悬停
```
loading-buttons
```
- 异步操作期间禁用按钮；显示加载指示器或进度条
```
error-feedback
```
- 在问题字段附近显示清晰的错误信息
```
cursor-pointer
```
- 为可点击元素添加cursor-pointer样式（网页端）
```
gesture-conflicts
```
- 主内容区域避免横向滑动；优先使用垂直滚动
```
tap-delay
```
- 使用touch-action: manipulation减少300ms延迟（网页端）
```
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
```
- 异步/延迟加载第三方脚本；审计并移除不必要的脚本（遵循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
```
- 悬停/按压/禁用状态在保持风格的同时视觉区分明显（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动态文本样式 / Material 5排版角色（display、headline、title、body、label）（遵循HIG、MD规范）
```
weight-hierarchy
```
- 使用字重强化层级：粗体标题（600–700）、常规正文（400）、中等权重标签（500）（遵循MD规范）
```
color-semantic
```
- 定义语义化颜色令牌（primary、secondary、error、surface、on-surface），不在组件中使用原始十六进制颜色（Material颜色系统）
```
color-dark-mode
```
- 暗色模式使用低饱和度/浅色调变体，而非直接反转颜色；单独测试对比度（遵循HIG、MD规范）
```
color-accessible-pairs
```
- 前景/背景色对比需达到4.5:1（AA级）或7:1（AAA级）；使用工具验证（WCAG、MD规范）
```
color-not-decorative-only
```
- 功能色（错误红、成功绿）需搭配图标/文本；避免仅依赖颜色传递意义（遵循HIG、MD规范）
```
truncation-strategy
```
- 优先换行而非截断；必须截断时使用省略号，并通过工具提示/展开显示完整文本（遵循Apple HIG）
```
letter-spacing
```
- 遵循平台默认字距；正文避免使用紧凑字距（遵循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
```
- 状态变化（悬停 / 激活 / 展开 / 折叠 / 模态框）需平滑动画，而非突然切换
```
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
```
- 全局统一时长/缓动令牌；所有动画保持相同节奏和质感
```
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
```
- 提示框3-5秒后自动关闭
```
confirmation-dialogs
```
- 破坏性操作前需确认
```
input-helper-text
```
- 复杂输入框下方提供持久辅助文本，而非仅用占位符（Material Design）
```
disabled-states
```
- 禁用元素使用降低不透明度（0.38–0.5）+ 光标变化 + 语义化属性（遵循MD规范）
```
progressive-disclosure
```
- 逐步展示复杂选项；不一次性 overwhelm 用户（遵循Apple HIG）
```
inline-validation
```
- 失去焦点时验证（而非按键时）；仅在用户完成输入后显示错误（遵循MD规范）
```
input-type-keyboard
```
- 使用语义化输入类型（email、tel、number）触发正确的移动端键盘（遵循HIG、MD规范）
```
password-toggle
```
- 密码字段提供显示/隐藏切换（遵循MD规范）
```
autofill-support
```
- 使用autocomplete / textContentType属性，让系统可自动填充（遵循HIG、MD规范）
```
undo-support
```
- 允许撤销破坏性或批量操作（如“撤销删除”提示框）（遵循Apple HIG）
```
success-feedback
```
- 完成操作后提供简短视觉反馈（对勾、提示框、颜色闪烁）（遵循MD规范）
```
error-recovery
```
- 错误信息必须包含明确的恢复路径（重试、编辑、帮助链接）（遵循HIG、MD规范）
```
multi-step-progress
```
- 多步骤流程显示步骤指示器或进度条；允许返回上一步（遵循MD规范）
```
form-autosave
```
- 长表单需自动保存草稿，避免意外关闭导致数据丢失（遵循Apple HIG）
```
sheet-dismiss-confirm
```
- 关闭包含未保存更改的面板/模态框前需确认（遵循Apple HIG）
```
error-clarity
```
- 错误信息必须说明原因+修复方法（而非仅“输入无效”）（遵循HIG、MD规范）
```
field-grouping
```
- 逻辑分组相关字段（使用fieldset/legend或视觉分组）（遵循MD规范）
```
read-only-distinction
```
- 只读状态在视觉和语义上需与禁用状态区分开（遵循MD规范）
```
focus-management
```
- 提交后出现错误时，自动聚焦第一个无效字段（WCAG、MD规范）
```
error-summary
```
- 多个错误时，在顶部显示摘要并提供指向各字段的锚链接（WCAG）
```
touch-friendly-input
```
- 移动端输入框高度≥44px，满足触控目标要求（遵循Apple HIG）
```
destructive-emphasis
```
- 破坏性操作使用语义化危险色（红色），并与主要操作在视觉上分离（遵循HIG、MD规范）
```
toast-accessibility
```
- 提示框不得抢占焦点；使用aria-live="polite"供屏幕阅读器读取（WCAG）
```
aria-live-errors
```
- 表单错误使用aria-live区域或role="alert"通知屏幕阅读器（WCAG）
```
contrast-feedback
```
- 错误和成功状态颜色需达到4.5:1对比度（WCAG、MD规范）
```
timeout-feedback
```
- 请求超时需显示清晰反馈及重试选项（遵循MD规范）

9. 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：底部Tab Bar用于顶层导航（遵循Apple HIG）
```
top-app-bar-android
```
- Android：带导航图标的Top App Bar用于主要结构（Material Design）
```
nav-label-icon
```
- 导航项必须同时有图标和文本标签；纯图标导航降低可发现性（遵循MD规范）
```
nav-state-active
```
- 当前位置在导航中需视觉高亮（颜色、字重、指示器）（遵循HIG、MD规范）
```
nav-hierarchy
```
- 一级导航（标签栏/底部栏）与二级导航（抽屉/设置）需清晰区分（遵循MD规范）
```
modal-escape
```
- 模态框和面板需提供清晰的关闭/退出方式；移动端支持下滑关闭（遵循Apple HIG）
```
search-accessible
```
- 搜索需易于访问（顶部栏或标签）；提供最近/建议查询（遵循MD规范）
```
breadcrumb-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
```
- 悬停（网页端）或触控（移动端）时显示工具提示/数据标签，展示精确值（遵循HIG、MD规范）
```
axis-labels
```
- 为坐标轴标注单位和可读刻度；移动端避免截断或旋转标签
```
responsive-chart
```
- 图表在小屏幕需重排或简化（如横向柱状图替代纵向、减少刻度）
```
empty-data-state
```
- 无数据时显示有意义的空状态（“暂无数据”+引导），而非空白图表（遵循MD规范）
```
loading-chart
```
- 图表数据加载时使用骨架屏或微光占位符；不显示空坐标轴框架
```
animation-optional
```
- 图表入场动画需尊重prefers-reduced-motion设置；数据需立即可读（遵循HIG）
```
large-dataset
```
- 数据点≥1000时，聚合或采样；提供钻取功能查看详情，而非渲染全部数据（遵循MD规范）
```
number-formatting
```
- 坐标轴和标签上的数字、日期、货币使用区域化格式（遵循HIG、MD规范）
```
touch-target-chart
```
- 交互式图表元素（点、段）需≥44pt触控区域，或触控时扩展（遵循Apple HIG）
```
no-pie-overuse
```
- 类别>5时避免使用饼图/环形图；改用柱状图提升清晰度
```
contrast-data
```
- 数据线条/柱状图与背景对比度≥3:1；数据文本标签≥4.5:1（WCAG）
```
legend-interactive
```
- 图例需可点击切换系列可见性（遵循MD规范）
```
direct-labeling
```
- 小数据集时，直接在图表上标注数值，减少视线移动
```
tooltip-keyboard
```
- 工具提示内容需支持键盘访问，不单独依赖悬停（WCAG）
```
sortable-table
```
- 数据表需支持排序，用aria-sort标记当前排序状态（WCAG）
```
axis-readability
```
- 坐标轴刻度不得拥挤；保持可读间距，小屏幕自动跳过部分刻度
```
data-density
```
- 限制单图表信息密度，避免认知过载；必要时拆分为多个图表
```
trend-emphasis
```
- 强调数据趋势而非装饰；避免使用遮挡数据的厚重渐变/阴影
```
gridline-subtle
```
- 网格线使用低对比度（如gray-200），避免与数据竞争注意力
```
focusable-elements
```
- 交互式图表元素（点、柱状图、切片）需支持键盘导航（WCAG）
```
screen-reader-summary
```
- 提供文本摘要或aria-label描述图表核心洞察，供屏幕阅读器使用（WCAG）
```
error-state-chart
```
- 数据加载失败时显示错误信息及重试操作，而非损坏/空白图表
```
export-option
```
- 数据密集型产品需提供图表数据的CSV/图片导出功能
```
drill-down-consistency
```
- 钻取交互需保持清晰的返回路径和层级面包屑
```
time-scale-clarity
```
- 时间序列图表需清晰标注时间粒度（日/周/月），并支持切换

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	"按钮悬停效果失效"、"加载时布局偏移"	快速参考 → 相关章节
优化/改进	"提升页面速度"、"优化移动端体验"	步骤3（领域搜索：ux、react）
实现暗色模式	"添加暗色模式支持"	步骤3（领域：style "dark mode"）
添加图表/数据可视化	"添加分析仪表盘图表"	步骤3（领域：chart）
技术栈最佳实践	"React性能优化技巧"、"SwiftUI导航"	步骤4（技术栈搜索）

遵循以下工作流：

Step 0: Identity (SynkOS Platform)

步骤0：身份验证（SynkOS平台）

If running within a SynkOS terminal pane, always call

pane_set_identity

with your

paneId

(from environment variable

SYNKO_PANE_ID

skill

("ui-ux-pro-max"), and

role

("ux-design-expert") at the beginning of the session.

若在SynkOS终端面板中运行，会话开始时需调用

pane_set_identity

，传入环境变量

SYNKO_PANE_ID

中的

paneId

、

skill

（"ui-ux-pro-max"）和

role

（"ux-design-expert"）。

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: identify the project's target stack from the request or context (e.g., React, Next.js, Vue, Svelte, Flutter, React Native, SwiftUI, shadcn/ui, HTML/Tailwind)

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

产品类型：娱乐类（社交、视频、音乐、游戏）、工具类（扫描器、编辑器、转换器）、生产力类（任务管理、笔记、日历）或混合类型
目标受众：C端消费者用户；考虑年龄群体、使用场景（通勤、休闲、工作）
风格关键词：活泼、鲜艳、极简、暗色模式、内容优先、沉浸式等
技术栈：从请求或上下文识别项目目标技术栈（如React、Next.js、Vue、Svelte、Flutter、React Native、SwiftUI、shadcn/ui、HTML/Tailwind）

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/Next.js perf	`react`	`--domain react "rerender memo list"`
App interface a11y (iOS/Android/RN)	`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字体	`google-fonts`	`--domain google-fonts "sans serif popular variable"`
着陆页结构	`landing`	`--domain landing "hero social-proof"`
React/Next.js性能	`react`	`--domain react "rerender memo list"`
应用界面无障碍（iOS/Android/RN）	`web`	`--domain web "accessibilityLabel touch safe-areas"`
AI提示词/CSS关键词	`prompt`	`--domain prompt "minimalism"`

Step 4: Stack Guidelines

步骤4：技术栈指南

Get implementation-specific best practices for the project's stack. Replace

<stack>

with the identified stack (e.g.,

react-native

nextjs

vue

flutter

svelte

react

angular

shadcn

swiftui

html-tailwind

bash

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

获取项目技术栈的实现特定最佳实践。将

<stack>

替换为识别出的技术栈（如

react-native

、

nextjs

、

vue

、

flutter

、

svelte

、

react

、

angular

、

shadcn

、

swiftui

、

html-tailwind

）：

bash

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

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、e-commerce、portfolio、healthcare、beauty、service
`style`	UI风格、配色、效果	glassmorphism、minimalism、dark mode、brutalism
`typography`	字体搭配、Google字体	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字体查询	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`	React components, hooks, performance
`nextjs`	Next.js App Router, SSR, RSC
`vue`	Vue 3, Composition API, Pinia
`nuxtjs`	Nuxt 3, auto-imports, modules
`nuxt-ui`	Nuxt UI component library
`svelte`	Svelte 5, runes, SvelteKit
`angular`	Angular 17+, signals, standalone components
`shadcn`	shadcn/ui patterns, Radix primitives
`html-tailwind`	Vanilla HTML + Tailwind CSS
`react-native`	RN components, navigation, lists
`flutter`	Dart/Flutter widgets, state management
`swiftui`	SwiftUI layouts, modifiers, animations
`jetpack-compose`	Compose UI, Material 3, Android
`threejs`	Three.js 3D, WebGL, shaders
`laravel`	Laravel Blade + Alpine.js + Livewire
`astro`	Astro islands, content collections

技术栈	关注点
`react`	React组件、hooks、性能
`nextjs`	Next.js App Router、SSR、RSC
`vue`	Vue 3、组合式API、Pinia
`nuxtjs`	Nuxt 3、自动导入、模块
`nuxt-ui`	Nuxt UI组件库
`svelte`	Svelte 5、runes、SvelteKit
`angular`	Angular 17+、signals、独立组件
`shadcn`	shadcn/ui模式、Radix原语
`html-tailwind`	Vanilla HTML + Tailwind CSS
`react-native`	RN组件、导航、列表
`flutter`	Dart/Flutter组件、状态管理
`swiftui`	SwiftUI布局、修饰符、动画
`jetpack-compose`	Compose UI、Material 3、Android
`threejs`	Three.js 3D、WebGL、着色器
`laravel`	Laravel Blade + Alpine.js + Livewire
`astro`	Astro islands、内容集合

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: Next.js (web app — identified from request context)

产品类型：工具类（AI搜索引擎）
目标受众：寻求快速智能搜索的C端用户
风格关键词：现代、极简、内容优先、暗色模式
技术栈：Next.js（从请求上下文识别的网页应用）

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 "performance routing data fetching" --stack nextjs

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

bash

python3 skills/ui-ux-pro-max/scripts/search.py "performance routing data fetching" --stack nextjs

后续： 整合设计系统+详细搜索结果并实现设计。

Output Formats

输出格式

The

--design-system

flag supports two output formats:

bash

undefined

--design-system

标志支持两种输出格式：

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
```
深入不确定的维度
针对React Native项目始终添加
```
--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（小屏手机）和横屏模式下测试
验证开启减少动效和最大动态文本尺寸时的行为
独立检查暗色模式对比度（不要假设亮色模式值适用于暗色模式）
确认所有触控目标≥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），不适用于桌面网页交互模式。

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）。	随意混合粗细描边风格。	不一致的描边会降低感知精致度和凝聚力。
填充与轮廓规范	同一层级使用一种图标风格。	同一层级混合填充和轮廓图标。	保持语义清晰和风格连贯。
最小触控目标	交互区域最小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	暗色模式文本与背景融合
边框与分隔线可见性	确保分隔线在两种主题下都可见（不仅亮色模式）	主题特定边框在某一模式下消失
状态对比度一致性	亮色和暗色主题下按压/聚焦/禁用状态区分度一致	仅为一种主题定义交互状态
令牌驱动主题	使用语义化颜色令牌映射到各主题的应用表面/文本/图标	硬编码每个页面的十六进制颜色值
遮罩与模态框可读性	使用足够强度的模态框遮罩隔离前景内容（通常为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放置在刘海、状态栏或手势区域下方
系统栏间距	为状态栏/导航栏和手势主屏幕指示器添加间距	可触控内容与系统控件重叠
一致的内容宽度	按设备类别（手机/平板）保持可预测的内容宽度	屏幕间混合任意宽度
8dp间距节奏	使用统一的4/8dp间距系统设置内边距/间隙/区块间距	无节奏的随机间距增量
可读文本宽度	大屏设备上保持长文本可读性（平板避免边缘到边缘的段落）	全宽长文本损害可读性
区块间距层级	定义清晰的垂直节奏层级（如16/24/32/48）	相似UI层级间距不一致
断点自适应 gutter	大屏和横屏模式下增加水平内边距	所有设备尺寸/方向使用相同窄 gutter
滚动与固定元素共存	添加底部/顶部内容内边距，避免列表被固定栏遮挡	滚动内容被粘性头部/页脚遮挡

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 - 设计智能工具

Identity Management (SynkOS Platform)

身份管理（SynkOS平台）

Boundary with impeccable

与impeccable的分工边界

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 0: Identity (SynkOS Platform)

步骤0：身份验证（SynkOS平台）

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

步骤4：技术栈指南

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

Boundary with
`impeccable`

与
`impeccable`
的分工边界