⭐ Ultimative Anleitung

Eigenes Lehrer-Tool mit KI bauen - vom Prompt zum fertigen Instagram-Mockup

Die komplette Anleitung mit funktionierendem Beispiel: wie du in 30-60 Minuten ein professionelles Medien-Unterrichts-Tool mit KI selbst baust. Mit dem vollen Prompt zum Kopieren, typischen Iterations-Runden und warum gute Prompts überraschend komplex sind.

25. Mai 2026·Jonas Weidlich·15 Min. Lesezeit·Mit funktionierendem Beispiel

Du willst für deinen Medienunterricht ein Instagram-Mockup-Tool, in dem Schüler:innen ihre eigenen Posts gestalten können - ohne echtes Instagram-Konto, ohne App, einfach im Browser. Vor 3 Jahren hättest du das nicht hingekriegt. 2026 baust du es in 30-60 Minuten mit Claude oder ChatGPT. Dieser Artikel zeigt dir den kompletten Prompt, das fertige Beispiel und warum 80 % aller KI-Tool-Versuche an unvollständigen Prompts scheitern.

Das fertige Tool

📷 Instagram-Post-Creator (Live-Beispiel)

So sieht das fertige Tool aus, das aus dem Prompt unten entsteht. Klick rein, gestalte einen Post, lade ihn als PNG herunter.

Beispiel öffnen

1. Warum überhaupt ein eigenes Tool bauen?

Für den Medienunterricht der Klasse 7-10 brauchst du immer wieder Mockup-Tools: Instagram, TikTok, WhatsApp-Chats nachstellen, damit Schüler:innen kritisch über Social-Media-Inhalte reflektieren. Die Probleme mit fertigen Tools:

Ein eigenes Tool, das du als HTML hostest, löst alle drei Probleme: kein Account, keine Werbung, kein Daten-Transfer ins Ausland, dafür voll interaktiv mit Drag-and-Drop und PNG-Export.

2. Warum gute Prompts so komplex sind

Ein typischer Erst-Versuch: „Baue mir ein Instagram-Mockup-Tool als HTML-Datei." Die KI liefert dann etwas, das auf den ersten Blick wie Instagram aussieht - aber bei genauerem Hinschauen:

