跪拜 Guibai
← All articles
Frontend · WeUI

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

By 独立开发阿平 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

AI coding assistants ship UI that is visually homogeneous and often breaks basic accessibility and interaction rules. A reasoning engine that injects industry design constraints before code generation cuts the prompt-tweaking cycle from ten rounds to one, and produces a reusable design token file that keeps a multi-page project visually coherent.

Summary

AI coding tools produce competent code but visually generic, often unusable interfaces: purple gradients on financial products, missing hover states, and contrast ratios that fail accessibility standards. The problem is that large models average all the web pages they've seen and lack industry-specific design knowledge — they don't know that finance bans certain color palettes or that a SaaS dashboard needs particular interaction states.

ui-ux-pro-max-skill works as a design reasoning engine that runs locally alongside Cursor, Claude Code, and other AI editors. It retrieves from 161 industry rule sets, 67 UI styles, and 57 font pairings in parallel, then filters combinations through a reasoning engine before outputting a complete design system plus a pre-delivery checklist. A rebuild of a financial SaaS login page swapped the generic gradient for a deep-blue palette (`#1E3A8A`), added full hover and focus states, and produced a MASTER.md design token file reusable across an entire project.

The tool is MIT-licensed, runs locally with no cloud telemetry, and supports React, Vue, Next.js, Flutter, and other stacks. First-time generation adds 30–60 seconds of reasoning overhead, and output is an engineering prototype — not pixel-level Figma fidelity — so manual detail tweaking is still needed. Niche verticals may fall back to generic templates unless custom CSV rule files are added.

Takeaways
AI-generated pages converge on a single default aesthetic — purple-pink gradients, rounded cards, missing interaction states — because models average all training samples and lack industry-specific design knowledge.
ui-ux-pro-max-skill runs a 5-way parallel retrieval (industry rules, styles, colors, fonts, accessibility specs) and filters results through a reasoning engine before outputting a design system.
The knowledge base includes 161 industry reasoning rule sets with anti-pattern blacklists — finance explicitly bans the AI purple-pink gradient.
Output is two-part: a complete design system document (MASTER.md) plus full page code that follows tokenized colors, spacing, and motion constraints.
A financial SaaS login page rebuild replaced a generic gradient with a deep-blue primary (`#1E3A8A`), added complete hover/focus states, and respected WCAG AA contrast and reduced-motion preferences.
First-time generation with industry rules adds 30–60 seconds of reasoning overhead; subsequent iterations in the same conversation are much faster.
The tool runs locally with no cloud telemetry, supports React, Vue, Next.js, Flutter, and other stacks, and is MIT-licensed.
Niche vertical industries not covered by the 161 built-in rule sets will degrade to generic templates unless custom CSV rule files are added.
Generated output is an engineering prototype, not pixel-level Figma fidelity — spacing, border radii, and details still need manual fine-tuning.
Pre-delivery self-check validates contrast ratios, hover/focus states, keyboard navigability, responsive breakpoints, and reduced-motion, but business logic still requires manual testing.
Conclusions

The core insight is not that AI can't design — it's that AI lacks the domain-specific constraints real designers internalize. Feeding those constraints as structured knowledge before generation changes output from 'looks like a webpage' to 'looks like a finance webpage.'

Persisting a MASTER design system file and per-page override files solves a real multi-page consistency problem that ad-hoc AI prompting cannot — every new page in a project pulls from the same tokenized baseline.

The anti-pattern blacklist approach (explicitly banning known AI aesthetic failures per industry) is more reliable than hoping a prompt will steer the model away from them — it removes bad options from the output space entirely.

The 30–60 second reasoning overhead on first generation is a meaningful latency cost for rapid prototyping workflows, and the tool's value proposition hinges on whether that upfront cost is repaid by fewer iteration rounds.

Concepts & terms
Design reasoning engine
A system that retrieves structured design knowledge (industry rules, color palettes, font pairings, accessibility specs) and filters incompatible combinations before an AI model writes UI code, rather than letting the model average its training data.
MASTER.md / design system persistence
A master design token file that defines colors, spacing, typography, and motion for an entire project. Per-page override files allow variations while keeping a single source of truth, so multi-page projects stay visually consistent without re-prompting.
Anti-pattern blacklist (in UI generation)
Explicit rules that forbid known AI aesthetic failures for a given industry — e.g., a financial services rule set that blocks purple-pink gradients — removing bad options from the model's output space rather than relying on prompt engineering to avoid them.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