# UI UX Scan

> Quick UI/UX deficiency scan of any page. Checks touch targets, contrast, font consistency, spacing issues, empty states, loading indicators, and common UX anti-patterns. Uses Playwright MCP only — no signup.

- Skill: `quality-max/ui-ux-scan` (Agent Skill)
- Install (CLI): `npx skillmds@latest add quality-max/ui-ux-scan`
- Raw SKILL.md: https://api.skillmd.com/api/skills/quality-max/ui-ux-scan/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: Quality-Max (https://skillmd.com/u/quality-max)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/quality-max/ui-ux-scan

---


# 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**
```javascript
() => {
  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**
```javascript
() => {
  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
```