Back to Details

ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

ui-ux-pro-max

ui-ux-pro-max

Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
面向网页和移动应用的综合设计指南，覆盖13种技术栈，包含67种风格、96套调色板、57种字体组合、99条UX规范以及25种图表类型，支持基于优先级推荐的可搜索数据库。

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

如何使用该技能

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
当用户提出UI/UX相关需求（设计、搭建、创建、实现、审核、修复、优化）时，遵循以下工作流：

Step 1: Analyze User Requirements

步骤1：分析用户需求

Extract key information from user request:
  • Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
  • Style keywords: minimal, playful, professional, elegant, dark mode, etc.
  • Industry: healthcare, fintech, gaming, education, etc.
  • Stack: React, Vue, Next.js, or default to 
    html-tailwind
从用户请求中提取核心信息：
  • 产品类型: SaaS、电商、个人作品集、仪表盘、落地页等
  • 风格关键词: 极简、活泼、专业、优雅、深色模式等
  • 所属行业: 医疗健康、金融科技、游戏、教育等
  • 技术栈: React、Vue、Next.js，默认使用
    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:
  1. Searches 5 domains in parallel (product, style, color, landing, typography)
  2. Applies reasoning rules from 
    ui-reasoning.csv
    to select best matches
  3. Returns complete design system: pattern, style, colors, typography, effects
  4. 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"]
该命令会执行以下操作：
  1. 并行搜索5个领域（产品、风格、色彩、落地页、排版）
  2. 应用
    ui-reasoning.csv
    中的推导规则选择最优匹配项
  3. 返回完整的设计系统：模式、风格、配色、排版、效果
  4. 包含需要规避的反模式
示例：
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:
  1. When building a specific page (e.g., "Checkout"), first check 
    design-system/pages/checkout.md
  2. If the page file exists, its rules override the Master file
  3. If not, use 
    design-system/MASTER.md
    exclusively
如果需要跨会话存储设计系统以支持层级检索，添加
--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
    — 页面级与主配置的差异规则
层级检索逻辑：
  1. 当搭建特定页面（例如「结账页」）时，优先检查
    design-system/pages/checkout.md
  2. 如果页面配置文件存在，其规则覆盖主配置文件
  3. 如果不存在，则完全使用
    design-system/MASTER.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:
NeedDomainExample
More style options
style
--domain style "glassmorphism dark"
Chart recommendations
chart
--domain chart "real-time dashboard"
UX best practices
ux
--domain ux "animation accessibility"
Alternative fonts
typography
--domain typography "elegant luxury"
Landing structure
landing
--domain landing "hero social-proof"
获取设计系统后，可以使用领域搜索获取额外细节：
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
详细搜索适用场景：
需求搜索域示例
更多风格选项
style
--domain style "glassmorphism dark"
图表推荐
chart
--domain chart "real-time dashboard"
UX最佳实践
ux
--domain ux "animation accessibility"
替代字体方案
typography
--domain typography "elegant luxury"
落地页结构
landing
--domain landing "hero social-proof"

Step 4: Stack Guidelines (Default: html-tailwind)

步骤4：技术栈规范（默认：html-tailwind）

Get implementation-specific best practices. If user doesn't specify a stack, default to 
html-tailwind
.
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: 
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
, 
shadcn
, 
jetpack-compose
获取对应技术栈的实现最佳实践，如果用户未指定技术栈，默认使用
html-tailwind
。
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
可用技术栈：
html-tailwind
、
react
、
nextjs
、
vue
、
svelte
、
swiftui
、
react-native
、
flutter
、
shadcn
、
jetpack-compose

Search Reference

搜索参考

Available Domains

可用搜索域

DomainUse ForExample Keywords
product
Product type recommendationsSaaS, e-commerce, portfolio, healthcare, beauty, service
style
UI styles, colors, effectsglassmorphism, minimalism, dark mode, brutalism
typography
Font pairings, Google Fontselegant, playful, professional, modern
color
Color palettes by product typesaas, ecommerce, healthcare, beauty, fintech, service
landing
Page structure, CTA strategieshero, hero-centric, testimonial, pricing, social-proof
chart
Chart types, library recommendationstrend, comparison, timeline, funnel, pie
ux
Best practices, anti-patternsanimation, accessibility, z-index, loading
react
React/Next.js performancewaterfall, bundle, suspense, memo, rerender, cache
web
Web interface guidelinesaria, focus, keyboard, semantic, virtualize
prompt
AI prompts, CSS keywords(style name)
搜索域用途示例关键词
product
产品类型推荐SaaS, e-commerce, portfolio, healthcare, beauty, service
style
UI风格、配色、效果glassmorphism, minimalism, dark mode, brutalism
typography
字体组合、Google Fontselegant, 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
react
React/Next.js性能优化waterfall, bundle, suspense, memo, rerender, cache
web
Web界面规范aria, focus, keyboard, semantic, virtualize
prompt
AI提示词、CSS关键词(style name)

