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

() => {
  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  {
  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 ( 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

1. Navigate to 2-3 key pages (about, pricing, login if they exist) and repeat

1. Grade: A (0-2 issues), B (3-5), C (6-10), D (11-15), F (16+)

1. 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Quality-Max
• Source: Quality-Max/free-qa-skills
• License: Apache-2.0
• Homepage: https://www.skills.sh/quality-max/free-qa-skills

Install and usage instructions live in the source repository linked above.