Praxisguide: Vibe Coding mit KI im Schulalltag – Von der Idee zur interaktiven Web-App

By:  Oktober 17, 2025 Kategorien: , , ,  Schlagworte: , , , , , , 
Praxisguide: Vibe Coding mit KI im Schulalltag – Von der Idee zur interaktiven Web-App

Einleitung: Programmieren ohne Code? Eine Einführung in die Welt des Vibe Coding

1.1 Was ist “Vibe Coding”? Die Vision als Quellcode.

Stell dir vor, du hast eine brillante Idee für eine App, die dir und deinen Mitschülern das Leben erleichtern könnte. Bisher stand zwischen dieser Idee und der Realität eine hohe Hürde: das Erlernen komplexer Programmiersprachen. Diese Hürde wird nun durch einen revolutionären Ansatz namens “Vibe Coding” deutlich niedriger. Der Begriff, geprägt vom KI-Forscher Andrej Karpathy, beschreibt eine neue Art der Softwareentwicklung, bei der man sich voll und ganz auf die “Vibes” – also die Vision und das Gefühl – eines Projekts einlässt und fast vergisst, dass darunter überhaupt Code existiert.1

Inhalt

Die Kernidee ist verblüffend einfach und zugleich kraftvoll: Du beschreibst deine Vision in natürlicher Sprache, so als würdest du sie einem Kollegen erklären, und eine künstliche Intelligenz wie Google Gemini übersetzt diese Beschreibung in funktionierenden Code.2 Vibe Coding demokratisiert damit die Softwareentwicklung und macht sie auch für Menschen zugänglich, die keine traditionelle Programmierausbildung haben.3 Karpathys frühere Behauptung, die “heißeste neue Programmiersprache sei Englisch”, wird hier zur gelebten Realität.1 Es geht nicht mehr nur darum, einer Maschine präzise, syntaktisch korrekte Befehle zu geben, sondern darum, eine kreative Partnerschaft mit einer KI einzugehen, die deine Ideen versteht und umsetzt.

Dieser Wandel verändert die Anforderungen an digitale Kreativität fundamental. Es geht nicht mehr allein um logisch-syntaktische Fähigkeiten, also das korrekte Schreiben von Code. Vielmehr rückt eine Kombination aus anderen Kompetenzen in den Vordergrund: die Fähigkeit, eine kreative Vision klar und präzise in Worte zu fassen, und die Kompetenz, das Ergebnis kritisch zu bewerten. Die Kommunikation mit der Maschine wird zu einem Dialog, bei dem sprachliche Genauigkeit entscheidend für den Erfolg ist.6

1.2 Der Paradigmenwechsel: Vibe Coding vs. Klassisches Programmieren.

Um zu verstehen, wie tiefgreifend dieser Wandel ist, lohnt sich ein direkter Vergleich. Klassisches Programmieren ist eine hochpräzise Disziplin. Jeder Befehl, jedes Semikolon und jede Klammer muss exakt an der richtigen Stelle stehen, damit das Programm funktioniert. Es erfordert das Erlernen und die Beherrschung starrer syntaktischer Regeln und logischer Strukturen.8

Vibe Coding hingegen ist konversationell und iterativ. Der Fokus verschiebt sich vom Schreiben jeder einzelnen Codezeile hin zur Führung eines KI-Assistenten in einem übergeordneten Dialog.9 Deine Rolle ändert sich von der eines Handwerkers, der jeden Ziegel selbst setzt, zu der eines Architekten oder Regisseurs, der die Vision vorgibt, Anweisungen erteilt, das Ergebnis testet und Feedback zur Verbesserung gibt.1

Es ist jedoch wichtig, realistische Erwartungen zu haben. Während einfache Apps und Prototypen oft vollständig durch “Vibes” erstellt werden können, erfordern komplexe, sichere und skalierbare Anwendungen, die von Tausenden von Menschen genutzt werden sollen, nach wie vor tiefgreifende Programmierkenntnisse und Präzision.3 Vibe Coding ist also kein vollständiger Ersatz für klassisches Programmieren, sondern eine unglaublich mächtige Ergänzung und ein Einstiegspunkt.

1.3 Warum das für dich als Schüler relevant ist: Kreativität entfesseln.

Genau hier liegt die enorme Chance für dich als Schüler. Vibe Coding reißt die Mauern ein, die bisher viele kreative Köpfe von der Umsetzung ihrer digitalen Ideen abgehalten haben. Es ist ein Werkzeug zur Demokratisierung der Entwicklung 5, das es dir ermöglicht, schnell von einer Idee zu einem funktionierenden Prototyp zu gelangen, ohne dich monatelang in die Tiefen einer Programmiersprache einarbeiten zu müssen.5

Egal, ob du im Kunstkurs eine interaktive Galerie für deine Werke erstellen, im Geschichtsunterricht eine Zeitleisten-App bauen oder für deine Lerngruppe einen Vokabeltrainer entwickeln möchtest – mit Vibe Coding kannst du diese Ideen in Minuten oder Stunden statt in Wochen oder Monaten zum Leben erwecken. Es fördert eine Kultur des Experimentierens und des schnellen Lernens. Du musst nicht mehr wissen, wie ein Motor im Detail funktioniert, um Auto zu fahren. Ähnlich kannst du nun Software erschaffen, indem du beschreibst, wohin die Reise gehen soll. Dieser Guide wird dir zeigen, wie du das Steuer in die Hand nimmst.

2. Das Werkzeug des Vibe Coders: Google Gemini als Kreativpartner verstehen

Um erfolgreich mit Gemini “vibe-coden” zu können, musst du lernen, wie man effektiv mit einer KI kommuniziert. Das Herzstück dieser Kommunikation ist der “Prompt” – deine Anweisung an das Modell. Die Qualität deiner App wird direkt von der Qualität deiner Prompts abhängen.

2.1 Die Kunst des “Promptings”: Wie du mit der KI sprichst.

Ein guter Prompt ist mehr als nur eine Frage oder ein Befehl. Er ist eine detaillierte Anweisung, die der KI alles gibt, was sie braucht, um deine Vision zu verstehen und umzusetzen. Die folgenden Prinzipien sind entscheidend für die Erstellung von hochwertigem Code.

  • Sei klar und präzise: Vermeide zweideutige oder vage Formulierungen. Anstatt zu sagen “Mach eine Liste”, sei spezifisch: “Erstelle eine ungeordnete HTML-Liste (<ul>) mit fünf Listenelementen (<li>), die die Namen von fünf europäischen Hauptstädten enthalten.”.12
  • Gib Kontext: Erkläre immer den Zweck und die Zielgruppe deiner Anwendung. Anstatt zu fordern “Programmiere einen Timer”, gib Kontext: “Erstelle einen einfachen Countdown-Timer für Schülerpräsentationen. Er soll auf 5 Minuten voreingestellt sein und in den letzten 30 Sekunden die Farbe des Displays auf ein warnendes Rot ändern. Dies hilft den Vortragenden, ihre Zeit im Auge zu behalten.”.12
  • Definiere eine Persona: Weise Gemini eine Expertenrolle zu. Das verbessert die Qualität und den Stil des generierten Codes erheblich. Beginne deinen Prompt mit einer Anweisung wie: “Du bist ein erfahrener Webentwickler, der sich auf barrierefreies und responsives HTML und CSS spezialisiert hat. Deine Aufgabe ist es, eine saubere und semantisch korrekte Webseite zu erstellen.”.13
  • Zerlege komplexe Aufgaben: Versuche nicht, eine komplexe Anwendung in einem einzigen, riesigen Prompt zu erstellen. Das überfordert die KI und führt zu fehlerhaftem oder unvollständigem Code. Zerlege die Aufgabe in logische, kleinere Schritte. Beginne mit der Grundstruktur, füge dann Funktionen hinzu und kümmere dich zum Schluss um das Design.12
  • Gib Beispiele (Few-Shot Prompting): Eine der mächtigsten Techniken ist es, der KI zu zeigen, was du erwartest. Gib ihr ein kleines Beispiel für den gewünschten Output. Zum Beispiel: “Formatiere die Antwort als JSON-Objekt. Hier ist ein Beispiel: {‘fach’: ‘Mathe’, ‘aufgabe’: ‘Satz des Pythagoras lernen’}. Erstelle nun drei weitere solcher Objekte für die Fächer Deutsch, Englisch und Biologie.”.16

2.2 Der iterative Dialog: Vom ersten Entwurf zur fertigen App.

Vibe Coding ist selten ein einmaliger Befehl. Es ist ein dynamischer, dialogorientierter Prozess. Du beginnst mit einem ersten Entwurf, den die KI generiert, und verfeinerst ihn dann schrittweise durch gezieltes Feedback. Sieh es als ein Gespräch, bei dem du die Richtung vorgibst.9

