L2 — Custom UI & UX (+ Accessibility)
Track 2: Vibe-Coder Level-Up · B.U.I.L.D. letter: I (Interface & Experience)
Why does everything AI builds look the same? And why does half of it break the moment someone opens it on a phone or uses a keyboard? Let's fix both.
⚠️ The vibe trap
AI defaults to a recognizable look: purple gradient, centered card, same font, same spacing. It also builds for a wide desktop screen and forgets that real humans use phones, keyboards, and screen readers. "Looks fine on my monitor" is where most vibe-coded UIs stop — and it shows.
🎨 Make it look intentional (de-template it)
You don't need to be a designer. You need to make deliberate choices:
- Spacing — generous, consistent whitespace instantly reads as "designed."
- Type — pick one good font pairing; set a clear size hierarchy (heading vs body).
- Color — choose a real palette (one primary + neutrals) instead of the default.
- Hierarchy — the most important thing should be the most visually prominent. Squint: what stands out?
The bar for "custom": at least one deliberate design decision you can defend.
📱 Responsive for real
- Design mobile-first — start narrow, then add space as the screen grows.
- Test at phone width (your browser's device toolbar). Does anything overflow, overlap, or get tiny?
- Use flexible layouts (flexbox/grid) over fixed pixel widths.
♿ Accessibility 101 (free, and it's the law of good craft)
- Semantic HTML: real
<button>,<a>,<nav>,<h1>— not divs with click handlers. - Alt text on meaningful images.
- Keyboard test: unplug your mouse. Can you tab to and operate everything? Are focus outlines visible?
- Contrast: light-gray-on-white is pretty and unreadable. Check contrast ratios.
🛠️ Your mission
Take one screen you've built. (1) Make three changes to de-template it (spacing, font, color, layout — your call). (2) Run the keyboard-only test and fix anything you can't reach. Post a before/after!
✅ You're done when…
- At least one deliberate, defensible design choice (not the AI default)
- It works at phone width with no overflow/overlap
- Fully keyboard-operable with visible focus; images have alt text; text contrast is readable
➡️ Next: L3 — Security Essentials (lock it down). Build It Right, Or Don't Build It At All. 🏛️