跪拜 Guibai
← Back to the summary

AI-Generated UI Always Looks the Same — This Reasoning Engine Injects Industry Design Sense

I've used Cursor and Claude Code to generate plenty of pages, but one problem has always been unavoidable: AI-generated UI style homogenization. Ask the model to "make a nice login page," and what comes out is basically the same flavor every time — purple gradient background, rounded card, similar layout. The color scheme has nothing to do with the industry, half the interaction states are missing, and accessibility is basically a matter of luck. Getting it to match a product's character means tweaking prompts over and over, and even ten rounds might not get it right.

Later I tried an open-source project called ui-ux-pro-max-skill. It's a design reasoning engine that turns a UI designer's industry experience into knowledge an AI can call on, making the model first figure out "what this industry should look like" before writing code.

Below I share this complete real-world exercise — what it is, how to install it, how to use it, and the real differences before and after using it to rebuild a product login page. Understanding the features, hands-on rebuild, comparison of results, and pitfalls summary.

1. The problems I ran into first

AI writes code well, but AI does design poorly — poorly in five ways.

  1. Style homogenization. Ten AI-generated pages, eight from the same mold; swap the industry label and nothing feels out of place.
  2. Color schemes that don't fit the industry. A financial product gets a purple-pink gradient, a medical product gets fluorescent green. Colors don't consider the industry at all and look like they were slapped on casually.
  3. Missing accessibility. Contrast ratios don't meet standards, keyboard navigation is unusable.
  4. Anti-patterns everywhere. Dark mode paired with high-saturation fluorescent colors, meaningless large-area gradients, animations piled on — usages that would make a designer frown, and AI steps on every single one.
  5. Repeated prompt tweaking required. Every time you have to rewrite "no purple, be professional, look like product X" — switch pages and you have to start over.

The root cause is that large models lack industry UI knowledge. Models have seen many pages, but they don't know the color taboos in finance, don't know which font set a SaaS dashboard should use, and don't understand the significance of keyboard focus. So they average all samples and output the page that "looks most like a webpage" — which is that purple-pink gradient.

2. What ui-ux-pro-max-skill is

First, positioning. ui-ux-pro-max-skill is an open-source UI/UX intelligence skill for AI coding assistants, with a design reasoning engine at its core. Component libraries give you controls; it gives you reasoning results for "how this industry should be designed."

Basic project info

The repo is at github.com/nextlevelbuilder/ui-ux-pro-max-skill, MIT license, and the v2.0 core highlight is the Design System Generator.

It works in three steps.

5-way parallel retrieval → reasoning engine rule filtering → output complete design system + delivery checklist

First, it retrieves industry rules, style library, color library, font library, and accessibility specs in parallel, then uses the reasoning engine to filter out unsuitable combinations, and finally outputs a complete design system along with a pre-delivery self-check checklist.

Supports Claude Code, Cursor, Windsurf, Copilot, and over ten other AI editors.

Core capabilities

The built-in knowledge base is its most valuable part.

Multi-stack adaptation. React, Next, Vue, Angular, Laravel, React Native, Flutter, Tailwind HTML, etc. — one design system lands directly in the framework you use.

Design system persistence. MASTER main design file + page override files keep visual consistency across multiple pages without re-explaining the style for every page.

Pre-delivery self-check checklist. Contrast ratio, hover states, keyboard focus, responsive breakpoints, reduced-motion preference — checked item by item.

Project architecture

What it's good for, what it's not

✅ Good for landing pages, product pages, admin dashboards, mobile prototypes, rapid UI iteration.

❌ Not good for high-precision pixel-level Figma replication (it outputs engineering-ready prototypes, not design drafts), extremely niche vertical industries (built-in rules may not cover them), fully free artistic creativity (it inherently carries normative constraints).

3. Hands-on: rebuilding a product login page

Environment prep and installation

Only two prerequisites: a Python 3 environment and an AI editor (Cursor or Claude Code will do). Two installation paths — run a command inside the editor, or install via CLI.

Method 1: Marketplace command install. Execute this command directly in the editor.

