Alle Lernlust-Apps entstehen mit Hilfe von KI-Coding-Tools (Claude, Gemini, ChatGPT, VS Code + Copilot u.a.). Hier findest du die Prompts, eine Design-Vorlage und eine Schritt-für-Schritt-Anleitung — damit du eigene Lern-Apps für deine Klasse bauen kannst. Keine Programmierkenntnisse nötig.
So baust du deine eigene Lern-App — in 20 Minuten
Vibecoding funktioniert mit verschiedenen KI-Tools. Du brauchst eines, das HTML-Code generieren kann. Je grösser das Context Window (Tokenkapazität), desto komplexere Apps sind möglich.
claude.ai — Die Lernlust-Apps entstehen damit. Gut im Schreiben von Web-Code. Kostenlose Version verfügbar.
Gemini (Google) — Sehr grosses Context Window, gut für umfangreiche Prompts.
VS Code + Copilot/Cline — Für alle, die direkt im Code-Editor arbeiten möchten. Grössere Kontrolle, aber etwas technischer.
Kopiere den Haupt-Prompt weiter unten auf dieser Seite. Dieser enthält das komplette Design-System (Farben, Schriften, Layouts) aller Lernlust-Apps — damit sehen alle Apps gleich aus.
Füge am Ende des Prompts deine eigene Beschreibung ein — was soll die App üben? Für welche Klasse? Welche Schwierigkeitsstufe? Je konkreter du bist, desto besser wird die App.
Die KI gibt dir eine einzelne .html-Datei zurück. Kopiere den gesamten Code, öffne einen Texteditor (z.B. TextEdit auf Mac, Notepad auf Windows), füge ihn ein und speichere als meine-app.html.
TextEdit auf Mac: Format → "Als reinen Text umwandeln" klicken, bevor du einfügst. Sonst speichert er als .rtf.
Öffne die gespeicherte .html-Datei im Browser (Doppelklick). Teste die App und beschreibe der KI, was du ändern möchtest — sie verbessert und passt an, bis du zufrieden bist.
Du kannst die fertige App direkt per E-Mail oder USB-Stick weitergeben — sie funktioniert auf jedem Gerät im Browser ohne Installation. Oder lade sie auf eine Website hoch und schicke den Link.
Schick deine App an den Autor (siehe Kontakt). Wenn sie zum pädagogischen Konzept passt, nehmen wir sie gerne auf.
Diesen Prompt als Basis verwenden — dann am Ende deine Aufgabe beschreiben
# Lernlust App — Design-Prompt Erstelle eine interaktive Lern-App als einzelnes HTML-Dokument (standalone, kein Build-Tool, keine externen Abhängigkeiten ausser CDN). ZIELGRUPPE: Kinder Zyklus 1–2 (6–12 Jahre), auch geeignet für neurodivergente Kinder (ADHS, Legasthenie, Dyskalkulie). ── Design-System (exakt übernehmen) ────────────────────── FONTS (Google Fonts CDN): - Überschriften: 'Fredoka' (weights 400,600,700) - Fliesstext: 'Nunito' (weights 400,600,700,800) ICONS: Font Awesome 6.5 via CDN FARBEN (CSS-Variablen): --primary: #FF6B6B /* Korallenrot — Hauptaktionen */ --secondary: #4ECDC4 /* Türkis — Sekundär */ --accent: #FFE66D /* Goldgelb — Hervorhebung */ --success: #95E1A3 /* Mintgrün — Richtig/Erfolg */ --danger: #FF8B94 /* Lachsrot — Falsch/Warnung */ --bg-light: #FFF9F0 /* Warmes Creme — Hintergrund */ --bg-card: #FFFFFF /* Weiss — Karten */ --text-dark: #2D3436 /* Fast Schwarz — Text */ --text-muted:#636E72 /* Grau — Sekundärtext */ LAYOUT: - Max-Breite: 480px, zentriert, padding 20px - Animierter Hintergrund: 3 Farbkreise mit @keyframes float (position: fixed, pointer-events: none, z-index: 0) - Inhalt: z-index: 1 KARTEN: - background: white, border-radius: 24px - box-shadow: 0 8px 32px rgba(0,0,0,0.10) BUTTONS: - border-radius: 50px (pill-form) - Hover: transform translateY(-3px), 0.2s transition - Farbige Varianten: primary, secondary, accent INTERAKTION: - Korrekte Antwort: grünes Feedback + Punkte/Stern - Falsche Antwort: rotes Feedback + korrekte Antwort zeigen - Spielerische Belohnungen (Sterne, Streaks, Konfetti) - Zum Schluss: Abschluss-Screen mit Sterne-Animation TECHNISCH: - Kein Framework, kein Build-Tool — alles in einer .html Datei - localStorage für Einstellungen/Highscore (optional) - Responsive, Mobile-first - Vollständig auf Deutsch ── Deine Aufgabe ───────────────────────────────────────── [HIER DEINE BESCHREIBUNG EINFÜGEN] Beispiel: Baue eine Lern-App für den Zehnerübergang (Plus im ZR 20). Zyklus 1, ca. 7–8 Jahre. Multiple-Choice mit 4 Antworten. 10 Aufgaben pro Runde, zufällig gemischt. Am Ende Sterne und Konfetti für gute Ergebnisse.]
Fertige Beschreibungen zum Einsetzen in den Haupt-Prompt
Plus-Aufgaben mit Zehnerübergang, 4 Antwortoptionen, Zeitdruck-Modus optional, Streak-Anzeige.
Additionsaufgaben im Zahlenraum 20 mit Zehnerübergang (z.B. 8+5=?, 7+6=?). 4 Antwortoptionen (1 richtig, 3 falsch). Optional: Zeitdruck-Modus (30 Sek/Aufgabe). Streak-Zähler und Sterne als Belohnung.
Wort wird angezeigt, Kind wählt wie viele Silben — farbige Silben-Aufteilung als Hilfe.
Silben-Klopf-App: Wort wird gross angezeigt (z.B. "Schmetterling"). Kind wählt die Silbenanzahl (1–5). Bei richtiger Antwort wird das Wort in farbige Silben aufgeteilt dargestellt. 20 Wörter, Zyklus 1.
Einmaleins-Aufgaben mit wählbarer Reihe, Eingabefeld, Zeitanzeige und Highscore.
Einmaleins-Training: Spieler wählt zuerst eine Reihe (2er bis 10er). Dann 10 Aufgaben mit Texteingabe (z.B. "7 × 8 = ?"). Stoppuhr läuft mit. Highscore in localStorage gespeichert. Zyklus 2.
Wörter nach Wortart (Nomen, Verben, Adjektive) in Körbe sortieren per Drag & Drop.
Wörter-Sortier-App: 15 Wörter erscheinen nacheinander. Kind ordnet sie per Klick auf einen von 3 Körben (Nomen / Verb / Adjektiv) zu. Falsches Wort springt zurück. Konfetti am Schluss. Zyklus 2.
60 Sekunden, so viele Aufgaben wie möglich — gemischte Operationen, schwierige steigen.
60-Sekunden Sprint: Gemischte Plus- und Minusaufgaben im ZR 100. Eingabe per Tastatur. Mit jeder richtigen Antwort werden Aufgaben etwas schwieriger. Highscore-Anzeige nach Ablauf. Zyklus 2.
Vokabel-Blitztraining mit Web Speech API — Hören, Lesen, Übersetzen. Für neurodivergente Kinder optimiert (ADHS/Autismus).
Français-Vokabel-App mit 3 Modi: 1) Hör-Blitz: Wort wird vorgelesen (Web Speech API, fr-FR), Kind wählt deutsche Bedeutung 2) Lese-Blitz: Franz. Wort + Lautschrift wird angezeigt, Kind wählt Übersetzung 3) Übersetzungs-Blitz: Deutsch → Französisch Themen: Tiere, Farben, Zahlen, Familie, Körper, Essen. 8 Aufgaben pro Runde. Multiple Choice. Pause von 1.5 Sek vor Weiter-Button (Prinzip: Verstehen vor Reagieren). Automatisches Vorlesen bei richtiger/falscher Antwort. Zyklus 1–2, neurodivergent-freundlich.
Schweizer Kantone und Hauptorte — Antwort eingeben oder auf einer Karte zeigen.
Schweizer Kantone Quiz: Kanton wird angezeigt, Kind gibt den Hauptort ein (oder umgekehrt). Tipp-Funktion nach 2 Fehlversuchen. Alle 26 Kantone, speicherbare Fortschritte. Zyklus 2–3.
Fertige HTML-Vorlage zum direkten Weiterverwenden
Die Vorlage enthält das komplette Design-System (Farben, Schriften, Animationen), eine Fortschrittsanzeige, Karten, Buttons, Feedback-Blöcke und einen Abschluss-Screen — alles kommentiert und fertig zum Anpassen.
Warum die Apps so gestaltet sind, wie sie sind — Erkenntnisse aus der Lernpsychologie und Sonderpädagogik
Unser Gedächtnis arbeitet in drei Stufen: Wahrnehmungsspeicher, Arbeitsgedächtnis und Langzeitgedächtnis. Die zentrale Engstelle ist das Arbeitsgedächtnis – Erwachsene verfügen über ca. 7 Speicherplätze, Kinder über weniger, ADHS-Kinder möglicherweise nur über 3–5 Informationseinheiten. Werden zu viele Informationen zu schnell präsentiert, werden die überzähligen einfach «herausgeworfen».
Maximal 3–5 Elemente pro Bildschirm. Klare, reizarme Oberfläche. Eine Aufgabe, eine Anweisung – nicht mehr.
Bereits einen Tag nach dem Einprägen ist ein grosser Teil des Gelernten wieder vergessen. Auf neuronaler Ebene gilt: Durch wiederholte Aktivierung werden Synapsen physisch stärker – aus einem schmalen Pfad wird eine «Autobahn» (Neurons that fire together wire together). Verbindungen, die nicht genutzt werden, gehen verloren: Use it or lose it.
Spaced Repetition einbauen: zeitlich gestaffelte Wiederholungen (1 Tag → 3 Tage → 1 Woche). Kurze, häufige Übungseinheiten statt langer Sitzungen.
Positive Gefühle öffnen den Filter zum Gedächtnis – Informationen «rutschen durch». Negative Gedanken wie «Das schaffe ich sowieso nicht» blockieren den Lernprozess, bevor er begonnen hat. Die Behaltensrate steigt massiv mit der Aktivierungstiefe: nur gehört 10 %, gesehen 30 %, gehört + gesehen 50 %, darüber gesprochen 70 %, selbst getan 90 %.
Erfolgserlebnisse von Anfang an. Interaktiv statt passiv: tippen, zuordnen, klicken. Fortschritte sichtbar machen, um negative Glaubenssätze zu durchbrechen.
Ca. 5 % aller Kinder sind von ADHS betroffen, bis zu 85 % davon zeigen Lernschwächen. Die Kernsymptome – Unaufmerksamkeit, Hyperaktivität, Impulsivität – führen zu einer besonderen Ausgangslage: geringe Frustrationstoleranz, kurze Aufmerksamkeitsspanne, Versuch-und-Irrtum statt systematischem Vorgehen. Häufige Misserfolge erzeugen einen Teufelskreis aus sinkender Motivation und steigenden Problemen.
Sofortiges Feedback. Fehler nicht bestrafen, sondern als Lernchance zeigen. Klare Strukturierung, sichtbare nächste Schritte. Kurze Sessions mit Pausen.
Die schulische Praxis überfrachtet Kinder mit Lernschwächen oft: zu viele Erklärungswege, zu viele Übungsformen, zu viele Sinneseindrücke gleichzeitig. Born/Oehler betonen: Die Lernmethoden müssen den Kindern angepasst werden – nicht die Kinder den Methoden. Der visuelle Kanal verarbeitet 10× mehr Information als der akustische und sollte bevorzugt genutzt werden.
Eine Methode pro App, gut umgesetzt. Visuell vor auditiv. Schreiben minimieren (Klicken, Drag-and-Drop statt Freitext). Das Karteikarten-Prinzip digital umsetzen.
Das Karteikarten-System nach Leitner ist eine der bewährtesten Lernmethoden: Visuelles Einprägen, aktives Abrufen und Spaced Repetition in einem. Karten, die beherrscht werden, wandern in grössere Wiederholungsintervalle. Karten mit Fehlern kommen zurück auf Fach 1. Ideal für die digitale Umsetzung – genau das macht der Lernkarten-Generator.
Bewährtes Prinzip aus der Förderpraxis direkt in die App-Logik übersetzen. Fortschritt durch Fächer-System visualisieren. Individuelles Tempo ermöglichen.
Das Arbeitsgedächtnis kann nur 3–5 Chunks für ca. 10–20 Sekunden verarbeiten. Die CLT unterscheidet drei Belastungsarten: Extraneous Load (schädlich – schlechtes Design), Intrinsic Load (Stoffkomplexität) und Germane Load (gute Lernanstrengung). Ziel: Extraneous minimieren, Intrinsic segmentieren, Germane maximieren. Hatties Daten zeigen: Scaffolding (d=0.82) und Direkte Instruktion (d=0.60) wirken. Entdeckendes Lernen (d=0.21) ist für Kinder mit Lernschwächen weitgehend ineffektiv.
Jedes Element muss dem Lernen dienen – kein visuelles Rauschen. Worked Examples vor freiem Üben. Scaffolding → Fading: mit maximaler Hilfe starten, dann schrittweise reduzieren. Sofortiges Feedback nach jeder Aufgabe.
Das LRI-Modell übersetzt die Cognitive Load Theory in fünf praktische Schritte: 1) Schwierigkeit reduzieren (Mikro-Schritte), 2) Scaffolding und gelöste Beispiele, 3) Stark angeleitetes Üben, 4) Sofortiges konstruktives Feedback, 5) Erst wenn automatisiert: schrittweise in die Selbstständigkeit (Guided Independence). Der Expertise Reversal Effect zeigt: Was für Anfänger hilft, kann Fortgeschrittene bremsen – deshalb brauchen Apps adaptive Schwierigkeitsstufen.
Lernstoff in Chunks zerlegen. Zuerst zeigen, dann üben lassen. Schwierigkeitsstufen anbieten, die sich dem Lernstand anpassen. Hilfe schrittweise ausblenden (Fading).
Born, A. & Oehler, C. (2023). Lernen mit ADHS-Kindern. 12. Auflage. Kohlhammer. · Sweller, J. (1988). Cognitive Load Theory. · Hattie, J. (2009). Visible Learning. · Martin, A. & Evans, P. (2020). Load Reduction Instruction. — Detaillierte Zusammenfassungen im Ordner fachliche-inputs/.
Erfahrungen aus der Praxis
Je genauer du die Aufgaben beschreibst, desto besser. Schreib 5–10 Beispiel-Aufgaben direkt in den Prompt: "z.B. 8+5=13, 7+6=13, 9+4=13". Die KI übernimmt das Muster.
Lass die App generieren, teste sie, und schreib dann Verbesserungen: "Mach die Buttons grösser", "Zeig den Fortschritt prominenter", "Füge einen Zeitdruck-Modus hinzu".
Öffne die .html-Datei auf dem iPad oder Tablet deiner Schüler:innen. Die Vorlage ist Mobile-first — bei Problemen schreib der KI: "Optimiere für Touch-Bedienung auf iPad".
Erkläre der KI den pädagogischen Hintergrund: "Bei falscher Antwort soll die richtige Lösung mit einer visuellen Erklärung erscheinen". KI-Tools verstehen Didaktik.
Die CSS-Variablen können verändert werden. Schreib "ändere --primary auf #4A90D9 für ein blaues Thema" — alle Buttons und Highlights passen sich automatisch an.
Speichere jede funktionierende Version unter einem neuen Namen (app-v1.html, app-v2.html). So kannst du jederzeit zu einer früheren Version zurück.