Designing the Vibe
April 2026
A talk for engineers on designing interfaces with AI, built as a React deck set in serif on parchment rather than the usual purple gradient.
- Role
- Written and presented
- Built with
- React
- TypeScript
- Vite
- MUI
- Framer Motion
- React Router
A talk on designing interfaces with AI, given to the engineers at ElementX as an internal session.
Where it started
The same question kept coming up in side projects. How does an engineer design things as well as build them, now that a model will draw a screen for you? The talk's answer 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.
The deck is a website rather than slides, so a slide can hold a live example instead of a screenshot of one.
How it's built
- React 19 and TypeScript on Vite 8.
- MUI v9 themed from a small set of warm design tokens.
framer-motionfor transitions and entrances.- React Router for URL driven navigation, one slide per route.
The title slide, serif type on warm parchment.