ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI/UX Pro Max

Overview

概述

A comprehensive UI/UX design intelligence system that combines visual design expertise with engineering rigor. This skill provides opinionated, production-ready guidance covering style selection, color palettes, typography, UX heuristics, data visualization, and multi-stack implementation. Every recommendation is filtered through a strict priority hierarchy that ensures accessibility and performance are never sacrificed for aesthetics.

这是一套综合UI/UX设计智能系统，融合了视觉设计专业能力与工程严谨性。该技能提供经过验证、可直接用于生产环境的指导，覆盖风格选择、调色板、排版、UX启发式规则、数据可视化以及多技术栈实现。所有建议都经过严格的优先级层级筛选，确保永远不会为了美观牺牲可访问性和性能。

Phase 1: Requirements Gathering

第一阶段：需求收集

Identify the product type and target audience
Determine platform(s) (web, mobile, desktop)
Assess existing brand guidelines or design system
Define accessibility requirements
Set performance budgets

STOP — Confirm requirements with user before making design recommendations.

明确产品类型和目标受众
确定适用平台（网页、移动端、桌面端）
评估现有品牌规范或设计系统
定义可访问性要求
设定性能预算

停止——在给出设计建议前先和用户确认需求。

Priority Hierarchy (Non-Negotiable Order)

优先级层级（不可调整顺序）

Do NOT skip or reorder these priorities. Accessibility always comes first.

Accessibility — WCAG 2.1 AA minimum, AAA preferred
- Contrast ratio: 4.5:1 for normal text, 3:1 for large text
- Keyboard navigation: all interactive elements focusable, visible focus ring
- ARIA labels on all non-text controls
- Screen reader announcements for dynamic content
- Reduced motion: respect
```
prefers-reduced-motion
```
Touch Targets — 44x44px minimum (Apple HIG / WCAG 2.5.5)
- Spacing between targets: minimum 8px
- Clickable area may exceed visual bounds via padding
Performance
- Images: WebP with AVIF fallback, lazy loading below fold
- CLS < 0.1, LCP < 2.5s, FID < 100ms
- Font loading:
```
font-display: swap
```
  , preload critical fonts
- Bundle: code-split routes, tree-shake unused components
Style — Applied only after 1-3 are satisfied
Layout — Composition and spacing applied last

不得跳过或重新调整这些优先级，可访问性永远是第一位。

可访问性 — 最低满足WCAG 2.1 AA标准，优先达到AAA标准
- 对比度：普通文本不低于4.5:1，大文本不低于3:1
- 键盘导航：所有交互元素可聚焦，聚焦环清晰可见
- 所有非文本控件都添加ARIA标签
- 动态内容提供屏幕阅读器播报支持
- 减动模式：遵循
```
prefers-reduced-motion
```
  设置
点击热区 — 最小44x44px（符合Apple HIG / WCAG 2.5.5规范）
- 热区间距最小8px
- 可点击区域可通过padding超出视觉边界
性能
- 图片：使用WebP格式并提供AVIF降级方案，首屏外图片懒加载
- CLS < 0.1, LCP < 2.5s, FID < 100ms
- 字体加载：使用
```
font-display: swap
```
  ，预加载关键字体
- 包体积：路由代码分割，摇树优化移除未使用组件
样式 — 仅在满足前3项要求后应用
布局 — 最后处理构图和间距

Phase 2: Style Selection

第二阶段：风格选择

STOP — Present style recommendation with rationale before proceeding to implementation.

停止——在进入实现阶段前先展示风格建议及设计逻辑，获得确认后再继续。

Style Selection Decision Table

风格选择决策表

Context	Recommended Styles	Why
SaaS Dashboard	Minimalism, Swiss, Material 3	Clean, data-focused, professional
Portfolio	Brutalism, Maximalism, Glassmorphism	Expressive, memorable
E-commerce	Clean, Material 3, Swiss	Trust, clarity, conversion
Mobile App	Material 3, Neumorphism, Minimalism	Native feel, thumb-friendly
Landing Page	Glassmorphism, Neo-Brutalism, Japandi	Visual impact, hero focus
Enterprise/B2B	Swiss Design, Minimalism	Authority, information density
Creative Agency	Maximalism, Brutalism, Cyberpunk	Uniqueness, portfolio showcase
Health/Wellness	Japandi, Minimalism	Calming, trustworthy
Finance	Swiss, Material 3	Conservative, professional
Kids/Family	Claymorphism, Maximalism	Playful, engaging

