ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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:

Searches 5 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"]

该命令会执行以下操作：

并行搜索5个领域（产品、风格、色彩、落地页、排版）
应用
```
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

如果需要跨会话存储设计系统以支持层级检索，添加

--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
```
的规则

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

可用搜索域

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, e-commerce, portfolio, healthcare, beauty, service
`style`	UI风格、配色、效果	glassmorphism, minimalism, dark mode, brutalism
`typography`	字体组合、Google Fonts	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
`react`	React/Next.js性能优化	waterfall, bundle, suspense, memo, rerender, cache
`web`	Web界面规范	aria, focus, keyboard, semantic, virtualize
`prompt`	AI提示词、CSS关键词	(style name)

Available Stacks

可用技术栈

Stack	Focus
`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

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

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

优化结果的技巧

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
Iterate - If first search doesn't match, try different keywords

关键词尽量具体 - 「healthcare SaaS dashboard」优于「app」
多次搜索 - 不同关键词会带来不同的参考信息
组合多个搜索域 - 风格+排版+配色=完整的设计系统
始终检查UX规范 - 搜索「animation」、「z-index」、「accessibility」排查常见问题
使用技术栈参数 - 获取对应技术栈的实现最佳实践
迭代调整 - 如果第一次搜索结果不符合预期，尝试更换关键词

Common Rules for Professional UI

专业UI通用规则

These are frequently overlooked issues that make UI look unprofessional:

这些是容易被忽略、会导致UI看起来不专业的常见问题：

Icons & Visual Elements

图标与视觉元素

Rule	Do	Don't
No emoji icons	Use SVG icons (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover states	Use color/opacity transitions on hover	Use scale transforms that shift layout
Correct brand logos	Research official SVG from Simple Icons	Guess or use incorrect logo paths
Consistent icon sizing	Use fixed viewBox (24x24) with w-6 h-6	Mix 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

交互与光标

Rule	Do	Don't
Cursor pointer	Add `cursor-pointer` to all clickable/hoverable cards	Leave default cursor on interactive elements
Hover feedback	Provide visual feedback (color, shadow, border)	No indication element is interactive
Smooth transitions	Use `transition-colors duration-200`	Instant state changes or too slow (>500ms)

规则	推荐做法	禁止做法
指针光标	为所有可点击/可hover的卡片添加 `cursor-pointer`	交互元素保留默认光标
hover反馈	提供明确的视觉反馈（颜色、阴影、边框）	交互元素没有可感知的状态提示
平滑过渡	使用 `transition-colors duration-200`	状态瞬间切换或过渡过慢（>500ms）

Light/Dark Mode Contrast

明暗模式对比度

Rule	Do	Don't
Glass card light mode	Use `bg-white/80` or higher opacity	Use `bg-white/10` (too transparent)
Text contrast light	Use `#0F172A` (slate-900) for text	Use `#94A3B8` (slate-400) for body text
Muted text light	Use `#475569` (slate-600) minimum	Use gray-400 or lighter
Border visibility	Use `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

布局与间距

Rule	Do	Don't
Floating navbar	Add `top-4 left-4 right-4` spacing	Stick navbar to `top-0 left-0 right-0`
Content padding	Account for fixed navbar height	Let content hide behind fixed elements
Consistent max-width	Use 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

视觉质量

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
```
设置