ui-ux-pro-max-skill
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Install / Use
npx skills add nextlevelbuilder/ui-ux-pro-max-skillInstalls into whichever agent you are using.
CLAUDE.md
Claude Code project instructions
Quality Score
Category
DesignSupported Platforms
Skill content
View source on GitHubUI UX Pro Max
<p align="center"> <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> | <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a> </p> <p align="center"> <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases"><img src="https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue" alt="GitHub Release"></a> <img src="https://img.shields.io/badge/reasoning_rules-161-green?style=for-the-badge" alt="161 Reasoning Rules"> <img src="https://img.shields.io/badge/UI_styles-84-purple?style=for-the-badge" alt="84 UI Styles"> <img src="https://img.shields.io/badge/python-3.x-yellow?style=for-the-badge&logo=python&logoColor=white" alt="Python 3.x"> <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/LICENSE"><img src="https://img.shields.io/github/license/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=green" alt="License"></a> </p> <p align="center"> <a href="https://www.npmjs.com/package/ui-ux-pro-max-cli"><img src="https://img.shields.io/npm/v/ui-ux-pro-max-cli?style=flat-square&logo=npm&label=CLI" alt="npm"></a> <a href="https://www.npmjs.com/package/ui-ux-pro-max-cli"><img src="https://img.shields.io/npm/dm/ui-ux-pro-max-cli?style=flat-square&label=downloads" alt="npm downloads"></a> <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/stargazers"><img src="https://img.shields.io/github/stars/nextlevelbuilder/ui-ux-pro-max-skill?style=flat-square&logo=github" alt="GitHub stars"></a> <a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Support%20Development-00457C?style=flat-square&logo=paypal&logoColor=white" alt="PayPal"></a> </p>An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
<p align="center"> <a href="https://uupm.cc"> <img src="screenshots/website.png" alt="UI UX Pro Max" width="800"> </a> </p> <p align="center"> <b>If you find this useful, consider supporting the project:</b><br><br> <a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal Donate"></a> </p> <p align="center"> <i>Other projects</i><br> <a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a> </p>What's New in v2.0
Intelligent Design System Generation
The flagship feature of v2.0 is the Design System Generator - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.
+----------------------------------------------------------------------------------------+
| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |
+----------------------------------------------------------------------------------------+
| |
| PATTERN: Hero-Centric + Social Proof |
| Conversion: Emotion-driven with trust elements |
| CTA: Above fold, repeated after testimonials |
| Sections: |
| 1. Hero |
| 2. Services |
| 3. Testimonials |
| 4. Booking |
| 5. Contact |
| |
| STYLE: Soft UI Evolution |
| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |
| Best For: Wellness, beauty, lifestyle brands, premium services |
| Performance: Excellent | Accessibility: WCAG AA |
| |
| COLORS: |
| Primary: #E8B4B8 (Soft Pink) |
| Secondary: #A8D5BA (Sage Green) |
| CTA: #D4AF37 (Gold) |
| Background: #FFF5F5 (Warm White) |
| Text: #2D3436 (Charcoal) |
| Notes: Calming palette with gold accents for luxury feel |
| |
| TYPOGRAPHY: Cormorant Garamond / Montserrat |
| Mood: Elegant, calming, sophisticated |
| Best For: Luxury brands, wellness, beauty, editorial |
| Google Fonts: https://fonts.google.com/share?selection.family=... |
| |
| KEY EFFECTS: |
| Soft shadows + Smooth transitions (200-300ms) + Gentle hover states |
| |
| AVOID (Anti-patterns): |
| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients |
| |
| PRE-DELIVERY CHECKLIST: |
| [ ] No emojis as icons (use SVG: Heroicons/Lucide) |
| [ ] cursor-pointer on all clickable elements |
| [ ] Hover states with smooth transitions (150-300ms) |
| [ ] Light mode: text contrast 4.5:1 minimum |
| [ ] Focus states visible for keyboard nav |
| [ ] prefers-reduced-motion respected |
| [ ] Responsive: 375px, 768px, 1024px, 1440px |
| |
+----------------------------------------------------------------------------------------+
How Design System Generation Works
┌─────────────────────────────────────────────────────────────────┐
│ 1. USER REQUEST │
│ "Build a landing page for my beauty spa" │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │
│ • Product type matching (192 categories) │
│ • Style recommendations (84 styles) │
│ • Color palette selection (192 palettes) │
│ • Landing page patterns (34 patterns) │
│ • Typography pairing (74 font combinations) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. REASONING ENGINE │
│ • Match product → UI category rules │
│ • Apply style priorities (BM25 ranking) │
│ • Filter anti-patterns for industry │
│ • Process decision rules (JSON conditions) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 4. COMPLETE DESIGN SYSTEM OUTPUT │
│ Pattern + Style + Colors + Typography + Effects │
│ + Anti-patterns to avoid + Pre-delivery checklist │
└─────────────────────────────────────────────────────────────────┘
161 Industry-Specific Reasoning Rules
The reasoning engine includes specialized rules for:
| Category | Examples | |----------|----------| | Tech & SaaS | SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform | | Finance | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool | | Healthcare | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder | | E-commerce | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery | | Services | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment | | Creative | Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor | | Lifestyle | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker | | Emerging Tech | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet |
Each rule includes:
- Recommended Pattern - Landing page structure
- Style Priority - Best matching UI styles
- Color Mood - Industry-appropriate palettes
- Typography Mood - Font personality matching
- Key Effects - Animations and interactions
- Anti-Patterns - What NOT to do (e.g., "AI purple/pink gradients" for banking)
Features
- 84 UI Styles - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more
- 192 Color Palettes - Industry-specific palettes aligned 1:1 with the 192 product types
- 74 Font Pairings - Curated typography combinations with Google Fonts imports
- 25 Chart Types - Recommendations for dashboards and analytics
- 22 Tech Stacks - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
- 98 UX Guidelines - Best practices, anti-patterns, and accessibility rules
- 161 Reasoning Rules - Industry-specific design system generation (NEW in v2.0)
Available Styles (67)
<details> <summary><b>General Styles (49)</b></summary>| # | Style | Best For | |---|-------|----------| | 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation | | 2 | Neumorphism | Health/wellness apps, meditation platforms | | 3 | Glassmorphism | Modern SaaS, financial dashboards | | 4 | Brutalism | Design portfolios, artistic projects | | 5 | 3D & Hyperrealism | Gaming, product showcase, immersive | | 6 | Vibrant & Block-based | Startups, creative agencies, gaming | | 7 | Dark Mode (OLED) | Night-mode apps, coding platforms | | 8 | Accessible & Ethical | Government, healthcare, education | | 9 | Claymorphism | Educational apps, children's apps, SaaS | | 10 | Aurora UI | Modern SaaS, creative agencies | | 11 | Retr
Truncated for display — read the full file on GitHub.
Related Skills
caveman
107.2k🪨 why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
claude-mem
94.4kPersistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
Agent-Reach
84.5kGive your AI agent eyes to see the entire internet. Read & search Twitter, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu — one CLI, zero API fees.
Understand-Anything
83.6kGraphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.
