Slide 1

Was ist Vibe Coding?

Vibe Coding [vaib ˈkəʊ̯dɪŋ] : Software oder Prototypen per natürlicher Sprache beschreiben, mit KI direkt umsetzen und iterativ verfeinern.

Wie es praktisch abläuft

Statt lange Spezifikationen zu schreiben, startet man mit einem groben Zielbild, prüft den erzeugten Prototypen und schärft dann gezielt nach.

Ziel und Kontext formulieren

Prototyp direkt ausprobieren

Feedback in den nächsten Prompt geben

Wofür es gut geeignet ist

Besonders stark für erste nutzbare Prototypen, visuelle Konzepte und fachliche Diskussionen mit etwas zum Anklicken.

Dashboards Rechner Formulare Landingpages Fachliche Tools XML- und Datenbrowser Mapping- und Migrationshilfen Interne Demo-Apps Workshop-Prototypen Mini-Spiele

Wofür es eher nicht gut geeignet ist

Eher nicht für "echte" Anwendungen mit Backend, User-Daten oder anderen Themen, bei denen Sicherheit und Stabilität kritisch sind.

Grundstruktur eines Prompts

Ziel: Was soll gebaut werden?

Funktionen: Welche Eingaben, Ansichten und Aktionen?

Look & Feel: Wie soll es wirken und aussehen?

Testen: Prompt in ChatGPT oder Claude eingeben, erste Version erzeugen, dann gezielt nachschärfen.

Slide 2

Beispiele für Apps

Vier unterschiedliche App-Typen, jeweils per Prompt angestoßen

Heidelbergpass

Dashboard

Kommunales Statistik-Dashboard mit KPI-Karten, Diagrammen und Tabelle.

HRIS

XML Browser

Technischer XML-Model-Browser mit Navigation zwischen verknüpften Entities.

Hana Import Mapper

Migration Tool

CSV-zu-SpreadsheetML/XML-Mapping mit Beispieldaten und Exportfunktion.

Preiskalkulator

Payroll Rechner

Payroll-Einsparungsrechner mit Kennzahlen zu Kosten, Einsparung und Amortisation.

Tarifvertrag-Rechner

HR Tool

UI5-Anwendung für ERA-Leistungsbeurteilung mit Bewertungsmatrix, KPIs und Ergebnisübersicht.

BPMN Collab

Collaboration Tool

Browserbasierter BPMN-Editor mit Share-URL, Zoom, Download und kollaborativem Demo-Fokus.

Slide 3

Praktisches Beispiel: Spiel prompten

J&S-Frosch als Arcade-Spiel in Anlehnung an Moorhuhn

Aus unserem Frosch wird in einem Prompt ein spielbarer Prototyp

Nicht nur Apps lassen sich prompten. Auch dieses Frosch-Bild wurde mit ChatGPT erstellt und kann direkt als Basis für ein kleines Spiel dienen.

Was der Prompt leisten sollte

Mechanik beschreiben Arcade-Spiel, zufällig auftauchende Fliegen, Punkte bei Treffern, Zeitlimit, Highscore.

Vorlagenbild explizit referenzieren Im Prompt klar sagen, dass das eingefügte Bild als visuelle Referenz für Figur, Farben, Stil und Wiedererkennbarkeit genutzt werden soll.

Technik eingrenzen Eine HTML-Datei mit Canvas oder DOM, ohne Build-Prozess, direkt lokal startbar.

Beispiel-Prompt

Ziel: Erstelle ein kleines browserbasiertes Arcade-Spiel als einzelne HTML-, CSS- und JavaScript-Datei. Figur: Die Hauptfigur ist ein freundlicher J&S-Frosch. Nutze das eingefügte Bild als visuelle Referenz für Farben, Formensprache und Wiedererkennbarkeit. Kein generischer Standard-Frosch. Spielmechanik: Zufällig auftauchende Fliegen erscheinen kurz in unterschiedlichen Größen und Positionen. Der Spieler klickt sie an, sammelt Punkte und spielt gegen einen 60-Sekunden-Timer. Kleine Fliegen bringen mehr Punkte. Screens: Zeige Startscreen, Spielscreen und Ergebnisscreen mit Score und Restart. Technik: Kein Build-Prozess, keine Framework-Pflicht, lokal direkt startbar. Look & Feel: Lebendig, grün, leicht humorvoll, sauber umgesetzt und sofort verständlich.