How to use UI UX Pro Max in Codex and Claude Code.
UI UX Pro Max is one of the most-starred design skills on GitHub. Instead of a fixed style, it searches a database of styles, palettes, and font pairings to recommend a design system for your product. This tutorial shows how to install it in Codex and Claude Code, generate and save a design system, and get results that don’t look generic.
Updated November 6, 2026 · 7 min read
What UI UX Pro Max is
UI UX Pro Max is an open-source skill (MIT license) by nextlevelbuilder. Version 2.15 ships a searchable database of 80 styles, 192 product types, 192 color palettes, 74 font pairings, and guidelines for 22 stacks, including React, Next.js, Tailwind, SwiftUI, Jetpack Compose, React Native, and Flutter.
When you ask your agent for UI work, the skill describes your product to its search script, which returns a recommended design system: a page pattern, a style, colors, fonts, effects, anti-patterns to avoid for your industry, and a checklist to run before you ship. The agent then builds with it. The script uses only Python’s standard library and makes no network calls.
Install it
You need Python 3. Check with python3 --version.
In Codex (and most other agents), install the CLI once, then add the skill to your project:
npm install -g ui-ux-pro-max-cli
cd my-project
uipro init --ai codex
In Claude Code, use the plugin marketplace:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Or use the CLI with uipro init --ai claude. Add --global to install it for every project. Later, uipro update refreshes the skill files and uipro uninstall removes them.
Use it by asking
The skill activates on its own when you ask for UI work, so you don’t need a special command in Codex or Claude Code. Be specific about the product, the audience, and the platform:
Build the home screen of a mobile app for [a neighborhood bakery that takes pre-orders]. Customers are [busy parents ordering for the weekend]. Use the ui-ux-pro-max skill to choose the design system first, show it to me, and only then build the screen.
Asking to see the design system before the screen is the most useful habit with this skill: you can reject a style before it’s built into every page.
Generate a design system directly
You can also run the search script yourself. The skill’s folder depends on the agent: in Claude Code it’s .claude/skills/ui-ux-pro-max/, and Codex installs it under .agents/skills/ui-ux-pro-max/.
# Recommend a design system for a product, named "Crumb"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -p "Crumb"
# The same, as Markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -f markdown
# Search one area only: styles, typography, charts, UX rules, icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
# Guidelines for a specific stack
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
The README’s own example also tunes three dials, --density, --motion, and --variance, for how dense, animated, and unusual the result should be.
Save the design system for every session
Add --persist to write the result to design-system/<name>/MASTER.md, and --page to add an override for one page:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
From then on, ask the agent to read MASTER.md before designing any screen. If you also use other tools, ask it to copy the colors, fonts, and spacing into a DESIGN.md in your project root and point to it from AGENTS.md, so every agent follows the same system.
Retheme an existing app
The skill is also useful for giving an existing app a new look without rewriting it. Name the target style and ask the agent to work through your existing tokens:
Use the ui-ux-pro-max skill to give this app a [Swiss, minimal] look. First list the framework, the styling library, and the theme tokens it already uses. Keep every component’s structure and behavior. Update the existing color, type, spacing, radius, and shadow tokens instead of adding a second theme, replace hard-coded styles one component at a time, and check contrast, focus states, and dark mode after each batch.
Get results that don’t look generic
- Say what to avoid. The database treats some looks that other skills flag as AI-made, such as glassmorphism and Aurora UI, as ordinary styles. Add a line like “no glassmorphism, no gradients, no emoji icons.”
- Look at the result. The skill has no visual check. Open the page at phone and desktop widths, or compare a few directions side by side, before building more screens.
- Describe the product, not the style. Results depend on the words you search with. “Bakery pre-order app for parents” finds better matches than “modern clean app.”
- Start from a finished system if you prefer. Our design system library has complete web and app systems you can give the agent as a DESIGN.md instead.
For how it compares with Taste Skill, Impeccable, and Anthropic’s frontend-design, see Taste Skill vs Impeccable vs UI UX Pro Max.
Frequently asked questions
Is UI UX Pro Max free?
Yes. The skill in the GitHub repository is free and open source under the MIT license. Its README also describes a Premium version with extra brand, logo, and slide tools, without a listed price.
Does UI UX Pro Max work with Codex?
Yes. Install the CLI with npm install -g ui-ux-pro-max-cli, then run uipro init --ai codex in your project.
Why does the skill need Python?
The design system search runs as a small Python script over the skill’s data files. It uses only the standard library, so you don’t need to install any packages.