# Execute inside the editor
/install ui-ux-pro-max-skill

Method 2: uipro-cli global CLI install. Before unpacking, decide whether to install for the current project or globally — the two commands differ by a --global flag.

npm install -g uipro-cli
uipro setup          # Local mode (current project)
uipro setup --global # Global mode (all projects)

After installation, you must reload the index so the IDE recognizes the skill directory; otherwise invocation will be unresponsive. To verify it's working, enter a prompt with an industry scenario in the conversation and watch for signs that the skill has been activated.

Current state of the original interface

The rebuild target was a financial SaaS login page. The old page was AI-generated with defaults — purple-pink gradient background, rounded card, no industry character. Before rebuilding, take a screenshot as a baseline for later comparison.

The old interface's problems hit exactly the five categories mentioned earlier.

Writing the invocation prompt and kicking off the rebuild

Basic approach (natural language auto-activation)

Use ui-ux-pro-max-skill to rebuild the login page for my financial SaaS product,
tech stack React + Tailwind, must comply with financial industry design standards.

Slash command explicit invocation

/ui-ux-pro-max Financial SaaS login page, React + Tailwind

Advanced. Specify tech stack, industry, page type, and directly invoke the design system script to generate an md spec file.

/ui-ux-pro-max Generate design system: industry=Finance, tech stack=React, page=Login page

Persist the design system. Generate MASTER.md as the global design baseline, then generate an override file for the login page — all subsequent pages share this baseline.

What the AI output

The tool outputs two parts: a complete design system plus complete business page code.

The design system includes these pieces.

Design system output.png

The page code is complete and runnable, with color palette, typography, and motion all following the design system constraints.

The tool's built-in pre-delivery validation checks these: whether contrast ratio meets standards, whether hover/focus states are complete, keyboard navigability, responsive breakpoints, reduced-motion preference. Note that this is self-checking — passing validation doesn't mean it's ready to go live; business logic in a real browser still needs your own verification.

Local running and fine-tuning iteration

After code generation, start a local server to preview. If it won't run, troubleshoot in order: whether dependencies are installed, whether the port is occupied, whether the build throws errors.

For a second iteration, continue fine-tuning directly in the conversation where the result was generated — "loosen the spacing a bit," "change the button to a smaller corner radius" — the context is still there, so the design system constraints won't be lost. Don't start a new conversation for fine-tuning, or the design system context will be lost and the style will drift.

Reuse MASTER for other pages: new pages directly reference the already-persisted MASTER design system, keeping the visual baseline consistent with the login page. When business differences are too large, don't force it — rebuild when you need to.

4. Before-and-after comparison of old and new interfaces

Visual layer

Comparison dimension Old interface (generic AI-generated) New interface generated by ui-ux-pro-max-skill
Color scheme Generic AI gradient, unrelated to industry Financial industry matched palette: primary #1E3A8A / secondary #3B82F6 / CTA #7C3AED
Typography Random font combination Inter + Source Han Sans matched pair, fitting product character
UI style Cookie-cutter Matched to one of 67 built-in UI styles by business context
Shadows / motion Crude and blunt Standardized shadows (0 24px 48px -16px rgba(30,58,138,.16)), 200ms transitions, with motion-disable hint

Structure and UX layer

Comparison dimension Old interface New interface
Page modules Simple stacking Industry best-practice page structure (landing page: Hero, Services, Testimonials, CTA; login page: Brand area → Main heading → Form → Social login → Bottom guidance)
Interaction states Hover, cursor missing Complete hover, focus states, pointer cursor handling
Responsive Simple adaptation 375 / 768 / 1024 / 1440 breakpoint spec
Accessibility Contrast ratio, keyboard navigation ignored WCAG AA validation, respects reduced-motion preference

Old vs new interface comparison.png

Code quality

The old interface had scattered styles — colors, border radii, shadows strewn everywhere with no unified spec; changing one button's style meant hunting around for ages. The new interface follows design system constraints: colors, spacing, and motion all go through tokens, a MASTER document can be exported, and multiple pages reuse it consistently. This is a maintainability difference, not just a visual one.

Actual results

