Einen PICTS-Blog mit einem Coding-Agenten erstellen

Worum es geht

Wofür ich den Agenten nutze

Ich wollte einen Ort, an dem sichtbar wird, was in meiner PICTS-Arbeit tatsächlich passiert: kleine Versuche, brauchbare Anleitungen, Umwege und Dinge, die sich im Unterricht bewährt haben.

Der Coding-Agent arbeitet direkt in meinem Projektordner. Dort legt er die Website an, startet die Vorschau und behebt technische Fehler. Wenn ich die Seite geprüft habe, veröffentlicht er sie mit Git.

Ich muss also keinen Code aus dem Chat kopieren. Ich gebe dem Agenten stattdessen einen Auftrag wie: «Schau dir das Projekt an, setze diese Änderung um, teste sie und zeig mir das Ergebnis.»

Vorbereitung

Was du für den Start brauchst

Du brauchst die ChatGPT-Desktop-App mit einem Coding-Agenten, der auf einen lokalen Ordner zugreifen und Befehle ausführen darf. Je nach Abo oder App-Version heisst diese Funktion beispielsweiseCodex, Coding oderAgentenmodus. Ein gewöhnlicher Chat ohne Ordnerzugriff genügt nicht.

• Installiere die Desktop-App nur über die offizielle OpenAI-Seite oder den offiziellen App Store.
• Erstelle ein kostenloses Konto auf github.com.
• Wähle einen kurzen GitHub-Namen. Er wird Teil der späteren Adresse.
• Aktiviere bei GitHub die Zwei-Faktor-Authentifizierung.
• Erstelle auf deinem Computer einen leeren Ordner, zum Beispiel picts-blog.
• Öffne genau diesen Ordner als Arbeitsbereich im Coding-Agenten.

Git und Node.js braucht das Projekt ebenfalls. Du musst beides nicht auf Verdacht selbst installieren. Gib dem Agenten zuerst diesen kurzen Auftrag:

Prüfe bitte, ob auf diesem Computer Git, Node.js und die GitHub CLI
vorhanden sind. Verändere noch nichts. Erkläre mir in einfachen
Worten, was fehlt, und installiere Fehlendes erst nach meiner Freigabe.

Auf einem Schulgerät kann für eine Installation das Passwort eines Administratorkontos nötig sein. Falls du dieses nicht hast, muss der schulische IT-Support die Installation übernehmen.

Projekt anlegen

Der erste Auftrag

Sag zu Beginn, wofür der Blog gedacht ist, wer ihn lesen soll und was der Agent nicht einbauen soll. Damit kann er eine erste Fassung erstellen.

Diesen Auftrag kannst du anpassen

Wir bauen in diesem Ordner meinen persönlichen PICTS-Blog.

Leserinnen und Leser sind Lehrpersonen an Berufsfachschulen. Ich
möchte dort knapp und konkret zeigen, was ich in meiner PICTS-Arbeit
ausprobiere, was funktioniert und was andere übernehmen können.

Bitte:
- erstelle eine kleine, gut wartbare Website mit Astro
- richte Beiträge als einfache Markdown-Dateien ein
- gestalte die Seite ruhig, eigenständig und auf dem Handy gut lesbar
- verwende Schweizer Rechtschreibung
- baue eine Startseite, eine Blogübersicht und einen Musterbeitrag
- verwende vorerst keine Datenbank, kein CMS und kein Tracking
- bereite die Veröffentlichung auf GitHub Pages vor

Arbeite direkt in diesem Ordner. Triff vernünftige technische
Entscheide selbst. Starte danach die lokale Vorschau, prüfe den Build
und zeige mir, was du gemacht hast. Noch nichts veröffentlichen.

Nach diesem Auftrag legt der Agent die Projektdateien an, installiert die nötigen Pakete und startet die Seite lokal. Dabei erscheinen unter Umständen Rückfragen oder Freigaben für Befehle. Lies sie kurz. Eine Installation im Projektordner ist normal; Zugriff auf völlig andere Ordner wäre ein Grund nachzufragen.

Gib nicht zu viele technische Einzelheiten vor. Für diesen Blog reichen Astro und Beiträge in Markdown. Zusätzliche Bibliotheken machen das Projekt schnell unnötig kompliziert.

