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指南及特定技术栈最佳实践数据库。

Summary

摘要

Goal: Provide design intelligence (styles, color palettes, font pairings, UX guidelines) as a searchable database to inform UI/UX decisions before implementation.
StepActionKey Notes
1Analyze requirementsExtract product type, style keywords, industry, stack
2Search domainsUse 
search.py
for product, style, color, font, UX data
3Compile recommendationsStyle guide, palette, typography, UX patterns
4Deliver design briefTech-agnostic recommendations ready for implementation
Key Principles:
  • Use FIRST before implementation — design decisions before code
  • Tech-agnostic: works with React, Vue, Angular, Flutter, any stack
  • For React component implementation, use shadcn-tailwind after this skill
目标： 提供可搜索的设计智能数据库（风格、调色板、字体搭配、UX指南），在实现前为UI/UX决策提供依据。
步骤操作关键说明
1分析需求提取产品类型、风格关键词、行业、技术栈
2搜索领域使用
search.py
查找产品、风格、色彩、字体、UX相关数据
3整理推荐内容风格指南、调色板、排版、UX模式
4交付设计简报生成与技术栈无关的可直接用于实现的推荐内容
核心原则：
  • 在实现前使用FIRST——先做设计决策再写代码
  • 与技术栈无关：适用于React、Vue、Angular、Flutter等任何技术栈
  • 若要实现React组件，请在使用本工具后改用shadcn-tailwind

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. 色彩 - 获取调色板（主色、辅助色、CTA色、背景色、文本色、边框色）
  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、电商、医疗、美容、金融科技、服务类产品
landing
页面结构、CTA策略英雄区、以英雄区为核心、客户见证、定价、社交证明
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
SSR、路由、图片处理、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 - 搜索"animation"、"z-index"、"accessibility"以发现常见问题
  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图标
稳定的悬停状态在悬停时使用颜色/透明度过渡效果使用会改变布局的缩放变换
正确的品牌标志从Simple Icons获取官方SVG文件猜测或使用错误的标志路径
统一的图标尺寸使用固定的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）
  • 品牌标志正确（已从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
  • 所有图片都有替代文本
  • 表单输入框都有标签
  • 不单独使用颜色作为指示方式
  • 尊重
    prefers-reduced-motion
    设置

IMPORTANT Task Planning Notes

重要的任务规划说明

  • Always plan and break many small todo tasks
  • Always add a final review todo task to review the works done at the end to find any fix or enhancement needed
  • 始终将任务拆分为多个小的待办事项
  • 始终添加最终评审的待办任务，在结束时检查已完成的工作，找出需要修复或优化的地方