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

A comprehensive design intelligence skill 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:
powershell
python --version
If Python is not installed, install it:
powershell
winget install Python.Python.3.12
检查Python是否已安装：
powershell
python --version
若未安装Python，请执行以下命令安装：
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:
powershell
python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<product_type> <industry> <keywords>" --design-system
You can optionally add 
-p "Project Name"
if known.
This command:
  1. Searches 5 domains in parallel (product, style, color, landing, typography)
  2. Applies reasoning rules to select best matches
  3. Returns complete design system: pattern, style, colors, typography, effects
  4. Includes anti-patterns to avoid
Example:
powershell
python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "beauty spa wellness service" --design-system -p "Serenity Spa"
请始终以
--design-system
参数启动，获取包含推理依据的全面推荐：
powershell
python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<product_type> <industry> <keywords>" --design-system
若已知项目名称，可选择性添加
-p "Project Name"
参数。
该命令将：
  1. 并行搜索5个领域（产品、风格、色彩、落地页、排版）
  2. 应用推理规则筛选最佳匹配项
  3. 返回完整的设计系统：设计模式、风格、色彩、排版、视觉效果
  4. 包含需避免的反模式示例
示例：
powershell
python "C:\Users\ADMIN\.gemini\antigravity\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
. Note: This requires write permissions to the current working directory.
powershell
python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<query>" --design-system --persist -p "Project Name"
若需跨会话层级检索设计系统，请添加
--persist
参数。 注意：此操作需要当前工作目录的写入权限。
powershell
python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<query>" --design-system --persist -p "Project Name"

Step 3: Supplement with Detailed Searches (as needed)

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

After getting the design system, use domain searches to get additional details:
powershell
python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<keyword>" --domain <domain>
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"
获取设计系统后，可使用领域搜索获取更多细节：
powershell
python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<keyword>" --domain <domain>
何时使用详细搜索：
需求领域示例
更多风格选项
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
.
powershell
python "C:\Users\ADMIN\.gemini\antigravity\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
。
powershell
python "C:\Users\ADMIN\.gemini\antigravity\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、电商、作品集、医疗健康、美容、服务类
style
UI风格、色彩、视觉效果玻璃拟态、极简主义、深色模式、粗野主义
typography
字体搭配、Google Fonts推荐优雅、活泼、专业、现代
color
按产品类型推荐调色板saas、电商、医疗健康、美容、金融科技、服务类
landing
页面结构、CTA策略首屏、首屏主导、客户证言、定价、社交证明
chart
图表类型、库推荐趋势、对比、时间线、漏斗、饼图
ux
最佳实践、反模式动画、无障碍、z-index、加载
react
React/Next.js性能优化瀑布流、打包、Suspense、memo、重渲染、缓存
web
网页界面设计准则aria、焦点、键盘导航、语义化、虚拟化
prompt
AI提示词、CSS关键词（风格名称）

Available Stacks (Partial List)

支持的技术栈（部分列表）

html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
, 
shadcn
, 
jetpack-compose
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
, 
shadcn
, 
jetpack-compose

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
  1. 关键词需具体 - "医疗健康SaaS数据看板" 优于 "应用"
  2. 多次搜索 - 不同关键词会呈现不同的洞察
  3. 组合多个领域 - 风格+排版+色彩=完整的设计系统
  4. 务必检查UX - 搜索"动画"、"z-index"、"无障碍"以规避常见问题
  5. 使用技术栈参数 - 获取针对特定技术栈的最佳实践