场景	推荐风格	原因
SaaS 仪表盘	极简主义, 瑞士风格, Material 3	简洁、聚焦数据、专业
个人作品集	粗野主义, 极繁主义, Glassmorphism	有表现力、记忆点强
电商平台	简洁风, Material 3, 瑞士风格	信任感强、清晰、利于转化
移动端应用	Material 3, 新拟态, 极简主义	原生质感、拇指操作友好
落地页	Glassmorphism, 新粗野主义, Japandi	视觉冲击力强、聚焦首屏内容
企业级/B2B产品	瑞士设计, 极简主义	权威感强、信息密度高
创意 agency	极繁主义, 粗野主义, 赛博朋克	独特性强、适合展示作品集
健康/ wellness 产品	Japandi, 极简主义	calming 质感、值得信赖
金融产品	瑞士风格, Material 3	保守、专业
儿童/家庭向产品	Claymorphism, 极繁主义	趣味性强、有吸引力

Style Reference (Key Categories)

风格参考（核心分类）

Glass and Transparency:

Glassmorphism:
```
backdrop-filter: blur(10px)
```
, semi-transparent backgrounds, subtle border
Frosted Glass: heavier blur (20px+), lower opacity, works on busy backgrounds
Acrylic (Fluent Design): noise texture overlay + blur

Minimal and Clean:

Minimalism: maximum whitespace, single accent color, limited element count
Swiss Design: grid-based, Helvetica/Grotesk, asymmetric balance
Japandi: warm neutrals, organic shapes, hidden complexity

Bold and Expressive:

Brutalism: raw, exposed structure, system fonts, harsh borders, no border-radius
Neo-Brutalism: brutalism + bright accent colors + drop shadows
Maximalism: layered textures, mixed fonts, dense information

Depth and Dimension:

Neumorphism: soft inner/outer shadows on same-color backgrounds
Material Design 3: elevation tokens, tonal surfaces, dynamic color
Claymorphism: inflated 3D look, pastel colors, inner shadows

Dark and Moody:

Dark Mode: OLED-safe (#000 backgrounds), muted primaries, reduced brightness
Cyberpunk: neon on dark, glitch effects, monospace accents
Noir: high contrast, grayscale with single accent

玻璃与透明效果：

Glassmorphism:
```
backdrop-filter: blur(10px)
```
，半透明背景，细微边框
磨砂玻璃：更高模糊度（20px+），更低透明度，适合复杂背景
Acrylic (Fluent Design): 噪点纹理叠加 + 模糊效果

极简与简洁风：

极简主义：最大化留白、单一强调色、元素数量精简
瑞士设计：基于网格、Helvetica/无衬线字体、不对称平衡
Japandi：暖中性色、有机形状、隐藏复杂度

醒目表现力风格：

粗野主义：原生暴露结构、系统字体、硬朗边框、无圆角
新粗野主义：粗野主义 + 明亮强调色 + 投影
极繁主义：多层纹理、混合字体、高信息密度

深度与维度风格：

新拟态：同色背景上的柔和内/外投影
Material Design 3：高程token、 tonal 表面、动态色彩
Claymorphism：膨胀3D效果、马卡龙色、内阴影

深色与氛围感风格：

暗色模式：OLED友好（#000背景）、低饱和主色、降低亮度
赛博朋克：深色背景配霓虹色、故障效果、等宽字体点缀
Noir：高对比度、灰度+单一强调色

Phase 3: Color and Typography

第三阶段：色彩与排版

STOP — Present palette and font pairing for approval before building components.

停止——在构建组件前先展示调色板和字体组合，获得批准后再继续。

Color Palette Selection Rules

调色板选择规则

Palette Category	Product Types	Characteristics
SaaS/B2B (24 palettes)	Dashboards, admin tools	Professional blues, teals, slates
E-commerce (20 palettes)	Shops, marketplaces	Warm, trust-building ambers, greens
Health/Wellness (18 palettes)	Health apps, meditation	Calming greens, soft blues, lavender
Finance (15 palettes)	Banking, trading	Deep blues, golds, conservative neutrals
Creative (22 palettes)	Portfolios, agencies	Bold, saturated, unexpected combos
Social (16 palettes)	Communities, social apps	Vibrant, energetic, gradient-friendly
Education (14 palettes)	Learning, courses	Friendly, approachable, moderate saturation
Enterprise (12 palettes)	Corporate tools	Muted, authoritative, high-contrast
Kids/Family (10 palettes)	Children's apps	Bright primaries, rounded, playful
Luxury (10 palettes)	Premium brands	Black, gold, minimal, high whitespace

调色板分类	适用产品类型	特点
SaaS/B2B（24套调色板）	仪表盘、管理工具	专业的蓝色、青色、 slate 色系
电商（20套调色板）	商店、市场	温暖、建立信任感的琥珀色、绿色
健康/Wellness（18套调色板）	健康应用、冥想产品	舒缓的绿色、柔蓝色、薰衣草色
金融（15套调色板）	银行、交易产品	深蓝色、金色、保守中性色
创意类（22套调色板）	作品集、agency	醒目、高饱和、出人意料的配色组合
社交类（16套调色板）	社区、社交应用	鲜活、有活力、适合渐变效果
教育类（14套调色板）	学习、课程产品	友好、易接受、中等饱和度
企业级（12套调色板）	企业工具	低饱和、权威感、高对比度
儿童/家庭向（10套调色板）	儿童应用	明亮基础色、圆角、趣味性
奢侈品（10套调色板）	高端品牌	黑色、金色、极简、高留白

Color Token Rules

色彩Token规则

Primary: brand identity color, used for CTAs and key actions
Secondary: complementary, used for secondary actions and accents
Neutral: gray scale for text, borders, backgrounds (minimum 9 shades)
Semantic: success (#22C55E), warning (#F59E0B), error (#EF4444), info (#3B82F6)
Always define as semantic tokens:
```
--color-action-primary
```
, not
```
--color-blue-500
```

主色：品牌识别色，用于CTA和核心操作
辅助色：互补色，用于次要操作和点缀
中性色：灰度色系，用于文本、边框、背景（最少9种色阶）
语义色：成功(#22C55E)、警告(#F59E0B)、错误(#EF4444)、信息(#3B82F6)
永远定义为语义token：例如
```
--color-action-primary
```
，不要使用
```
--color-blue-500
```

Dark Mode Palette Rules

暗色模式调色板规则

Rule	Implementation
Do NOT invert colors	Remap to dark-appropriate equivalents
Reduce saturation 10-20%	Prevent eye strain on dark backgrounds
Elevation = lighter surface	Not shadow-based like light mode
Text hierarchy	#E2E8F0 (primary), #94A3B8 (secondary), #64748B (tertiary)

规则	实现方式
不要直接反转颜色	重新映射为适配暗色模式的对应色
饱和度降低10-20%	避免暗色背景下的视觉疲劳
高程对应更浅的表面色	不要像亮色模式一样用阴影实现
文本层级	#E2E8F0（一级文本）、#94A3B8（二级文本）、#64748B（三级文本）

Font Pairings (Top 10)

字体组合（Top10）

Pairing	Best For
Inter + Source Serif 4	SaaS, dashboards
Geist + Geist Mono	Developer tools, technical
DM Sans + DM Serif Display	Marketing, editorial
Plus Jakarta Sans + Lora	Modern professional
Outfit + Newsreader	Creative agencies
Manrope + Bitter	Enterprise applications
Space Grotesk + Space Mono	Tech startups
Satoshi + Erode	Premium/luxury
General Sans + Gambetta	Editorial/publishing
Cabinet Grotesk + Zodiak	Bold branding

字体组合	最佳适用场景
Inter + Source Serif 4	SaaS、仪表盘
Geist + Geist Mono	开发者工具、技术类产品
DM Sans + DM Serif Display	营销、内容类产品
Plus Jakarta Sans + Lora	现代专业类产品
Outfit + Newsreader	创意agency
Manrope + Bitter	企业级应用
Space Grotesk + Space Mono	科技创业公司
Satoshi + Erode	高端/奢侈品
General Sans + Gambetta	内容/出版类产品
Cabinet Grotesk + Zodiak	醒目品牌设计

Typography Scale (Default)

排版尺度（默认）

--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem

--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem

Phase 4: UX Guidelines Application

第四阶段：UX指南应用

Navigation Rules

导航规则

Primary navigation: maximum 7 items (Miller's Law)
Current location always indicated (breadcrumb or active state)
Back button must always work as expected
Search available on every page for content-heavy apps

主导航最多7个选项（符合米勒定律）
永远标识当前位置（面包屑或激活状态）
返回按钮必须符合用户预期工作
内容量较大的应用每页都要提供搜索功能

Form Rules

表单规则

Labels above inputs, never placeholder-only
Inline validation on blur, not on keystroke
Error messages: specific, actionable, adjacent to field
Auto-focus first field on page load
Submit button disabled until form valid (with explanation)
Progress indicator for multi-step forms

标签放在输入框上方，不要仅用占位符当标签
失焦时触发内联校验，不要在输入时就校验
错误提示：具体、可操作、放在对应表单项旁边
页面加载时自动聚焦第一个输入框
表单校验通过前禁用提交按钮（并给出原因）
多步骤表单提供进度指示器

Feedback Rules

反馈规则

Loading states for any action > 300ms
Skeleton screens over spinners for content loading
Toast notifications: auto-dismiss success (3s), persist errors
Tap feedback: 80-150ms response time
Optimistic UI for low-risk actions

任何耗时超过300ms的操作都要提供加载状态
内容加载优先使用骨架屏而非加载动画
Toast通知：成功通知自动消失(3s)，错误通知常驻
点击反馈响应时间80-150ms
低风险操作使用乐观UI

Content Layout Rules

内容布局规则

F-pattern for text-heavy pages
Z-pattern for landing pages
Above-the-fold: value proposition + primary CTA
One primary CTA per viewport

文本密集页面采用F型布局
落地页采用Z型布局
首屏展示价值主张+核心CTA
每个视口内仅放一个核心CTA

Mobile Rules

移动端规则

Bottom navigation for primary actions (thumb zone)
Pull-to-refresh for feed content
Swipe gestures with visual affordance

核心操作放在底部导航（拇指操作区）
Feed类内容支持下拉刷新
滑动手势提供视觉提示

Phase 5: Implementation

第五阶段：实现

Chart Type Selection Decision Table

图表类型选择决策表

Data Relationship	Chart Types
Comparison	Bar, Grouped Bar, Lollipop, Dot Plot
Trend over Time	Line, Area, Sparkline, Step
Part-to-Whole	Pie (max 5 slices), Donut, Treemap, Stacked Bar
Distribution	Histogram, Box Plot, Violin, Density
Correlation	Scatter, Bubble, Heatmap
Flow/Process	Sankey, Funnel, Waterfall
Geographic	Choropleth, Dot Map, Cartogram
Hierarchical	Sunburst, Icicle

数据关系	图表类型
对比	柱状图、分组柱状图、棒棒糖图、点图
时间趋势	折线图、面积图、迷你图、阶梯图
部分占整体	饼图（最多5块）、环形图、树形图、堆叠柱状图
分布	直方图、箱线图、小提琴图、密度图
相关性	散点图、气泡图、热力图
流程/步骤	桑基图、漏斗图、瀑布图
地理数据	分级统计图、点地图、 cartogram
层级关系	旭日图、冰柱图

Supported Stacks

支持的技术栈

Stack	Key Patterns
React	JSX components, hooks, CSS Modules / Tailwind
Next.js	App Router, Server Components, Image optimization
Vue	Composition API, `<script setup>` , Pinia
Svelte	Reactive declarations, transitions, SvelteKit
SwiftUI	Declarative views, ViewModifiers, @State/@Binding
React Native	Flexbox, Platform.select, SafeAreaView
Flutter	Widgets, Material/Cupertino, MediaQuery
Tailwind CSS	Utility-first, @apply sparingly, design tokens via config
shadcn/ui	Radix primitives, Tailwind variants, cn() utility
HTML/CSS	Semantic HTML5, CSS Grid/Flexbox, custom properties

技术栈	核心模式
React	JSX组件、hooks、CSS Modules / Tailwind
Next.js	App Router、服务端组件、图片优化
Vue	组合式API、 `<script setup>` 、Pinia
Svelte	响应式声明、过渡动画、SvelteKit
SwiftUI	声明式视图、ViewModifiers、@State/@Binding
React Native	Flexbox、Platform.select、SafeAreaView
Flutter	Widgets、Material/Cupertino、MediaQuery
Tailwind CSS	实用优先、谨慎使用@apply、通过配置定义设计token
shadcn/ui	Radix 基础组件、Tailwind变体、cn()工具函数
HTML/CSS	语义化HTML5、CSS Grid/Flexbox、自定义属性

Design Token Architecture

设计Token架构

master.tokens.json    -> Primitive values (colors, spacing, fonts)
semantic.tokens.json  -> Mapped meanings (action-primary, surface-elevated)
component.tokens.json -> Component-specific (button-padding, card-radius)
overrides/
  brand-a.tokens.json -> Brand-specific overrides
  dark.tokens.json    -> Dark mode overrides

Master tokens are read-only defaults
Overrides are shallow-merged at runtime
Component tokens reference semantic tokens only
Never reference primitive tokens in components

master.tokens.json    -> 基础值（颜色、间距、字体）
semantic.tokens.json  -> 语义映射（action-primary、surface-elevated）
component.tokens.json -> 组件专属值（button-padding、card-radius）
overrides/
  brand-a.tokens.json -> 品牌专属覆盖配置
  dark.tokens.json    -> 暗色模式覆盖配置

主token为只读默认值
覆盖配置在运行时浅合并
组件token仅引用语义token
永远不要在组件中直接引用基础token

Quick Wins Checklist

快速优化检查清单

No emoji as icons — use Lucide React or Heroicons
Tap feedback delay: 80-150ms
Semantic color tokens (not raw hex values)
8dp spacing rhythm (4, 8, 12, 16, 24, 32, 48, 64)
```
prefers-color-scheme
```
media query for dark mode
```
prefers-reduced-motion
```
for animations
```
:focus-visible
```
instead of
```
:focus
```
for keyboard-only focus
Image aspect ratios set to prevent CLS
Font preloading for above-the-fold text
```
loading="lazy"
```
on below-fold images

不要用emoji当图标——使用Lucide React或Heroicons
点击反馈延迟：80-150ms
语义化色彩token（不要直接用原始十六进制值）
8dp间距规范（4, 8, 12, 16, 24, 32, 48, 64）
暗色模式适配
```
prefers-color-scheme
```
媒体查询
动画适配
```
prefers-reduced-motion
```
设置
仅键盘聚焦时使用
```
:focus-visible
```
而非
```
:focus
```
预设图片宽高比避免CLS
首屏文本使用的字体提前预加载
首屏外图片添加
```
loading="lazy"
```
属性

Anti-Patterns / Common Mistakes

反模式/常见错误

Anti-Pattern	Why It Is Wrong	What to Do Instead
`opacity` for disabled text	Kills readability	Use distinct disabled color token
Fixed pixel breakpoints only	Ignores component context	Use container queries for components
Hamburger menus on desktop	Hides primary navigation	Visible nav bar on desktop
Carousel for critical content	Most users see only first slide	Use static layout or accordion
Infinite scroll without URL persistence	Cannot share or return to position	Persist scroll position in URL
Modal on modal	Confusing, accessibility nightmare	Redesign to avoid nested modals
Auto-playing media	Annoying, accessibility violation	Require user interaction to play
Color as only differentiator	Color-blind users excluded	Add shape/pattern/text labels
Placeholder-only labels	Disappear on input, accessibility issue	Use visible labels above inputs
Raw hex values in components	Impossible to theme	Use semantic design tokens

反模式	错误原因	正确做法
用 `opacity` 设置禁用文本	可读性极差	使用专门的禁用色token
仅使用固定像素断点	忽略组件上下文	组件使用容器查询
桌面端使用汉堡菜单	隐藏主导航	桌面端展示可见导航栏
核心内容使用轮播	大部分用户仅看到第一屏	用静态布局或手风琴组件
无限滚动不持久化URL	无法分享或回到对应位置	将滚动位置持久化到URL
模态框嵌套模态框	逻辑混乱、可访问性灾难	重新设计避免嵌套模态框
媒体自动播放	打扰用户、违反可访问性规范	要求用户交互后再播放
仅用颜色区分内容	色盲用户无法识别	添加形状/图案/文本标签
仅用占位符当标签	输入时消失、可访问性问题	在输入框上方使用可见标签
组件中直接写原始十六进制色值	无法做主题适配	使用语义化设计token

Integration Points

集成点

Skill	Integration
`ui-design-system`	Token architecture and component library
`canvas-design`	Data visualization and charts
`mobile-design`	Mobile-specific design patterns
`ux-researcher-designer`	User research informs design decisions
`artifacts-builder`	Standalone prototypes and demos
`senior-frontend`	Implementation of UI components
`accessibility`	WCAG compliance validation

技能	集成方式
`ui-design-system`	Token架构和组件库
`canvas-design`	数据可视化和图表
`mobile-design`	移动端专属设计模式
`ux-researcher-designer`	用户研究为设计决策提供依据
`artifacts-builder`	独立原型和Demo
`senior-frontend`	UI组件实现
`accessibility`	WCAG合规校验

Skill Type

技能类型

FLEXIBLE — Follow the priority hierarchy (accessibility > touch > performance > style > layout). Style recommendations adapt to context. Accessibility and performance rules are strongly recommended and should not be deprioritized.

灵活适配型 — 遵循优先级层级（可访问性 > 热区 > 性能 > 样式 > 布局）。风格建议可根据场景适配，可访问性和性能规则为强推荐，不应降低优先级。