Designing the Vibe

A talk on design for software engineers, first given as an internal session at work. It grew from a question that kept coming up in side projects. How does an engineer design things as well as build them? The answer it gives is that AI assisted design works best when you bring a point of view to it.

What it covers

An early slide catalogues what a model reaches for when nobody pushes back. Purple to violet gradients. Inter at every weight, safe and legible and without an opinion. A card nested inside another card. None of it is wrong, and all of it is what you get by default.

The rest of the session is habits that hold up against that. Show the model a reference instead of describing one. Pick your own colours, starting from a palette you browsed by mood. Settle a design system early, so the screens after it stay consistent. It closes on two tools, Playwright MCP to give the agent eyes and Impeccable for the polish.

How it's built

• React 19 and TypeScript on Vite 8.
• MUI v9 themed from a small set of warm design tokens.
• framer-motion for transitions and entrances.
• React Router for URL driven navigation, one slide per route.

Inside the deck

The deck argues its case by being it. Everything is set in a serif on warm parchment with a rust accent, and the panel on the right of a slide holds something live rather than a screenshot. A laser pointer replaces the native cursor across the whole site. Each slide is a plain React component registered in one array, so routing, keyboard control and navigation all derive from its length.