⚗️ Keine Programmierkenntnisse nötig 🧬 Simulationen erstellen 🔬 Escape Games entwickeln 🌱 Interaktive Lernseiten ⚡ In Sekunden deployen 🧪 Experimente visualisieren 🔭 Apps für Schüler:innen 🦋 Coding per Sprache ⚗️ Keine Programmierkenntnisse nötig 🧬 Simulationen erstellen 🔬 Escape Games entwickeln 🌱 Interaktive Lernseiten ⚡ In Sekunden deployen 🧪 Experimente visualisieren 🔭 Apps für Schüler:innen 🦋 Coding per Sprache

VIBE
CODING
CHEAT
SHEET

Beschreibe den Inhalt – die KI schreibt den Code.
Fokussiere dich auf den INHALT, die technische Umsetzung übernimmt die KI.
Coding mit natürlicher Sprache, ohne Programmiersprachenkenntnisse.

CODE
🆓 Kostenlos starten
📌 Was ist Vibe Coding?
  • 1
    Idee in natürlicher Sprache beschreiben
  • 2
    KI generiert den Code automatisch
  • 3
    Ergebnis testen & im Browser ansehen
  • 4
    Per Feedback verfeinern & verbessern
  • 5
    App veröffentlichen & teilen!
💡 Für NaWi-Lehrkräfte ideal
Simulation Escape Game Lernseiten Quiz Visualisierung Experiment-Doku
⏱ Setup: 5 Min
0
Zeilen Code
die du schreiben musst
5Min
Bis zur ersten
laufenden App
Möglichkeiten für
deinen Unterricht
2025
Geburtsjahr des
Vibe Coding
⚙️ Schritt für Schritt

DER VIBE
CODING LOOP

Dieser dialogorientierte Kreislauf wiederholt sich so lange, bis deine App fertig ist.

🎯
01
Ziel beschreiben
Erkläre der KI in natürlicher Sprache, was du brauchst. Sei konkret: Was soll die App können? Für wen ist sie?
🤖
02
KI generiert
Die KI interpretiert deinen Prompt und erstellt den ersten lauffähigen Code – meist in Sekunden.
▶️
03
Ausführen & testen
Führe den Code aus oder lass dir eine Vorschau im Browser anzeigen. Schau, ob es funktioniert.
💬
04
Feedback geben
Was stimmt nicht? Fehlt etwas? Beschreibe das Problem direkt: „Die Geschwindigkeit der Simulation ist zu schnell."
🚀
05
Veröffentlichen!
Wenn du zufrieden bist: App mit einem Klick deployen (Vercel, Netlify) und Link an Schüler:innen teilen.

💡 Beispiel-Prompt für NaWi-Lehrkräfte: „Erstelle eine interaktive HTML-Simulation der natürlichen Selektion am Beispiel von Birkenspannern (Industriemelanismus). Zeige, wie sich der Anteil heller und dunkler Falter über Generationen verändert, wenn der Hintergrund (Birke vs. berußte Birke) wechselt. Mit Diagramm und Reset-Button."

📝 Prompt-Vorlagen

COPY &
PASTE

Füge deine Details ein und schicke den Prompt an eine KI deiner Wahl.

Neue Simulation HTML
Vorlage 1
# Vorlage: Simulation / Visualisierung Erstelle eine interaktive HTML-Simulation von [THEMA]. Lernziel: Schüler:innen der Klasse [KLASSE] verstehen [KONZEPT]. Die Simulation soll: - [Funktion 1] zeigen - [Funktion 2] ermöglichen - Einen Reset-Button haben - Auf Deutsch sein - Ohne externe Libraries funktionieren Stil: Einfach, übersichtlich, für 10-14 Jährige.
Escape Game Komponente GAME
Vorlage 2
# Vorlage: Escape Game Rätsel Erstelle ein Escape-Room-Rätsel in HTML für das Thema [FACH/THEMA]. Rätseltyp: [Passcode / Zuordnung / Lückentext / Kombinationsrätsel] Schwierigkeit: Klasse [X] Lösung: [Geheimcode oder Wort] Der Inhalt: - Frage: [Fachliche Frage] - Hinweis 1: [Hinweis] - Hinweis 2: [Hinweis] Zeige Erfolgsmeldung auf Deutsch wenn gelöst. Kein externes CSS oder JS.
Interaktive Infoseite INFO
Vorlage 3
# Vorlage: Schüler-Infoseite Erstelle eine übersichtliche HTML-Infoseite zum Thema [THEMA] für Klasse [X]. Abschnitte: 1. Was ist [THEMA]? (kurze Erklärung) 2. [Wichtige Fakten / Konzepte] 3. Interaktiver Merksatz (klickbar aufklappen) 4. Selbst-Test mit 3 Multiple-Choice-Fragen 5. Weiterführende Links (Platzhalter) Sprache: Einfach, schülergerecht, Deutsch Design: Farbe [FARBE], große Schrift, mobilfreundlich
Bug fixen / Fehler beheben DEBUG
Vorlage 4
# Vorlage: Fehler beheben Problem: [Beschreibung des Fehlers] Erwartet: [Was sollte passieren?] Tatsächlich: [Was passiert stattdessen?] Fehlermeldung (falls vorhanden): [Fehlermeldung hier einfügen] Mein Code: [Code hier einfügen] Finde und behebe den Fehler. Erkläre kurz, was falsch war und warum die Lösung funktioniert.
✨ Magische Phrasen

