ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI/UX Pro Max - Design Intelligence

UI/UX Pro Max - 设计智能工具

Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.

可搜索的UI样式、调色板、字体组合、图表类型、产品建议、UX指南及技术栈专属最佳实践数据库。

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: Search Relevant Domains

步骤2：搜索相关领域

Use

search.py

multiple times to gather comprehensive information. Search until you have enough context.

bash

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Recommended search order:

Product - Get style recommendations for product type
Style - Get detailed style guide (colors, effects, frameworks)
Typography - Get font pairings with Google Fonts imports
Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
Landing - Get page structure (if landing page)
Chart - Get chart recommendations (if dashboard/analytics)
UX - Get best practices and anti-patterns
Stack - Get stack-specific guidelines (default: html-tailwind)

多次使用

search.py

以收集全面信息，直到获取足够的上下文内容。

bash

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]

推荐搜索顺序：

产品 - 获取对应产品类型的风格建议
风格 - 获取详细的风格指南（颜色、效果、框架）
排版 - 获取包含Google Fonts引入代码的字体组合方案
颜色 - 获取完整调色板（主色、辅助色、行动号召色、背景色、文本色、边框色）
着陆页 - 获取页面结构（若需求为着陆页）
图表 - 获取图表推荐（若需求为仪表盘/分析类页面）
UX - 获取最佳实践与反模式
技术栈 - 获取对应技术栈的实施指南（默认：html-tailwind）

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

步骤3：技术栈指南（默认：html-tailwind）

If user doesn't specify a stack, default to
html-tailwind
.

bash

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

Available stacks:

html-tailwind

react

nextjs

vue

svelte

swiftui

react-native

flutter

若用户未指定技术栈，默认使用
html-tailwind
。

bash

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind

支持的技术栈：

html-tailwind

react

nextjs

vue

svelte

swiftui

react-native

flutter

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
`prompt`	AI prompts, CSS keywords	(style name)

领域	适用场景	示例关键词
`product`	产品类型风格推荐	SaaS、电商平台、作品集、医疗健康、美容、服务类
`style`	UI样式、颜色、效果	玻璃拟态、极简主义、深色模式、粗野主义
`typography`	字体组合、Google Fonts	优雅、活泼、专业、现代
`color`	按产品类型推荐调色板	saas、ecommerce、医疗健康、美容、金融科技、服务类
`landing`	页面结构、行动号召策略	英雄区、以英雄区为核心、客户证言、定价、社交证明
`chart`	图表类型、库推荐	趋势、对比、时间线、漏斗图、饼图
`ux`	最佳实践、反模式	动画、可访问性、z-index、加载效果
`prompt`	AI提示词、CSS关键词	（风格名称）

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

技术栈	核心关注点
`html-tailwind`	Tailwind工具类、响应式设计、可访问性（默认）
`react`	状态管理、Hooks、性能、设计模式
`nextjs`	服务端渲染、路由、图片处理、API路由
`vue`	组合式API、Pinia、Vue Router
`svelte`	Runes、状态存储、SvelteKit
`swiftui`	视图、状态、导航、动画
`react-native`	组件、导航、列表
`flutter`	组件、状态、布局、主题

Example Workflow

示例工作流程

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

AI should:

bash

undefined

用户请求： "为专业护肤服务制作着陆页"

AI应执行：

bash

undefined

1. Search product type

1. 搜索产品类型

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

2. Search style (based on industry: beauty, elegant)

2. 搜索风格（基于行业：美容、优雅）

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

3. Search typography

3. 搜索排版

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

4. Search color palette

4. 搜索调色板

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

5. Search landing page structure

5. 搜索着陆页结构

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

6. Search UX guidelines

6. 搜索UX指南

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

7. Search stack guidelines (default: html-tailwind)

7. 搜索技术栈指南（默认：html-tailwind）

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind


**Then:** Synthesize all search results and implement the design.

---

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind


**后续操作：** 整合所有搜索结果并完成设计实施。

---

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

关键词要具体 - "医疗健康SaaS仪表盘" 优于 "应用"
多次搜索 - 不同关键词会带来不同的洞察
组合领域搜索 - 风格+排版+颜色=完整的设计系统
务必检查UX - 搜索"动画"、"z-index"、"可访问性"以规避常见问题
使用技术栈参数 - 获取针对特定技术栈的实施最佳实践
迭代优化 - 若首次搜索结果不符合预期，尝试更换关键词

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图标
稳定的悬停状态	使用颜色/透明度过渡效果实现悬停	使用会导致布局偏移的缩放变换
正确的品牌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)

规范	建议	避免
光标样式为指针	为所有可点击/可悬停的卡片添加 `cursor-pointer`	交互元素保留默认光标样式
悬停反馈	提供清晰的视觉反馈（颜色、阴影、边框）	无任何交互状态提示
平滑过渡	使用 `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

视觉质量

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

未使用emoji作为图标（改用SVG）
所有图标来自统一的图标库（Heroicons/Lucide）
品牌Logo正确（已通过Simple Icons验证）
悬停状态不会导致布局偏移

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
```
悬停状态提供清晰的视觉反馈
过渡效果平滑（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 320px, 768px, 1024px, 1440px
No horizontal scroll on mobile

浮动元素与边缘有合适的间距
无内容被固定导航栏遮挡
在320px、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
```
设置