AI Can Ship a UI in Minutes. But It Takes a Trained Eye to See Everything It Gets Wrong.
I've spent a decade reviewing interfaces as a UX Designer — conducting heuristic evaluations, running usability tests, auditing design systems. And lately, I've been watching a pattern that genuinely concerns me.
AI coding tools have become so popular that many use them to generate entire user interfaces. The code runs. The layout looks reasonable. The screenshot in the pull request seems fine. It ships. And then users struggle with it.
Not because of bugs. Because of usability.
Missing loading states. Flat visual hierarchy where everything competes for attention. No keyboard navigation. Status indicators that rely entirely on color. Spacing values that look like someone rolled dice — 8px here, 13px there, 20px somewhere else. Forms with placeholder text instead of labels.
These aren't edge cases. AI-generated interfaces optimize for "good enough" — functional on the surface, but rarely striving for user experience quality. And most builders don't have a UX designer next to them to catch what's missing.
So I built one — Frontend Design Audit.
What Is Frontend Design Audit?
Frontend Design Audit is a free, open-source Claude Code plugin that reviews your front-end code against 15 curated usability principles — then fixes what it finds directly in your code.
It works with React, Vue, Svelte, plain HTML/CSS, or any front-end stack. You can also point it at a live URL for a report-only audit. It reads your code, evaluates it systematically, presents a severity-rated report, and implements the fixes.
Why Existing Tools Don't Catch This
There are excellent tools for code quality — ESLint, Prettier, TypeScript, Lighthouse. But few look at the user experience.
- Does the visual hierarchy actually guide the user's eye?
- Is the spacing system coherent or random?
- Do interactive elements look interactive?
- When a user completes an action, do they get feedback?
- Are patterns consistent across pages, or does every component feel like it was designed by a different person?
That's the gap this plugin fills. It evaluates your UI the way a Senior UX Designer would — assessing design and usability as a whole.
I Tested It on Three AI-Generated Interfaces. Here's What Happened.
To put the plugin to the test, I ran it on three common interface types: a coffee shop landing page, a SaaS pricing page, and a task management dashboard. Each was built using Claude's frontend-design skill — functional, visually decent, and unremarkable at first glance. A good baseline.
But all three had serious usability problems hiding in plain sight.
Coffee Shop Landing Page
Figure 1 — Coffee Shop (Before and After)
Top usability issues:
- The form used placeholder text as labels. When users started typing, the label vanished — making it easy to lose track of what a field was for. Screen readers also treat them as placeholders, not labels, breaking accessibility. (See Figure 1)
- The viewport meta tag blocked pinch-to-zoom (
user-scalable=no), making the site unusable for low-vision users on mobile. - The order form used
alert()for success feedback, then wiped the form. If the alert was dismissed accidentally, all entered data was gone.
SaaS Pricing Page
Figure 2 — SaaS Pricing (Before and After)
Top usability issues:
- On mobile, all navigation links were hidden with
display: none— no hamburger menu, no alternative. The only clickable element was the CTA button. (See Figure 2) - The Starter plan leads on mobile simply because it's the leftmost block on desktop. This works against the goal of surfacing the Most Popular plan first.
- Plan names were
<div>elements instead of headings, breaking document structure.
Task Management Dashboard
Figure 3 — Task Dashboard (Before and After)
Top usability issues:
- Activity status was conveyed by color alone, with no labels — meaningless for users with color blindness or low vision. (See Figure 3)
- Dropdown menus lacked keyboard navigation — no arrow key support or Escape to close.
- Buttons had no active/pressed states, making interactions feel unresponsive.
Try It
The plugin doesn't just catch surface-level UI issues or apply one-off fixes. It analyzes your interface as a system — surfacing both visible and invisible usability problems — and produces output that's intuitive and production-ready.
It's free, open-source, and MIT licensed.
Top comments (0)