Available Stacks

可用技术栈

StackFocus
html-tailwind
Tailwind utilities, responsive, a11y (DEFAULT)
react
State, hooks, performance, patterns
nextjs
SSR, routing, images, API routes
vue
Composition API, Pinia, Vue Router
svelte
Runes, stores, SvelteKit
swiftui
Views, State, Navigation, Animation
react-native
Components, Navigation, Lists
flutter
Widgets, State, Layout, Theming
shadcn
shadcn/ui components, theming, forms, patterns
jetpack-compose
Composables, Modifiers, State Hoisting, Recomposition
技术栈侧重方向
html-tailwind
Tailwind工具类、响应式、无障碍（默认）
react
状态、Hooks、性能、设计模式
nextjs
SSR、路由、图片、API路由
vue
组合式API、Pinia、Vue Router
svelte
Runes、状态管理、SvelteKit
swiftui
视图、状态、导航、动画
react-native
组件、导航、列表
flutter
组件、状态、布局、主题
shadcn
shadcn/ui组件、主题、表单、设计模式
jetpack-compose
可组合项、修饰符、状态提升、重组

Example Workflow

示例工作流

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
用户请求： "为专业护肤服务制作落地页"

Step 1: Analyze Requirements

步骤1：分析需求

  • Product type: Beauty/Spa service
  • Style keywords: elegant, professional, soft
  • Industry: Beauty/Wellness
  • Stack: html-tailwind (default)
  • 产品类型：美容/SPA服务
  • 风格关键词：优雅、专业、柔和
  • 所属行业：美容/健康
  • 技术栈：html-tailwind（默认）

Step 2: Generate Design System (REQUIRED)

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

bash
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
bash
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
输出： 完整的设计系统，包含模式、风格、配色、排版、效果以及反模式。

Step 3: Supplement with Detailed Searches (as needed)

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

bash
undefined
bash
undefined

Get UX guidelines for animation and accessibility

获取动画和无障碍相关的UX规范

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

Get alternative typography options if needed

按需获取替代排版方案

python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
undefined
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
undefined

Step 4: Stack Guidelines

步骤4：技术栈规范

bash
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
Then: Synthesize design system + detailed searches and implement the design.
bash
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
后续操作： 整合设计系统+详细搜索结果，实现设计方案。

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

优化结果的技巧

  1. Be specific with keywords - "healthcare SaaS dashboard" > "app"
  2. Search multiple times - Different keywords reveal different insights
  3. Combine domains - Style + Typography + Color = Complete design system
  4. Always check UX - Search "animation", "z-index", "accessibility" for common issues
  5. Use stack flag - Get implementation-specific best practices
  6. Iterate - If first search doesn't match, try different keywords
  1. 关键词尽量具体 - 「healthcare SaaS dashboard」优于「app」
  2. 多次搜索 - 不同关键词会带来不同的参考信息
  3. 组合多个搜索域 - 风格+排版+配色=完整的设计系统
  4. 始终检查UX规范 - 搜索「animation」、「z-index」、「accessibility」排查常见问题
  5. 使用技术栈参数 - 获取对应技术栈的实现最佳实践
  6. 迭代调整 - 如果第一次搜索结果不符合预期，尝试更换关键词

Common Rules for Professional UI

专业UI通用规则

These are frequently overlooked issues that make UI look unprofessional:
这些是容易被忽略、会导致UI看起来不专业的常见问题：

Icons & Visual Elements

图标与视觉元素

RuleDoDon't
No emoji iconsUse SVG icons (Heroicons, Lucide, Simple Icons)Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover statesUse color/opacity transitions on hoverUse scale transforms that shift layout
Correct brand logosResearch official SVG from Simple IconsGuess or use incorrect logo paths
Consistent icon sizingUse fixed viewBox (24x24) with w-6 h-6Mix different icon sizes randomly
规则推荐做法禁止做法
禁止使用emoji作为图标使用SVG图标（Heroicons、Lucide、Simple Icons）使用🎨 🚀 ⚙️这类emoji作为UI图标
稳定的hover状态hover时使用颜色/透明度过渡效果使用会导致布局偏移的缩放变换
正确的品牌Logo从Simple Icons查找官方SVG猜测或使用错误的Logo路径
统一的图标尺寸使用固定的viewBox（24x24）配合w-6 h-6随意混合不同的图标尺寸