Vorschau

Die erste Fassung ansehen

Wenn der Agent fertig ist, sollte er eine Adresse für die lokale Vorschau nennen, häufig http://localhost:4321. Öffne sie im Browser. Die Website ist zu diesem Zeitpunkt nur auf deinem Computer sichtbar.

Prüfe zunächst die sichtbare Seite aus der Perspektive der Leserinnen und Leser, nicht den Programmcode:

• Verstehe ich auf der Startseite sofort, worum es geht?
• Kann ich den ersten Beitrag ohne Suchen öffnen?
• Ist der Text auf dem Smartphone angenehm lesbar?
• Wirkt das Design nach mir oder nach einer beliebigen Firmenwebsite?
• Gibt es Behauptungen oder Angaben, die ich nie gemacht habe?

Beschreibe bei einer Rückmeldung möglichst konkret, was du auf der Seite beobachtest. Statt «mach es schöner» könntest du schreiben:

Nach einer grösseren Änderung lasse ich den Agenten den Build und die Mobilansicht nochmals prüfen. So sehe ich Fehler, bevor die Seite veröffentlicht wird.

Erster Text

Aus Notizen wird ein Beitrag

Der Musterbeitrag dient nur zum Testen der Website. Ersetze ihn durch Material aus deiner eigenen PICTS-Arbeit. Ungeschliffene Stichworte genügen; ganze Sätze sind nicht nötig.

Der Musterbeitrag kommt weg. Interviewe mich stattdessen zu meinem
letzten PICTS-Einsatz. Stelle immer nur eine Frage und höchstens sechs
Fragen insgesamt. Frage nach Ausgangslage, meinem konkreten Vorgehen,
Reaktion der Lehrpersonen, Stolpersteinen und dem nächsten Schritt.

Schreibe erst danach einen Entwurf. Erfinde nichts und markiere
fehlende Angaben sichtbar.

Durch die Fragen bezieht sich der Entwurf auf eine bestimmte Erfahrung. Das ist meist ergiebiger als ein allgemeiner Auftrag wie «Schreib einen Blogbeitrag über KI im Unterricht».

Diese Fragen helfen beim Schreiben

1. Was war die konkrete Ausgangslage?
2. Was habe ich tatsächlich gemacht?
3. Was hat überraschend gut oder schlecht funktioniert?
4. Was können Kolleginnen und Kollegen direkt übernehmen?
5. Was probiere ich beim nächsten Mal anders?

GitHub Pages

Die Website veröffentlichen

Der Agent richtet Git ein, erstellt das Repository und überträgt die Website. Wenn GitHub im Browser nach einer Anmeldung oder einer Berechtigung fragt, bestätigst du das selbst.

Die lokale Fassung passt. Veröffentliche das Projekt jetzt auf GitHub
Pages.

Prüfe zuerst, ob sensible oder unnötige Dateien im Projekt liegen.
Initialisiere Git, erstelle sinnvolle Commits und lege über die GitHub
CLI ein öffentliches Repository an. Richte einen GitHub-Actions-
Workflow für Astro und GitHub Pages ein. Veröffentliche erst, nachdem
der lokale Build erfolgreich war.

Mein gewünschter Repository-Name ist: [deinname.github.io]

Falls eine Anmeldung oder eine Bestätigung im Browser nötig ist,
halte an und sage mir genau, was ich bestätigen muss.

Beim ersten Mal öffnet GitHub sehr wahrscheinlich ein Browserfenster zur Anmeldung. Prüfe, dass die Adresse wirklich zugithub.com gehört. Die Anmeldung und die angezeigten Berechtigungen solltest du selbst prüfen und bestätigen.

Nach der Veröffentlichung gibt der Agent die Webadresse und den Link zum GitHub-Repository aus. Bis die Seite erreichbar ist, können ein paar Minuten vergehen. Danach lasse ich sie nochmals prüfen:

Öffne die veröffentlichte Adresse. Prüfe Navigation, alle internen
Links, Bilder und die Darstellung mit schmalem Bildschirm. Lies auch
die GitHub-Actions-Ausgabe auf Fehler. Ändere nur etwas, wenn du einen
konkreten Fehler findest.

Später

Neue Beiträge ergänzen

