Frontend for Vibe Coders

The browser-side mental model — components, props/state, rendering, styling, the build — so you can picture what the AI is making and talk about it precisely. (Module 5 is the code-level version.)

You can't direct what you can't name. The complete catalog of UI elements — buttons, fields, overlays, navigation — so “make it nice” becomes a precise request.

The handful of principles that separate “obviously AI-generated” from “looks designed” — hierarchy, spacing, type, color, alignment, grouping — as a checklist you run over any screen.

How elements arrange and reflow across screens — the box model, flexbox vs grid, reading width, mobile-first — so you can describe a layout precisely enough to build.

Real screens aren't one happy picture — every data view has loading, empty, error, and success. Plus forms, validation, and feedback. AI ships only the success state; this is how you stop that.

The quiet make-or-break decisions — modal vs page, table vs cards, dropdown vs radios, pagination vs infinite scroll. Each has a right answer most of the time.

Professional UI is consistent because it's built from reused, tokenized parts — not hand-tuned per screen. Think in tokens and components, and pick a kit. This very course is the worked example.

Accessible UI is just well-built UI — semantic HTML, keyboard reach, contrast, touch targets. It's also where AI is laziest. Learn the non-negotiables.

Everything in this module turns into leverage here. Write a frontend brief, name the build precisely, give a visual reference, and review/critique AI output before you ship it.