Interaction & Cursor

交互与光标

RuleDoDon't
Cursor pointerAdd 
cursor-pointer
to all clickable/hoverable cards		Leave default cursor on interactive elements
Hover feedbackProvide visual feedback (color, shadow, border)No indication element is interactive
Smooth transitionsUse 
transition-colors duration-200
Instant state changes or too slow (>500ms)
规则推荐做法禁止做法
指针光标为所有可点击/可hover的卡片添加
cursor-pointer
交互元素保留默认光标
hover反馈提供明确的视觉反馈（颜色、阴影、边框）交互元素没有可感知的状态提示
平滑过渡使用
transition-colors duration-200
状态瞬间切换或过渡过慢（>500ms）

Light/Dark Mode Contrast

明暗模式对比度

RuleDoDon't
Glass card light modeUse 
bg-white/80
or higher opacity		Use 
bg-white/10
(too transparent)
Text contrast lightUse 
#0F172A
(slate-900) for text		Use 
#94A3B8
(slate-400) for body text
Muted text lightUse 
#475569
(slate-600) minimum		Use gray-400 or lighter
Border visibilityUse 
border-gray-200
in light mode		Use 
border-white/10
(invisible)
规则推荐做法禁止做法
浅色模式下的玻璃卡片使用
bg-white/80
或更高的不透明度		使用
bg-white/10
（透明度太高）
浅色模式下的文本对比度正文使用
#0F172A
（slate-900）		正文使用
#94A3B8
（slate-400）
浅色模式下的次要文本最低使用
#475569
（slate-600）		使用gray-400或更浅的颜色
边框可见性浅色模式下使用
border-gray-200
使用
border-white/10
（几乎不可见）

Layout & Spacing

布局与间距

RuleDoDon't
Floating navbarAdd 
top-4 left-4 right-4
spacing		Stick navbar to 
top-0 left-0 right-0
Content paddingAccount for fixed navbar heightLet content hide behind fixed elements
Consistent max-widthUse same 
max-w-6xl
or 
max-w-7xl
Mix different container widths
规则推荐做法禁止做法
悬浮导航栏添加
top-4 left-4 right-4
间距		导航栏紧贴
top-0 left-0 right-0
内容内边距考虑固定导航栏的高度内容被固定元素遮挡
统一的最大宽度使用相同的
max-w-6xl
或
max-w-7xl
随意混合不同的容器宽度

Pre-Delivery Checklist

交付前检查清单

Before delivering UI code, verify these items:
交付UI代码前，检查以下项：

Visual Quality

视觉质量

  • No emojis used as icons (use SVG instead)
  • All icons from consistent icon set (Heroicons/Lucide)
  • Brand logos are correct (verified from Simple Icons)
  • Hover states don't cause layout shift
  • Use theme colors directly (bg-primary) not var() wrapper
  • 没有使用emoji作为图标（改用SVG）
  • 所有图标来自统一的图标库（Heroicons/Lucide）
  • 品牌Logo正确（已通过Simple Icons验证）
  • Hover状态不会导致布局偏移
  • 直接使用主题色（bg-primary），不使用额外的var()包装

Interaction

交互

  • All clickable elements have 
    cursor-pointer
  • Hover states provide clear visual feedback
  • Transitions are smooth (150-300ms)
  • Focus states visible for keyboard navigation
  • 所有可点击元素都添加了
    cursor-pointer
  • Hover状态提供清晰的视觉反馈
  • 过渡效果平滑（150-300ms）
  • 键盘导航的焦点状态可见

Light/Dark Mode

明暗模式

  • Light mode text has sufficient contrast (4.5:1 minimum)
  • Glass/transparent elements visible in light mode
  • Borders visible in both modes
  • Test both modes before delivery
  • 浅色模式文本对比度足够（最低4.5:1）
  • 玻璃/透明元素在浅色模式下可见
  • 边框在两种模式下都可见
  • 交付前已测试两种模式

Layout

布局

  • Floating elements have proper spacing from edges
  • No content hidden behind fixed navbars
  • Responsive at 375px, 768px, 1024px, 1440px
  • No horizontal scroll on mobile
  • 悬浮元素与边缘有足够的间距
  • 没有内容被固定导航栏遮挡
  • 在375px、768px、1024px、1440px宽度下响应式正常
  • 移动端没有横向滚动条

Accessibility

可访问性

  • All images have alt text
  • Form inputs have labels
  • Color is not the only indicator
  • prefers-reduced-motion
    respected
  • 所有图片都有alt文本
  • 表单输入框都有对应标签
  • 颜色不是唯一的信息传达方式
  • 尊重
    prefers-reduced-motion
    设置