Profi-Kurs · Schulspace-Selbstlernkurse
Vom Chat zum KI-Agenten
Für dein erstes Quiz brauchst du diesen Kurs nicht. Du brauchst ihn, wenn deine Inhalte größer werden: Bilderserien, mehrere Level, wiederverwendbare Bausteine. Dann lohnt der Schritt vom Chat-Fenster zum KI-Agenten, der direkt in deinem Projektordner arbeitet — und am Ende veröffentlichst du alles mit einem einzigen ZIP-Upload auf Schulspace.
Was dich in diesem Kurs erwartet
- Was ein KI-Agent anders macht als das Chat-Fenster — und wann sich der Umstieg wirklich lohnt
- Der 3-Schritt-Sicherheitscheck vor jedem Upload ins Netz — in 5 Minuten, ganz ohne Programmierkenntnisse
- Wie ein ganzer Projektordner per ZIP zu einem einzigen Schulspace-Lerninhalt wird — inklusive Update-Trick
Modul 1 von 6
Vom Chat zum Agenten
Bisher lief dein Vibe-Coding so: Du beschreibst, die KI antwortet mit einer kompletten Datei, du kopierst sie heraus. Das funktioniert großartig — bis dein Inhalt wächst. Dann kopierst du bei jeder kleinen Änderung hunderte Zeilen hin und her, und jede neue Version kann sich an Stellen unterscheiden, die du gar nicht ändern wolltest.
Ein KI-Agent ist eine KI, die Werkzeuge benutzen darf: Sie kann Dateien in deinem Projektordner selbst lesen, anlegen und gezielt ändern — und zeigt dir vorher, was sie ändern will. Kein Hype-Begriff, sondern ein sehr praktischer Unterschied. Sieh selbst:
Nach diesem Modul kannst du…
- erklären, was ein KI-Agent anders macht als das Chat-Fenster
- einschätzen, wann sich der Umstieg lohnt — und wann der Chat völlig reicht
Dieselbe Mini-Aufgabe, zwei Welten
Auftrag: „Ändere nur die Farbe des Start-Buttons in meinem 500-Zeilen-Quiz." Spiel beide Seiten ab und vergleiche.
Im Chat-Fenster
Klicke auf „Abspielen"
KI-Agent im Ordner
Klicke auf „Abspielen"
Der Kernunterschied: Im Chat wird bei jeder Änderung alles neu erzeugt — und du bist der Copy-Paste-Bote. Der Agent ändert gezielt nur die betroffene Stelle und zeigt dir die Änderung vorher als Vergleich (Diff) zum Annehmen oder Ablehnen. Und beruhigend: Am Ende steht in beiden Welten dasselbe — HTML, CSS und JavaScript. Dein Veröffentlichungs-Weg auf Schulspace bleibt derselbe.
Kurz-Check
Deine Kollegin will nur die Schriftgröße in ihrem fertigen 800-Zeilen-Escape-Room ändern. Was empfiehlst du ihr?
Modul 2 von 6
Deine Profi-Werkstatt einrichten
Die gute Nachricht zuerst: Für den Umstieg musst du nicht programmieren lernen — und bei den heutigen Werkzeugen brauchst du nicht einmal ein Terminal. Deine Werkstatt besteht aus genau drei Dingen:
Der Projektordner
Ein ganz normaler Ordner auf deinem Rechner. Hier liegen alle Dateien deines Lerninhalts — auch deine Bilder.
Der Agent
Läuft in einer App oder als Erweiterung in einem Editor. Du gibst Aufträge in normaler Sprache — er liest, plant und ändert Dateien im Ordner.
Die Änderungs-Vorschau (Diff)
Dein Sicherheitsnetz: Vor jeder Änderung siehst du einen Vorher-Nachher-Vergleich und klickst „Annehmen" oder „Ablehnen".
Nach diesem Modul kannst du…
- die drei Bausteine der Werkstatt auseinanderhalten
- den für dich passenden Einstiegsweg wählen
Die Einstiegswege im Vergleich
Alle drei Wege führen zum selben Ziel: ein Agent, der in deinem Projektordner arbeitet. Wähle nach Konto und Budget — die Kurs-Beispiele funktionieren mit jedem davon.
Deine Einstiegswege zum KI-Agenten
Stand: Juli 2026ChatGPT-App („Codex")
Einfachster Gratis-Einstieg
- Weg: ChatGPT-App für Windows/Mac installieren → mit ChatGPT-Konto anmelden → lokalen Ordner öffnen → Modus „Codex" → Auftrag tippen
- Änderungen: als Vorschau (Diff) zum Annehmen/Verwerfen
- Kosten: kleines Kontingent schon im Gratis-Konto; entspannter mit Plus (ca. 20 US-$/Monat)
- Braucht: kein Terminal, kein Git, kein GitHub · Windows 11 empfohlen
- Voreinstellung lassen — den Modus „Full access" nie aktivieren
Claude Code
Desktop-App oder VS Code
- Weg 1: Claude-Desktop-App installieren → anmelden → Tab „Code" → „Local" → Ordner wählen → Auftrag tippen
- Weg 2: in VS Code die Erweiterung „Claude Code" installieren (über die Erweiterungs-Suche, ohne Terminal) → Anmeldung im Browser
- Änderungen: Diff mit Annehmen/Ablehnen — im Standard-Modus wird jede Änderung erst gezeigt
- Kosten: Bezahl-Abo nötig (Pro, ca. 20 US-$/Monat — der Agent ist enthalten)
- Braucht: unter Windows einmalig Git (kostenlos, Installer durchklicken)
GitHub Copilot
Für VS-Code-Fans
- Weg: VS Code + Erweiterung „GitHub Copilot" + kostenloses GitHub-Konto; Agent-Modus im Chat-Fenster wählen
- Kosten: Gratis-Stufe vorhanden, aber knapp (u. a. 50 Chat-Anfragen/Monat) — eher zum Reinschnuppern
- Braucht: GitHub-Konto; mehr Klick-Reibung als die beiden App-Wege
Auch hier gilt das Verfallsdatum-Prinzip aus Kurs 3: Preise, Kontingente und App-Namen ändern sich mehrmals im Jahr — das Prinzip (Agent + Projektordner + Änderungs-Vorschau) bleibt. Zwei Beispiele allein aus diesem Sommer: Die separate „Codex-App" ist im Juli 2026 in der ChatGPT-App aufgegangen, und Googles Gratis-Angebot „Gemini Code Assist" für Privatnutzer wurde im Juni 2026 eingestellt. Ältere Anleitungen im Netz zeigen deshalb oft veraltete Menüs.
Zuordnungs-Spiel: Wer macht was?
Ordne jede Aussage dem richtigen Baustein zu.
„Hier liegen alle Dateien deines Lerninhalts — auch die Fotos."
„Liest deine Dateien, plant Schritte und schlägt gezielte Änderungen vor."
„Zeigt dir vor dem Speichern, was sich ändern würde — du klickst Annehmen oder Ablehnen."
„Ihn packst du am Ende als ZIP und veröffentlichst ihn mit einem Upload."
„Ihm gibst du Aufträge in normaler Sprache — wie bisher im Chat."
„Dein Sicherheitsnetz gegen ungewollte Änderungen."
Modul 3 von 6
Projekte statt Einzeldateien
Bisher war dein Lerninhalt eine Datei. Ein Projekt verteilt die Arbeit auf mehrere — und das hat nichts mit „professioneller Kompliziertheit" zu tun, sondern mit Übersicht. In Lehrkraft-Sprache:
📄 index.html = das Arbeitsblatt
Der Inhalt und die Struktur — was auf der Seite steht. Der Name index.html ist die Konvention für „Startseite".
🎨 css/ = die Gestaltung
Farben, Schriften, Layout. Getrennt vom Inhalt — Design-Änderungen fassen den Inhalt nicht an.
⚙️ js/ = das Verhalten
Die Spiellogik: Was passiert beim Klicken, wie werden Punkte gezählt, wann gibt es Konfetti.
🖼️ bilder/ = die Materialkiste
Deine Fotos bleiben echte Dateien statt in den Code „eingebacken" zu werden — leicht auszutauschen. (Beim Schulspace-Upload werden sie später automatisch verkleinert und von unsichtbaren Metadaten befreit — Modul 5.)
Nach diesem Modul kannst du…
- erklären, warum größere Lerninhalte aus mehreren Dateien bestehen
- einem Agenten ein Mehr-Datei-Projekt präzise in Auftrag geben
Der Projekt-Auftrag
Dein Prompt-Framework aus Kurs 2 gilt unverändert — für Projekte kommen vier neue Bausteine dazu. Die letzten drei verhindern die häufigsten Anfänger-Fallen (mehr dazu in Modul 4 und 5):
Projekt-Startprompt — zum Kopieren
Erstelle in diesem Ordner einen interaktiven Lerninhalt: [DEIN THEMA, KLASSE, INHALTSTYP]. Lege eine sinnvolle Ordnerstruktur an: index.html, css/, js/, bilder/. Nutze meine Bilder aus dem Ordner bilder/. Wichtig: reines HTML/CSS/JS — kein npm, kein Build-Schritt, keine externen Bibliotheken oder Bilder aus dem Internet, kein import/export zwischen eigenen JavaScript-Dateien. Die Seite muss offline und auf dem Handy funktionieren.
Simulation: Du beauftragst den Agenten
Projekt: Bilder-Memory mit 8 eigenen Fotos und 3 Schwierigkeitsstufen. Triff an drei Weggabelungen die Profi-Entscheidung — rechts siehst du, was im Ordner passiert.
1/3 · Der Agent fragt: „Wie soll ich starten?"
2/3 · Die Struktur steht. Wie kommen deine 8 Fotos ins Spiel?
3/3 · Beim Testen fällt auf: Level 2 zieht die falschen Karten. Dein Korrektur-Auftrag?
Dein Projektordner
Modul 4 von 6
Der 3-Schritt-Sicherheitscheck
Mit dem Agenten entsteht mehr Code, als du Zeile für Zeile liest — und irgendwann willst du Inhalte auch außerhalb von Schulspace einsetzen: Schul-Homepage, Lernplattform, USB-Stick. Deshalb gehört vor jede Veröffentlichung ein fester Check. Keine Paranoia — dieselbe Sorgfalt wie beim Kopieren eines Arbeitsblatts mit Bildquellen. Und: Er dauert keine 5 Minuten und braucht null Programmierkenntnisse.
Nach diesem Modul kannst du…
- KI-generierten Code vor jedem Upload in drei festen Schritten prüfen
- einordnen, was der Check findet — und was ehrlicherweise nicht
Die Merkformel: Funkt es? Verrät es? Läuft es?
1Funkt es? — Fremde Adressen finden
Datei im Editor öffnen → Strg+F (Mac: Cmd+F) → nach http suchen (findet http und https). Jeder Treffer ist eine fremde Adresse: Skripte, Schriften, Bilder, Datenversand (fetch).
2Verrät es? — Persönliches & Geheimnisse
Diesen Schritt kann dir kein Werkzeug abnehmen — nur du weißt, was ein echter Name ist. Suche nach Schülernamen aus deinen Prompts, Schul- und Klassenbezeichnungen sowie nach key, token, passwort.
Kernsatz: Alles, was im Quelltext steht, ist öffentlich — auch Kommentare und „versteckte" Lösungen (Rechtsklick → Quelltext anzeigen). Randnotiz: Handy-Fotos tragen unsichtbare Ortsdaten (EXIF/GPS) in sich.
3Läuft es? — Die Offline-Gegenprobe
Flugmodus an (oder WLAN aus) → Datei doppelklicken → einmal komplett durchspielen. Zwei Erkenntnisse auf einen Schlag: Funktioniert alles, ist die Seite praktisch autark und kann kaum heimlich Daten senden — die Bestätigung von Schritt 1. Ist plötzlich etwas kaputt (Icons weg, weiße Seite), hängt eine externe Abhängigkeit drin, die im Schul-WLAN genauso ausfallen kann.
Bonus für Neugierige: F12 → Reiter „Netzwerk" — dort siehst du live, mit wem die Seite spricht.
Übung: Finde die 3 Probleme
Eine Kollegin hat dir dieses KI-generierte Vokabel-Quiz geschickt — sie will es auf die Schul-Homepage stellen. Führe den Check im Kopf durch und klicke die 3 Zeilen an, die du vor dem Hochladen ändern würdest. (Falsch klicken kostet nichts — jede Rückmeldung erklärt etwas.)
Alle drei gefunden! Die Zuordnung:
- Funkt es? → das Tracking-Skript von der unbekannten Adresse
- Verrät es? → die echten Schülernamen im Kommentar und der Zugangsschlüssel (API-Key) im Code
- Läuft es? → hätte dir beim Offline-Test das leere Foto verraten (das 🟡-Bild von der Foto-Adresse)
Und auf Schulspace?
Diesen Check solltest du dir angewöhnen — egal, wohin du veröffentlichst. Auf Schulspace hast du dabei ein Sicherheitsnetz: Der Server prüft beim Hochladen automatisch mit.
- „Funkt es?" — Dutzende bekannte Bibliotheken werden durch lokale Kopien ersetzt (deine Seite funktioniert weiter, funkt aber nicht mehr nach draußen), unbekannte Fremd-Skripte und externe Bild-Adressen werden entfernt, Formular-Ziele auf fremde Server gekappt, Google-Schriften durch lokale ersetzt.
- „Verrät es?" — Bilder aus ZIP-Uploads verlieren automatisch ihre EXIF-/GPS-Daten und werden sauber neu codiert.
- „Läuft es?" — Jeder Inhalt läuft isoliert in einem abgeschotteten Bereich auf einer eigenen Domain; nach dem Upload siehst du einen Bericht, was ersetzt oder entfernt wurde.
Einen Punkt kann dir aber keine Technik abnehmen — Schritt 2: Ob „Lena aus der 7b" in deinen Code gehört, weißt nur du.
Modul 5 von 6
ZIP-Upload: Ein Ordner wird ein Lerninhalt
Dein Projekt ist fertig, der Check ist durch — jetzt soll aus dem Ordner ein Schulspace-Lerninhalt werden. Der Weg: Ordner als ZIP packen (Windows: Rechtsklick → „ZIP-komprimierter Ordner"; Mac: Rechtsklick → „komprimieren") und im ganz normalen Upload-Formular hochladen — nur eben die .zip statt einer .html.
Der Server macht daraus automatisch eine einzige, in sich geschlossene Seite: Gestaltung und Logik werden eingebettet, deine Bilder verkleinert und von Metadaten befreit, alles durchläuft dieselbe Bereinigung wie jeder Upload — und landet isoliert im Schutz-Rahmen aus Modul 4. Dateien, die nicht eingebettet werden können (PDF, Video, Schriften), blockieren nichts: Sie werden übersprungen und dir gemeldet.
Nach diesem Modul kannst du…
- ein Mehr-Datei-Projekt als ZIP veröffentlichen und Hinweise des Servers deuten
- die typischen Stolpersteine vermeiden — allen voran die fehlende index.html
Der eigentliche Trick: der Update-Workflow
Du pflegst deinen Ordner lokal weiter — neue Fragen, neue Fotos, Level 4. Dann: neu zippen, im Bearbeiten-Dialog des Lerninhalts das neue ZIP hochladen, fertig. Die Adresse bleibt dieselbe — ausgedruckte QR-Codes und deine Aufruf-Statistik bleiben gültig. Dein Ordner ist die Werkstatt, Schulspace die Bühne.
Die Stolperstein-Liste
Fünf Dinge, an denen ZIP-Uploads scheitern oder haken — alle leicht vermeidbar:
index.html heißen — sonst weiß der Server nicht, wo es losgeht. (Eine einzelne HTML-Datei darf heißen, wie sie will.)Simulation: Dein erster ZIP-Upload
Dein Vokabel-Memory ist fertig. Packe den Ordner und lade ihn hoch — und meistere den häufigsten Stolperstein.
vokabel-memory/
Was tust du?
Veröffentlicht!
Dein ganzer Ordner ist jetzt ein Lerninhalt mit einer Adresse und einem QR-Code. Merke dir die ⚠-Zeile: Übersprungene Dateien sind normal und blockieren nichts. Und beim nächsten Update: neues ZIP im Bearbeiten-Dialog — gleiche Adresse.
Modul 6 von 6
Dein Profi-Workflow
Alles zusammengesetzt ergibt sich ein Kreislauf, den du für jedes größere Projekt wiederverwenden kannst:
Wann Chat, wann Agent?
Die ehrliche Antwort: meistens reicht der Chat. Die Heuristik:
💬 Chat-Fenster reicht, wenn …
- eine Datei genügt (Quiz, Memory, Übung)
- es schnell gehen muss — morgen früh ist Unterricht
- keine oder wenige eigene Bilder dabei sind
🤖 Agent + Ordner lohnt, wenn …
- viele eigene Bilder oder Materialien hinein sollen
- mehrere Level, Kapitel oder Varianten geplant sind
- du den Inhalt über Wochen weiterpflegen willst (Update-Workflow!)
Sicherheitscheck-Prompt — dein Assistent für Schritt 1 und 2
Prüfe dieses Projekt vor der Veröffentlichung und antworte in drei Listen: 1. Alle externen Adressen, die die Seite kontaktiert (http, fetch, src, Formulare) — mit je einem Satz, wozu sie dienen. 2. Alles, was nach personenbezogenen Daten oder Zugangsdaten aussieht (Namen, E-Mail-Adressen, Schlüssel, Passwörter) — auch in Kommentaren. 3. Alles, was ohne Internetverbindung nicht funktionieren würde.
Gute Ergänzung, kein Ersatz: Die Stichproben mit Strg+F und den Offline-Test machst du trotzdem selbst — du trägst die Verantwortung, nicht die KI.
Lernzielkontrolle: Fünf Situationen aus dem Schulalltag
Wähle jeweils die beste Entscheidung — die nächste Situation erscheint nach der richtigen Antwort.
1 · Morgen früh brauchst du ein 10-Fragen-Quiz zur heutigen Stunde.
2 · Ein Vokabeltrainer mit 40 eigenen Bildkarten und 3 Levels, den du das ganze Schuljahr pflegen willst.
3 · Eine Kollegin schickt dir ihr fertiges KI-Projekt — du sollst es auf die Schul-Homepage stellen. Was tust du zuerst?
4 · Dein ZIP-Upload meldet: „Das ZIP enthält mehrere HTML-Dateien, aber keine index.html."
5 · Ein HTML-Spiel aus einem Lehrerforum: Dein 3-Schritt-Check ist unauffällig. Du willst es auf deinen privaten Webspace stellen. Was gilt?
Profi-Kurs abgeschlossen!
Vom Chat-Fenster zum Agenten, vom Einzel-Upload zum gepflegten Projekt — du hast jetzt den kompletten Profi-Werkzeugkasten.
Der Agent arbeitet im Ordner
Gezielte Änderungen statt Copy-Paste-Marathon — und jede Änderung erst als Diff ansehen, dann annehmen.
Projekte schaffen Übersicht
index.html, css/, js/, bilder/ — Inhalt, Gestaltung, Verhalten und Material sauber getrennt. Bilder bleiben echte Dateien.
Funkt es? Verrät es? Läuft es?
Der 3-Schritt-Check vor jedem Upload ins Netz — auf Schulspace prüft der Server automatisch mit, Schritt 2 bleibt immer deiner.
Ordner → ZIP → ein Lerninhalt
Startseite heißt index.html; Updates per Re-Upload — gleiche Adresse, QR-Codes bleiben gültig.
Dein Spickzettel — zum Kopieren und Aufheben
PROFI-WORKFLOW-SPICKZETTEL • Eine Datei, schnell gebraucht → Chat-Fenster reicht (Kurs 1–2) • Viele Bilder, Levels, Wiederverwendung → Agent + Projektordner • Aufträge an den Agenten: erst Struktur zeigen lassen · eigene Fotos in bilder/ · „ändere nur Datei X — lass den Rest unverändert" • Immer in den Projekt-Prompt: reines HTML/CSS/JS, keine externen Bibliotheken/Bilder, kein import/export zwischen eigenen JS-Dateien, offline- und handytauglich • Vor JEDEM Upload: Funkt es? (Strg+F „http") · Verrät es? (Namen, Schlüssel) · Läuft es? (Flugmodus-Test) • Schulspace: Ordner → ZIP (Startseite = index.html, max. 16 MB) → Upload; Server bereinigt mit; Update = neues ZIP, gleiche Adresse, QR bleibt
Abschlusszertifikat
Lade dir dein persönliches PDF-Zertifikat herunter
Gib deinen Namen ein — wir erstellen ein Zertifikat für den Abschluss des Profi-Kurses.
Bitte gib deinen Namen ein.
Die komplette Kursreihe
Der Profi-Kurs ist der letzte Baustein — hier dein Stand über alle fünf Kurse:
Alle fünf Kurse abgeschlossen!
Du beherrschst die komplette Reihe — von der ersten Idee bis zum gepflegten Profi-Projekt. Zeit, dass deine Klasse davon profitiert.
Und jetzt: Werkstatt einrichten, Ordner anlegen — und dein erstes Projekt bauen.