Hier sind einige Beispiele für typische Folge-Prompts in einem solchen Dialog:

  • Verfeinerung des Designs: “Das Grundgerüst ist gut, aber lass uns das Design anpassen. Verwende die Schriftart ‘Lato’ von Google Fonts und setze die Primärfarbe auf ein dunkles Blau (#003366). Der Hintergrund soll ein sehr helles Grau (#f4f4f4) sein.”
  • Hinzufügen von Funktionalität: “Füge unter der Liste einen Button mit der Aufschrift ‘Liste leeren’ hinzu. Wenn man darauf klickt, sollen alle Einträge aus der To-Do-Liste entfernt werden.”
  • Fehlerbehebung (Debugging): “Der ‘Hinzufügen’-Button funktioniert nicht, wenn ich das Eingabefeld leer lasse. Bitte füge eine Überprüfung in der JavaScript-Funktion hinzu, die sicherstellt, dass nur nicht-leere Aufgaben zur Liste hinzugefügt werden können.”.8

2.3 Die Anatomie eines perfekten Code-Prompts.

Um dir den Einstieg zu erleichtern, kannst du die folgende Vorlage als Checkliste für deine ersten, umfassenden “Master-Prompts” verwenden. Ein gut strukturierter erster Prompt legt den Grundstein für das gesamte Projekt.

  1. Rolle/Persona: Beginne damit, der KI ihre Rolle zuzuweisen.
  • Beispiel: Du bist ein professioneller Full-Stack-Webentwickler mit Expertise in modernem HTML5, CSS3 und Vanilla JavaScript.
  1. Aufgabe/Ziel: Beschreibe klar und deutlich, was erstellt werden soll.
  • Beispiel: Deine Aufgabe ist es, eine interaktive Single-Page-Webanwendung zu erstellen.
  1. Kontext/Nutzen: Erkläre, wofür die App gedacht ist und wer sie nutzen wird.
  • Beispiel: Diese App soll Schülern helfen, ihre Hausaufgaben zu organisieren. Sie soll einfach und intuitiv zu bedienen sein.
  1. Technologie-Stack & Struktur: Lege die technischen Rahmenbedingungen fest.
  • Beispiel: Benutze ausschließlich HTML, CSS und JavaScript. Fasse den gesamten Code (HTML, CSS innerhalb von <style>-Tags und JavaScript innerhalb von <script>-Tags) in einer einzigen HTML-Datei zusammen. Das erleichtert das Teilen und Ausführen.
  1. Features & Funktionalität: Liste die konkreten Funktionen auf, die die App haben soll.
  • Beispiel: Die App muss folgende Elemente enthalten: 1. Eine Überschrift ‘Meine Hausaufgaben’. 2. Ein Texteingabefeld, um eine neue Aufgabe einzugeben. 3. Einen ‘Hinzufügen’-Button. 4. Eine ungeordnete Liste, in der die hinzugefügten Aufgaben angezeigt werden. Jede Aufgabe in der Liste soll einen ‘Erledigt’-Button haben, der die Aufgabe durchstreicht.
  1. Design/Stil: Mache Vorgaben zum visuellen Erscheinungsbild.
  • Beispiel: Das Design soll minimalistisch und sauber sein. Verwende ein zentriertes Layout mit einer maximalen Breite von 800px. Die erledigten Aufgaben sollen grau und durchgestrichen dargestellt werden.
  1. Format der Antwort: Sage der KI, wie sie den Code ausgeben soll.
  • Beispiel: Gib mir den vollständigen und sofort lauffähigen Code in einem einzigen Code-Block aus.

Tabelle: Prompting-Strategien für bessere Ergebnisse

Diese Tabelle dient als schnelle Referenz, um die wichtigsten Techniken des Promptings zu verinnerlichen. Sie zeigt den Unterschied zwischen ineffektiven und effektiven Anweisungen und hilft dir, deine Kommunikation mit Gemini zu meistern.

StrategieBeschreibungNegativbeispiel (Ineffektiv)Positivbeispiel (Effektiv)
Persona ZuweisenWeise der KI eine Expertenrolle zu, um die Qualität und den Stil der Antwort zu steuern.Schreib Code für eine Webseite.Du bist ein erfahrener Webentwickler. Erstelle eine Landing-Page für ein Schulprojekt. Benutze modernes HTML5 und CSS3.
Kontext GebenErkläre den Zweck und die Zielgruppe der Anwendung, damit die KI bessere Design- und Funktionsentscheidungen trifft.Mach einen Rechner.Erstelle einen einfachen Taschenrechner für den Mathematikunterricht der 7. Klasse. Er soll die Grundrechenarten beherrschen und ein klares, gut lesbares Display haben.
Spezifisch seinGib genaue Anweisungen zu Features, Layout und Technologien. Vermeide vage Begriffe.Füge ein Bild hinzu.Füge im Header-Bereich ein Bild namens ‘logo.png’ ein. Es soll zentriert sein und eine maximale Breite von 150px haben.
Iterativ VorgehenZerlege eine große Aufgabe in kleinere, logische Schritte und verfeinere das Ergebnis schrittweise.Baue mir eine komplette Lernplattform.1. Erstelle zuerst nur die Login-Seite mit Feldern für Nutzername und Passwort. 2. [Nach Erfolg] Erstelle jetzt das Dashboard, das nach dem Login erscheint.
Beispiele LiefernZeige der KI ein Beispiel (Few-Shot), um das gewünschte Format oder den Stil zu verdeutlichen.Gib mir eine Liste von Hauptstädten.Formatiere die Antwort als JSON-Objekt. Beispiel: {“Land”: “Deutschland”, “Hauptstadt”: “Berlin”}. Gib mir jetzt die Hauptstädte von Frankreich und Spanien.

3. Verantwortungsvolles Viben: Chancen, Grenzen und die Rolle des Menschen

Vibe Coding ist ein mächtiges Werkzeug, aber wie bei jedem Werkzeug kommt es darauf an, wie man es einsetzt. Es ist entscheidend, sowohl die enormen Chancen als auch die potenziellen Risiken zu verstehen. Deine Rolle ist nicht die eines passiven Befehlsempfängers, sondern die eines kritischen und verantwortungsbewussten Schöpfers.

3.1 Die Superkraft des Prototyping: Ideen in Minuten testen.

Der größte und unmittelbarste Vorteil des Vibe Coding ist die Geschwindigkeit. Du kannst eine Idee, die dir morgens unter der Dusche kommt, noch vor der Mittagspause als funktionierenden Prototyp auf dem Bildschirm haben.3 Dieser Prozess des “Rapid Prototyping” ist in der professionellen Softwareentwicklung von unschätzbarem Wert und nun auch für dich zugänglich.

Es ermöglicht dir, Konzepte schnell zu visualisieren, Feedback von Freunden oder Lehrern einzuholen und deine Ideen zu testen, ohne dich in den Details der Implementierung zu verlieren. Dieser Ansatz fördert eine “Fail fast, learn faster”-Mentalität: Es ist in Ordnung, wenn eine Idee nicht funktioniert, denn du hast nur wenige Stunden investiert, nicht mehrere Wochen. Das befreit die Kreativität und ermutigt zum Experimentieren.

3.2 Die Fallstricke: Bugs, Sicherheitslücken und der “Copy-Paste”-Trugschluss.

Bei aller Begeisterung ist es unerlässlich, die Augen vor den Nachteilen nicht zu verschließen. Blindes Vertrauen in KI-generierten Code ist naiv und gefährlich.

  • Sicherheitsrisiken und Bugs: KI-Modelle sind nicht unfehlbar. Sie können Code generieren, der subtile Fehler (Bugs) oder sogar ernsthafte Sicherheitslücken enthält.4 Eine App, die zum Beispiel Passwörter unverschlüsselt speichert, mag auf den ersten Blick funktionieren, stellt aber ein enormes Risiko dar. Der Debugging-Prozess – die Suche und Behebung von Fehlern – bleibt eine wesentliche Fähigkeit.4
  • Verlust des Verständnisses: Die größte Gefahr des Vibe Coding ist die Entstehung einer “Black Box”. Du hast eine funktionierende App, aber keine Ahnung, warum sie funktioniert. Dies führt zu einer gefährlichen Abhängigkeit und verhindert echtes Lernen.4 Der Programmierer Simon Willison hat diesen Punkt treffend formuliert: “Wenn eine KI jede Zeile deines Codes geschrieben hat, du aber alles überprüft, getestet und verstanden hast, ist das in meinen Augen kein Vibe Coding – das ist die Verwendung einer KI als Tipp-Assistent.”.1 Das Ziel sollte es sein, die KI als Assistenten zu nutzen, nicht als Ersatz für das eigene Denken.

Diese schnelle Erfolgserfahrung kann zu einer “Illusion der Kompetenz” führen. Man glaubt, man beherrsche die Softwareentwicklung, obwohl man eigentlich nur gelernt hat, einer KI Anweisungen zu geben. Diese Überschätzung kann dazu führen, dass man die notwendige Sorgfalt bei der Überprüfung des Codes vernachlässigt und fehlerhafte oder unsichere Anwendungen erstellt. Die pädagogische Herausforderung besteht also nicht nur darin, das Prompting zu lehren, sondern eine disziplinierte Haltung des “Misstrauens und Überprüfens” zu kultivieren. Jede Unterrichtseinheit, die generative KI zur Erstellung von Inhalten nutzt, sollte daher mindestens die Hälfte der Zeit auf das Testen, Debuggen und die kritische Analyse des KI-Outputs verwenden.

3.3 Du bist der Kapitän: Warum menschliche Aufsicht entscheidend ist.

Stell dir die KI als einen unglaublich fähigen, schnellen und sachkundigen Ersten Offizier auf deinem Schiff vor. Sie kann die Segel setzen, den Kurs berechnen und das Deck schrubben. Aber du bist und bleibst der Kapitän. Du triffst die endgültigen Entscheidungen, übernimmst die Verantwortung und stellst sicher, dass das Schiff sicher im Hafen ankommt.

Für deine Arbeit mit Vibe Coding bedeutet das, einen verantwortungsvollen Workflow zu etablieren:

  1. Prompt (Die Vision formulieren): Beschreibe deine Idee so klar und detailliert wie möglich.
  2. Generate (Den Entwurf erstellen lassen): Lass Gemini den ersten Code-Entwurf generieren.
  3. Test (Gründlich ausprobieren): Führe den Code sofort aus. Öffne die HTML-Datei in deinem Browser. Klicke auf jeden Button. Gib Text in jedes Feld ein. Teste die Grenzfälle: Was passiert, wenn du nichts eingibst? Was passiert, wenn du Buchstaben statt Zahlen eingibst? Funktioniert alles wie erwartet?
  4. Validate & Understand (Überprüfen & Verstehen): Schau dir den generierten Code an. Du musst nicht jede Zeile sofort perfekt verstehen, aber versuche, die Struktur zu erkennen. Wo ist der HTML-Teil? Wo ist das CSS für das Aussehen? Wo ist die JavaScript-Logik? Nutze Gemini als deinen persönlichen Tutor: Markiere einen Code-Abschnitt und frage: “Erkläre mir diesen JavaScript-Teil Zeile für Zeile in einfachen Worten.”.18
  5. Refine (Verfeinern und korrigieren): Gib Gemini auf Basis deiner Tests und deines Verständnisses gezieltes Feedback zur Verbesserung (“Ändere das so, dass…”) oder, wenn du dich traust, korrigiere kleine Fehler direkt selbst im Code.

Dieser Kreislauf aus Anweisen, Testen und Verstehen ist der Schlüssel, um Vibe Coding nicht nur als Abkürzung, sondern als echtes Lernwerkzeug zu nutzen.

4. Praxis-Werkstatt: 10 Nützliche HTML-Apps für den Schulalltag

Jetzt geht es ans Eingemachte! In diesem Abschnitt findest du 10 konkrete Projektideen, die du direkt mit Gemini umsetzen kannst. Jedes Projekt ist darauf ausgelegt, einen echten Nutzen für deinen Schulalltag zu haben. Wir folgen dabei immer der gleichen Struktur: Idee & Nutzen, der “Master-Prompt” für den Start, ein beispielhafter Dialog zur Verfeinerung und schließlich der fertige, kommentierte Code, den du direkt verwenden kannst.

Projekt 1: Der “Vokabel-Blitz” – Ein interaktiver Vokabeltrainer

  • Die Idee & der Nutzen: Ein einfaches, aber effektives Werkzeug zum Lernen von Vokabeln. Anstatt nur passiv Listen zu lesen, kannst du dich aktiv selbst abfragen. Du gibst eine Liste von Vokabelpaaren ein, die App zeigt dir ein Wort an und du musst die Übersetzung wissen. Mit einem Klick deckst du die Antwort auf und kannst selbst bewerten, ob du es wusstest. Das aktive Abrufen von Informationen (Active Recall) ist eine der nachweislich besten Lernmethoden.
  • Der Master-Prompt:

Du bist ein erfahrener Webentwickler und sollst einen interaktiven Vokabeltrainer als Single-Page-Webanwendung erstellen. Benutze ausschließlich HTML, CSS und JavaScript und fasse alles in einer einzigen HTML-Datei zusammen.
Anforderungen:

  1. Struktur: Die App soll eine große “Karteikarte” in der Mitte des Bildschirms anzeigen. Darüber soll eine Überschrift “Vokabel-Blitz” stehen.
  2. Funktionalität:
  • Die Karteikarte zeigt anfangs eine Vokabel auf Deutsch an.
  • Wenn man auf die Karteikarte klickt, soll sie sich “umdrehen” (z.B. durch eine Animation) und die englische Übersetzung anzeigen. Ein erneuter Klick dreht sie zurück.
  • Unter der Karteikarte soll es zwei Buttons geben: “Ich wusste es” und “Ich wusste es nicht”.
  • Wenn einer der Buttons geklickt wird, soll die nächste zufällige Vokabel aus der Liste angezeigt werden.
  • Es soll einen Zähler geben, der anzeigt “Richtige: X | Falsche: Y”. Dieser soll sich entsprechend der geklickten Buttons aktualisieren.
  1. Daten: Verwende für den Anfang eine vordefinierte JavaScript-Array mit mindestens 10 deutsch-englischen Vokabelpaaren zum Thema “Schule”.
  2. Design: Das Design soll sauber, minimalistisch und ansprechend sein. Die Karteikarte soll einen leichten Schatten haben, um sie vom Hintergrund abzuheben. Die Buttons sollen klar beschriftet und einfach zu klicken sein. Zentriere die gesamte App horizontal und vertikal auf der Seite.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User (nach dem ersten Entwurf): “Das ist super! Füge bitte noch einen ‘Neustart’-Button hinzu, der die Zähler für ‘Richtige’ und ‘Falsche’ wieder auf 0 setzt und eine neue Vokabel anzeigt.”
  • User: “Die ‘Umdreh’-Animation ist noch etwas ruckelig. Kannst du eine flüssigere CSS-Transition für den Flip-Effekt einbauen?”
  • User: “Ich möchte, dass die App mir am Ende, nachdem alle Vokabeln einmal durchlaufen wurden, eine Erfolgsmeldung anzeigt, z.B. ‘Super! Du hast 8 von 10 Vokabeln gewusst!’.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Vokabel-Blitz</title>
    <style>
        /* Grundlegende Stile für die Seite und Schriftart */
        body {
            font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
            margin: 0;
            text-align: center;
        }
        /* Container für die gesamte App */
      .app-container {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 400px;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        /* Stile für die Karteikarte und den Flip-Effekt */
      .flashcard-container {
            perspective: 1000px;
            margin-bottom: 20px;
        }
      .flashcard {
            width: 100%;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            cursor: pointer;
        }
      .flashcard.is-flipped {
            transform: rotateY(180deg);
        }
      .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
      .card-front {
            background-color: #ffffff;
            border: 1px solid #ddd;
            color: #333;
        }
      .card-back {
            background-color: #e8f4f8;
            color: #005f73;
            transform: rotateY(180deg);
        }
        /* Stile für die Buttons */
      .controls,.score-controls {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        button {
            padding: 12px 20px;
            font-size: 1rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.1s;
        }
        button:active {
            transform: scale(0.98);
        }
        #correct-btn {
            background-color: #2a9d8f;
            color: white;
        }
        #incorrect-btn {
            background-color: #e76f51;
            color: white;
        }
        #restart-btn {
            background-color: #fca311;
            color: white;
            width: 100%;
        }
        /* Stile für den Punktestand */
        #score {
            font-size: 1.2rem;
            font-weight: bold;
            color: #555;
        }
    </style>
