# Run a Design System Generator on Your Own Site: The UI UX Pro Max Skill

A local, database-driven AI skill that recommends a page pattern, style, color palette, font pairing, and the UX rules to follow, generated for your exact product in one command. Here is how it works and how to use it.

Author: J.A. Watte
Published: July 21, 2026
Source: https://jwatte.com/blog/design-intelligence-ui-ux-pro-max-skill/

---

Most small-business websites do not have a design system. They have vibes. Someone picked a blue they liked, a font that came with the template, and a hero image, and the rest of the site grew from there one section at a time. It usually works, in the sense that nothing is on fire. But "nothing is on fire" is a low bar, and it is the reason so many sites feel a half-step off without anyone being able to say why.

A design system is the boring answer to that problem. It is a small set of decisions made once (the color roles, the type scale, the spacing rhythm, the one pattern the page follows) so every later decision has something to agree with. The catch has always been that building one takes taste and time, which is exactly what a small business does not have to spare. So I want to show you a tool that hands you a defensible starting design system in about a second, tailored to your specific business, from a command you run locally. It is called [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill), and it is worth knowing about whether you build your own sites or just want to understand what a good one is doing.

## What it actually is

UI UX Pro Max is an AI skill, which is a fancy way of saying it is a folder of Markdown instructions plus a searchable database that an AI assistant loads when it is working on a UI task. There is no API to call and no account to make. The intelligence is a set of CSV files and a Python search script that run entirely on your machine.

What is in the database is the interesting part. The current version ships 161 reasoning rules, 84 UI styles, 192 color palettes, 74 font pairings, 98 UX guidelines, a set of motion presets, and stack-specific guidance across roughly two dozen frameworks (React, Vue, Svelte, Astro, plain HTML and Tailwind, SwiftUI, Flutter, and more). It is opinionated on purpose. Ask it for a color scheme and it does not give you a color wheel, it gives you a specific palette that a rule says fits your product type, with the reason attached.

## How it works

The skill is organized around one idea: not every UI problem is equally important, so it tells you what to fix first. Its priority table runs from 1 to 10, and the top of the list is not decoration.

1. Accessibility (contrast 4.5:1, alt text, keyboard navigation)
2. Touch and interaction (44 by 44 pixel targets, real press feedback, no hover-only actions)
3. Performance (modern image formats, lazy loading, reserved space so nothing jumps)
4. Style selection (match the product type, use SVG icons, not emoji)
5. Layout and responsive behavior
6. Typography and color
7. Animation
8. Forms and feedback
9. Navigation patterns
10. Charts and data

That order is the whole philosophy in miniature. A gorgeous page that fails contrast or has 30-pixel tap targets is a worse page than a plain one that gets the top three right. If you only ever used this tool as a checklist in that order, you would already be ahead of most sites.

### The one command that matters

The flagship feature is the design system generator. You describe your product in a few words, and it returns a complete starting system. The command looks like this:

```bash
python search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
```

And what comes back is not a vibe, it is a spec:

- A **pattern**: the page structure and conversion approach. For a spa it suggests Hero-Centric plus Social Proof, with the call to action above the fold and repeated after testimonials, and a section order of Hero, Services, Testimonials, Booking, Contact.
- A **style**: a named look with keywords, a light and dark mode note, and an honest performance and accessibility rating. The spa gets "Soft UI Evolution," soft shadows and calming depth, rated WCAG AA.
- A **palette**: every color as a role with a hex value and a CSS variable name, so you get `--color-primary`, `--color-accent`, `--color-background` rather than a pile of loose swatches.
- A **font pairing**: a heading face and a body face with the ready-to-paste Google Fonts link.
- The **effects** that suit the style, the **anti-patterns** to avoid, and a **pre-delivery checklist**.

Run it against your own business and you get the same shape of answer, aimed at you. That output is the thing you compare your current site to. The differences are your fix list.

### Three dials for taste

The same command takes three optional sliders, each from 1 to 10, that tune the output without changing your query:

- `--variance` moves from centered and minimal toward bold and asymmetric.
- `--motion` moves from subtle micro-interactions toward complex, choreographed animation, and it attaches a ready-to-use motion snippet at the tier you pick.
- `--density` moves from spacious marketing spacing toward tight dashboard spacing, and it rewrites the spacing token table to match.

A marketing landing page and an internal dashboard want opposite settings, and this is how you say so in one flag instead of hand-editing tokens.

### Going deeper when you need to