Die Lösung: du musst der KI ALLES aufschreiben, was du dir wünschst. Was sich für dich offensichtlich anfühlt („natürlich soll man Bilder hochladen können"), muss explizit in den Prompt. Sonst wird's geraten und meist falsch geraten.

Die Faustregel

Je länger und detaillierter dein Prompt, desto weniger Iterations-Runden brauchst du. Ein 500-Wörter-Prompt mit allen Details liefert beim ersten Versuch oft 80-90 % Treffer. Ein 50-Wörter-Prompt liefert 30 % - und du brauchst 8-10 Iterations-Runden, um dorthin zu kommen wo du eh hin willst.

Mehr zum Thema Prompt-Engineering im Artikel ChatGPT für Lehrer Praxis-Leitfaden.

3. Der komplette Prompt zum Kopieren

Hier ist der vollständige Prompt, mit dem das Beispiel oben entstanden ist. Kopier ihn, füge ihn in Claude (Opus 4.8 oder Sonnet 4.6) ein, schick ab. Die KI generiert daraufhin den kompletten HTML-Code.

Prompt · ca. 600 Wörter
Erstelle eine einzelne HTML-Datei (alles inline, einzige externe Abhängigkeit: html2canvas via cdnjs für den PNG-Export, Schrift „Outfit" via Google Fonts): einen Instagram-Post-Creator als Schul-Werkzeug für den Medienunterricht. # ZIEL & ZIELGRUPPE Lehrkräfte (Sek I/II, Berufskolleg) gestalten mit Schüler:innen realistisch aussehende Instagram-Post-Mockups , für Medienbildung, Quellenkritik, Plakat- und Aushang-Design. Die App ist KEINE echte Instagram-Verbindung, sondern ein reines Mockup, das einen Post visuell zusammenstellt und als PNG exportiert. Generische Default-Inhalte, keine personenbezogenen Daten. # LAYOUT Drei Bereiche, volle Höhe, ohne Seiten-Scroll: - Kopfzeile: Logo, Titel „Instagram Post Creator", kleiner Untertitel, rechts ein Badge „Unterrichtsmaterial". - MITTE (zentriert): iPhone-Frame mit Live-Vorschau des Posts. Darunter zwei Tipp-Karten („Gestaltungstipps", „Bedienung"). - RECHTS (Breite ca. 330px): Steuer-Panel mit einer TAB-LEISTE aus 5 Tabs (Bilder, Raster, Text, Sticker, Profil). Es ist immer nur ein Tab sichtbar. # PHONE-MOCKUP (Live-Vorschau) iPhone-ähnlicher Frame (dunkler Rahmen, Notch oben, weißes Display). Inhalt von oben nach unten: 1. IG-Topbar: „Instagram"-Schriftzug links, Herz- und Senden-Icon rechts. 2. Profil-Header: runder Avatar, Benutzername (optional mit blauem Verifiziert-Haken), Standort, „Folgen"-Button, Drei-Punkte-Menü. 3. EDITOR-CANVAS: quadratisch, 640x640 interne Auflösung. Hier werden Bilder, Text und Sticker gerendert. 4. IG-Actions: Herz (klickbar = liken), Kommentar, Senden, Bookmark. 5. Likes-Zeile, Caption (Benutzername fett + Text), Hashtags (blau), „Alle N Kommentare ansehen", Zeitstempel. # RECHTES PANEL , DIE 5 TABS ## Tab „Bilder" - Upload-Zone: Klick oder Drag and Drop, JPG/PNG/GIF, mehrere Bilder gleichzeitig. - Mediathek: Thumbnails aller hochgeladenen Bilder. Klick legt ein Bild auf den Canvas. - Ebenen-Liste: alle Objekte auf dem Canvas, per Griff sortierbar (Drag and Drop), Klick wählt aus. - Ausgewähltes Objekt: Drehen, Deckkraft, Bildfilter (z.B. Schwarz-Weiß, Sepia, Kontrast, Wärme), Löschen. ## Tab „Raster" - Collage-Raster wählen: 1x1, 2x1, 1x2, 2x2, 3x3, „Frei". - Einzelne Zellen anklicken und mit einem Bild füllen, Filter pro Zelle einstellbar. ## Tab „Text" - Text auf dem Bild: Haupttitel und Untertitel. - Einstellbar: Stil, Schriftart (mehrere zur Wahl), Schriftgröße, Textfarbe, Textposition (oben / mitte / unten), Effekte (z.B. Schatten). ## Tab „Sticker" - Emoji- und Sticker-Auswahl: Klick fügt einen Sticker hinzu, danach verschieben und skalieren. - Text-Sticker mit Farboptionen. ## Tab „Profil" - Benutzername, Standort, Verifiziert-Haken an/aus. - Button-Variante (Folgen / Kontakt / Nachricht senden), Avatar-Farbe (Palette). - Post-Text: Caption und Hashtags. - Interaktionen: Likes-Zahl, Like-Status (geliked / nicht geliked), Anzahl Kommentare, optionale Kommentar-Vorschau, Zeitstempel. # INTERAKTION (JS) - Objekte (Bilder, Text, Sticker) auf dem Canvas: anklicken, verschieben (Maus und Touch), skalieren (Mausrad oder Pinch-Geste), drehen. - Pfeiltasten bewegen das ausgewählte Objekt fein, Entf löscht es, Doppelklick wählt das Objekt darunter. - Ebenen-Reihenfolge per Drag and Drop in der Ebenen-Liste. - Jede Änderung aktualisiert die Live-Vorschau sofort. # EXPORT - Button „Post als PNG herunterladen". Nutzt html2canvas mit hoher Auflösung (scale 3), exportiert nur die Post-Vorschau, Dateiname „instagram-post.png". # DESIGN - PrepClass-Look: Indigo/Violett-Akzente (#4f46e5, #7c3aed), Schrift „Outfit" (Google Fonts), weiße Karten, abgerundete Ecken, dezente Schatten. - Touch-tauglich (funktioniert auf dem iPad). Responsive: unter ca. 700px Breite stapelt das Layout vertikal (Phone oben, Panel darunter). - Dezenter Footer „© 2026 PrepClass". # QUALITÄTS-KRITERIEN - Single-File: ALLES in einer HTML-Datei, pures HTML5/CSS/JS, KEINE Frameworks (kein React, kein Bootstrap). - Einzige externe Abhängigkeiten: html2canvas via cdnjs und die Schrift via Google Fonts. - Generische Defaults (kein echter Name), keine personenbezogenen Daten. - Läuft direkt per Doppelklick auf die Datei, kein Build-Schritt, keine separaten CSS- oder JS-Dateien. Gib mir den kompletten, direkt lauffähigen HTML-Code.

4. Typische Iterations-Runden

Selbst mit einem 700-Wörter-Prompt ist die erste Version selten perfekt. Hier die Folge-Prompts, die ich beim Bauen des Beispiels gebraucht habe:

1
Mobile-Layout fixen

Die erste Version sah am Desktop perfekt aus, aber auf dem Handy war das Steuer-Panel oben statt unten und das Phone-Mockup wurde zu klein.

Auf dem Smartphone (Breite <700px) wird das Layout vertikal: Phone-Mockup oben in voller Breite, Steuer-Panel darunter. Aktuell ist es umgekehrt. Korrigiere die @media-Query.
2
Bild-Skalierung im Raster-Modus

Wenn ein 2x2-Raster aktiv war, ließen sich die einzelnen Bilder nicht mehr individuell skalieren - der Code hatte das Skalieren generell deaktiviert.

Bei aktivem Raster (2x2, 3x3 etc.) müssen Bilder INNERHALB ihrer Zelle weiterhin skaliert und rotiert werden können - nur die freie Positionierung soll deaktiviert sein. Aktuell ist alles gesperrt.
3
PNG-Export Auflösung

Der Export-PNG war pixelig - 320x320 statt der gewünschten 1920x1920.

Beim PNG-Export soll die Auflösung 3x höher sein als die Display-Größe. Nutze html2canvas mit scale:3 und stelle sicher, dass die Bilder im Canvas mit voller Original-Auflösung gerendert werden.
4
Touch-Bedienung auf iPad

Auf dem iPad funktionierten Drag-and-Drop und Zoom-per-Mausrad nicht.

Bilder auf dem iPad müssen per Touch verschoben werden (pointerdown/move/up statt mousedown/move/up). Skalierung per Pinch-Gesture statt Mausrad. Nutze Pointer-Events statt nur Mouse-Events.
5
Schul-PC-Performance

Auf älteren Schul-PCs lief die Vorschau ruckelig bei 5+ Bildern.

Die Live-Vorschau ruckelt bei mehreren Bildern. Optimiere: nur bei Änderungen neu zeichnen (requestAnimationFrame statt setInterval), Bild-Cache für skalierte Versionen, debounce der Slider-Events auf 50ms.

Gesamt-Zeit für diese 5 Iterations-Runden: ca. 20 Minuten. Plus initiale Prompt-Erstellung 10 Min, plus lokales Testen 10 Min = ca. 40-50 Minuten von Idee zu funktionierendem Tool.

5. Welche KI eignet sich am besten?

ModellErst-Versuch-QualitätIterations-AnzahlKosten
Claude Sonnet 4.6Sehr gut3-5 Runden20 USD/Mo Pro
Claude Opus 4.8Exzellent2-3 Runden20 USD/Mo Pro (höheres Limit)
ChatGPT GPT-4oGut5-7 Runden20 USD/Mo Plus
Gemini 2.5 ProMittelmäßig bei komplexem JS7-10 RundenKostenlos

Für ein Tool dieser Komplexität (Canvas-Bild-Manipulation, Drag-and-Drop, PNG-Export) empfehle ich klar Claude. Mehr Detail-Vergleich findest du im Artikel ChatGPT vs Claude vs Gemini für HTML-Unterricht.

6. Wie PrepClass den Workflow vereinfacht

Der Prompt oben funktioniert direkt mit Claude/ChatGPT - du brauchst nicht zwingend PrepClass. Aber PrepClass nimmt dir die Schritte ab, die zwischen „funktionierende HTML-Datei" und „läuft bei meiner Klasse im Browser" liegen:

Kurz: ohne PrepClass musst du nach dem Prompt selbst hosten - mit eigenem Webspace, GitHub-Pages oder einem Cloud-Dienst. Mit PrepClass ist das eine 30-Sekunden-Sache: Datei rein, Link raus.

7. Hosting + Teilen mit der Klasse

  1. HTML-Datei lokal speichern (z.B. instagram-mockup.html)
  2. PrepClass öffnen → Tab „Online stellen" oder „Material" → „HTML hochladen"
  3. Titel eingeben („Instagram-Post-Creator Klasse 8b")
  4. Klasse zuordnen (optional, hilft bei Übersicht)
  5. Speichern: Kurz-URL + QR-Code erscheinen sofort
  6. Im Klassenraum: QR-Code via Beamer projizieren, Klasse scannt, Stunde startet

Free-Tarif: 1 aktive HTML-Stunde gleichzeitig - reicht zum Ausprobieren. Pro-Tarif: 20 aktive Stunden, sinnvoll wenn du regelmäßig wechselnde HTML-Tools für verschiedene Klassen brauchst.

8. Was du daraus für andere Tools lernst

Das Schema vom Instagram-Mockup funktioniert für viele andere Schul-Tools nahezu identisch:

Die Struktur bleibt: 2-Spalten-Layout, links Live-Vorschau, rechts Steuer-Panel, unten Export-Button. Du brauchst nur den Phone-Frame und die UI-Elemente anpassen.

Für jedes dieser Tools kannst du den Prompt oben als Vorlage nehmen - ersetze einfach „Instagram" durch das gewünschte Format und passe die UI-Elemente in den Sektionen an. Die Mechanik (Live-Update, Bild-Upload, Export) bleibt gleich.

9. Fazit

Ein eigenes Lehrer-Tool mit KI zu bauen ist 2026 keine Programmier-Übung mehr, sondern eine Schreib-Übung. Wer einen detaillierten Prompt formuliert, bekommt in 30-60 Minuten ein professionell aussehendes, voll funktionsfähiges Tool - ohne eine einzige Zeile selbst zu programmieren.

Die einzige echte Hürde ist das Hosting nach der Erstellung. Wer das selbst lösen will (Netlify-Account, Domain einrichten), kann das machen - es kostet aber 1-2 Stunden Setup-Zeit pro Tool. Mit PrepClass ist das eine 30-Sekunden-Sache: HTML rein, Link raus.

Mein Tipp: Bau dir die ersten 2-3 Tools komplett durch (Prompt + Iterations-Runden + Hosting). Nach dem dritten Mal hast du Routine und das vierte Tool dauert dann nur noch 15 Minuten von Idee zu produktiv.

Eigenes HTML-Tool hosten und teilen

PrepClass „Online stellen": HTML hochladen, Kurz-URL + QR-Code in 30 Sekunden. Server in Nürnberg, DSGVO-konform. Free-Tarif dauerhaft kostenlos.

PrepClass kostenlos starten →