</head>
<body>

<div class=”app-container”>
    <h1>Vokabel-Blitz</h1>
    <div class=”flashcard-container”>
        <div class=”flashcard” id=”flashcard”>
            <div class=”card-face card-front” id=”card-front”></div>
            <div class=”card-face card-back” id=”card-back”></div>
        </div>
    </div>
    <div class=”controls”>
        <button id=”correct-btn”>Ich wusste es</button>
        <button id=”incorrect-btn”>Ich wusste es nicht</button>
    </div>
    <div id=”score”>Richtige: 0 | Falsche: 0</div>
    <div class=”score-controls” style=”margin-top: 20px;”>
        <button id=”restart-btn”>Neustart</button>
    </div>
</div>

<script>
    // — DATEN —
    // Hier kannst du deine eigenen Vokabeln eintragen!
    const vocabulary =;

    // — VARIABLEN & DOM-ELEMENTE —
    let currentCardIndex = -1;
    let correctCount = 0;
    let incorrectCount = 0;
    let remainingVocab = […vocabulary]; // Kopie des Arrays für die aktuelle Runde

    const flashcard = document.getElementById(‘flashcard’);
    const cardFront = document.getElementById(‘card-front’);
    const cardBack = document.getElementById(‘card-back’);
    const correctBtn = document.getElementById(‘correct-btn’);
    const incorrectBtn = document.getElementById(‘incorrect-btn’);
    const restartBtn = document.getElementById(‘restart-btn’);
    const scoreDisplay = document.getElementById(‘score’);

    // — FUNKTIONEN —

    // Funktion, um den Punktestand zu aktualisieren
    function updateScore() {
        scoreDisplay.textContent = `Richtige: ${correctCount} | Falsche: ${incorrectCount}`;
    }

    // Funktion, um eine neue, zufällige Vokabel anzuzeigen
    function showNextCard() {
        // Karte zurückdrehen, falls sie aufgedeckt war
        flashcard.classList.remove(‘is-flipped’);

        // Prüfen, ob noch Vokabeln übrig sind
        if (remainingVocab.length === 0) {
            cardFront.textContent = ‘Super!’;
            cardBack.textContent = `Du hast ${correctCount} von ${vocabulary.length} gewusst!`;
            flashcard.classList.add(‘is-flipped’);
            correctBtn.disabled = true;
            incorrectBtn.disabled = true;
            return;
        }

        // Zufälligen Index auswählen und Vokabel aus dem verbleibenden Pool entfernen
        const randomIndex = Math.floor(Math.random() * remainingVocab.length);
        const currentCard = remainingVocab[randomIndex];
        remainingVocab.splice(randomIndex, 1); // Entfernt die Vokabel, damit sie nicht doppelt kommt

        // Text auf der Karteikarte aktualisieren
        cardFront.textContent = currentCard.de;
        cardBack.textContent = currentCard.en;
    }
   
    // Funktion, um das Spiel neu zu starten
    function restartGame() {
        correctCount = 0;
        incorrectCount = 0;
        remainingVocab = […vocabulary];
        correctBtn.disabled = false;
        incorrectBtn.disabled = false;
        updateScore();
        showNextCard();
    }

    // — EVENT LISTENERS —

    // Klick auf die Karteikarte zum Umdrehen
    flashcard.addEventListener(‘click’, () => {
        flashcard.classList.toggle(‘is-flipped’);
    });

    // Klick auf den “Ich wusste es”-Button
    correctBtn.addEventListener(‘click’, () => {
        correctCount++;
        updateScore();
        showNextCard();
    });

    // Klick auf den “Ich wusste es nicht”-Button
    incorrectBtn.addEventListener(‘click’, () => {
        incorrectCount++;
        updateScore();
        showNextCard();
    });
   
    // Klick auf den “Neustart”-Button
    restartBtn.addEventListener(‘click’, restartGame);

    // — INITIALISIERUNG —
    // Das Spiel beim Laden der Seite starten
    restartGame();

</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Kopiere den gesamten Code.
  2. Öffne einen einfachen Texteditor (wie Notepad unter Windows oder TextEdit auf dem Mac).
  3. Füge den Code ein und speichere die Datei unter dem Namen vokabeltrainer.html. Achte darauf, dass die Dateiendung .html und nicht .txt ist.
  4. Öffne die gespeicherte Datei mit einem Webbrowser (z.B. Chrome, Firefox).
  5. Anpassen: Um deine eigenen Vokabeln zu lernen, musst du nur den const vocabulary = […] Teil im <script>-Bereich am Ende der Datei bearbeiten. Füge einfach deine eigenen { de: “…”, en: “…” } Paare hinzu oder ersetze die vorhandenen.

Projekt 2: Der “Fokus-Timer” (Pomodoro-Technik)

  • Die Idee & der Nutzen: Die Pomodoro-Technik ist eine bewährte Methode für Zeitmanagement, die konzentriertes Arbeiten fördert. Man arbeitet 25 Minuten fokussiert an einer Aufgabe und macht dann 5 Minuten Pause. Dieser Timer automatisiert den Prozess, hilft dir, Ablenkungen zu vermeiden und deine Lernzeit effektiv zu strukturieren.
  • Der Master-Prompt:

Du bist ein UI/UX-Designer und Webentwickler. Erstelle einen minimalistischen Pomodoro-Timer als Single-Page-Webanwendung. Nutze HTML, CSS und JavaScript in einer einzigen Datei.
Anforderungen:

  1. Anzeige: In der Mitte der Seite soll groß die verbleibende Zeit im Format MM:SS angezeigt werden (z.B. 25:00).
  2. Buttons: Es soll drei Buttons geben: “Start”, “Pause” und “Reset”.
  3. Funktionalität:
  • Der Timer startet standardmäßig mit einer 25-minütigen Arbeitsphase (“Fokus”).
  • Der “Start”-Button startet den Countdown. Derselbe Button soll zur “Pause”-Funktion wechseln, während der Timer läuft.
  • Der “Reset”-Button setzt den Timer auf den aktuellen Modus zurück (z.B. zurück auf 25:00 in der Fokus-Phase).
  • Nach Ablauf der 25 Minuten soll ein Alarmton (optional, wenn einfach umsetzbar) abgespielt werden und der Timer automatisch in eine 5-minütige Pausenphase (“Pause”) wechseln.
  • Nach Ablauf der 5-minütigen Pause beginnt der Zyklus von vorn.
  1. Visuelles Feedback: Der Hintergrund der Seite soll sich je nach Modus ändern: eine beruhigende Farbe (z.B. hellblau) für die “Fokus”-Phase und eine andere Farbe (z.B. hellgrün) für die “Pause”-Phase. Der Seitentitel im Browser-Tab soll ebenfalls die verbleibende Zeit anzeigen.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Gut, aber der ‘Start’ und ‘Pause’ Button sollten ein einziger Button sein, der seine Beschriftung ändert. Wenn der Timer läuft, soll ‘Pause’ draufstehen, sonst ‘Start’.”
  • User: “Füge eine kleine Anzeige hinzu, die zeigt, in welchem Modus man sich gerade befindet (‘Fokus’ oder ‘Pause’).”
  • User: “Kannst du den Reset-Button so anpassen, dass er nicht nur den Timer, sondern den gesamten Zyklus zurücksetzt, also immer zur 25-Minuten-Fokusphase springt?”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Fokus-Timer</title>
    <style>
        body {
            font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            transition: background-color 0.5s ease;
        }
      .timer-container {
            text-align: center;
            background: rgba(255, 255, 255, 0.9);
            padding: 40px 60px;
            border-radius: 20px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }
        #mode-display {
            font-size: 1.5rem;
            color: #555;
            margin-bottom: 10px;
            font-weight: bold;
        }
        #time-display {
            font-size: 7rem;
            font-weight: 300;
            color: #333;
        }
      .controls button {
            font-size: 1.2rem;
            padding: 10px 30px;
            margin: 10px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            color: white;
            transition: background-color 0.3s, transform 0.1s;
        }
        button:active {
            transform: scale(0.97);
        }
        #start-pause-btn {
            background-color: #4CAF50; /* Grün */
        }
        #reset-btn {
            background-color: #f44336; /* Rot */
        }
        /* Klassen für die Hintergrundfarben */
        body.focus-mode {
            background-color: #d0e1f9; /* Hellblau */
        }
        body.break-mode {
            background-color: #d9f0d3; /* Hellgrün */
        }
    </style>
</head>
<body class=”focus-mode”>

<div class=”timer-container”>
    <div id=”mode-display”>Fokus</div>
    <div id=”time-display”>25:00</div>
    <div class=”controls”>
        <button id=”start-pause-btn”>Start</button>
        <button id=”reset-btn”>Reset</button>
    </div>
</div>

