Designing the Vibe

This is a talk on design for software engineers, first given as an internal knowledge sharing session at work. It grew from a question that kept surfacing in side projects. How does an engineer design things, not just build them? Its answer is that AI assisted design works best when you bring a point of view.

What it covers

The session walks the team through a few habits that hold up when vibe coding interfaces. Show the model a reference instead of describing one. Pick your own colours rather than accepting the default purple to blue gradient. Lock in a design system early so every screen stays consistent. It closes on two tools worth leaning on, Playwright MCP to give the agent eyes, and Impeccable for 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.

A few details worth noting

Each slide is a plain React component registered in one array, so routing, keyboard control, and navigation all derive from its length. The native cursor is replaced across the whole site with a custom laser pointer. Several slides are interactive, including a live gradient playground for testing colour pairs during the session.