Vibe Coding
Von der Idee zur laufenden App — in einem Tag.
Von der Idee zur laufenden App — in einem Tag.
Intro · Vibe Coding
Vibe Coding bezeichnet einen Entwicklungsansatz, bei dem man eine App durch natürlichsprachliche Prompts aufbaut — ohne selbst Code schreiben zu müssen. Der Begriff wurde 2025 von Andrej Karpathy (ehemals OpenAI, Tesla) geprägt.
Das Ziel ist kein perfekter Code — sondern ein funktionaler Prototyp, so schnell wie möglich.
Der Vibe-Coding-Ablauf
Intro · Warum heute?
Lernziel
Einen funktionalen Prototyp (PoC) für eure Projektarbeit selbstständig erstellen — mit KI als Werkzeug, nicht als Abkürzung.
Keine Programmierkenntnisse erforderlich. Ihr lernt heute einen strukturierten Workflow, der funktioniert — von der Idee zur laufenden App.
Der heutige Tag
Jede digitale Applikation — egal wie komplex — lässt sich auf drei Grundkomponenten reduzieren: Eingabe · Verarbeitung · Ausgabe — kurz EVA.
Das EVA-Schema ist die konzeptionelle Grundlage — wer es klar ausfüllen kann, hat wichtige Vorarbeit für Alignment, PRD und Code bereits geleistet.
Block 1 · EVA-Schema
Google Maps
Eingabe:
Startort + Ziel
Verarbeitung:
Optimale Route berechnen
Ausgabe:
Karte + Wegbeschreibung
SBB Mobile
Eingabe:
Abfahrtsort + Ziel + Datum
Verarbeitung:
Verbindungen berechnen
Ausgabe:
Fahrplan + Ticket
Twint
Eingabe:
Betrag + Empfänger (QR/Nr.)
Verarbeitung:
Zahlung autorisieren
Ausgabe:
Bestätigung + Quittung
Übung (15 Min.): Wähle 3 Schweizer Apps (z.B. Post-App, Homegate, Galaxus) und beschreibe jede im EVA-Schema — dann das Gleiche für deine eigene Idee.
Konzept · Gilt für den ganzen Tag
Falsches Wort
Du meinst etwas Bestimmtes — aber das Wort beschreibt etwas anderes.
Prompt:
Ein Quadrat hat gleiche Seiten — «gestreckt» widerspricht dem Begriff. Die KI interpretiert irgendwie, das Ergebnis stimmt nicht.
→ Richtig wäre: «Rechteck»
Richtiges Fachwort
Du weißt genau was du willst — und sagst es mit dem richtigen Begriff.
Prompt:
«Formular», «Input-Feld», «Submit-Button» sind präzise Koordinaten — die KI weiß sofort was gemeint ist.
→ Ein Wort ersetzt drei Sätze
Bewusst offen
Du hast noch keine genaue Vorstellung — und gibst der KI bewusst Spielraum.
Prompt:
Die KI trifft eine sinnvolle Wahl. Du prüfst ob sie passt — und iterierst. Offenheit ist hier eine Strategie, kein Fehler.
→ Delegation statt Entscheidung
Tipp
Wenn du ein Konzept nicht benennen kannst, beschreib es der KI — und frag direkt: «Wie heisst das Fachwort dafür, und was bedeutet es?» KI hilft dir, die richtige Sprache zu finden.
Methode · Gilt für jeden Block
Gilt für Alignment
Die KI stellt Fragen — du antwortest — das gemeinsame Bild wird schärfer. Dieser Dialog ist kein einmaliger Schritt, sondern ein Prozess.
Ziel: KI und Mensch haben dieselbe Vorstellung der App.
Gilt für das PRD
Das erste PRD ist ein Entwurf, kein Endprodukt. Lücken, die beim Schreiben auffallen, werden sofort mit der KI geklärt — nachprompten, kürzen, ergänzen.
Ziel: vollständige, widerspruchsfreie Anforderungen.
Gilt für den Code
Die erste generierte App ist der Startpunkt — nicht das Ziel. Jeder weitere Prompt verfeinert Funktion, Design oder Verhalten der Applikation.
Ziel: funktionierende App, die das PRD erfüllt.
Ein schlechtes erstes Ergebnis ist kein Misserfolg — es ist der Startpunkt.
Alignment bedeutet: Mensch und KI haben dasselbe Bild im Kopf. Fehlendes Alignment kann dazu führen, dass generierter Code nicht das liefert, was man sich vorgestellt hat — ein Problem, das sich früh vermeiden lässt.
→ KI generiert etwas — aber ohne Kontext, Zielgruppe oder Einschränkungen.
→ KI fragt nach → du entdeckst Lücken → gemeinsam entsteht ein präzises Bild.
Warum zuerst fragen lassen? Weil man selbst oft nicht weiss, was man genau will — bis man gezwungen wird, es zu formulieren.
Block 2 · Technik für Nicht-Experten
Anstatt der KI direkt zu sagen was sie tun soll, lässt du sie dein Denken schärfen. Das findet Lücken, bevor sie im Code sichtbar werden.
Sokratisches Prompting = professioneller Weg, die eigene Idee zu schärfen — ohne Fachvokabular vorauszusetzen.
Ein Product Requirements Document beschreibt vollständig, was eine App können muss — mit Fokus auf Anwendungsfälle und konkrete Anforderungen.
Es ist kein technisches Dokument — es ist ein Vertrag zwischen Idee und Umsetzung.
Das PRD ist der Input für UX-Tool, App-Builder und Iteration. Je vollständiger und präziser, desto besser die generierten Ergebnisse.
Wichtig: Das PRD sollte alle Features des ersten Prototypen enthalten — keine Lücken, keine stillen Annahmen.
Tip: Die KI kann dir helfen, Use Cases zu formulieren, die du noch nicht bedacht hast.
Die 6 Bestandteile
Jetzt ihr · Phase 1 von 3
Schärft eure Idee im Dialog mit Gemini — und erstellt daraus euer PRD.
Tool
Google Gemini
gemini.google.com
Ergebnis
Fertiges PRD-Dokument
bereit für UX & Code
Prompts
Alignment auf Slide 9
PRD-Struktur auf Slide 11
Das PRD ist fertig — jetzt visualisieren wir die App, bevor eine einzige Zeile Code geschrieben wird. UX-First bedeutet: Fehler früh erkennen, wenn sie noch nichts kosten. Danach kommt die Logik.
Tools
Google Stitch (empfohlen)
stitch.withgoogle.com
Gratis · UI-Mockups aus Textprompts
Alternativen: v0.dev (Vercel) · Claude Artifacts (Anthropic)
Prompt-Vorlage für Stitch
Dann iterieren: Was gefällt? Was stimmt nicht? Mindestens 1 Verfeinerungs-Prompt.
Jetzt ihr · Phase 2 von 3
Übertragt euer PRD in Stitch — und visualisiert eure App, bevor eine Zeile Code existiert.
Tool
Google Stitch
stitch.withgoogle.com
Ergebnis
Mockup-Screenshots
bereit als Input für Lovable
Tipp
Mindestens 1 Iterationsrunde
Prompt-Vorlage auf Slide 13
Konzept · Grenzen kennen
Jedes Gespräch mit einem LLM hat einen Arbeitsbereich — das Context Window. Es enthält alles, was die KI in diesem Chat «sehen» kann: deine Prompts, die Antworten, den generierten Code.
Neuen Chat starten
Aktuellen Code + kurze Zusammenfassung als ersten Prompt mitgeben — so startet die KI mit vollem, frischem Kontext.
Code regelmässig exportieren
Lokal speichern — nicht nur als Backup, sondern als sauberer Input für einen neuen Chat.
Kurze, fokussierte Chats schlagen lange, verworrene Gespräche.
Konzept · LLMs richtig einsetzen
LLMs können beeindruckende Aufgaben bewältigen — aber ihre Antworten sollten nie blind übernommen werden. Verifikation ist Teil des Workflows.
Konzept · LLMs vergleichen
Grundsatz
Alle grösseren LLMs sind gut genug, um einen Prototypen zu bauen — es ist also nicht tragisch, wenn man mal «das falsche» LLM wählt.
Benchmarks für seriöse Vergleiche
Wer LLMs statistisch vergleichen möchte, orientiert sich an aktuellen Online-Benchmarks — dort werden Modelle systematisch über tausende Aufgaben hinweg bewertet.
Tipp für diesen Workshop
Claude für Alignment, PRD und Logik — insbesondere wenn man Claude Cowork nutzt. Gemini für UX-Mockups und visuelle Aufgaben.
Programme können in vielen Sprachen geschrieben werden. Tools wie Lovable, Google AI Studio, Bolt.new und andere arbeiten primär mit HTML, CSS und JavaScript — und das hat gute Gründe.
Läuft direkt im Browser — kein Setup, keine Installation, keine Kompilierung. Jeder kann das Ergebnis sofort öffnen und testen.
Die KI kann den Code direkt lesen, verstehen und im Gespräch verändern. Kein Zwischenschritt, keine Übersetzung nötig — idealer Input für LLMs.
Das Ergebnis wird als klickbare UI gerendert. Du siehst in Sekunden ob es stimmt — schnelles Validieren ist das Herzstück des ganzen Workflows.
Nicht weil sie die «wichtigsten» Sprachen sind — sondern weil sie schnelle Iteration und direkte Verifikation im Browser ermöglichen.
Block 5 · EVA + PRD + UX → Code
Kein vorgegebenes Template — du baust deinen eigenen Prompt. Das ist der Kern von Vibe Coding: dein Kontext, deine Idee, dein Wording.
Was ein guter erster Prompt enthält
Jetzt: selbständig prompten
Kombiniere EVA, PRD und UX-Mockup zu deinem eigenen Prompt — in deinen Worten, mit deiner Idee.
Dann: ausprobieren, ausprobieren, ausprobieren!
Das erste Ergebnis wird nicht perfekt sein — das ist der Plan. Iteration ist die Methode.
Tools: Lovable (lovable.dev) · Bolt.new · Google AI Studio
Vibe Coding ist kein linearer Prozess. Jeder Durchlauf schärft dein Bild von dem, was entstehen soll. Iteration ist die Methode — nicht der Notfallplan.
Häufige Stolpersteine
⚠ Stand regelmässig sichern
Manche Tools überschreiben die vorherige Version beim Prompten. Funktionierenden Stand immer zuerst lokal speichern oder duplizieren — so kann man jederzeit zurücksetzen, falls ein Prompt etwas kaputt macht.
Wer nicht weiss was als nächstes sinnvoll ist: die KI fragen, was sie verbessern würde.
Jetzt ihr · Phase 3 von 3
Baut euren ersten Prototyp mit Lovable — und iteriert ihn, bis er das PRD erfüllt.
Tool
Lovable · Bolt.new
lovable.dev · bolt.new
Ergebnis
Laufende App
deploybar, öffentliche URL
Regel
Ein Prompt — eine Änderung
Iterate-Prompts auf Slide 22
Der Tag gehört euch — niemand muss etwas präsentieren. Wer möchte, darf am Ende freiwillig seine coolste Kreation oder sein überraschendste Learning zeigen.
Freiwilliger Showcase (für alle, die möchten)
Keine Pflicht. Wer lieber zuhört — absolut okay. Der Showcase ist ein Angebot, keine Aufgabe.
Was wir heute gemacht haben
Abschluss · Ressourcen für Studierende
Datenschutz: Keine sensiblen oder vertraulichen Daten in externe KI-Tools eingeben — Anfragen können von Anbietern gespeichert werden.
Take-Away
Alignment → PRD → UX → Quickstart → Iterate
Dieser Workflow funktioniert überall, wo man etwas strukturieren und entwickeln muss.
Sokratisch prompten
KI als Sparringspartner nutzen
Iterieren
Erste Version = Startpunkt
Verifizieren
Ergebnisse kritisch prüfen