A searchable database containing UI styles, color schemes, font pairings, chart types, product recommendations, UX guidelines, and best practices for specific tech stacks.
Prerequisites
Check whether Python is installed:
python3 --version || python --version
If Python is not installed, install it according to the user's operating system:
macOS:
brew install python3
**Ubuntu/Debian:**
```bash
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
How to use this skill
When the user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyze user requirements
Extract key information from the user 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。
Step 2: Search relevant domains
Use search.py multiple times to gather comprehensive information. Keep searching until you have enough context.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
Recommended search order:
- Product - Get style suggestions for that product type
- Style - Get detailed style guides (colors, effects, frameworks)
- Typography - Get font pairings with Google Fonts import code
- Color - Get color schemes (primary, secondary, CTA, background, text, border)
- Landing - Get page structure (if it is a landing page)
- Chart - Get chart recommendations (if it is a dashboard/analytics type)
- UX - Get best practices and anti-patterns (i.e., designs to avoid)
- Stack - Get guidelines for a specific tech stack (default: html-tailwind)
Step 3: Tech stack guidelines (default: html-tailwind)
If the user does not specify a tech stack, **default to html-tailwind**。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
Available tech stacks:html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
Search reference
Available domains
Domain (domain) |
Purpose | Keyword examples |
|---|---|---|
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 schemes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
landing |
Page structure, CTA strategy | 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) |
Available tech stacks (Stacks)
Tech stack (stack) |
Focus |
|---|---|
html-tailwind |
Tailwind utility classes, responsive, 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, animation |
react-native |
Components, navigation, lists |
flutter |
Widgets, state, layout, theme |
shadcn |
shadcn/ui components, theme customization, forms, patterns |
Example workflow
User request: "Create a landing page (Landing page) for a professional skincare service"
AI should execute:
# 1. 搜索产品类型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. 搜索风格 (基于行业: 美业, 优雅)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. 搜索排版/字体
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. 搜索配色方案
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. 搜索落地页结构
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 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. 搜索技术栈指南 (默认: 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
- Be specific with keywords - Use "healthcare SaaS dashboard" (medical SaaS dashboard) instead of "app".
- Search multiple times - Different keywords will reveal different insights.
- Combine domains - Style (Style) + Typography (Typography) + Color (Color) = complete design system.
- Always check UX - Search "animation" (动画), "z-index", "accessibility" (无障碍) to avoid common issues.
- Use Stack markers - Get best practices for specific implementations.
- Iterate - If the first search doesn't match, try different keywords.
General rules for professional UI
These are commonly overlooked issues that make UI look unprofessional:
Icons and visual elements
| Rule | Do | Don't |
|---|---|---|
| Don't use Emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use Emoji such as 🎨 🚀 ⚙️ as UI icons |
| Stable hover states | Use color/opacity transitions on hover | Use scale transforms that cause layout shift |
| Correct brand logos | Find official SVGs from Simple Icons | Guess or use incorrect logo paths |
| Consistent icon sizes | Use a fixed viewBox (24x24) and w-6 h-6 | Mix icons of different sizes arbitrarily |
Interaction and cursor
| Rule | Do | Don't |
|---|---|---|
| Pointer cursor (Cursor pointer) | Add to all clickable/hoverable cards cursor-pointer |
Keep the default cursor on interactive elements |
| Hover feedback | Provide visual feedback (color, shadow, border) | No indication that an element is interactive |
| Smooth transitions | Use transition-colors duration-200 |
Instant state changes or too slow (>500ms) |
Light/dark mode contrast
| Rules | Do | Don't |
|---|---|---|
| Glass cards in light mode | Use bg-white/80 or higher opacity |
Use bg-white/10 (too transparent) |
| Light mode text contrast | Text uses #0F172A (slate-900) |
Body text uses #94A3B8 (slate-400) |
| Soft/secondary text (light mode) | Use at minimum #475569 (slate-600) |
Use gray-400 or lighter colors |
| Border visibility | Light mode uses border-gray-200 |
Use border-white/10 (invisible) |
Layout and spacing
| Rules | Do | Don't |
|---|---|---|
| Floating navigation bar | Add top-4 left-4 right-4 spacing |
Place the navigation bar flush against top-0 left-0 right-0 |
| Content padding | Account for the height of the fixed navigation bar | Let content hide behind fixed elements |
| Consistent maximum width | Use a unified max-w-6xl or max-w-7xl |
Mix different container widths |
Pre-delivery checklist
Before delivering UI code, verify these items:
Visual quality
- Emoji are not used as icons (SVG should be used)
- All icons come from a consistent icon set (Heroicons/Lucide)
- Brand logo is correct (verified via Simple Icons)
- Hover states do not cause layout shift
- Use theme colors directly (bg-primary) instead of var() wrappers
Interaction experience
- 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
- 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
- Floating elements have appropriate spacing from edges
- No content is hidden behind the fixed navigation bar
- Responds well at 320px, 768px, 1024px, 1440px
- No horizontal scrollbar on mobile
Accessibility
- All images have alt text
- Form inputs have labels (label)
- Color is not the only indicator
- Respect
prefers-reduced-motion(reduced motion) settings