PROMPT-
MAGIE

Diese Formulierungen verbessern jede KI-Antwort dramatisch.

🚀
„Lass es erstmal funktionieren, dann optimieren wir"
Verhindert, dass die KI überkompliziert. Ideal für ersten Entwurf einer Simulation oder eines Quiz.
✂️
„Halte es einfach, kein Over-Engineering"
Für Lehrmaterial: weniger ist mehr. Schüler:innen brauchen keine komplexe Architektur.
🧠
„Erkläre deine Vorgehensweise kurz"
Hilft dir, die Logik zu verstehen – und beim nächsten Mal bessere Prompts zu schreiben.
⚠️
„Was könnte an diesem Ansatz schiefgehen?"
Lässt die KI ihren eigenen Code kritisch prüfen, bevor du ihn im Unterricht nutzt.
🔤
„Alles auf Deutsch, für Klasse [X]"
Wichtig! Sonst erstellt die KI englische Texte. Immer Zielgruppe und Sprache angeben.
📱
„Mobilfreundlich und ohne externe Bibliotheken"
Für Seiten, die Schüler:innen auf dem Handy öffnen. Keine Installation nötig.
🔁
„Füge einen Reset-Button und Fortschrittsanzeige ein"
Standard für interaktive Simulationen. Schüler:innen können Experimente wiederholen.
🏫
„Als Lehrkraft brauche ich das für Klasse 8, Gymnasium"
Kontext gibt der KI wichtige Hinweise für Komplexität, Sprache und Inhalt.
✍️
„Kommentiere den Code auf Deutsch"
Hilfreich wenn du den Code verstehen oder später anpassen willst.
🛠 Empfohlene Tools

DEIN
WERKZEUG-KASTEN

Diese Tools eignen sich besonders für Lehrkräfte – die meisten sind kostenlos nutzbar.

🤖
Claude.ai
Kostenlos
Bester KI-Assistent für komplexen Code. Versteht Kontext und Bildungsszenarien sehr gut. Artifacts-Funktion zeigt App direkt in der Vorschau.
💬
ChatGPT
Kostenlos
Bekanntes Tool, sehr guter Einstieg. GPT-4o schreibt guten HTML/JavaScript-Code. Canvas-Funktion für direktes Bearbeiten und Vorschau.
🌟
Google Gemini
Kostenlos
Integriert mit Google Workspace. Canvas-ähnliche Funktion. Besonders gut wenn du bereits Google Classroom nutzt.
🎨
Google Stitch
Kostenlos
Generiert UI-Designs für Web- und Mobile-Apps. Perfekt für schnelle Design-Entwürfe von Schüler-Interfaces. Macht Design-Ideenfindung sehr schnell.
Cursor
Für Fortgeschrittene
KI-gestützte Entwicklungsumgebung. Für Lehrkräfte die tiefer einsteigen wollen. Chat-Panel erklärt den Code bei jedem Schritt.
🚀
Vercel / Netlify
Kostenlos
App in 2 Minuten online stellen. Einfach HTML-Datei hochladen, Link kopieren, an Schüler:innen schicken. Kein Server-Wissen nötig.
🎭
designprompts.dev
Inspiration
31+ Design-Stile für KI-Prompts. Zeigt wie die gleichen Daten in verschiedenen Ästhetiken aussehen. Gut für Unterrichts-Apps die gut aussehen sollen.
📋
Claude Artifacts
Direkt in Claude
In Claude.ai direkt erstellte HTML/React-Apps. Preview rechts daneben, direkt teilbar. Kein Download oder Upload nötig – perfekt für schnelle Prototypen.

🎓 UI-Design Tipp: Neo-Brutalism für Unterrichts-Apps

