Back to Details

ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI/UX Pro Max - 设计智能

UI/UX Pro Max - Design Intelligence

一个可搜索的数据库，包含 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 准则以及特定技术栈的最佳实践。
A searchable database containing UI styles, color schemes, font pairings, chart types, product recommendations, UX guidelines, and best practices for specific tech stacks.

前置条件

Prerequisites

检查是否已安装 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
Check if Python is installed:
bash
python3 --version || python --version
If Python is not installed, install it according to your operating system:
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

当用户请求进行 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，请遵循以下工作流程：
When a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

步骤 1：分析用户需求

Step 1: Analyze User Requirements

从用户请求中提取关键信息：
  • 产品类型：SaaS、电商、作品集、仪表盘、落地页等。
  • 风格关键词：极简、俏皮、专业、优雅、暗黑模式等。
  • 行业：医疗、金融科技、游戏、教育等。
  • 技术栈：React, Vue, Next.js, 或默认为 
    html-tailwind
    。
Extract key information from the user's request:
  • Product Type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
  • Style Keywords: minimalist, playful, professional, elegant, dark mode, etc.
  • Industry: healthcare, fintech, gaming, education, etc.
  • Tech Stack: React, Vue, Next.js, or default to 
    html-tailwind
    .

步骤 2：搜索相关领域

Step 2: Search Relevant Domains

多次使用 
search.py
以收集全面的信息。持续搜索直到获得足够的上下文。
bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
推荐搜索顺序：
  1. Product (产品) - 获取针对该产品类型的风格建议
  2. Style (风格) - 获取详细的风格指南（颜色、特效、框架）
  3. Typography (排版) - 获取带有 Google Fonts 引入代码的字体搭配
  4. Color (颜色) - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
  5. Landing (落地页) - 获取页面结构（如果是落地页）
  6. Chart (图表) - 获取图表推荐（如果是仪表盘/分析类）
  7. UX (用户体验) - 获取最佳实践和反模式（即应避免的设计）
  8. Stack (技术栈) - 获取特定技术栈的指南（默认：html-tailwind）
