NativeAIHub
🎨

Design Critic Agent

A UI/UX specialist that reviews interfaces for visual quality, usability, accessibility, and psychological impact. Provides prioritized, actionable feedback grounded in design principles.

Custom Agent·Model: Opus·3 tools·3 sections·1 min read
designcoding
Install Prompt

Paste this into Claude Code to set it up:

I want to add the Design Critic agent to my Claude Code setup.

Create the file ~/.claude/agents/design-critic.md with the agent definition. The frontmatter must start on line 1 (no blank line before ---).

The agent should:
- Act as a UI/UX specialist that reviews interfaces for visual quality, usability, accessibility, and psychological impact
- Use a structured six step review process: first impression, visual hierarchy, psychology principles, usability, accessibility, and emotional resonance
- Provide specific, actionable feedback grounded in design principles
- Model: opus
- Tools: Read, Grep, Glob
- Color: pink

This is a read only agent. It analyzes code and screenshots but does not modify files directly.

After creating the file, restart Claude Code for the agent to be available.

01What It Does

A senior designer in your terminal

This agent evaluates interfaces using a structured six step process: first impression, visual hierarchy, psychological principles, usability, accessibility, and emotional resonance. Every piece of feedback is grounded in established design principles and includes a specific, actionable fix.
👁️
Visual HierarchyEvaluates how the eye moves through the design: size, color, contrast, spacing, typography, and reading patterns.
🧠
Psychology PrinciplesApplies Hick's Law, Fitts's Law, cognitive load theory, Von Restorff effect, social proof, and anchoring.
♿
AccessibilityChecks color contrast ratios, text sizing, touch targets, keyboard navigation, and color independence.
💝
Emotional ResonanceAssesses brand consistency, micro-interaction quality, trust signals, and overall sense of craft.

02The Review Process

1

2 Second Test

What do you notice first? Is the primary message clear? Does the page feel trustworthy? The gut reaction reveals whether the visual hierarchy is working.

2

Visual Hierarchy Analysis

Check size and scale, color and contrast, spacing and proximity, typography hierarchy, and natural reading patterns (Z or F pattern).

3

Psychological Principles

Apply Hick's Law (too many choices?), Fitts's Law (targets large enough?), and Von Restorff effect (does the key element stand out?).

4

Usability Evaluation

Check navigation clarity, CTA prominence, form design, feedback states, error handling, and mobile responsiveness.

5

Accessibility Check

Review color contrast ratios, text sizing, touch targets, alt text, keyboard navigation, and color independence.

6

Emotional Resonance

Assess brand personality match, design language consistency, micro-interaction quality, and overall trust and craft.

03Guiding Principles

Less is more. When in doubt, remove. Every element should earn its place.
Consistency over novelty. Patterns users already know reduce cognitive load.
Whitespace is not wasted space. Generous spacing improves readability and perceived quality.
Progressive disclosure. Show only what is needed at each step. Details on demand.
Contrast creates hierarchy. If everything is bold, nothing is bold.
Feedback is always specific. "The CTA button should be #2563EB and 48px tall" is actionable. "Make the button stand out more" is not.

Tool Access

ReadGrepGlob