Wenn deine App besonders auffällig und motivierend aussehen soll, probiere diesen Design-Prompt: „Nutze einen Neo-Brutalism-Stil: cremefarbener Hintergrund (#FFFDF5), dicke schwarze Ränder (4px), harte Schatten ohne Weichzeichner, kräftige Farben (Rot #FF6B6B, Gelb #FFD93D), und Space Grotesk Schrift in fett."

🐛 Debugging mit KI

WENN ETWAS
NICHT KLAPPT

Kopiere die passende Vorlage und füge deinen Fehler oder Code ein.

🔴 Fehlermeldung im Browser
„Ich bekomme diesen Fehler: [Fehlermeldung einfügen]. Hier ist mein Code: [Code einfügen]. Was ist falsch und wie behebe ich es?"
⚡ Falsche Ausgabe / falsches Ergebnis
„Erwartet: [Was sollte passieren]. Tatsächlich: [Was passiert stattdessen]. Hier ist die Funktion: [Code einfügen]"
💤 Nichts passiert (keine Reaktion)
„Kein Fehler, aber es passiert nichts wenn ich auf [Button/Element] klicke. Die Konsole zeigt: [Konsoleninhalt]. Wo liegt das Problem?"
📱 Sieht auf Handy komisch aus
„Die App funktioniert am PC, aber auf dem Handy ist das Layout kaputt. Bitte mache es mobilfreundlich mit responsive Design."
🐢 App ist zu langsam / laggt
„Die Simulation ist sehr langsam, besonders wenn viele Objekte vorhanden sind. Kannst du die Performance verbessern? Hier der Code: [Code]"
🎨 Design sieht nicht gut aus
„Das Design ist zu unübersichtlich für Schüler:innen in Klasse [X]. Bitte verbessere Layout, Abstände und Lesbarkeit. Halte es einfach."

✅ Guter Prompt

„Die Simulation der Birkenspanner reagiert nicht auf den Schieberegler für die Umweltverschmutzung. Wenn ich ihn bewege, verändert sich die Hintergrundfarbe nicht. Hier ist der relevante JavaScript-Code: [Code]"

❌ Schwacher Prompt

„Es funktioniert nicht. Hilf mir bitte."

→ Kein Kontext, kein Code, keine Fehlerbeschreibung. Die KI kann ohne diese Infos nicht helfen.

🏆 Best Practices

SO KLAPPT
ES GARANTIERT

Diese Gewohnheiten machen den Unterschied zwischen Frust und Flow.

01
Klein anfangen
Beschreibe immer zuerst nur die Kernfunktion. Ein Quiz mit 3 Fragen ist besser als gleich ein vollständiges Escape Game. Schritt für Schritt erweitern.
02
Kontext geben
Immer angeben: Fach, Klasse, Schulform. „Biologie, Klasse 9, Gymnasium" liefert viel besssere Ergebnisse als nur „für Schüler".
03
Versionen sichern
Bevor du große Änderungen machst: funktionierende Version speichern! Einfach HTML-Datei kopieren und umbenennen (z.B. simulation_v2.html).
04
Testen wie Schüler
Immer auf dem Handy testen! Schüler:innen öffnen Apps meist mobil. Frage die KI explizit nach mobilfreundlichem Design.
05
Code nicht verstehen nötig
Du musst den Code NICHT verstehen – aber du solltest verstehen, WAS er macht. Frage die KI: „Erkläre kurz, was dieser Code tut."
06
Keine Passwörter einfügen
Niemals echte Passwörter, API-Keys oder Schülerdaten in den Prompt einfügen! Das ist ein Sicherheitsrisiko.
07
Inhalt prüfen!
KI kann inhaltliche Fehler machen. Prüfe immer die fachliche Korrektheit der generierten Texte und Erklärungen, bevor du sie im Unterricht einsetzt.
08
Community nutzen
Teile gelungene Prompts und Apps mit Kolleg:innen. Was für Chemie funktioniert, funktioniert oft auch für Biologie oder Physik – anpassen und weiterverwenden!
🧪 Prompting-Techniken

PROMPT
METHODEN

Verschiedene Techniken für verschiedene Situationen – je nach Aufgabe kombinieren.

Technik Beschreibung Beispiel für NaWi Ideal wenn...
Spezifisch sein
BASIS
Details, Klasse, Funktion und Technologie genau angeben „HTML, Klasse 8, Gymnasium, interaktiver pH-Rechner mit Farbanzeige" Du weißt genau, was du willst
Kontext zuerst
BASIS
Aktuellen Stand erklären bevor du eine Anfrage machst „Ich habe eine Simulation der Zellteilung, aber es fehlt noch die Anaphase..." Du eine bestehende App erweiterst
Schritt für Schritt
FORTG.
Komplexe Aufgaben in Teilschritte aufbrechen „Erstell zuerst nur die Grundstruktur, dann fügen wir die Interaktion hinzu" Die Aufgabe sehr komplex ist
Beispiele zeigen
FORTG.
Input/Output-Beispiele mitgeben „Wenn Temperatur = 20°C dann soll die Anzeige blau sein, bei 40°C rot" Genaue Logik wichtig ist
Rolle vergeben
PROFI
Der KI eine Persona geben „Du bist Experte für Bildungssoftware für Gymnasien. Erstelle..." Qualität und Ton wichtig sind
Einschränkungen setzen
BASIS
Klar sagen, was NICHT gewünscht ist „Ohne externe Libraries, kein React, alles in einer HTML-Datei" Einfache Deployability wichtig ist
Negative Prompts
PROFI
Explizit sagen, was vermieden werden soll „Keine komplizierten Animationen, kein Englisch, keine externen Daten" Du frühere Fehler vermeiden willst
🏁 Schnellstart

IN 5 SCHRITTEN
LOSLEGEN

Vom ersten Gedanken zur fertigen Schüler-App.

1️⃣
Tool wählen
Einstieg: Claude.ai oder ChatGPT (gratis). Dort anmelden, fertig.
2️⃣
Idee beschreiben
„Erstelle eine HTML-App für..." – Vorlage von oben benutzen!
3️⃣
Code ausprobieren
Code kopieren → in .html Datei speichern → im Browser öffnen.
4️⃣
Verfeinern
„Füge noch... hinzu" / „Ändere... zu..." – so lange bis es passt.
5️⃣
Teilen!
netlify.com → Datei raufziehen → Link kopieren → an Klasse schicken 🎉
🔎 Beispiele & Ideen

PROJEKTE ZUR
INSPIRATION

Echte Projekte aus dem DigiSU-Kontext und kreative Ideen zum Nachbauen.

Echte Projekte

Intelligente Sitzordnung Echt

Automatische Sitzpläne basierend auf Schülerwünschen oder Zufallsalgorithmus.

Nutzerlogin Raumplaner Templates
Aquarienpflege-Tracker Echt

Dokumentation durchgeführter Pflegearbeiten im Aquarium mit Verlaufskontrolle.

Verlauf Aufgaben Einfache Eingabe
Kein Link verfügbar
Geräte-Ausleihplattform Echt

Digitale Verwaltung und Reservierung von Schulgeräten mit QR-Code-System.

QR-Code Dashboard Filter & Suche
Kein Link verfügbar
3D-Druck Monitoring Echt

Live-Fortschrittsanzeige von 3D-Druckprojekten für Events und Schulveranstaltungen.

Live-Progress E-Mail-Alerts
Kein Link verfügbar
Creature Booster Echt

Zoologie-Lernspiel: Lebewesen an Lebensräume anpassen und Entscheidungen begründen.

KI-Bildgenerierung Feedback Biologie
Kein Link verfügbar
BioGuessr Echt

Lernspiel: Arten den richtigen Lebensräumen zuordnen – inspiriert von GeoGuessr.

Spielerisch Biologie Kategorisierung
Kein Link verfügbar
Escape Game Toxikologie Echt

Diagnose-Rätsel: Giftstoff identifizieren und per Codeeingabe den Patienten retten.

Escape Game Chemie Problem-based
Kein Link verfügbar

Ideen zur Inspiration

Periodensystem-Quiz Idee

Interaktives PSE: Element anklicken, Eigenschaften erkunden, Quiz starten.

Chemie Kl. 8–10
Ökosystem-Simulator Idee

Räuber-Beute-Simulation mit Schiebereglern für Populationsparameter.

Biologie Simulation
pH-Rechner mit Farbskala Idee

Wert eingeben, Indikatorfarbe sehen – direkt im Browser, kein Material nötig.

Chemie Visualisierung
Optik-Simulator Idee

Lichtbrechung und Reflexion interaktiv mit ziehbaren Linsen und Strahlen.

Physik Interaktiv
Mikro­plastik-Datenvisualisierung Idee

Eigene Messdaten aus dem Schülerpraktikum direkt in interaktive Diagramme eintragen.

Daten Umwelt
Lernstation Zellteilung Idee

Animierte Mitose-Phasen mit Klick-Quiz und Selbstkontrolle – als Self-Paced-Station.

Biologie Animation

💡 Eigene Idee? So geht's:

Nimm eine der Vorlagen oben, tausche das Thema aus und schicke den Prompt an Claude oder ChatGPT. Meistens ist in unter 10 Minuten ein erster Prototyp fertig – dann weiter verfeinern!

✉ Projekt teilen → felix.koch@ph-ludwigsburg.de