Use 
search.py
multiple times to gather comprehensive information. Continue searching until sufficient context is obtained.
bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keywords>" --domain <domain> [-n <max results>]
Recommended Search Order:
  1. Product - Get style recommendations for the product type
  2. Style - Get detailed style guides (colors, effects, frameworks)
  3. Typography - Get font pairings with Google Fonts import code
  4. Color - Get color schemes (primary, secondary, CTA, background, text, border)
  5. Landing - Get page structure (if it's a landing page)
  6. Chart - Get chart recommendations (if it's a dashboard/analytics type)
  7. UX - Get best practices and anti-patterns (i.e., designs to avoid)
  8. Stack - Get guidelines for specific tech stacks (default: html-tailwind)

步骤 3：技术栈指南 (默认: html-tailwind)

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

如果用户未指定技术栈，**默认为 
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
, 
shadcn
If the user doesn't specify a tech stack, default to 
html-tailwind
.
bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keywords>" --stack html-tailwind
Available Tech Stacks: 
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
, 
shadcn

搜索参考

Search Reference

可用领域 (Domains)

Available Domains

领域 (
domain
)		用途关键词示例
product
产品类型推荐SaaS, e-commerce (电商), portfolio (作品集), healthcare (医疗), beauty (美业), service (服务)
style
UI 风格、颜色、特效glassmorphism (玻璃拟态), minimalism (极简), dark mode (暗黑), brutalism (粗野主义)
typography
字体搭配, Google Fontselegant (优雅), 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 (加载)
prompt
AI 提示词, CSS 关键词(风格名称)
Domain (
domain
)		PurposeKeyword Examples
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 schemes 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 names)

可用技术栈 (Stacks)

Available Tech Stacks

技术栈 (
stack
)		侧重点
html-tailwind
Tailwind 工具类, 响应式, 无障碍性 (默认)
react
状态管理, hooks, 性能, 模式
nextjs
SSR (服务端渲染), 路由, 图片优化, API 路由
vue
组合式 API, Pinia, Vue Router
svelte
Runes, stores, SvelteKit
swiftui
视图, 状态, 导航, 动画
react-native
组件, 导航, 列表
flutter
Widgets, 状态, 布局, 主题
shadcn
shadcn/ui 组件, 主题定制, 表单, 模式
Tech Stack (
stack
)		Focus
html-tailwind
Tailwind utility classes, responsiveness, accessibility (default)
react
State management, hooks, performance, patterns
nextjs
SSR (Server-Side Rendering), routing, image optimization, API routes
vue
Composition API, Pinia, Vue Router
svelte
Runes, stores, SvelteKit
swiftui
Views, state, navigation, animations
react-native
Components, navigation, lists
flutter
Widgets, state, layout, themes
shadcn
shadcn/ui components, theme customization, forms, patterns

示例工作流

Example Workflow

用户请求： "为专业护肤服务制作一个落地页 (Landing page)"
AI 应当执行：
bash
undefined
User Request: "Create a landing page for professional skincare services"
AI Should Execute:
bash
undefined

1. 搜索产品类型

1. Search product type

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. 搜索风格 (基于行业: 美业, 优雅)

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

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. 搜索排版/字体

3. Search typography/fonts

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. 搜索配色方案

4. Search color scheme

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. 搜索落地页结构

5. Search landing page structure

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. 搜索 UX 准则

6. Search UX guidelines

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. 搜索技术栈指南 (默认: html-tailwind)

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

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack 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.

---

获取更好结果的技巧

Tips for Better Results

  1. 关键词要具体 - 使用 "healthcare SaaS dashboard" (医疗 SaaS 仪表盘) 优于 "app"。
  2. 多次搜索 - 不同的关键词会揭示不同的见解。
  3. 组合领域 - 风格 (Style) + 排版 (Typography) + 颜色 (Color) = 完整的设计系统。
  4. 务必检查 UX - 搜索 "animation" (动画), "z-index", "accessibility" (无障碍) 以避免常见问题。
  5. 使用 Stack 标志 - 获取特定实现的最佳实践。
  6. 迭代 - 如果第一次搜索不匹配，尝试不同的关键词。
  1. Be specific with keywords - Use "healthcare SaaS dashboard" instead of "app".
  2. Search multiple times - Different keywords reveal different insights.
  3. Combine domains - Style + Typography + Color = Complete design system.
  4. Always check UX - Search for "animation", "z-index", "accessibility" to avoid common issues.
  5. Use the Stack flag - Get best practices for specific implementations.
  6. Iterate - If the first search doesn't match, try different keywords.

专业 UI 的通用规则

General Rules for Professional UI

这些是经常被忽视的问题，它们会让 UI 看起来不专业：
These are often overlooked issues that make UI look unprofessional:

图标与视觉元素

Icons & Visual Elements

规则应做 (Do)不应做 (Don't)
不要使用 Emoji 图标使用 SVG 图标 (Heroicons, Lucide, Simple Icons)使用 🎨 🚀 ⚙️ 等 Emoji 作为 UI 图标
稳定的悬停状态悬停时使用颜色/透明度过渡使用会导致布局偏移的缩放变换
正确的品牌 Logo从 Simple Icons 查找官方 SVG猜测或使用错误的 Logo 路径
一致的图标尺寸使用固定的 viewBox (24x24) 和 w-6 h-6随意混合不同尺寸的图标
RuleDoDon't
Don't use Emoji as iconsUse SVG icons (Heroicons, Lucide, Simple Icons)Use Emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover statesUse color/opacity transitions on hoverUse scale transforms that cause layout shifts
Correct brand logosFind official SVGs from Simple IconsGuess or use incorrect logo paths
Consistent icon sizesUse fixed viewBox (24x24) and w-6 h-6Randomly mix icon sizes

交互与光标

Interaction & Cursor

规则应做 (Do)不应做 (Don't)
指针光标 (Cursor pointer)给所有可点击/可悬停的卡片添加 
cursor-pointer
在交互元素上保留默认光标
悬停反馈提供视觉反馈（颜色、阴影、边框）没有任何指示表明元素可交互
平滑过渡使用 
transition-colors duration-200
状态瞬间切换或过慢 (>500ms)
RuleDoDon't
Cursor pointerAdd 
cursor-pointer
to all clickable/hoverable cards		Keep default cursor on interactive elements
Hover feedbackProvide visual feedback (color, shadow, border)Have no indication that an element is interactive
Smooth transitionsUse 
transition-colors duration-200
Switch states instantly or too slowly (>500ms)

亮/暗模式对比度

Light/Dark Mode Contrast

规则应做 (Do)不应做 (Don't)
亮色模式下的玻璃卡片使用 
bg-white/80
或更高不透明度		使用 
bg-white/10
(太透明)
亮色文本对比度文本使用 
#0F172A
(slate-900)		正文使用 
#94A3B8
(slate-400)
柔和/次级文本 (亮色)最低使用 
#475569
(slate-600)		使用 gray-400 或更浅的颜色
边框可见性亮色模式使用 
border-gray-200
使用 
border-white/10
(不可见)
RuleDoDon't
Glass cards in light modeUse 
bg-white/80
or higher opacity		Use 
bg-white/10
(too transparent)
Light text contrastUse 
#0F172A
(slate-900) for text		Use 
#94A3B8
(slate-400) for body text
Soft/secondary text (light mode)Use at least 
#475569
(slate-600)		Use gray-400 or lighter colors
Border visibilityUse 
border-gray-200
in light mode		Use 
border-white/10
(invisible)

布局与间距

Layout & Spacing

规则应做 (Do)不应做 (Don't)
悬浮导航栏添加 
top-4 left-4 right-4
间距		将导航栏紧贴 
top-0 left-0 right-0
内容内边距 (Padding)考虑到固定导航栏的高度让内容隐藏在固定元素后面
一致的最大宽度使用统一的 
max-w-6xl
或 
max-w-7xl
混合使用不同的容器宽度
RuleDoDon't
Floating navigation barAdd 
top-4 left-4 right-4
spacing		Stick navigation bar to 
top-0 left-0 right-0
Content paddingAccount for the height of fixed navigation barsLet content be hidden behind fixed elements
Consistent max widthUse unified 
max-w-6xl
or 
max-w-7xl
Mix different container widths

交付前检查清单

Pre-Delivery Checklist

在交付 UI 代码之前，请验证这些项目：
Before delivering UI code, verify these items:

视觉质量

Visual Quality

  • 没有将 Emoji 用作图标（应使用 SVG）
  • 所有图标来自一致的图标集 (Heroicons/Lucide)
  • 品牌 Logo 正确（已通过 Simple Icons 验证）
  • 悬停状态不会导致布局偏移
  • 直接使用主题颜色 (bg-primary) 而不是 var() 包装器
  • No Emojis used as icons (use SVG instead)
  • All icons come from consistent icon sets (Heroicons/Lucide)
  • Brand logos are correct (verified via Simple Icons)
  • Hover states don't cause layout shifts
  • Use theme colors directly (bg-primary) instead of var() wrappers

交互体验

Interactive Experience

  • 所有可点击元素都有 
    cursor-pointer
  • 悬停状态提供清晰的视觉反馈
  • 过渡效果平滑 (150-300ms)
  • 键盘导航时焦点状态可见
  • All clickable elements have 
    cursor-pointer
  • Hover states provide clear visual feedback
  • Transitions are smooth (150-300ms)
  • Focus states are visible during keyboard navigation

亮/暗模式

Light/Dark Mode

  • 亮色模式文本有足够的对比度（最低 4.5:1）
  • 玻璃/透明元素在亮色模式下可见
  • 边框在两种模式下均可见
  • 交付前在两种模式下都进行了测试
  • Light mode text has sufficient contrast (minimum 4.5:1)
  • Glass/transparent elements are visible in light mode
  • Borders are visible in both modes
  • Tested in both modes before delivery

布局

Layout

  • 悬浮元素与边缘有适当的间距
  • 没有内容隐藏在固定导航栏后面
  • 在 320px, 768px, 1024px, 1440px 下均响应良好
  • 移动端没有水平滚动条
  • Floating elements have proper spacing from edges
  • No content is hidden behind fixed navigation bars
  • Responsive at 320px, 768px, 1024px, 1440px
  • No horizontal scrollbar on mobile

无障碍性

Accessibility

  • 所有图片都有 alt 文本
  • 表单输入框有标签 (label)
  • 颜色不是唯一的指示器
  • 尊重 
    prefers-reduced-motion
    （减少动态效果）设置
  • All images have alt text
  • Form inputs have labels
  • Color is not the only indicator
  • Respects 
    prefers-reduced-motion
    settings