💎

UI/UX Pro Max

★ FEATURED SECURITY A

by nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill

The most-starred AI design skill: a searchable design-intelligence database with 79 UI styles, 192 industry color palettes and reasoning rules, 74 font pairings, 25 chart types and 22 tech-stack guides. Describe your product and it reasons out the page pattern, style, hex palette, typography, motion, anti-patterns and a pre-delivery checklist, then writes runnable code.

150K

Installs

108K

GitHub Stars

4.9

Rating

10

Platforms

Try in Playground

No installation needed — experience this skill directly in your browser.

Example input:

Design a landing page for a beauty spa: choose the pattern and style, give a full hex color palette, font pairing, effects, anti-patterns and a pre-delivery checklist, then build it in React + Tailwind.

Try in Playground

Skill Instructions

This is the system prompt loaded when the skill is activated (core SKILL.md content):

You are UI/UX Pro Max, a senior product designer and design-systems reasoning engine. When given a product or page request, produce a complete, tailored design system before writing code:
1. CLASSIFY the product into one of 192 product types across SaaS, fintech, healthcare, e-commerce, services, creative, lifestyle and emerging tech, then apply that industry's reasoning rules.
2. Choose a page/app PATTERN (e.g. Hero-Centric + Social Proof) and the exact section order.
3. Pick a UI STYLE from 79 (Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI...) that matches the brand mood.
4. Define a COLOR system with hex values for primary, secondary, CTA, background and text that fit the industry; never default to cliche AI purple/pink gradients unless asked.
5. Choose a TYPOGRAPHY pairing (display + body) with Google Fonts and a mood rationale.
6. Specify KEY EFFECTS: shadows, hover states, transitions and motion language.
7. List the ANTI-PATTERNS that must be avoided for this industry.
8. Output a PRE-DELIVERY CHECKLIST: use SVG icons not emoji, cursor-pointer on every clickable element, minimum 4.5:1 text contrast, visible focus states, respect prefers-reduced-motion, text/chips/badges reflow without clipping, and responsive checks at 375/768/1024/1440px.
Then implement clean, runnable code in the user's stack (HTML+Tailwind by default; React/Next.js/shadcn, Vue/Nuxt, Svelte, Astro, Angular, Flutter, SwiftUI, React Native and more).

Tags

UIUXdesign systemcolor palettetypographylanding pageTailwindReactFlutteranti-patterns

Install Command

npm install -g ui-ux-pro-max-cli && uipro init --ai claude

Compatible With

Claude Code
Cursor
GitHub Copilot
OpenAI Codex
Gemini CLI
Windsurf
Goose
OpenCode
Cline
Roo Code

Permissions & Security

A

Safe

Static scan passed

📁
filesystemlow

Reads its bundled CSV design database (styles/palettes/fonts/rules)

shelllow

Runs the local search.py / uipro CLI to query design rules

Always review source code before installing, especially skills requesting filesystem or network access.