← Back to Blog

🎨 Design Intelligence Before You Code — No More Guessing Colors

UI/UX Pro Max v2.11.0 — A tool that gives AI design smarts, automatically picking styles that fit your product

---

Ever found yourself stuck wondering:

• 🤔 "What colors make a SaaS site look professional?"
• 🤔 "Which font is most readable for a healthcare app?"
• 🤔 "What layout works best for an analytics dashboard?"
• 🤔 "How does e-commerce design differ from education apps?"

Before: You'd scroll through Dribbble and Pinterest for hours, looking at dozens of designs, then guessing what fits.

Now with UI/UX Pro Max: You just tell AI "create a healthcare dashboard in React" — and it finds the right style, colors, fonts, layouts, and UX guidelines for that industry.

It's like having a senior design expert on call, one who knows 192 different product types and recommends exactly what fits each.

🧠 What is UI/UX Pro Max?

UI/UX Pro Max is a design knowledge system for AI assistants (like Codex). Instead of letting AI "make up" interfaces from whatever it learned online, this tool gives it:

• 📚 Structured design database — 84 styles, 192 color palettes, 74 font pairings, 192 product types
• 🔍 Local search — searches the right domain (style, color, typography, UX...) instead of guessing
• 🏥 Industry-aware reasoning — healthcare apps differ from gaming apps, SaaS dashboards differ from e-commerce
• ⚙️ Stack-specific guidance — React, Vue, Flutter, SwiftUI, HTML+Tailwind... each stack has its own implementation patterns
• ✅ Quality gate before delivery — checks accessibility, touch targets, contrast, responsiveness...

🎯 7 Skills — 7 Design Tools

UI/UX Pro Max isn't just one skill. It includes 7 skill definitions for different design needs:

Skill	Purpose	When to use
ui-ux-pro-max	Core skill — main design intelligence	Designing web/mobile, choosing visual systems, improving UX
banner-design	Design social banners, ads, hero images	Need covers, headers, display ads, campaign assets
brand	Manage brand voice, visual identity, tone	Create/review style guides, brand guidelines
design-system	Three-layer tokens, CSS variables, component specs	Need to systematize UI, Tailwind themes
design	Router that orchestrates all design tasks	Design requests spanning multiple deliverables
slides	HTML presentations with design tokens and charts	Pitch decks, marketing presentations
ui-styling	Implement accessible UI with shadcn/ui, Radix, Tailwind	Create responsive layouts, forms, dialogs, dark mode

🚀 How to Use — 4 Simple Steps

Requires Node.js and Python 3.x. The search script uses pure Python — no packages to install, no network calls.

1. Install the CLI

npm install -g ui-ux-pro-max-cli

2. Set up for Codex

# In your project directory
uipro init --ai codex

3. Ask naturally

In Codex, just say it naturally:

Build a responsive SaaS dashboard with accessible dark mode

The skill auto-activates when it detects UI/UX-related requests — no slash commands needed.

4. Review the design system before coding

AI will generate a design system based on your product type, industry, and tone. Review it before writing code.

⚙️ Design Dials — Tune Your Interface's "Personality"

UI/UX Pro Max has 3 "dials" (1-10 scale) to fine-tune the interface to your taste:

Dial	Meaning	Low (1-3)	High (8-10)
variance	Boldness	Safe, familiar	Unique, unconventional
motion	Animation level	Static, minimal	Rich animations, GSAP
density	Information density	Spacious, airy	Data-rich, compact

Example: --variance 8 --motion 7 --density 8 creates a bold, animated, high-density interface — perfect for analytics dashboards.

✅ Quality Gate — Pre-Delivery Checks

Before delivering UI, the skill automatically checks 8 key criteria:

1. 👁️ Contrast ≥ 4.5:1 — readable on any background
2. 👆 Touch target ≥ 44×44px — easy to tap on mobile
3. ⌨️ Keyboard/focus — navigable with keyboard
4. 📱 Responsive — works on all screen sizes
5. 🚫 No horizontal scroll — no overflow issues
6. ⏳ Loading feedback — clear loading states
7. 📐 CLS (Cumulative Layout Shift) — no layout jumps
8. ♿ Reduced motion — respects users who prefer less animation

🔍 Search Workflow

You can search design domains directly:

python3 .agents/skills/ui-ux-pro-max/scripts/search.py \
  "SaaS dashboard" \
  --design-system \
  -p "MyApp"

Supported domains:

• --domain style — UI styles
• --domain color — color palettes
• --domain typography — font pairings
• --domain ux — UX guidelines
• --domain chart — chart types
• --domain icons — icon suggestions
• --domain gsap — animation presets
• --stack react — guidance for React (and 21 other stacks)

💡 Why Use It?

Before UI/UX Pro Max:

• ❌ AI guesses styles from stale training data
• ❌ Inconsistent across pages
• ❌ Missing accessibility and responsiveness
• ❌ Code doesn't follow stack patterns

After UI/UX Pro Max:

• ✅ Evidence-based decisions — recommendations based on product type
• ✅ Consistency across projects — Master design system + page overrides
• ✅ Stack-aligned implementation — dedicated guidance for 22 stacks
• ✅ Quality gates built in — accessibility, performance, contrast...

📋 Update & Uninstall

uipro versions
uipro update
uipro update --global
uipro uninstall
uipro uninstall --global

🎯 Wrap Up

UI/UX Pro Max turns UI design from "guesswork" into "evidence-based decisions". You don't need to be a professional designer — just describe your product and its audience, and AI finds the best visual system for it.

Especially useful when you:

• 🚀 Build a SaaS product from scratch
• 🏥 Work on industry-specific apps (healthcare, fintech, education...)
• 🎨 Need a consistent design system
• ♿ Care about accessibility and UX quality