Back to Details

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:
  1. Product - Get style recommendations for product type
  2. Style - Get detailed style guide (colors, effects, frameworks)
  3. Typography - Get font pairings with Google Fonts imports
  4. Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
  5. Landing - Get page structure (if landing page)
  6. Chart - Get chart recommendations (if dashboard/analytics)
  7. UX - Get best practices and anti-patterns
  8. Stack - Get stack-specific guidelines (default: html-tailwind)
多次使用
search.py
以收集全面信息，直到获取足够的上下文内容。
bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
推荐搜索顺序：
  1. 产品 - 获取对应产品类型的风格建议
  2. 风格 - 获取详细的风格指南（颜色、效果、框架）
  3. 排版 - 获取包含Google Fonts引入代码的字体组合方案
  4. 颜色 - 获取完整调色板（主色、辅助色、行动号召色、背景色、文本色、边框色）
  5. 着陆页 - 获取页面结构（若需求为着陆页）
  6. 图表 - 获取图表推荐（若需求为仪表盘/分析类页面）
  7. UX - 获取最佳实践与反模式
  8. 技术栈 - 获取对应技术栈的实施指南（默认：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

可用领域

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

可用技术栈

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
技术栈核心关注点
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
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
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
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
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
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
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

提升结果质量的技巧

  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. 关键词要具体 - "医疗健康SaaS仪表盘" 优于 "应用"
  2. 多次搜索 - 不同关键词会带来不同的洞察
  3. 组合领域搜索 - 风格+排版+颜色=完整的设计系统
  4. 务必检查UX - 搜索"动画"、"z-index"、"可访问性"以规避常见问题
  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图标
稳定的悬停状态使用颜色/透明度过渡效果实现悬停使用会导致布局偏移的缩放变换
正确的品牌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)
规范建议避免
光标样式为指针为所有可点击/可悬停的卡片添加
cursor-pointer
交互元素保留默认光标样式
悬停反馈提供清晰的视觉反馈（颜色、阴影、边框）无任何交互状态提示
平滑过渡使用
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
  • 未使用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
    设置