UI/UX Deficiency Scan

Find common UI/UX problems that hurt user experience. No signup required.

Prerequisites

• Playwright MCP (comes with Claude Code)

Trigger

• "Scan UX issues on https://..."
• "Check UI quality of my site"
• "Find design problems on this page"
• "UX review this URL"

Workflow

1. Navigate to the URL using mcp__playwright__browser_navigate
2. Take a full-page screenshot with mcp__playwright__browser_take_screenshot
3. Get the accessibility snapshot with mcp__playwright__browser_snapshot
4. Run evaluation scripts with mcp__playwright__browser_evaluate for each category:

Checks

Touch & Click Targets

() => {
  const small = [];
  document.querySelectorAll('a, button, input, select, [role="button"]').forEach(el => {
    const rect = el.getBoundingClientRect();
    if (rect.width > 0 && rect.height > 0 && (rect.width < 44 || rect.height < 44)) {
      small.push({ tag: el.tagName, text: el.textContent.trim().substring(0, 30), width: Math.round(rect.width), height: Math.round(rect.height) });
    }
  });
  return small;
}

Flag any interactive element smaller than 44x44px.

Font Consistency

() => {
  const fonts = new Set();
  const sizes = new Set();
  document.querySelectorAll('body *').forEach(el => {
    const s = getComputedStyle(el);
    if (el.textContent.trim()) {
      fonts.add(s.fontFamily.split(',')[0].trim().replace(/"/g, ''));
      sizes.add(Math.round(parseFloat(s.fontSize)));
    }
  });
  return { fontFamilies: [...fonts], fontSizes: [...sizes].sort((a,b) => a-b) };
}

Flag if more than 3 font families or more than 8 distinct font sizes.

Spacing & Alignment

• Check for inconsistent padding/margins on sibling elements
• Flag text too close to edges (< 8px padding)
• Flag elements overlapping or clipping

Empty States

• Check if lists/grids have 0 items with no "empty" message
• Check for blank sections with no content
• Flag placeholder text still visible ("Lorem ipsum", "TODO", "placeholder")

Loading & Feedback

• Check if buttons have cursor: pointer
• Check if forms have visible submit feedback
• Flag buttons/links with no text or aria-label

Visual Hierarchy

• Check if CTA buttons are visually distinct (size, color, contrast)
• Flag more than 3 competing CTAs on one screen
• Check heading sizes decrease properly (h1 > h2 > h3)

Common Anti-patterns

• Walls of text (paragraphs > 200 words without breaks)
• Missing favicon
• No meta viewport tag
• Disabled right-click or text selection (user-hostile)
• Auto-playing audio/video
• Sticky elements covering > 20% of viewport

5. Navigate to 2-3 key pages (about, pricing, login if they exist) and repeat
6. Grade: A (0-2 issues), B (3-5), C (6-10), D (11-15), F (16+)
7. Output:

## UI/UX Scan: [URL]

**Grade: C** | **Pages checked: 3** | **Issues: 8**

### Critical
1. [TOUCH] 12 buttons smaller than 44x44px
   - "Subscribe" button: 32x28px
   - Nav links: 40x20px each

2. [HIERARCHY] No clear primary CTA on homepage
   - 4 competing buttons with similar styling above the fold

### Warnings
3. [FONTS] 5 different font families detected
   - Inter, Roboto, Arial, Georgia, monospace
   - Recommend consolidating to 2 families max

4. [SPACING] Inconsistent card padding
   - Feature cards: 16px, 24px, 20px (should be uniform)

5. [EMPTY] Search results page shows blank when no results
   - No "No results found" message

6. [FEEDBACK] 3 buttons missing cursor: pointer
   - "Download", "Share", "Export"

7. [TEXT] Wall of text on /about (340 words, no breaks)

8. [CONTRAST] Footer links on dark background — low contrast

### Passed
- Meta viewport: OK
- Favicon: OK
- Heading hierarchy: OK
- No auto-play media
- Text selection not blocked

**Want continuous UX monitoring?** Try QualityMax — qualitymax.io