The UI/UX Designer Agent: Research-Backed Design Critique Directly in Your Workflow

Why This Agent Exists (And Why You Need It)

Here’s a scenario most developers know well: you spend two weeks building a feature, the UI looks reasonable to you, you ship it, and then someone from the design team or a user study comes back with a list of problems that should have been obvious from the start. The F-pattern reading behavior you ignored. The CTA you placed in a banner-blindness zone. The center-aligned body text that kills engagement. The purple gradient that makes your app look like every other SaaS product from 2021.

The problem isn’t that developers don’t care about design. It’s that good design critique requires a specific, deep knowledge base — Nielsen Norman Group research, eye-tracking studies, conversion data, usability heuristics — that most developers haven’t spent years accumulating. Hiring a senior UX designer to review every component isn’t realistic. And generic AI feedback like “make it more user-friendly” is useless.

The UI/UX Designer agent for Claude Code solves this by bringing a research-backed, opinionated design critic directly into your development workflow. It cites actual studies. It pushes back on trendy-but-ineffective patterns. It tells you when something doesn’t work and explains the mechanism behind the failure. It’s the kind of feedback you’d get from a senior designer with 15 years of experience — available at any point in your build process, without a calendar invite.

When to Use This Agent

This agent is valuable at multiple stages of development, not just at the end as a polish pass. Specific scenarios where it adds measurable value:

• Early component design: Before you finalize a layout, run it through the agent to catch structural problems — incorrect reading pattern accommodation, poor visual hierarchy, navigation placement that conflicts with left-side bias research.
• Conversion-critical pages: Landing pages, sign-up flows, checkout pages. These are high-stakes surfaces where usability issues directly cost money. The agent focuses specifically on what moves metrics.
• Redesigns and refactors: When you’re updating an existing interface, the agent can identify which patterns you’re carrying forward that are outdated or research-contradicted versus which conventions you should keep because users expect them (Jakob’s Law in action).
• Design system decisions: Before you commit to typography choices, spacing scales, or color systems, get a critique grounded in actual usability data rather than aesthetic preference.
• Pre-PR reviews: For front-end PRs, run the interface changes through the agent as part of your review checklist. Catch usability regressions before they reach production.
• Fighting generic aesthetics: If your product is starting to look like everything else — Inter font, purple gradients, cards on cards on cards — the agent is explicitly calibrated to identify and push back on “AI slop” design patterns that lack personality and distinctiveness.

What Makes This Agent Powerful

It Cites Sources, Not Opinions

The core differentiator here is epistemic rigor. When the agent tells you that users spend 69% more time viewing the left half of screens, it’s not a heuristic pulled from thin air — it’s citing Nielsen Norman Group’s 2024 research on horizontal attention patterns. When it warns you about banner blindness, it’s referencing Benway and Lane’s 1998 study plus ongoing NN Group work. This matters because it shifts design conversations from “I think” to “the data shows.” That’s a fundamentally different conversation, and one that’s much easier to act on.

It Applies Fitts’s Law and Real Usability Heuristics Practically

Abstract principles like “recognition over recall” or Fitts’s Law are well-known in design circles but rarely applied with precision in development. This agent translates them into concrete, implementable guidance. Minimum touch target sizes. Front-loading information in the first two paragraphs because of F-pattern reading behavior. Keeping critical CTAs out of positions that trigger banner blindness. The gap between knowing a principle and applying it correctly is where most interfaces fail — this agent closes that gap.

It Actively Fights Generic Design

There’s an explicit philosophical commitment in this agent against what it calls “AI slop” aesthetics: the purple gradient SaaS look, Inter everywhere, card layouts that could belong to any product in any category. This isn’t aesthetic snobbery — generic design is a business problem. If your interface is indistinguishable from competitors, you’re giving users no visual reason to trust or remember your product. The agent pushes toward distinctive, defensible design decisions.

It Prioritizes by Impact

Not all design problems are equal. A misaligned icon is not the same as a navigation pattern that violates user mental models built across dozens of other sites. The agent is calibrated to prioritize fixes by actual impact on conversion, engagement, and satisfaction — not by what’s easiest to implement or what looks most impressive in a Figma mockup.

It Pushes Back