<script>
    const timeDisplay = document.getElementById(‘time-display’);
    const modeDisplay = document.getElementById(‘mode-display’);
    const startPauseBtn = document.getElementById(‘start-pause-btn’);
    const resetBtn = document.getElementById(‘reset-btn’);
    const body = document.body;

    let timer;
    let isRunning = false;
    let isFocusMode = true;
    let secondsRemaining;

    const FOCUS_TIME = 25 * 60;
    const BREAK_TIME = 5 * 60;

    // Initialzeit setzen
    secondsRemaining = FOCUS_TIME;

    function updateDisplay() {
        const minutes = Math.floor(secondsRemaining / 60);
        const seconds = secondsRemaining % 60;
        const displayString = `${minutes.toString().padStart(2, ‘0’)}:${seconds.toString().padStart(2, ‘0’)}`;
        timeDisplay.textContent = displayString;
        document.title = `${displayString} – ${isFocusMode? ‘Fokus’ : ‘Pause’}`;
    }

    function toggleTimer() {
        if (isRunning) {
            pauseTimer();
        } else {
            startTimer();
        }
    }

    function startTimer() {
        isRunning = true;
        startPauseBtn.textContent = ‘Pause’;
        timer = setInterval(() => {
            secondsRemaining–;
            updateDisplay();
            if (secondsRemaining <= 0) {
                switchMode();
            }
        }, 1000);
    }

    function pauseTimer() {
        isRunning = false;
        startPauseBtn.textContent = ‘Start’;
        clearInterval(timer);
    }

    function resetTimer() {
        pauseTimer();
        isFocusMode = true;
        secondsRemaining = FOCUS_TIME;
        modeDisplay.textContent = ‘Fokus’;
        body.classList.remove(‘break-mode’);
        body.classList.add(‘focus-mode’);
        updateDisplay();
    }

    function switchMode() {
        pauseTimer();
        isFocusMode =!isFocusMode;
        secondsRemaining = isFocusMode? FOCUS_TIME : BREAK_TIME;
       
        if (isFocusMode) {
            modeDisplay.textContent = ‘Fokus’;
            body.classList.remove(‘break-mode’);
            body.classList.add(‘focus-mode’);
        } else {
            modeDisplay.textContent = ‘Pause’;
            body.classList.remove(‘focus-mode’);
            body.classList.add(‘break-mode’);
            // Optional: Alarmton abspielen
            // new Audio(‘https://www.soundjay.com/buttons/sounds/button-7.mp3’).play();
        }
       
        updateDisplay();
        // Optional: Timer in der neuen Phase automatisch starten
        // startTimer();
    }

    startPauseBtn.addEventListener(‘click’, toggleTimer);
    resetBtn.addEventListener(‘click’, resetTimer);

    // Initialanzeige aktualisieren
    updateDisplay();
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als fokus-timer.html.
  2. Öffne die Datei in deinem Browser.
  3. Starte den Timer für deine nächste Lerneinheit. Du kannst die Dauer der Fokus- und Pausenzeit anpassen, indem du die Werte der Konstanten FOCUS_TIME und BREAK_TIME im Skript änderst (die Zeit wird in Sekunden angegeben).

Projekt 3: Der “Spickzettel-Generator”

  • Die Idee & der Nutzen: Bei der Vorbereitung auf eine Klassenarbeit oder ein Referat muss man oft lange Texte auf die wichtigsten Kernaussagen reduzieren. Diese App hilft dir dabei. Du kopierst einen Text (z.B. aus Wikipedia) in ein Feld, und die KI extrahiert die wichtigsten Schlüsselwörter oder fasst den Text in Stichpunkten zusammen. Das ist kein Spickzettel zum Schummeln, sondern ein Lernwerkzeug, das dir hilft, Inhalte zu strukturieren und zu verstehen.
  • Der Master-Prompt:

Du bist ein Experte für Webentwicklung und die Integration von KI-APIs. Erstelle eine Web-App namens “Spickzettel-Generator”. Die App soll es Nutzern ermöglichen, einen Text einzufügen und daraus eine Zusammenfassung in Form von Schlüsselwörtern oder Stichpunkten zu erhalten. Da wir in diesem Prototyp noch keine echte API anbinden, soll die Logik simuliert werden.
Anforderungen:

  1. Layout: Die Seite soll zweispaltig sein. Links ein großes <textarea>-Eingabefeld für den Quelltext. Rechts ein Ausgabebereich (<div>), um die Ergebnisse anzuzeigen.
  2. Steuerung: Unter dem Eingabefeld soll ein Button “Zusammenfassen” sein.
  3. Funktionalität (Simuliert):
  • Wenn der Nutzer auf “Zusammenfassen” klickt, soll der Text aus der <textarea> ausgelesen werden.
  • Simulierte Logik: Anstatt einer echten KI-Anfrage, soll das JavaScript eine einfache Analyse durchführen: Es soll alle Wörter extrahieren, die länger als 6 Buchstaben sind, häufige Füllwörter (wie “und”, “der”, “die”, “das”) ignorieren, die Häufigkeit der verbleibenden Wörter zählen und die 10 häufigsten Wörter als Schlüsselwörter im Ausgabebereich anzeigen.
  • Während der “Analyse” soll im Ausgabebereich eine Ladeanimation angezeigt werden, um eine API-Anfrage zu simulieren.
  1. Design: Das Design soll modern und funktional sein. Nutze Flexbox für das zweispaltige Layout. Die Ausgabe der Schlüsselwörter soll als eine Liste von Tags (kleine, abgerundete Boxen) erfolgen.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Die Ladeanimation ist gut. Kannst du sie als rotierenden Kreis (Spinner) mit reinem CSS umsetzen?”
  • User: “Die Liste der Füllwörter (‘stop words’) ist zu kurz. Füge bitte weitere gängige deutsche Füllwörter wie ‘ein’, ‘eine’, ‘in’, ‘zu’, ‘mit’ etc. hinzu.”
  • User: “Füge einen ‘Kopieren’-Button neben der Ausgabe hinzu, der die generierten Schlüsselwörter als kommagetrennte Liste in die Zwischenablage kopiert.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Spickzettel-Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7f9;
            color: #333;
            margin: 0;
            padding: 20px;
        }
      .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
        }
      .main-content {
            display: flex;
            gap: 20px;
        }
      .input-section,.output-section {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        textarea {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            font-size: 1rem;
            resize: vertical;
            box-sizing: border-box;
        }
        button {
            padding: 12px 20px;
            font-size: 1rem;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        #output {
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fafafa;
            min-height: 400px;
            padding: 10px;
            position: relative;
        }
      .loader {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -20px;
            margin-left: -20px;
            display: none; /* Hidden by default */
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
      .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
      .tag {
            background-color: #e0e0e0;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.9rem;
        }
        #copy-btn {
            background-color: #2ecc71;
            margin-left: auto; /* Pushes button to the right */
            display: none; /* Hidden by default */
        }
    </style>
</head>
<body>

<div class=”container”>
    <h1>Spickzettel-Generator</h1>
    <div class=”main-content”>
        <div class=”input-section”>
            <textarea id=”inputText” placeholder=”Füge hier deinen Text ein…”></textarea>
            <button id=”summarize-btn”>Zusammenfassen</button>
        </div>
        <div class=”output-section”>
            <div id=”output”>
                <div class=”loader” id=”loader”></div>
                <div class=”tag-list” id=”tag-list”></div>
            </div>
            <button id=”copy-btn”>Schlüsselwörter kopieren</button>
        </div>
    </div>
</div>

<script>
    const summarizeBtn = document.getElementById(‘summarize-btn’);
    const inputText = document.getElementById(‘inputText’);
    const outputDiv = document.getElementById(‘output’);
    const loader = document.getElementById(‘loader’);
    const tagList = document.getElementById(‘tag-list’);
    const copyBtn = document.getElementById(‘copy-btn’);

    const stopWords = new Set([
        ‘der’, ‘die’, ‘das’, ‘und’, ‘oder’, ‘aber’, ‘in’, ‘im’, ‘zu’, ‘von’, ‘mit’, ‘auf’, ‘für’, ‘als’, ‘ist’,
        ‘sind’, ‘war’, ‘wird’, ‘ein’, ‘eine’, ‘einer’, ‘eines’, ‘sich’, ‘auch’, ‘dass’, ‘an’, ‘es’, ‘sowie’
    ]);

    summarizeBtn.addEventListener(‘click’, () => {
        const text = inputText.value;
        if (text.trim() === ”) {
            alert(‘Bitte gib einen Text ein.’);
            return;
        }

        // UI für Ladevorgang vorbereiten
        tagList.innerHTML = ”;
        loader.style.display = ‘block’;
        copyBtn.style.display = ‘none’;

        // Simuliere eine API-Verzögerung
        setTimeout(() => {
            const keywords = analyzeText(text);
            displayKeywords(keywords);
            loader.style.display = ‘none’;
            if(keywords.length > 0) {
                copyBtn.style.display = ‘block’;
            }
        }, 1500); // 1.5 Sekunden Verzögerung
    });
   
    copyBtn.addEventListener(‘click’, () => {
        const tags = Array.from(tagList.children).map(tag => tag.textContent);
        const textToCopy = tags.join(‘, ‘);
        navigator.clipboard.writeText(textToCopy).then(() => {
            alert(‘Schlüsselwörter in die Zwischenablage kopiert!’);
        }).catch(err => {
            console.error(‘Fehler beim Kopieren: ‘, err);
        });
    });

    function analyzeText(text) {
        // Text in Kleinbuchstaben umwandeln und Satzzeichen entfernen
        const words = text.toLowerCase().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,””).split(/\s+/);
       
        const wordCounts = {};
       
        // Wörter zählen, die keine Füllwörter sind und eine Mindestlänge haben
        words.forEach(word => {
            if (!stopWords.has(word) && word.length > 4) {
                wordCounts[word] = (wordCounts[word] |

| 0) + 1;
            }
        });
       
        // Wörter nach Häufigkeit sortieren
        const sortedKeywords = Object.keys(wordCounts).sort((a, b) => wordCounts[b] – wordCounts[a]);
       
        // Die Top 10 zurückgeben
        return sortedKeywords.slice(0, 10);
    }

    function displayKeywords(keywords) {
        keywords.forEach(keyword => {
            const tag = document.createElement(‘div’);
            tag.className = ‘tag’;
            tag.textContent = keyword;
            tagList.appendChild(tag);
        });
    }
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als spickzettel.html.
  2. Öffne die Datei in deinem Browser.
  3. Kopiere einen beliebigen Text in das linke Feld und klicke auf “Zusammenfassen”, um die wichtigsten Begriffe zu extrahieren. Dies hilft dir, die Struktur und die zentralen Konzepte eines Themas schnell zu erfassen.

(Fortsetzung für die Projekte 4-10 folgt der gleichen detaillierten Struktur)

Projekt 4: Der “Referat-Gliederomat”

  • Die Idee & der Nutzen: Jeder kennt das Problem: Man hat ein Thema für ein Referat, aber weiß nicht, wie man anfangen soll. Eine gute Gliederung ist die halbe Miete. Diese App nimmt dir die erste Hürde, indem sie dir eine logische und bewährte Struktur für dein Referat vorschlägt.
  • Der Master-Prompt:

