Vibe-Coding: Was ist das? Und kann ich das auch?

Vibe-Coding ermöglicht es Lehrkräften, komplexe Web-Apps allein durch natürliche Sprache zu erstellen. Der Artikel zeigt, wie KI-Modelle den Programmiercode erstellen, um maßgeschneiderte, barrierefreie Lernanwendungen für den inklusiven Unterricht zu entwickeln ohne dass eine einzige Zeile Code selber geschrieben werden muss.

Die rasante Entwicklung von KI-Modellen ermöglicht uns auch das Erstellen eigener Apps. Während visuelle Programmier-Umgebungen wie Scratch wertvolle Einstiege in die Welt des Programmierens bieten, stoßen sie bei komplexen, funktionalen Anwendungen oft an Grenzen. Hier setzt Vibe-Coding an. Es beschreibt einen Prozess, bei dem nicht mehr die Beherrschung einer Programmiersprache im Vordergrund steht, sondern die präzise Beschreibung einer Idee. Für die Sonderpädagogik eröffnet dies die Chance, digitale Hilfsmittel exakt auf die individuellen Bedürfnisse von Lernenden zuzuschneiden.

Beispiele

https://go.lernsachen.online/silbenhelfer

https://go.lernsachen.online/jukebox

https://go.lernsachen.online/timer

Was ist Vibe-Coding?

Vibe-Coding bedeutet, dass die KI den gesamten Programmcode schreibt. Der Nutzer agiert als Architekt und Ideengeber. Anstatt Zeile für Zeile Code zu tippen, vermittelt man der KI den „Vibe“ – also das Aussehen, das Verhalten und die Funktionen des gewünschten Programms. Die Kompetenz verschiebt sich vom Schreiben von Code hin zum instruktiven Design und zur Fehleranalyse im Dialog.

Welche Werkzeuge werden benötigt?

Grundsätzlich kann jedes Large Language Model (LLM), also jeder Chatbot Code generieren. Für optimale Ergebnisse haben sich jedoch spezialisierte oder besonders fähige Modelle etabliert:

• Claude 3.5 Sonnet (Anthropic): Gilt aktuell als eines der stärksten Modelle für Coding-Aufgaben, da es sehr präzise Logik liefert.
• ChatGPT (OpenAI / Codex): Der Klassiker, der besonders durch seine weite Verbreitung und gute Dokumentation überzeugt.
• Gemini 1.5 Pro (Google): Punktet durch ein sehr großes Kontextfenster, was bei umfangreicheren Programmen hilfreich ist.

Der Prozess: Von der Beschreibung zur fertigen App

Die Programmentwicklung verläuft iterativ in einem Chat-Dialog:

1. Initialer Prompt: Erstellen Sie eine detaillierte Beschreibung. Beispiel: „Erstelle eine Web-App mit einem großen roten Button. Wenn man ihn drückt, erscheint ein zufälliges Tierbild und der Name des Tieres wird vorgelesen.“
2. Strukturvorgabe: Definieren Sie das Layout (z. B. „nutze ein klares, kontrastreiches Design für Schüler mit Sehbeeinträchtigung“).
3. Debugging & Testing: Das Programm wird lokal getestet. Funktioniert etwas nicht? Kopieren Sie die Fehlermeldung zurück in den Chat. Die KI korrigiert den Code umgehend.
4. Verfeinerung: In kleinen Schritten werden Funktionen hinzugefügt (z. B. eine Belohnungsanimation nach fünf richtigen Antworten).

Das Zielformat: Die Web-App

Für den schulischen Einsatz ist die Erstellung einer Web-App (bestehend aus HTML, CSS und JavaScript) am effizientesten.

• Vorteile: Sie benötigen keine Installation. Eine einzige .html-Datei reicht aus, um die App im Browser zu öffnen – sei es am Smartboard, am PC oder am iPad (z. B. via Documents by Readdle).
• Einschränkungen: Es handelt sich meist um statische Webseiten. Das bedeutet, Daten (wie Spielstände) werden nach dem Neuladen der Seite gelöscht, sofern kein lokaler Speicher des Browsers genutzt wird.
• Externe Libraries: Um Funktionen wie komplexe Diagramme oder physikalische Simulationen zu nutzen, kann die KI externe Bibliotheken einbinden (z. B. p5.js für kreatives Programmieren oder Howler.js für fortgeschrittene Audio-Funktionen).

Umgang mit Bildern

Da eine Web-App oft nur aus einer Textdatei besteht, können Bilder nicht einfach „beigelegt“ werden. Hier gibt es vierStrategien:

• Emojis: Die einfachste Lösung für Symbole und einfache Grafiken.
• Font Awesome / Lucide Icons: Einbindung von Icon-Bibliotheken via URL, um professionelle Symbole zu nutzen.
• Verlinkung: Es können Bilder, die im Internet zu Verfügung stehen, über Verlinkungen angezeigt werden. Es müssen hierfür natürlich Lizenzrechte beachtet werden
• Base64-Codierung: Das Bild wird komplett in eine lange Textkette umgewandelt und direkt in den Code eingebettet. Die KI kann dies auf Anfrage für kleine Icons erledigen.

Sonderpädagogischer Bezug und Einsatzmöglichkeiten

Vibe-Coding ist ein mächtiges Werkzeug für die Diklusion (Digitale Inklusion), da es Lehrkräften ermöglicht, Barrieren abzubauen, für die es keine kommerziellen Lösungen gibt:

• Individuelle Assistenz-Tools: Erstellung von spezialisierten Kommunikationstafeln oder Schritt-für-Schritt-Anleitungen mit Sprachausgabe für Schüler im Förderschwerpunkt geistige Entwicklung.
• Barrierefreie Lern-Lektionen: Umwandlung von analogen Arbeitsblättern in interaktive Formate mit einstellbaren Schriftgrößen, hohen Kontrasten und Screenreader-Optimierung.
• Verhaltenstraining: Kleine Apps zur Selbstregulation (z. B. ein visueller Timer oder ein digitales Mood-Board), die exakt die Verstärker nutzen, auf die ein spezifischer Schüler anspricht.
• Kognitive Entlastung: Erstellung extrem reduzierter Benutzeroberflächen („Minimal Interfaces“), die Ablenkungen minimieren und den Fokus auf eine einzige Aufgabe lenken.