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 < 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")