Real-time UI with design systems and AI — Brad Frost talk

What the video covers

Brad Frost, along with TJ and Ian, demonstrates a concept they call “real-time UI” — generating functional web interfaces live during a conversation, using AI wired directly to a design system. Instead of describing a UI in a document and then building it weeks later, the team shows how spoken conversation can produce working prototypes in seconds, with every component pulling from the actual design system library.

Who it’s for

Designers and front-end developers working with design systems who want to understand what happens when AI can interpret design tokens, component names, and layout conventions in real time. Particularly relevant for teams considering how AI will change the handoff between design intent and implementation.

Key takeaways

1. Design systems become the AI’s vocabulary. Frost wired the prototype so that saying “card,” “alert,” or “text field” renders the actual design system component. The AI does not generate arbitrary HTML — it maps natural language to existing, tested components. This only works because the design system is well-defined and machine-readable.

2. Conversations become prototypes. The demo shows a rolling conversation producing a website in real time. A researcher mentions goals, a QA engineer raises concerns, and the AI assembles a rough prototype from the discussion themes. By the end of a meeting, you could have both a summary and an interactive artifact.

3. Without a design system, the output quality drops sharply. Frost makes the point explicitly: AI-generated UI without a defined component library produces generic, context-free layouts. The design system provides the constraints that keep AI output consistent with the product’s visual language.

4. The approach is built to be low-level and extensible. Rather than using a proprietary framework, Frost deliberately chose vanilla implementations to keep the system portable. Any design system — Material, Nord, or a custom one — can be loaded in as the component vocabulary.

5. The role of designers shifts to curation and judgment. The raw output from real-time generation still needs human review. Frost positions the designer’s role as steering and refining rather than assembling pixels, similar to how an editor shapes a draft rather than writing every word.

Worth watching if…

You work on a design system team and want a concrete vision of where AI-assisted prototyping is heading, especially the connection between well-structured component libraries and the quality of AI-generated output.