Once you have the system, you can query any single dimension for detail. There is a domain for color, one for typography, one for landing-page structures, one for the UX guidelines, and so on. If your form UX feels clumsy, you ask the `ux` domain about forms and it hands back specific rules: mark required fields, show a loading then success state on submit, never use a placeholder as your only label. Each rule comes with a "do," a "don't," and a severity, so you know whether you found a nitpick or a real problem.

There is also a way to save the result. Persist the design system and it writes a `MASTER.md` for the whole project plus a folder for page-level overrides, so a decision you make today is still there next month instead of being re-litigated from memory.

## How to use it on your own site

You do not need to be building from scratch. The most useful way to use this on an existing site is as an audit.

1. **Describe what you have in a few honest words.** Product type (restaurant, SaaS, portfolio, dashboard), audience, a couple of tone keywords, and your stack. Vague inputs give vague output, so "late-night smash burger local drive-thru bold" beats "restaurant."
2. **Generate the system.** Run `--design-system` with those words. Read the pattern, style, palette, typography, and anti-patterns it returns.
3. **Diff it against your live site.** Where does your page disagree with the recommendation? A palette role you never defined, a pattern you half-follow, an anti-pattern you are committing. Those gaps are the work.
4. **Fix in priority order.** Start at the top of that 1-to-10 table. Accessibility and touch targets before color, color before animation. Ship the top three and you have moved the needle more than a redesign would.

Two quick examples from real audits, generalized. Point it at a late-night burger shop and it returns a Hero-Centric conversion pattern (which the site already followed), a bold block-based style with large type and decisive hover color shifts, and, tellingly, it quietly darkened the recommended gold from one hex to another to clear the contrast minimum. That single auto-correction is the tool doing your accessibility homework. Point it at a small scheduling tool and the useful output was different: tabular figures on the times and dates so the numbers stop jittering, and the reminder that a data view wants tight density, not marketing whitespace.

## The honest caveat

This is a recommendation engine, not an oracle, and treating it like one will burn you. When I ran it against a tiny beta SaaS built by one person, its default pattern came back as "Enterprise Gateway," complete with a mega menu, a "Contact Sales" button, and solutions-by-industry sections. That is the correct pattern for a company with a sales team. It is the wrong pattern for a one-person tool, and following it literally would have made the page worse.

The fix was not to abandon the tool, it was to use more of it. The same landing database also carried "Minimal Single Column," a single-column, single-call-to-action pattern that fit the beta perfectly. The engine surfaced both; judgment picked the right one. That is the actual workflow. The database gives you a fast, defensible, well-reasoned starting point, and you supply the last mile of knowing your own business. Anyone who ships the first result without reading it deserves what they get.

## Where it fits with everything else

If you have read my piece on [auditing your site's craft with Emil Kowalski's skills](/blog/audit-website-craft-emil-kowalski-skills/), this is the companion to it, working at a different altitude. Emil's skills are about how the interface *feels*: the press that gives under your thumb, the easing curve, the motion that earns its place. UI UX Pro Max is about the *system* underneath: which pattern, which palette, which type pairing, which UX rule. One tells you the page should have a design system. The other hands you a first draft of one. Run both and you have covered the structure and the finish, which is most of what separates a site that works from a site that feels considered.

To try it, the project is on [GitHub](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) and installs as a small CLI (Python 3, no external dependencies for the search itself). Clone it, tell your AI assistant to read the skill, describe your site, and read what it says back. The worst case is you spend a minute and confirm your instincts. The common case is it names something you had felt but could not articulate, which is the entire point of a design system in the first place.

---

### Related reading

- [Audit and Fix Your Website's Craft with Emil Kowalski's Skills Repo](/blog/audit-website-craft-emil-kowalski-skills/)
- [Why Add a PWA to Your Site](/blog/why-add-a-pwa-to-your-site/)
- [Frameworkless and Vendor-Lock-Free](/blog/blog-cloudflare-frameworkless-vendor-lockin/)
- [Why the WCAG Audit Exists](/blog/blog-wcag-accessibility-audit/)

### Sources

- UI UX Pro Max skill and its rule counts: [github.com/nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) and [uupm.cc](https://uupm.cc)
- The priority categories, the design system generator, the design dials, and the persist pattern are documented in the skill's own `SKILL.md` and reference files in that repo.

*This post is informational. UI UX Pro Max is an independent open-source project; I am not affiliated with it, and its name and output are referenced here as nominative fair use.*


---

Canonical HTML: https://jwatte.com/blog/design-intelligence-ui-ux-pro-max-skill/
RSS: https://jwatte.com/feed.xml
JSON Feed: https://jwatte.com/feed.json
Hero image: https://jwatte.com/images/design-intelligence-ui-ux-pro-max-skill.webp