Für weitere Beiträge öffnest du denselben Projektordner wieder im Agenten. Du brauchst weder GitHub im Browser noch einen Dateiupload. Der Agent liest die vorhandene Struktur ein und legt den Beitrag am vorgesehenen Ort ab.

Erstelle einen neuen Blogbeitrag im bestehenden Blog.

Titel: Was vom KI-Kurzworkshop übrig blieb
Datum: 18. September 2026

Meine Notizen:
- 45 Minuten mit zwölf Lehrpersonen
- Ziel war nicht Prompting, sondern Aufgaben kritisch prüfen
- Vergleich von drei KI-Antworten zur gleichen Prüfungsfrage
- gute Diskussion über plausible Fehler
- Zeit für den Transfer ins eigene Fach fehlte
- nächstes Mal 20 Minuten weniger Input, dafür eigener Fachauftrag

Schreibe knapp und sachlich in meiner bisherigen Tonalität. Keine
allgemeine Einleitung über die digitale Transformation. Zeige mir
zuerst den Entwurf. Veröffentliche noch nichts.

Nach deiner Textfreigabe folgt nur noch:

Übernimm den freigegebenen Text. Prüfe die Seite und veröffentliche
die Änderung mit einem passenden Git-Commit. Kontrolliere danach die
öffentliche Seite.

Jede Änderung wird im Repository gespeichert. Falls später etwas nicht mehr funktioniert, kann der Agent die älteren Fassungen vergleichen und den Fehler suchen.

Bilder

Eigene Bilder einbauen

Ziehe das Bild in den Chat oder lege es in den Projektordner. Sag dem Agenten, in welchen Beitrag es gehört. Er benennt und verkleinert die Datei und baut sie an der gewünschten Stelle ein. Beim nächsten Push gelangt sie zusammen mit dem restlichen Projekt zu GitHub.

Verwende das beigefügte Bild im neuen Beitrag. Entferne vorhandene
Metadaten, verkleinere es auf eine für die Website geeignete Grösse
und speichere es im bestehenden
Bilderordner. Schreibe einen sachlichen Alternativtext. Prüfe danach,
ob das Bild auf breiten und schmalen Bildschirmen korrekt dargestellt
wird. Noch nicht veröffentlichen.

Ob Lernende auf einem Bild erkennbar sind, eine Einwilligung vorliegt oder ein fremdes Bild verwendet werden darf, prüfst du selbst.

Ein eigenes Bild von Material, Arbeitsplatz oder Ergebnis ist oft aussagekräftiger als ein generisches KI-Symbolbild und lässt sich rechtlich klarer einordnen, sofern darauf weder Personen noch vertrauliche Angaben erkennbar sind.

Vor jedem Push

Vor der Veröffentlichung prüfen

GitHub Pages und das öffentliche Repository sind für alle lesbar. Prüfe deshalb vor jedem Push, welche Texte, Bilder und Dateien der Agent überträgt.

• Keine Namen, Noten, Arbeiten oder Kontaktdaten von Lernenden veröffentlichen.
• Keine internen Schulunterlagen, Zugangsdaten oder vertraulichen Sitzungsnotizen in den Projektordner legen.
• Fremde Texte und Bilder nur mit passender Lizenz und Quellenangabe verwenden.
• Alle fachlichen Behauptungen und Links selbst prüfen.
• Schulinterne, kantonale und datenschutzrechtliche Vorgaben beachten.
• Den Agenten vor einer Veröffentlichung immer nochmals sagen lassen, welche Dateien er überträgt.

Dafür verwende ich diesen Auftrag:

Führe vor der Veröffentlichung einen Datenschutz- und
Sicherheitscheck des Projekts durch. Suche nach Personendaten,
E-Mail-Adressen, Zugangsdaten, lokalen Dateipfaden, Metadaten in
Bildern und versehentlich eingecheckten Konfigurationsdateien.
Berichte zuerst. Lösche oder veröffentliche nichts ohne meine Freigabe.

Fehlersuche

Falls etwas nicht klappt

Bei der Installation, beim Build oder beim Veröffentlichen kann eine Fehlermeldung auftauchen. Schicke nicht nur «Es geht nicht», sondern lass den Agenten die Meldung lesen und zuerst nach der Ursache suchen.