The comparisons above aren't just paper descriptions. I used the generated design system + page code to build an interactive login page prototype — both light and dark themes fully functional, form validation, password visibility toggle, and focus states all working.

Result - light mode.png

Result - dark mode.png

5. Usage experience summary

Advantages

  1. Solves the "aesthetic disaster" of AI-generated UI. 161 built-in industry experience sets mean you don't need to write super-long prompts to constrain color and style — one sentence mentioning the industry, and the output is right.
  2. Output is not just code, but also a complete, reusable design system document. MASTER.md can be directly adopted into team standards.
  3. Multi-stack, multi-AI-IDE compatible, MIT open source, runs locally with no data upload. Note that "no data upload" here means the skill itself doesn't send code/design data to the cloud; the editor's own network behavior is a separate matter.
  4. Comes with anti-pattern blacklist + delivery checklist. Common industry UI mistakes are preemptively avoided, and pre-delivery self-check reduces manual review cost.
  5. MASTER + override persistence. Large projects with many pages maintain visual unity without re-explaining for every page.

Limitations and pitfalls

  1. First-time generation adds reasoning time. Based on v2.0 real-world measurement, first-time generation with industry rules takes 30 seconds to 1 minute longer than a normal conversation (depending on machine specs); subsequent iterations within the same conversation are much faster. Some IDEs require an index reload after installation to recognize the skill directory — without it, "no response."
  2. Extremely niche vertical industries have insufficient coverage. The 161 built-in rule sets cover mainstream industries; for niche industries (e.g., certain B2B vertical scenarios), output will degrade to generic templates and requires self-extending CSV rule files to fill the gap.
  3. Output is an "engineering-ready prototype," not equivalent to Figma-level fine pixel design. Details like spacing and border radii will most likely still need manual fine-tuning.
  4. Python environment dependency. Windows/macOS/Linux will encounter some minor installation issues; if the prerequisite environment isn't set up, it won't install.
  5. Generated results still require manual business logic verification. The tool validates UI standards; your business — form submission, permissions, data display — needs your own testing and can't be blindly pushed live.

My best practices

  1. Prefer CLI installation to avoid errors from manually copying files.
  2. For complex projects, definitely enable --persist to persist the design system; subsequent pages reuse MASTER (one-off prototypes can skip this to avoid over-engineering).
  3. Don't fully rely on the generation — treat it as a "senior UI design assistant" and do detail polishing after output.
  4. Custom-extend industry rules and color CSVs to fit your own business (only extend when built-in rules are insufficient; don't go full custom from the start).
  5. Before going live, do real accessibility and compatibility re-testing: contrast ratio actual measurement, keyboard walkthrough, every breakpoint, real browsers.

6. Conclusion

Back to the opening question. The value of ui-ux-pro-max-skill is that it turns a UI designer's industry experience into a reasoning knowledge base that AI can call on, filling the UI knowledge gap of ordinary large models. It's not a component library — component libraries give you ready-made controls; it gives you judgment. The model is still the same model, but when fed the experience of "what colors finance should use, what states a SaaS dashboard should have," the output shifts from "looks like a webpage" to "looks like a webpage for a specific industry."

Suitable audience: frontend developers, developers prototyping with Cursor/Claude, people quickly building product demo pages.

The applicable boundary needs to be clear. It's an accelerator for prototypes, MVPs, and product demo pages — it cannot replace a professional designer's deep UI work. For complex interactions, brand systems, and refined visuals, you still need to hire a designer when you should. Limitations and pitfalls were covered in the section above, so don't expect it to get everything right in one step.

Going forward, you can extend industry rules yourself, do secondary development on skill scripts, and feed its knowledge base into your own.

7. Reference links

  1. ui-ux-pro-max-skill on GitHub (see the README's capability list and installation instructions).
  2. Project README documentation (see the full usage of the Design System Generator).
  3. Related open-source ecosystem — the skill ecosystem for AI coding assistants (compare and understand similar skills).

What industry anti-patterns have you stepped on when using AI to generate pages? Have you ever been burned by a page that "looked AI-made"? Let's chat in the comments.