Fix AI-Generated UI That Looks Like Every Other AI-Generated UI

If you've spent any time building interfaces with Cursor or Claude, you already know the pattern. You describe your vision, hit enter, and get back something that works perfectly fine — but looks like it was designed by committee. Purple-to-pink gradient header. Inter font throughout. White background with light gray cards. Rounded corners on everything.

It's not bad, exactly. It's just... the same. Every time.

This aesthetic has become so predictable that developers have started calling it "AI taste" — a kind of bland, inoffensive design monoculture that emerges when language models trained on the same corpus of UI libraries produce the same outputs by default. The problem isn't that AI writes bad code. The problem is that AI has no taste of its own, so it defaults to the mean.

An open-source project called UI Styles Library (surfaced by developer @xiaohua_888) is trying to fix exactly this — by packaging a professional UI designer's knowledge base directly into a skill you can load into Cursor or Claude.

---

What the Library Actually Contains

The project is less a component library and more a design decision engine. Instead of giving you pre-built components, it gives AI the design vocabulary and constraints it needs to make intentional, varied choices. Here's what's included:

57 UI Style Definitions

Each style is a named, described aesthetic that the model can apply consistently across a project. The range is substantial:

• Glassmorphism and frosted-glass variants
• Claymorphism (the soft, inflated 3D style popular in 2023–2024)
• Brutalism and neo-brutalism
• Minimalism (Swiss-style, Scandinavian, Japanese)
• Skeuomorphism (yes, it's back in some contexts)
• Retrofuturism, vaporwave, Y2K
• Corporate flat, Material-adjacent, and more

Having named styles matters. When you prompt "use a brutalist style," the model is guessing at what you mean. When the skill defines brutalism as a specific set of typographic choices, border treatments, color rules, and layout constraints, the output is coherent.

95 Industry Color Schemes

This is arguably the most immediately useful piece. Rather than asking AI to "pick good colors," you get industry-specific palettes with semantic meaning:

• FinTech: trust blues, conservative neutrals, authority greens
• HealthTech: clinical whites, calming teals, accessible contrast ratios
• EdTech: energetic primaries, approachable warmth
• SaaS B2B: professional slate, conversion-optimized CTAs
• Creative agencies: expressive, high-contrast, brand-forward

The difference between a healthcare dashboard and a gaming dashboard shouldn't just be the icons. The color system should carry that industry context.

56 Font Pairings

Curated heading/body font combinations, each with defined use cases, size scales, and weight hierarchies. No more defaulting to Inter 400 and Inter 700 for everything. Pairings include:

• Playfair Display + Source Sans Pro for editorial/publishing contexts
• Space Grotesk + DM Sans for modern SaaS
• Syne + Epilogue for creative/portfolio work
• Classic combinations like Merriweather + Open Sans for long-form content

100 Industry Design Rules

These are the constraints that professional designers apply without thinking — now made explicit for the model. Examples of the kind of rules included:

FinTech Rule: Never use red for primary actions; 
red is reserved for destructive or error states.

Healthcare Rule: All text must meet WCAG AA contrast 
minimum (4.5:1 ratio) without exception.

E-commerce Rule: Add-to-cart CTA must be above the fold 
on mobile and use a high-chroma color with strong contrast.

Rules like these prevent the subtle design errors that make AI-generated interfaces feel "off" even when they're technically functional.

---

How to Use It With Cursor or Claude

The library is designed as an OpenClaw-compatible skill, meaning you can load it directly into your workflow. Here's the practical approach:

For Cursor users, add the skill to your .cursor/rules or reference it in your system prompt. Once loaded, you can use natural-language design directives:

Build the dashboard using the "HealthTech" color scheme, 
"Claymorphism" UI style, and the "Space Grotesk + DM Sans" 
font pairing. Apply all HealthTech industry design rules.

For Claude API users, you can reference the style definitions in your system prompt or inject them as context at the start of a UI generation task:

system_prompt = f"""
You are a UI engineer. Apply the following design constraints:
Style: {styles['glassmorphism']}
Colors: {color_schemes['saas_b2b']}
Fonts: {font_pairings['modern_saas']}
Rules: {industry_rules['saas']}
"""

Practical workflow for a real project:

1. Identify your industry and target aesthetic
2. Select a matching color scheme from the 95 options
3. Choose a UI style that fits the product's personality
4. Pick a font pairing appropriate for content density
5. Load the relevant industry rules as hard constraints
6. Prompt normally — the model now has a design framework

The difference in output quality is significant. Instead of the default gradient card with Inter font and a blue primary button, you get outputs that look like they were made for a specific product in a specific market.

---

Why This Approach Works

The core insight here is that AI models don't lack design capability — they lack design context. When you ask Claude to "make a nice dashboard," it pattern-matches to the most common UI patterns in its training data. When you give it a named aesthetic, a curated palette, and explicit industry constraints, it applies those consistently.

This is essentially what a design system does for a human developer: it removes low-level decisions so you can focus on the right problems. The difference is that traditional design systems are implemented in code (Tailwind config, CSS variables, Storybook). This library implements the design system in language — which is exactly the interface that AI models consume.

For teams using AI-assisted development heavily, this kind of skill represents a meaningful productivity unlock. You stop fighting the model's defaults and start directing it toward intentional outcomes. The 95 color schemes alone eliminate a significant source of back-and-forth prompting.

---

Conclusion

The "AI taste" problem is real, and it compounds at scale. The more AI is used for UI generation, the more uniform the web looks. Tools like this UI Styles Library offer a practical counter: give the model better inputs, get better outputs.

The library covers enough ground — 57 styles, 95 color schemes, 56 font pairings, 100 design rules — that it's applicable across most product categories without needing customization. For teams that do want to go deeper, the structure is clear enough to extend with your own brand constraints.

If you're using Cursor or Claude for any amount of frontend work, loading this skill is a low-effort change with a noticeable effect on output quality. The default purple gradient will just have to retire.

Original tip via @xiaohua_888 on X.