ui_ux_pro_max

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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:

Searches 5 domains in parallel (product, style, color, landing, typography)
Applies reasoning rules to select best matches
Returns complete design system: pattern, style, colors, typography, effects
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"

参数。

该命令将：

并行搜索5个领域（产品、风格、色彩、落地页、排版）
应用推理规则筛选最佳匹配项
返回完整的设计系统：设计模式、风格、色彩、排版、视觉效果
包含需避免的反模式示例

示例：

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:

Need	Domain	Example
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

支持的领域

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
`react`	React/Next.js performance	waterfall, bundle, suspense, memo, rerender, cache
`web`	Web interface guidelines	aria, 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

优化搜索结果的技巧

Be specific with keywords - "healthcare SaaS dashboard" > "app"
Search multiple times - Different keywords reveal different insights
Combine domains - Style + Typography + Color = Complete design system
Always check UX - Search "animation", "z-index", "accessibility" for common issues
Use stack flag - Get implementation-specific best practices

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