Most design feedback tools are positive and permissive. This one isn’t. It will tell you something doesn’t work. It will explain why a trendy pattern harms usability in your specific context. It will say no. For developers who want honest feedback rather than validation, that directness is the point.

Real-World Examples

Scenario: Reviewing a SaaS Landing Page Layout

A developer shares a landing page mockup with a centered hero section, full-width banner CTA, and a card grid featuring three value propositions below the fold.

Developer: Here's our new landing page layout. The hero is centered with 
a big CTA button, and we have three feature cards below. What do you think?

Agent: A few structural issues here worth addressing before you build this out.

The centered hero works visually, but your CTA is positioned in a horizontal 
band that matches classic banner ad placement. Nielsen Norman Group's ongoing 
banner blindness research shows users systematically ignore content styled or 
positioned like ads — even important CTAs. Move the primary CTA left-aligned 
and above the visual center of the hero.

The three-card feature grid is the generic SaaS default. Every product in 
your category probably uses this exact pattern. If the goal is differentiation, 
you're achieving the opposite. More importantly, cards fragment information 
in ways that make comparison harder — if your three features are related 
and build on each other, a linear narrative layout will communicate that 
relationship better.

On the centered text: NN Group's research on horizontal attention bias shows 
users spend 69% more time on the left half of screens. Center-aligning body 
copy works against this natural scanning behavior. Left-align your value 
proposition copy.

Fix priority: 1) CTA position to avoid banner blindness zone, 2) left-align 
body text, 3) revisit whether card layout actually serves how your features 
relate to each other.

Scenario: Navigation Pattern Decision

Developer: We're debating between a top navigation bar versus a left sidebar 
for our dashboard. The designer wants top nav because it looks cleaner. 
What does the research say?

Agent: For a dashboard specifically, the research favors left sidebar — 
but the reasoning matters more than the conclusion.

Jakob's Law applies here: users spend most of their time in other applications, 
and most data-heavy tools (analytics platforms, dev tools, project management 
software) use left sidebar navigation. Switching to top nav introduces a 
learning cost that you're paying without a clear return.

Left-side bias research (NN Group, 2024) further supports this — navigation 
on the left aligns with where users' attention naturally goes first. You're 
working with user behavior rather than against it.

The "cleaner" argument for top nav is usually an aesthetic preference rather 
than a usability argument. Clean doesn't mean effective. If "cleaner" means 
less visual weight, that's achievable with a left sidebar through spacing 
and typographic hierarchy.

Where top nav wins: marketing sites, content sites, anything where users 
are browsing rather than working. For a dashboard where users are performing 
repeated tasks, left sidebar reduces navigation friction on every single 
interaction. Multiply that across a daily active user and the difference 
is significant.

My recommendation: left sidebar. If the designer has specific usability 
evidence for top nav in your context, I want to see it — "looks cleaner" 
isn't a usability argument.

How to Install

Installing this agent takes about sixty seconds. Claude Code automatically loads any agents you define in your project’s .claude/agents/ directory.

Create the file at the following path in your project:

.claude/agents/ui-ux-designer.md

Paste the full system prompt from the agent template into that file and save it. The next time you open Claude Code in that project, the UI/UX Designer agent will be available. You can invoke it directly by selecting it from your agent list or by referencing it in your prompt when working on interface-related tasks.

No configuration, no API keys, no additional setup. The agent loads from the markdown file automatically. If you want this agent available across multiple projects, add it to each project’s .claude/agents/ directory, or keep a central template you can copy in when starting new front-end work.

Conclusion and Next Steps

The UI/UX Designer agent doesn’t replace dedicated design expertise on your team. What it does is raise the baseline quality of every interface decision you make before it reaches a designer, a user test, or production. Structural problems caught at component build time cost a fraction of what they cost post-launch.

Start with your highest-traffic or highest-conversion surfaces — your landing page, your onboarding flow, your primary dashboard. Run the current state through the agent, treat its feedback as a prioritized fix list, and track whether the changes move your actual metrics. Design quality is measurable. Use that as your validation loop.

If you’re building a design system or making foundational layout decisions, involve the agent early. The further upstream you catch a pattern that violates usability research, the less it costs to fix.

The agent template is open source and MIT licensed. Fork it, extend it, adapt it to your specific domain or component library. The system prompt is the product — everything else is just tooling.

Agent template sourced from the claude-code-templates open source project (MIT License).