Erstelle eine einfache Web-App “Referat-Gliederomat”. Sie soll Schülern helfen, eine Grundstruktur für ihre Referate zu erstellen.
Anforderungen:

  1. UI: Ein Eingabefeld für das “Referatsthema” und ein Button “Gliederung erstellen”. Darunter ein Ausgabebereich.
  2. Funktionalität: Wenn der Nutzer ein Thema eingibt und auf den Button klickt, soll im Ausgabebereich eine klassische Gliederungsvorlage angezeigt werden, die das eingegebene Thema dynamisch einsetzt.
  3. Gliederungs-Vorlage:
  1. Einleitung
  • 1.1 Hinführung zum Thema:
  • 1.2 Vorstellung der Gliederung
  1. Hauptteil
  • 2.1 Erster wichtiger Aspekt
  • 2.2 Zweiter wichtiger Aspekt
  • 2.3 Dritter wichtiger Aspekt
  1. Fazit
  • 3.1 Zusammenfassung der Kernaussagen
  • 3.2 Persönliche Stellungnahme / Ausblick
  1. Design: Schlicht und übersichtlich. Verwende eine gut lesbare Schriftart. Der Ausgabebereich soll den Text vorformatiert (<pre>) darstellen, damit die Einrückungen erhalten bleiben.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Füge einen ‘Kopieren’-Button hinzu, der die Gliederung in die Zwischenablage kopiert.”
  • User: “Die Gliederung ist etwas zu allgemein. Kannst du eine zweite, detailliertere Vorlage für ‘Pro- & Contra-Argumentationen’ hinzufügen? Der Nutzer soll über Radio-Buttons auswählen können, welche Vorlage er möchte.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Referat-Gliederomat</title>
    <style>
        body {
            font-family: sans-serif;
            background-color: #f8f9fa;
            color: #212529;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
      .container {
            width: 100%;
            max-width: 700px;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        h1 { text-align: center; }
        input[type=”text”] {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 15px;
        }
        button {
            width: 100%;
            padding: 12px;
            font-size: 1.1rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #output-container {
            margin-top: 20px;
            position: relative;
        }
        pre {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 4px;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 1rem;
            line-height: 1.6;
        }
        #copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #6c757d;
            padding: 5px 10px;
            font-size: 0.8rem;
            width: auto;
            display: none;
        }
    </style>
</head>
<body>
<div class=”container”>
    <h1>Referat-Gliederomat</h1>
    <input type=”text” id=”topic” placeholder=”Gib dein Referatsthema ein…”>
    <button id=”generate-btn”>Gliederung erstellen</button>
    <div id=”output-container”>
        <pre id=”output”></pre>
        <button id=”copy-btn”>Kopieren</button>
    </div>
</div>
<script>
    const generateBtn = document.getElementById(‘generate-btn’);
    const topicInput = document.getElementById(‘topic’);
    const outputPre = document.getElementById(‘output’);
    const copyBtn = document.getElementById(‘copy-btn’);

    generateBtn.addEventListener(‘click’, () => {
        const topic = topicInput.value.trim();
        if (topic === ”) {
            alert(‘Bitte gib ein Thema ein.’);
            return;
        }

        const outline = `
Gliederung für das Referat: “${topic}”

1. Einleitung
  1.1 Hinführung zum Thema / Aktueller Bezug
  1.2 Vorstellung der zentralen Fragestellung
  1.3 Überblick über den Aufbau des Referats

2. Hauptteil
  2.1 Definition wichtiger Begriffe
  2.2 Historischer Kontext / Entstehung
  2.3 Analyse des zentralen Aspekts 1
  2.4 Analyse des zentralen Aspekts 2
  2.5 Beispiel / Fallstudie

3. Fazit
  3.1 Zusammenfassung der Kernaussagen
  3.2 Beantwortung der zentralen Fragestellung
  3.3 Kritische Würdigung / Ausblick
  3.4 Diskussionsanregung für das Plenum
        `;
       
        outputPre.textContent = outline.trim();
        copyBtn.style.display = ‘block’;
    });

    copyBtn.addEventListener(‘click’, () => {
        navigator.clipboard.writeText(outputPre.textContent).then(() => {
            alert(‘Gliederung kopiert!’);
        });
    });
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als gliederung.html.
  2. Öffne die Datei, gib dein Thema ein und erhalte eine solide Startgrundlage, die du dann mit Inhalten füllen kannst.

Projekt 5: Der “Zufallsgenerator für Gruppen”

  • Die Idee & der Nutzen: Gruppenarbeiten im Unterricht sind oft mit der Frage verbunden: “Wer geht mit wem in eine Gruppe?”. Dieser einfache Generator nimmt dem Lehrer die Arbeit ab und sorgt für eine faire, zufällige Aufteilung. Einfach alle Namen der Klasse eingeben, die gewünschte Anzahl an Gruppen festlegen und die App erledigt den Rest.
  • Der Master-Prompt:

Erstelle eine Web-App “Gruppengenerator”.
Anforderungen:

  1. UI:
  • Ein großes <textarea>-Feld, um eine Liste von Namen einzugeben (ein Name pro Zeile).
  • Ein <input type=”number”>-Feld, um die Anzahl der Gruppen festzulegen.
  • Ein Button “Gruppen erstellen”.
  • Ein Ausgabebereich, der die erstellten Gruppen anzeigt.
  1. Funktionalität:
  • Die App liest die Namen aus der Textarea und die Anzahl der Gruppen aus dem Zahlenfeld.
  • Die Namensliste wird zufällig gemischt.
  • Die gemischten Namen werden gleichmäßig auf die angegebene Anzahl von Gruppen verteilt.
  1. Anzeige: Die Gruppen sollen übersichtlich untereinander dargestellt werden, z.B. “Gruppe 1: Max, Lisa, Tom”, “Gruppe 2: Anna, Paul, Susi”.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Das Layout der Ausgabe ist unübersichtlich. Stelle jede Gruppe in einer eigenen Box (Karte) mit einer Überschrift dar.”
  • User: “Füge eine Fehlerbehandlung hinzu. Wenn mehr Gruppen als Personen eingegeben werden, soll eine Warnung erscheinen.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Gruppengenerator</title>
    <style>
        body { font-family: system-ui, sans-serif; background: #f1f3f5; padding: 20px; }
      .container { max-width: 800px; margin: auto; background: white; padding: 25px; border-radius: 10px; }
        textarea { width: 100%; height: 150px; box-sizing: border-box; margin-bottom: 10px; }
      .controls { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
      .controls label { font-weight: bold; }
        input[type=”number”] { width: 80px; padding: 8px; }
        button { flex-grow: 1; padding: 10px; background: #1971c2; color: white; border: none; cursor: pointer; }
        #groups-output { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
      .group-card { border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; background: #f8f9fa; }
      .group-card h3 { margin-top: 0; }
      .group-card ul { padding-left: 20px; margin: 0; }
    </style>
</head>
<body>
<div class=”container”>
    <h2>Zufallsgenerator für Gruppen</h2>
    <textarea id=”names-input” placeholder=”Gib hier alle Namen ein, einen pro Zeile…”></textarea>
    <div class=”controls”>
        <label for=”group-count”>Anzahl der Gruppen:</label>
        <input type=”number” id=”group-count” value=”2″ min=”1″>
        <button id=”generate-btn”>Gruppen erstellen</button>
    </div>
    <div id=”groups-output”></div>
</div>
<script>
    const generateBtn = document.getElementById(‘generate-btn’);
    const namesInput = document.getElementById(‘names-input’);
    const groupCountInput = document.getElementById(‘group-count’);
    const outputDiv = document.getElementById(‘groups-output’);

    generateBtn.addEventListener(‘click’, () => {
        const names = namesInput.value.split(‘\n’).map(name => name.trim()).filter(name => name.length > 0);
        const groupCount = parseInt(groupCountInput.value, 10);

        if (names.length === 0) {
            alert(“Bitte gib Namen ein.”);
            return;
        }
        if (groupCount > names.length) {
            alert(“Die Anzahl der Gruppen kann nicht größer sein als die Anzahl der Personen.”);
            return;
        }

        // Fisher-Yates shuffle algorithm
        for (let i = names.length – 1; i > 0; i–) {
            const j = Math.floor(Math.random() * (i + 1));
            [names[i], names[j]] = [names[j], names[i]];
        }

        const groups = Array.from({ length: groupCount }, () =>);
        names.forEach((name, index) => {
            groups[index % groupCount].push(name);
        });

        displayGroups(groups);
    });

    function displayGroups(groups) {
        outputDiv.innerHTML = ”;
        groups.forEach((group, index) => {
            const card = document.createElement(‘div’);
            card.className = ‘group-card’;
           
            const title = document.createElement(‘h3’);
            title.textContent = `Gruppe ${index + 1}`;
            card.appendChild(title);
           
            const list = document.createElement(‘ul’);
            group.forEach(name => {
                const listItem = document.createElement(‘li’);
                listItem.textContent = name;
                list.appendChild(listItem);
            });
            card.appendChild(list);
           
            outputDiv.appendChild(card);
        });
    }
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als gruppen.html.
  2. Öffne die Datei, füge die Namen deiner Klasse ein und wähle die gewünschte Gruppenzahl für eine schnelle und faire Einteilung.

Projekt 6: Der “Artikel-Trainer” (Der/Die/Das)

  • Die Idee & der Nutzen: Die deutschen Artikel sind für Lernende oft eine Herausforderung. Diese Quiz-App hilft, das Gefühl für den richtigen Artikel zu trainieren. Sie präsentiert ein zufälliges Substantiv, und du musst auf den richtigen Artikel klicken. Sofortiges Feedback hilft, die korrekten Artikel zu verinnerlichen.20
  • Der Master-Prompt:

Erstelle eine Web-App “Der/Die/Das Trainer”.
Anforderungen:

  1. UI:
  • Ein Anzeigebereich für ein zufälliges deutsches Substantiv.
  • Drei Buttons nebeneinander: “Der”, “Die”, “Das”.
  • Ein Feedback-Bereich, der “Richtig!” oder “Falsch!” anzeigt.
  • Ein Punktezähler.
  1. Funktionalität:
  • Die App wählt ein zufälliges Wort aus einer vordefinierten Liste.
  • Der Nutzer klickt auf einen der drei Artikel-Buttons.
  • Die App vergleicht die Auswahl mit der richtigen Lösung.
  • Sie gibt visuelles Feedback (z.B. grüner Text für richtig, roter für falsch) und aktualisiert den Punktestand.
  • Nach dem Feedback wird automatisch das nächste Wort geladen.
  1. Daten: Verwende ein JavaScript-Objekt mit mindestens 15 Substantiven und ihren Artikeln.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Nach einer falschen Antwort soll die richtige Lösung angezeigt werden, z.B. ‘Falsch! Richtig wäre: Die Sonne’.”
  • User: “Die Buttons sollen kurz aufleuchten, je nachdem ob die Antwort richtig (grün) oder falsch (rot) war.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Artikel-Trainer</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; background: #eef2ff; }
      .trainer { text-align: center; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        #word-display { font-size: 3rem; font-weight: bold; margin-bottom: 30px; }
      .article-buttons button { font-size: 1.5rem; padding: 15px 30px; margin: 0 10px; cursor: pointer; border: 2px solid #495057; background: transparent; border-radius: 8px; transition: all 0.2s; }
      .article-buttons button:hover { background: #f1f3f5; }
        #feedback { margin-top: 20px; font-size: 1.2rem; font-weight: bold; height: 30px; }
        #score { margin-top: 10px; font-size: 1rem; color: #6c757d; }
      .correct { color: #28a745; }
      .incorrect { color: #dc3545; }
    </style>
</head>
<body>
<div class=”trainer”>
    <div id=”word-display”></div>
    <div class=”article-buttons”>
        <button data-article=”der”>Der</button>
        <button data-article=”die”>Die</button>
        <button data-article=”das”>Das</button>
    </div>
    <div id=”feedback”></div>
    <div id=”score”>Punkte: 0</div>
</div>
<script>
    const words =;
   
    let currentWord;
    let score = 0;

    const wordDisplay = document.getElementById(‘word-display’);
    const feedbackDiv = document.getElementById(‘feedback’);
    const scoreDisplay = document.getElementById(‘score’);
    const buttons = document.querySelectorAll(‘.article-buttons button’);

    function nextWord() {
        currentWord = words[Math.floor(Math.random() * words.length)];
        wordDisplay.textContent = currentWord.word;
        feedbackDiv.textContent = ”;
        feedbackDiv.className = ”;
    }

    function checkAnswer(selectedArticle) {
        if (selectedArticle === currentWord.article) {
            feedbackDiv.textContent = ‘Richtig!’;
            feedbackDiv.className = ‘correct’;
            score++;
        } else {
            feedbackDiv.textContent = `Falsch! Richtig ist: ${currentWord.article} ${currentWord.word}`;
            feedbackDiv.className = ‘incorrect’;
        }
        scoreDisplay.textContent = `Punkte: ${score}`;
       
        setTimeout(nextWord, 1500);
    }

    buttons.forEach(button => {
        button.addEventListener(‘click’, () => {
            checkAnswer(button.dataset.article);
        });
    });

    nextWord();
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als artikel.html.
  2. Öffne die Datei und trainiere spielerisch die deutschen Artikel. Du kannst die Wortliste im Skript einfach um eigene Wörter erweitern.

Projekt 7: Der “Noten-Rechner”

  • Die Idee & der Nutzen: Wie stehe ich eigentlich in Mathe? Diese Frage lässt sich mit diesem Tool schnell beantworten. Du kannst deine Noten für Klassenarbeiten, Tests und mündliche Mitarbeit eingeben, die jeweilige Gewichtung festlegen und die App berechnet dir deinen aktuellen Notendurchschnitt im Fach.
  • Der Master-Prompt:

Erstelle einen “Notendurchschnittsrechner” als Web-App.
Anforderungen:

  1. UI:
  • Ein Bereich für “Schriftliche Noten” (Klassenarbeiten), wo der Nutzer Noten und deren Gewichtung (in %) dynamisch hinzufügen kann.
  • Ein Bereich für “Sonstige Noten” (mündlich, Tests), ebenfalls mit dynamisch hinzufügbaren Noten und Gewichtungen.
  • Ein Button “Durchschnitt berechnen”.
  • Ein gut sichtbarer Ausgabebereich für den berechneten Notendurchschnitt.
  1. Funktionalität:
  • Der Nutzer soll über einen “Note hinzufügen”-Button neue Eingabefelder für Note und Gewichtung in beiden Kategorien erstellen können.
  • Die App berechnet den gewichteten Durchschnitt aller eingegebenen Noten.
  • Es soll eine Validierung geben, die sicherstellt, dass die Summe aller Gewichtungen 100% beträgt.
  1. Design: Klar und tabellarisch strukturiert, damit die Eingaben übersichtlich bleiben.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Die dynamische Erstellung von Feldern ist zu kompliziert. Vereinfache es: Gib feste Felder vor. Ein Feld für den Schnitt der Klassenarbeiten und dessen Gewichtung, und ein Feld für den Schnitt der sonstigen Noten und dessen Gewichtung.”
  • User: “Das Ergebnis soll auf zwei Nachkommastellen gerundet werden.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Noten-Rechner</title>
    <style>
        body { font-family: sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; padding-top: 50px; }
      .calculator { background: white; padding: 20px 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); width: 400px; }
      .input-group { margin-bottom: 15px; }
      .input-group label { display: block; margin-bottom: 5px; font-weight: bold; }
      .input-group input { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
        button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; margin-top: 10px; }
        #result { margin-top: 20px; text-align: center; font-size: 1.5rem; font-weight: bold; }
    </style>
</head>
<body>
<div class=”calculator”>
    <h2>Notendurchschnittsrechner</h2>
    <div class=”input-group”>
        <label for=”written-grade”>Schnitt der schriftlichen Noten (z.B. 2,5)</label>
        <input type=”number” id=”written-grade” step=”0.1″ placeholder=”z.B. 2.5″>
    </div>
    <div class=”input-group”>
        <label for=”written-weight”>Gewichtung schriftlich (in %)</label>
        <input type=”number” id=”written-weight” value=”50″>
    </div>
    <hr style=”margin: 20px 0;”>
    <div class=”input-group”>
        <label for=”other-grade”>Schnitt der sonstigen Noten (mündlich, etc.)</label>
        <input type=”number” id=”other-grade” step=”0.1″ placeholder=”z.B. 1.8″>
    </div>
    <div class=”input-group”>
        <label for=”other-weight”>Gewichtung sonstig (in %)</label>
        <input type=”number” id=”other-weight” value=”50″>
    </div>
    <button id=”calculate-btn”>Berechnen</button>
    <div id=”result”></div>
</div>
<script>
    const calculateBtn = document.getElementById(‘calculate-btn’);
    const resultDiv = document.getElementById(‘result’);

    calculateBtn.addEventListener(‘click’, () => {
        const writtenGrade = parseFloat(document.getElementById(‘written-grade’).value);
        const writtenWeight = parseFloat(document.getElementById(‘written-weight’).value);
        const otherGrade = parseFloat(document.getElementById(‘other-grade’).value);
        const otherWeight = parseFloat(document.getElementById(‘other-weight’).value);

        if (isNaN(writtenGrade) |

| isNaN(writtenWeight) |
| isNaN(otherGrade) |
| isNaN(otherWeight)) {
            resultDiv.textContent = “Bitte alle Felder ausfüllen.”;
            return;
        }

        if (writtenWeight + otherWeight!== 100) {
            resultDiv.textContent = “Die Gewichtung muss 100% ergeben.”;
            return;
        }

        const finalGrade = (writtenGrade * (writtenWeight / 100)) + (otherGrade * (otherWeight / 100));
        resultDiv.textContent = `Dein Durchschnitt: ${finalGrade.toFixed(2)}`;
    });
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als noten.html.
  2. Öffne die Datei, gib deine Notenschnitte und die vom Lehrer vorgegebene Gewichtung ein, um deine aktuelle Zeugnisnote zu ermitteln.

Projekt 8: Die “To-Do-Liste für Hausaufgaben”

  • Die Idee & der Nutzen: Der Klassiker unter den Einsteigerprojekten, aber mit direktem Schulbezug. Diese App hilft dir, den Überblick über alle anstehenden Hausaufgaben zu behalten. Du kannst Aufgaben hinzufügen, als erledigt markieren und wieder löschen. Der Clou: Die Liste bleibt dank Local Storage auch nach dem Schließen des Browsers erhalten.22
  • Der Master-Prompt:

Erstelle eine “Hausaufgaben To-Do-Liste” als Web-App.
Anforderungen:

  1. UI: Ein Eingabefeld für die Aufgabe, ein Dropdown-Menü zur Auswahl des Fachs (Mathe, Deutsch, Englisch, etc.) und ein “Hinzufügen”-Button. Darunter eine Liste der offenen Aufgaben.
  2. Funktionalität:
  • Hinzugefügte Aufgaben erscheinen in der Liste, formatiert als “[Fach]: [Aufgabentext]”.
  • Jeder Listeneintrag hat einen “Erledigt”-Button, der den Eintrag durchstreicht.
  • Jeder Listeneintrag hat einen “Löschen”-Button, der den Eintrag entfernt.
  • Wichtig: Die Liste soll im localStorage des Browsers gespeichert werden, sodass die Aufgaben beim erneuten Öffnen der Seite wieder da sind.
  1. Design: Modern und sauber. Erledigte Aufgaben sollen ausgegraut und durchgestrichen sein.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Die Fächer im Dropdown sind fest. Kann ich sie dynamisch machen? Füge ein kleines Eingabefeld und einen Button hinzu, um neue Fächer zur Auswahl hinzuzufügen.”
  • User: “Sortiere die Aufgaben in der Liste alphabetisch nach Fach.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Hausaufgaben To-Do</title>
    <style>
        body { font-family: sans-serif; background: #fdfdff; }
      .container { max-width: 600px; margin: 20px auto; background: white; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
      .input-form { display: flex; gap: 10px; margin-bottom: 20px; }
      .input-form input,.input-form select { flex: 1; padding: 10px; border: 1px solid #ddd; }
      .input-form button { padding: 10px; background: #28a745; color: white; border: none; cursor: pointer; }
        ul { list-style: none; padding: 0; }
        li { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }
        li.completed span { text-decoration: line-through; color: #aaa; }
        li span { flex-grow: 1; }
        li button { margin-left: 5px; background: #dc3545; color: white; border: none; cursor: pointer; padding: 5px 8px; }
        li.complete-btn { background: #ffc107; }
    </style>
</head>
<body>
<div class=”container”>
    <h2>Hausaufgaben-Liste</h2>
    <div class=”input-form”>
        <input type=”text” id=”task-input” placeholder=”Neue Aufgabe…”>
        <select id=”subject-select”>
            <option>Mathe</option>
            <option>Deutsch</option>
            <option>Englisch</option>
            <option>Bio</option>
        </select>
        <button id=”add-btn”>Hinzufügen</button>
    </div>
    <ul id=”task-list”></ul>
</div>
<script>
    const taskInput = document.getElementById(‘task-input’);
    const subjectSelect = document.getElementById(‘subject-select’);
    const addBtn = document.getElementById(‘add-btn’);
    const taskList = document.getElementById(‘task-list’);

    let tasks = JSON.parse(localStorage.getItem(‘tasks’)) ||;

    function saveTasks() {
        localStorage.setItem(‘tasks’, JSON.stringify(tasks));
    }

    function renderTasks() {
        taskList.innerHTML = ”;
        tasks.forEach((task, index) => {
            const li = document.createElement(‘li’);
            if (task.completed) {
                li.classList.add(‘completed’);
            }
           
            const span = document.createElement(‘span’);
            span.textContent = `[${task.subject}] ${task.text}`;
            li.appendChild(span);

            const completeBtn = document.createElement(‘button’);
            completeBtn.textContent = ‘✓’;
            completeBtn.className = ‘complete-btn’;
            completeBtn.onclick = () => {
                tasks[index].completed =!tasks[index].completed;
                saveTasks();
                renderTasks();
            };
            li.appendChild(completeBtn);

            const deleteBtn = document.createElement(‘button’);
            deleteBtn.textContent = ‘X’;
            deleteBtn.onclick = () => {
                tasks.splice(index, 1);
                saveTasks();
                renderTasks();
            };
            li.appendChild(deleteBtn);

            taskList.appendChild(li);
        });
    }

    addBtn.addEventListener(‘click’, () => {
        const text = taskInput.value.trim();
        const subject = subjectSelect.value;
        if (text) {
            tasks.push({ text, subject, completed: false });
            taskInput.value = ”;
            saveTasks();
            renderTasks();
        }
    });

    renderTasks();
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als hausaufgaben.html.
  2. Öffne die Datei und organisiere deine Aufgaben. Die Liste bleibt auch nach einem Neustart deines Computers erhalten.

Projekt 9: Das “digitale Whiteboard”

  • Die Idee & der Nutzen: Manchmal möchte man schnell eine Idee skizzieren, eine Formel herleiten oder eine Mindmap zeichnen, ohne Papier zu verschwenden. Dieses digitale Whiteboard verwandelt deinen Bildschirm in eine Zeichenfläche. Ideal für visuelles Brainstorming oder zum gemeinsamen Erklären von Sachverhalten.
  • Der Master-Prompt:

Erstelle ein einfaches “Digitales Whiteboard” mit HTML, CSS und JavaScript.
Anforderungen:

  1. UI: Die Seite soll hauptsächlich aus einem großen <canvas>-Element bestehen, das den gesamten verfügbaren Bereich einnimmt. Es soll eine kleine Werkzeugleiste geben.
  2. Funktionalität:
  • Der Nutzer soll mit der Maus auf dem Canvas zeichnen können (wenn die Maustaste gedrückt ist).
  • Die Werkzeugleiste soll eine Farbauswahl (<input type=”color”>) enthalten, um die Stiftfarbe zu ändern.
  • Die Werkzeugleiste soll einen “Löschen”-Button enthalten, der die gesamte Zeichenfläche leert.
  1. Technik: Nutze die HTML5 Canvas API für die Zeichenlogik.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Füge einen Regler (<input type=”range”>) hinzu, um die Stiftdicke anzupassen.”
  • User: “Implementiere einen ‘Radiergummi’-Modus. Wenn dieser aktiv ist, soll die Stiftfarbe auf die Hintergrundfarbe des Canvas gesetzt werden.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Digitales Whiteboard</title>
    <style>
        body { margin: 0; font-family: sans-serif; }
        #toolbar { position: fixed; top: 0; left: 0; width: 100%; background: #f1f1f1; padding: 10px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        #toolbar label { font-weight: bold; }
        canvas { display: block; background: #fff; }
    </style>
</head>
<body>
<div id=”toolbar”>
    <label for=”stroke-color”>Farbe:</label>
    <input type=”color” id=”stroke-color” value=”#000000″>
    <label for=”stroke-width”>Dicke:</label>
    <input type=”range” id=”stroke-width” min=”1″ max=”50″ value=”5″>
    <button id=”clear-btn”>Alles löschen</button>
</div>
<canvas id=”whiteboard”></canvas>
<script>
    const canvas = document.getElementById(‘whiteboard’);
    const ctx = canvas.getContext(‘2d’);
    const colorPicker = document.getElementById(‘stroke-color’);
    const widthSlider = document.getElementById(‘stroke-width’);
    const clearBtn = document.getElementById(‘clear-btn’);

    let isDrawing = false;

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    window.addEventListener(‘resize’, resizeCanvas);
    resizeCanvas();

    function startDrawing(e) {
        isDrawing = true;
        draw(e);
    }

    function stopDrawing() {
        isDrawing = false;
        ctx.beginPath(); // Resets the current path
    }

    function draw(e) {
        if (!isDrawing) return;

        ctx.lineWidth = widthSlider.value;
        ctx.lineCap = ’round’;
        ctx.strokeStyle = colorPicker.value;

        // Handle both mouse and touch events
        const rect = canvas.getBoundingClientRect();
        const x = (e.clientX |

| e.touches.clientX) – rect.left;
        const y = (e.clientY |

| e.touches.clientY) – rect.top;

        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x, y);
    }

    clearBtn.addEventListener(‘click’, () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    });

    // Mouse events
    canvas.addEventListener(‘mousedown’, startDrawing);
    canvas.addEventListener(‘mouseup’, stopDrawing);
    canvas.addEventListener(‘mousemove’, draw);
    canvas.addEventListener(‘mouseout’, stopDrawing);

    // Touch events
    canvas.addEventListener(‘touchstart’, startDrawing);
    canvas.addEventListener(‘touchend’, stopDrawing);
    canvas.addEventListener(‘touchmove’, draw);
</script>
</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als whiteboard.html.
  2. Öffne die Datei und nutze den gesamten Bildschirm zum Zeichnen, Skizzieren und Brainstormen.

Projekt 10: Die “persönliche Projekt-Portfolio-Seite”

  • Die Idee & der Nutzen: Ob für eine Bewerbung für ein Praktikum, die Präsentation im Kunstunterricht oder einfach, um deine besten Arbeiten zu zeigen – eine persönliche Portfolio-Seite ist deine digitale Visitenkarte. Diese einfache One-Page-Website bietet eine saubere Vorlage, um dich und deine Projekte professionell vorzustellen.22
  • Der Master-Prompt:

Du bist ein Webdesigner, der sich auf minimalistische und elegante Portfolio-Websites spezialisiert hat. Erstelle eine Vorlage für eine persönliche Portfolio-Seite für einen Schüler.
Anforderungen:

  1. Struktur (One-Page):
  • Ein Header mit dem Namen des Schülers und einer kurzen Beschreibung (z.B. “Gymnasiast | Angehender Designer”).
  • Ein “Über Mich”-Abschnitt mit einem Platzhalter für ein Foto und etwas Text.
  • Ein “Meine Projekte”-Abschnitt, der drei Projekt-Karten in einem Grid-Layout anzeigt. Jede Karte soll ein Bild, einen Projekttitel und eine kurze Beschreibung enthalten.
  • Ein “Kontakt”-Abschnitt mit Links zu E-Mail und optionalen sozialen Netzwerken.
  1. Design: Modern, responsiv (soll auf dem Handy gut aussehen) und mit viel Weißraum. Verwende eine serifenlose Schriftart wie ‘Montserrat’ von Google Fonts. Die Farbpalette soll dezent sein (z.B. dunkler Text, eine Akzentfarbe für Links und Buttons).
  2. Technik: Alles in einer einzigen HTML-Datei mit internem CSS. Kein JavaScript nötig, es soll eine statische Seite sein.
  • Dialog mit der KI: Iterative Verfeinerung:
  • User: “Die Projekt-Karten sehen langweilig aus. Füge einen leichten Hover-Effekt hinzu, sodass sie sich leicht anheben, wenn man mit der Maus darüberfährt.”
  • User: “Der Header soll beim Scrollen am oberen Bildschirmrand fixiert bleiben.”
  • Der fertige Code:

HTML

<!DOCTYPE html>
<html lang=”de”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Mein Portfolio -</title>
    <link rel=”preconnect” href=”https://fonts.googleapis.com”>
    <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
    <link href=”https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap” rel=”stylesheet”>
    <style>
        body {
            font-family: ‘Montserrat’, sans-serif;
            margin: 0;
            color: #333;
            line-height: 1.6;
        }
      .container {
            width: 90%;
            max-width: 960px;
            margin: 0 auto;
            padding: 20px 0;
        }
        header {
            text-align: center;
            padding: 80px 0;
            background-color: #f4f4f4;
        }
        header h1 {
            margin: 0;
            font-size: 3rem;
        }
        header p {
            font-size: 1.2rem;
            color: #007BFF;
        }
        section {
            padding: 60px 0;
        }
        h2 {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2rem;
        }
        #about {
            display: flex;
            align-items: center;
            gap: 40px;
        }
        #about img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }
        #projects.project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }
      .project-card {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
      .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
      .project-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
      .project-card.content {
            padding: 15px;
        }
      .project-card h3 { margin-top: 0; }
        footer {
            text-align: center;
            padding: 40px 0;
            background: #333;
            color: white;
        }
        footer a {
            color: #007BFF;
            text-decoration: none;
        }
        @media (max-width: 768px) {
            #about { flex-direction: column; text-align: center; }
        }
    </style>
</head>
<body>

<header>
    <div class=”container”>
        <h1>Max Mustermann</h1>
        <p>Gymnasiast | Kreativer Kopf | Zukünftiger Entwickler</p>
    </div>
</header>

<main>
    <section id=”about”>
        <div class=”container” style=”display: flex; align-items: center; gap: 40px;”>
            <img src=”https://via.placeholder.com/150″ alt=”Ein Bild von mir”>
            <div>
                <h2>Über Mich</h2>
                <p>Hallo! Ich bin ein neugieriger und motivierter Schüler mit einer Leidenschaft für Technologie und Design. Ich liebe es, neue Dinge zu lernen und kreative Lösungen für Probleme zu finden. In meiner Freizeit experimentiere ich gerne mit Webentwicklung und Fotografie.</p>
            </div>
        </div>
    </section>

    <section id=”projects” style=”background-color: #f4f4f4;”>
        <div class=”container”>
            <h2>Meine Projekte</h2>
            <div class=”project-grid”>
                <div class=”project-card”>
                    <img src=”https://via.placeholder.com/300×180/007BFF/FFFFFF?text=Projekt+1″ alt=”Projektbild”>
                    <div class=”content”>
                        <h3>Vokabel-Blitz App</h3>
                        <p>Eine interaktive Web-App zum Lernen von Vokabeln, die ich mit Vibe Coding und Gemini erstellt habe.</p>
                    </div>
                </div>
                <div class=”project-card”>
                    <img src=”https://via.placeholder.com/300×180/28A745/FFFFFF?text=Projekt+2″ alt=”Projektbild”>
                    <div class=”content”>
                        <h3>Schul-Fotografie</h3>
                        <p>Eine Sammlung meiner besten Fotos vom letzten Schulfest, bearbeitet mit professioneller Software.</p>
                    </div>
                </div>
                <div class=”project-card”>
                    <img src=”https://via.placeholder.com/300×180/FFC107/000000?text=Projekt+3″ alt=”Projektbild”>
                    <div class=”content”>
                        <h3>Referat über KI</h3>
                        <p>Eine ausführliche Präsentation über die Chancen und Risiken von künstlicher Intelligenz im Alltag.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<footer>
    <div class=”container”>
        <h2>Kontakt</h2>
        <p>Du möchtest mit mir in Kontakt treten? Schreib mir eine E-Mail:</p>
        <p><a href=”mailto:max.mustermann@email.de”>max.mustermann@email.de</a></p>
    </div>
</footer>

</body>
</html>

  • Anleitung & Anwendung:
  1. Speichere den Code als portfolio.html.
  2. Öffne die Datei und ersetze die Platzhaltertexte und -bilder (“, Texte, Bild-URLs) durch deine eigenen Inhalte. Dies ist eine perfekte Grundlage für deine erste eigene Homepage.

5. Ausblick: Dein Weg vom Vibe Coder zum Entwickler

Herzlichen Glückwunsch! Du hast gesehen, wie schnell man mit einer Idee und den richtigen Worten eine funktionierende Web-App erstellen kann. Aber das ist erst der Anfang deiner Reise. Vibe Coding ist kein Endpunkt, sondern ein fantastisches Sprungbrett in die tiefere Welt der Softwareentwicklung.

5.1 Neugier als Motor: Den generierten Code verstehen lernen.

Die Apps, die du erstellt hast, sind nicht nur nützliche Werkzeuge, sondern auch personalisierte Lernobjekte. Der beste Weg, um wirklich programmieren zu lernen, ist, den Code, den du bereits hast, zu untersuchen und zu verändern. Trau dich, “unter die Motorhaube” zu schauen.

Hier sind ein paar praktische erste Schritte:

  • Experimentiere mit CSS: Öffne eine deiner HTML-Dateien im Texteditor. Finde den <style>-Bereich und ändere einen Wert. Ändere color: blue; zu color: red; oder font-size: 16px; zu font-size: 24px;. Speichere die Datei und lade sie im Browser neu. Beobachte, was passiert. So entwickelst du ein intuitives Gefühl für die Gestaltung von Webseiten.
  • Nutze die Entwicklerkonsole: Füge in einer JavaScript-Funktion (im <script>-Bereich) eine Zeile wie console.log(“Der Button wurde geklickt!”); ein. Öffne dann die Webseite im Browser, drücke die F12-Taste, um die Entwicklerwerkzeuge zu öffnen, und wechsle zum “Konsole”-Tab. Klicke nun auf den entsprechenden Button. Du wirst deine Nachricht in der Konsole sehen. Dies ist die grundlegendste und wichtigste Technik beim Debugging.
  • Lass dir den Code erklären: Nutze die Stärke von Gemini weiter. Kopiere eine JavaScript-Funktion aus deiner App, füge sie in ein neues Chatfenster ein und gib den Prompt: “Erkläre mir Zeile für Zeile, was diese JavaScript-Funktion tut. Tu so, als wäre ich ein absoluter Anfänger.”.18

5.2 Vibe Coding als Sprungbrett.

Vibe Coding kann die Art und Weise, wie Programmieren gelehrt wird, grundlegend verändern. Das traditionelle Lernmodell lautet oft: “Theorie zuerst, dann Praxis”. Man lernt wochenlang trockene Theorie über Variablen, Schleifen und Funktionen, bevor man überhaupt etwas Spannendes bauen kann. Das kann frustrierend sein.

Vibe Coding kehrt dieses Modell um: “Praxis zuerst, dann Theorie”. Du beginnst mit einem greifbaren, funktionierenden Ergebnis – deiner App.14 Dieses Erfolgserlebnis ist extrem motivierend. Die Theorie wird nicht mehr als abstrakte Hürde wahrgenommen, sondern als notwendiges Werkzeug, um die eigene Kreation zu verstehen, zu verbessern und zu erweitern. Die Frage wandelt sich von einem abstrakten “Was ist eine Funktion?” zu einem konkreten und motivierenden “Wie kann ich diese Funktion in meiner App so ändern, dass sie auch den Highscore speichert?”. Der generierte Code wird so zu deinem persönlichen, interaktiven Lehrbuch.

5.3 Ressourcen für deine nächsten Schritte.

Wenn die Neugier geweckt ist und du die Grundlagen von HTML, CSS und JavaScript systematisch lernen möchtest, gibt es hervorragende, meist kostenlose Ressourcen, die dir dabei helfen.

  • MDN Web Docs (Mozilla Developer Network): Gilt als die Bibel der Webentwicklung. Hier findest du detaillierte, genaue und verständliche Erklärungen zu jeder Technologie. Besonders die Anleitungen für Anfänger sind exzellent.
  • freeCodeCamp: Eine riesige, interaktive Lernplattform, auf der du durch das Lösen von Tausenden kleiner Programmieraufgaben Zertifikate erwerben kannst. Der Lehrplan ist sehr gut strukturiert.
  • W3Schools: Bietet einfache Tutorials und einen “Try it Yourself”-Editor, mit dem du Code-Beispiele direkt im Browser ausprobieren und verändern kannst. Ideal für schnelle Nachschlageaktionen.

Vibe Coding hat dir die Tür geöffnet. Es hat dir gezeigt, dass du die Fähigkeit hast, digitale Werkzeuge zu erschaffen. Nutze diese Motivation, um nun auch die handwerklichen Grundlagen zu erlernen. Die Kombination aus einer klaren Vision, der Fähigkeit, diese einer KI mitzuteilen, und dem fundamentalen Verständnis des zugrundeliegenden Codes wird dich zu einem wirklich mächtigen Schöpfer in der digitalen Welt machen. Viel Erfolg auf deinem Weg!

Referenzen

  1. Vibe coding – Wikipedia, Zugriff am Oktober 16, 2025, https://en.wikipedia.org/wiki/Vibe_coding
  2. blog.google, Zugriff am Oktober 16, 2025, https://blog.google/technology/ai/techspert-what-is-vibe-coding/#:~:text=Vibe%20coding%20lets%20you%20build,create%20prototypes%20and%20visualize%20ideas.
  3. Google expert helps define vibe coding – Google Blog, Zugriff am Oktober 16, 2025, https://blog.google/technology/ai/techspert-what-is-vibe-coding/
  4. Understanding the Terminology of Vibe Coding – Arsturn, Zugriff am Oktober 16, 2025, https://www.arsturn.com/blog/understanding-the-terminology-of-vibe-coding
  5. What Is Vibe Coding? Understanding the Shift from Code to Conversation – AI Development, Zugriff am Oktober 16, 2025, https://ai.koombea.com/blog/what-is-vibe-coding
  6. What Is NLP (Natural Language Processing)? – IBM, Zugriff am Oktober 16, 2025, https://www.ibm.com/think/topics/natural-language-processing
  7. What is Natural Language Processing? – NLP Explained – AWS, Zugriff am Oktober 16, 2025, https://aws.amazon.com/what-is/nlp/
  8. What is vibe coding? | AI coding – Cloudflare, Zugriff am Oktober 16, 2025, https://www.cloudflare.com/learning/ai/ai-vibe-coding/
  9. Vibe Coding Explained: Tools and Guides – Google Cloud, Zugriff am Oktober 16, 2025, https://cloud.google.com/discover/what-is-vibe-coding
  10. Vibe Coding Software Development – Belitsoft, Zugriff am Oktober 16, 2025, https://belitsoft.com/vibe-coding-software-development
  11. Vibe Coding vs. Professional Coding: A Developer’s Honest Take – DEV Community, Zugriff am Oktober 16, 2025, https://dev.to/naresh_007/vibe-coding-vs-professional-coding-a-developers-honest-take-5f16
  12. Tips to write prompts for Gemini – Google Workspace Learning Center, Zugriff am Oktober 16, 2025, https://support.google.com/a/users/answer/14200040?hl=en
  13. Write better prompts for Gemini for Google Cloud, Zugriff am Oktober 16, 2025, https://cloud.google.com/gemini/docs/discover/write-prompts
  14. From Idea to Reality: Building the Instant Web with Gemini (Part 1) | by Thu Ya Kyaw | Google Cloud – Medium, Zugriff am Oktober 16, 2025, https://medium.com/google-cloud/from-idea-to-reality-building-the-instant-web-with-gemini-part-1-8dab9d159881
  15. The Ultimate Vibe Coding Guide : r/ClaudeAI – Reddit, Zugriff am Oktober 16, 2025, https://www.reddit.com/r/ClaudeAI/comments/1kivv0w/the_ultimate_vibe_coding_guide/
  16. Prompt design strategies | Gemini API | Google AI for Developers, Zugriff am Oktober 16, 2025, https://ai.google.dev/gemini-api/docs/prompting-strategies
  17. Building an App with Gemini Code Assist | by Will Nossiter – Medium, Zugriff am Oktober 16, 2025, https://medium.com/@willn2/building-an-app-with-gemini-code-assist-2f99801c498a
  18. Code with Gemini Code Assist | Cloud Workstations – Google Cloud, Zugriff am Oktober 16, 2025, https://cloud.google.com/workstations/docs/write-code-gemini
  19. Gemini vs Claude for Coding in 2025: We Tested Both – Index.dev, Zugriff am Oktober 16, 2025, https://www.index.dev/blog/gemini-vs-claude-for-coding
  20. The 17 Best Apps for Learning German in 2025 [Tested and Reviewed] – FluentU, Zugriff am Oktober 16, 2025, https://www.fluentu.com/blog/german/best-apps-for-learning-german/
  21. 10 Best Apps To Learn German In [For All Learning Styles] – Simple Germany, Zugriff am Oktober 16, 2025, https://www.simplegermany.com/best-apps-to-learn-german/
  22. HTML and CSS Practice Projects to Boost Developer Skills – Jscrambler, Zugriff am Oktober 16, 2025, https://jscrambler.com/blog/html-css-and-javascript-practice-projects-to-level-up-your-developer-skills
  23. App Development Project Ideas for High School Students – Indigo Research, Zugriff am Oktober 16, 2025, https://www.indigoresearch.org/blog/app-development-project-ideas
  24. 14 HTML Project Ideas for Students and Beginners | Learn by Building – Jaro Education, Zugriff am Oktober 16, 2025, https://www.jaroeducation.com/blog/html-project-ideas-topics/
  25. Vibe-code a kids game with Gemini and publish with Firebase! – Google Codelabs, Zugriff am Oktober 16, 2025, https://codelabs.developers.google.com/codelabs/gemini-games-firebase
KI-gestützt. Menschlich veredelt.

Martin Käßler ist ein erfahrener Tech-Experte im Bereich AI, Technologie, Energie & Space mit über 15 Jahren Branchenerfahrung. Seine Artikel verbinden fundiertes Fachwissen mit modernster KI-gestützter Recherche- und Produktion. Jeder Beitrag wird von ihm persönlich kuratiert, faktengeprüft und redaktionell verfeinert, um höchste inhaltliche Qualität und maximalen Mehrwert zu garantieren.

Auch bei sorgfältigster Prüfung sehen vier Augen mehr als zwei. Wenn Ihnen ein Patzer aufgefallen ist, der uns entgangen ist, lassen Sie es uns bitte wissen: Unser Postfach ist martinkaessler, gefolgt von einem @ und dem Namen dieser Webseite (also meine-domain) mit der Endung .com. Oder besuchen Sie Ihn gerne einfach & direkt auf LinkedIn.

Ihre nächste Inspirationsquelle wartet – lesen, staunen, wachsen

Der Barnum Effekt und seine Bedeutung für die Moderne
Der Barnum Effekt und seine Bedeutung für die Moderne

Der Barnum Effekt und seine Bedeutung für die Moderne

AI-generiert, Gesellschaft
Dezember 7, 2025
Rabbit Hole: Wie soziale Medien das Konzept perfektionieren
Rabbit Hole: Wie soziale Medien das Konzept perfektionieren

Rabbit Hole: Wie soziale Medien das Konzept perfektionieren

AI-generiert, Gesellschaft
Dezember 6, 2025
HVS Speicher Preise 2026: Wohin geht die Entwicklung im privaten Segment?
HVS Speicher Preise 2026

HVS Speicher Preise 2026: Wohin geht die Entwicklung im privaten Segment?

AI-generiert, Prognosen
Dezember 6, 2025
2 Millionen Elektroautos 2025: Der Durchbruch für E-Mobilität in Deutschland?
2 Millionen Elektroautos 2025: Der Durchbruch für E-Mobilität in Deutschland?

2 Millionen Elektroautos 2025: Der Durchbruch für E-Mobilität in Deutschland?

AI-generiert, All-Electric
Dezember 6, 2025
Geminiden Dezember 2025: Das Sternschnuppenereignis am Jahresende
Geminiden Dezember 2025: Das Sternschnuppenereignis am Jahresende

Geminiden Dezember 2025: Das Sternschnuppenereignis am Jahresende

AI-generiert, Space
Dezember 6, 2025
KI-Ära – Warum es das Wort des Jahres 2025 geworden ist?
KI-Ära - Warum es das Wort des Jahres 2025 geworden ist?

KI-Ära – Warum es das Wort des Jahres 2025 geworden ist?

AI, AI-generiert
Dezember 6, 2025
Netflix Codes & Co: Die besten Streaming-Perlen finden
Netflix Codes & Co: Die besten Streaming-Perlen finden

Netflix Codes & Co: Die besten Streaming-Perlen finden

AI-generiert, Medien
Dezember 6, 2025
Lokale KI Bilder generieren: Die aktuellen Modelle für 2026
Lokale KI Bilder generieren: Die aktuellen Modelle für 2026

Lokale KI Bilder generieren: Die aktuellen Modelle für 2026

AI, AI-generiert
Dezember 4, 2025