From Design to Spec to Code: Building a Real UI With AI Agents

Johannes Rabauer und Pasha Finkelshteyn testen, wie weit KI-Agenten bei der Frontend-Entwicklung unterstützen können. Das Ziel ist ein Maven-Plugin, das Abhängigkeitsgraphen als interaktive HTML-Seite visualisiert. Dabei steht die Frage im Raum, wie präzise Spezifikationen sein müssen, um brauchbaren Code zu generieren. Die Session ist in zwei Teile gegliedert. Zuerst geht es um die theoretische Herangehensweise und das Design der Spezifikationen. Danach folgt die praktische Umsetzung, bei der Fehler direkt beim Programmieren adressiert werden. Das Format ist eine Live-Coding-Übertragung. Zuschauer können Fragen im Chat stellen und den Prozess der KI-gestützten Softwareentwicklung verfolgen.

Welcome to the JUG Oberpfalz Online Live Coding Sessions! Our online sessions are held in English and streamed live on YouTube. The recording will be available afterwards. Join the live chat, ask questions, and follow along as we explore what the next generation of software development might look like. This session is hosted by Johannes Rabauer with special guest Pasha Finkelshteyn from BellSoft. \\Session Topic\\ Can a developer who says he doesn't know much front-end get a good UI out of AI agents? Pasha Finkelshteyn, who works on Java performance and the JVM, bets on a spec: design first, write it down, then let the agents code. We'll see live whether that holds. Some questions are still open. How detailed does the spec need to be? When the result is wrong, do you fix the spec or the code? Tell us what you think in the chat. We test it on a Maven plugin that, once it's added to the pom, writes a single interactive HTML page of the project's dependency graph, with search, the path behind every dependency and version conflicts highlighted. First hour talking, second hour building. I'm at the keyboard, Pasha leads, and mistakes get named out loud. \\What we'll do\\ \* Hear how Pasha works with AI agents, and why he designs and specs before any code \* Design the dependency graph page: layout, search, and what a click on a dependency shows \* Write the spec the AI agents build from \* Let the agents build the Maven plugin and the HTML page \* Check the result against the spec and fix what's off \* Answer questions from the community \\Topics\\ \* Maven plugin development \* Dependency graphs and version conflicts \* Spec-driven development \* AI coding agents \* Front-end for backend developers \* Interactive HTML and JavaScript \* Java \* AI-assisted software development Whether you're a Java developer who avoids front-end work, a team lead figuring out how to use AI agents, or someone who has stared at mvn dependency:tree output for too long, you're...