UI Debug Teacher

A beginner-friendly Chrome extension that teaches users how to fix bad UI one small CSS change at a time.

Load Locally

1. Open chrome://extensions.
2. Turn on Developer mode.
3. Click Load unpacked.
4. Select this project folder.
5. Refresh the webpage you want to scan.
6. Click the extension icon and choose Scan this page.

Test Pages

Open the files in test-pages in Chrome, then scan them with the extension:

• bad-contrast.html
• bad-typography.html
• bad-buttons-overflow.html

Current Checks

• Weak text contrast
• Text that is too small
• Inconsistent buttons
• Skipped heading levels
• Too many colors
• Inconsistent spacing
• Missing image alt text
• Elements overflowing the viewport

Pro Audit Features

• Conservative beginner mode to reduce false positives
• Strict mode for deeper design-system checks
• Audit score and grade
• Issue confidence levels
• Issue categories
• Element highlighting
• Copyable CSS fixes
• Exportable text audit report
• Options for minimum font size, expanded results, and low-confidence filtering