# Screenshot-Leitfaden — Digitales Pausenbrot > **68 Screenshots** fehlen noch in den Tutorials. Diese Datei listet alle auf, nach Block gruppiert, mit empfohlener Quelle pro Block. ## Schnell-Workflow 1. **Screenshot aufnehmen** (Cmd+Shift+4 auf Mac, Win+Shift+S auf Windows) 2. **Speichern als** `images/.png` (exakt so — dann erscheint das Bild automatisch) 3. **Preview testen**: lokale Vorschau öffnen, Tutorial aufrufen, Bild ist sofort sichtbar 4. **Neu bauen**: `python3 build.py` → neue statische HTML-Dateien mit Bildern 5. **Commit + Push** wie gewohnt ## Empfohlene Reihenfolge (Priorisierung) Die **10 wirkungsvollsten Screenshots zuerst** — Einstiegs-Steps der meist-besuchten Tutorials: 1. `einrichtung-step-1.png` — Cowork-Startbildschirm 2. `einrichtung-step-2.png` — claude.com/download 3. `einrichtung-step-4.png` — Erste Datei im Ordner 4. `elevenlabs-einrichtung-step-1.png` — elevenlabs.io Homepage 5. `elevenlabs-einrichtung-step-2.png` — Dashboard 6. `claude-code-profi-prompting-step-1.png` — Screenshot-Methode Demo 7. `claude-code-profi-prompting-step-5.png` — 3 MD-Dateien im Ordner 8. `antigravity-einrichtung-step-3.png` — Agent-Panel 9. `apps-einfuehrung-step-1.png` — Beispiel-App-Galerie 10. `apps-github-pages-step-1.png` — GitHub-Repo-Setup Danach die restlichen Blöcke nach persönlicher Präferenz. ## Dateinamen-Muster Alle Step-IDs sind in `tutorials.js` als `id: "xyz"` definiert. Dateiname ist immer `images/.png`. Keine Umlaute, keine Leerzeichen, alles klein. ## Rechtliches - **Eigene Screenshots** (du bedienst die Software selbst): 100 % sauber. - **Offizielle Hersteller-Screenshots** (aus Docs/Press Kits): meistens unter redaktioneller / Bildungs-Klausel nutzbar — Attribution empfohlen. - **Screenshots aus fremden Blogs/Tutorials**: NICHT ohne Einwilligung verwenden. - **Schüler:innen-Daten**: nie im Screenshot, auch nicht anonymisiert. --- ## 📓 NotebookLM (1 fehlen) **Empfohlene Quelle:** support.google.com/notebooklm (offizielle Hilfe-Artikel mit Screenshots) oder eigene Aufnahme aus notebooklm.google.com. ### Mit der KI arbeiten - **`zusammenfassungen-erstellen-notebooklm.png`** — Step «Zusammenfassungen erstellen»: Screenshot: Chat mit dem Prompt 'Erstelle eine Zusammenfassung aller Quellen' und der strukturierten Antwort von NotebookLM – mit Abschnitten und Quellenangaben ## 🎙️ ElevenLabs (16 fehlen) **Empfohlene Quelle:** elevenlabs.io/docs/eleven-creative/playground/text-to-speech (offizielle Produkt-Docs mit UI-Bildern). ### Einrichtung und erste Schritte - **`elevenlabs-einrichtung-step-1.png`** — Step «Was ist ElevenLabs?»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-einrichtung-step-2.png`** — Step «Konto erstellen und Gratis-Kontingent»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-einrichtung-step-3.png`** — Step «Oberfläche kennenlernen»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-einrichtung-step-4.png`** — Step «Erste Sprachausgabe in 2 Minuten»: (keine Beschreibung — siehe Step-Content) ### Text-to-Speech meistern - **`elevenlabs-tts-step-1.png`** — Step «Die richtige Stimme finden»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-tts-step-2.png`** — Step «Stimmparameter steuern»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-tts-step-3.png`** — Step «Lange Texte strukturieren»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-tts-step-4.png`** — Step «Mehrsprachige Projekte und Export»: (keine Beschreibung — siehe Step-Content) ### Stimmen klonen - **`elevenlabs-voice-cloning-step-1.png`** — Step «Bevor du startest: Datenschutz & Einwilligung»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-voice-cloning-step-2.png`** — Step «Instant Voice Clone: die eigene Stimme in einer Minute»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-voice-cloning-step-3.png`** — Step «Professional Voice Clone: höhere Qualität mit längerem Training»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-voice-cloning-step-4.png`** — Step «Geklonte Stimme testen und feinjustieren»: (keine Beschreibung — siehe Step-Content) ### ElevenLabs im Unterricht - **`elevenlabs-unterricht-step-1.png`** — Step «Hörverstehen-Material selbst erstellen»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-unterricht-step-2.png`** — Step «Inklusion: Arbeitsblätter als Audio»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-unterricht-step-3.png`** — Step «Vertonung von Erklärvideos und Präsentationen»: (keine Beschreibung — siehe Step-Content) - **`elevenlabs-unterricht-step-4.png`** — Step «Grenzen und Grauzonen im Schulkontext»: (keine Beschreibung — siehe Step-Content) ## 🖥️ Cowork (9 fehlen) **Empfohlene Quelle:** claude.com/product/cowork, claude.com/download, code.claude.com/docs/en/desktop-quickstart — Cowork-Desktop-App selbst aufnehmen ist der einfachste Weg. ### Cowork einrichten - **`einrichtung-step-1.png`** — Step «Was ist Cowork?»: Screenshot: Die Cowork-Startansicht mit dem Button «Work in a folder» und der seitlichen Session-Liste - **`einrichtung-step-2.png`** — Step «Pro-Plan und Download»: Screenshot: claude.com/download mit den Download-Buttons für Mac und Windows - **`einrichtung-step-3.png`** — Step «Die Cowork-Oberfläche verstehen»: Screenshot: Cowork-Oberfläche mit markierter Session-Liste, Chat-Bereich, «+»-Button und Ordner-Anzeige - **`einrichtung-step-4.png`** — Step «Erste Session: Datei im Ordner erstellen»: Screenshot: Nach der Anweisung zeigt Cowork die neu erstellte wochenplan.md im Arbeits-Ordner ### Mit einem Ordner arbeiten - **`work-in-folder-step-3.png`** — Step «Kontext prüfen und steuern»: Screenshot: Cowork zeigt nach /memory die Memory-Datei im Editor-Panel ### Instructions: dein Stil für Cowork - **`instructions-step-2.png`** — Step «Global Instructions einrichten»: Screenshot: Settings → Cowork → Feld Global Instructions mit ausgefüllter Vorlage ### Connectors: Gmail, Drive, Notion & mehr - **`connectors-step-2.png`** — Step «Ersten Connector einrichten (Google Drive)»: Screenshot: Settings → Connectors mit Google Drive-Eintrag im Status «Connected» ### Plugins: die «+»-Bibliothek - **`plugins-step-2.png`** — Step «Ein Plugin aktivieren»: Screenshot: Das «+»-Menü im Chat zeigt die Plugin-Liste mit aktivierten Plugins (Häkchen) ### Scheduled Tasks: Cowork arbeitet, während du schläfst - **`scheduled-tasks-step-2.png`** — Step «Einen ersten Scheduled Task einrichten»: Screenshot: Scheduled Tasks-Editor mit ausgefülltem Namen, Zeitplan, Ordner und Anweisungstext ## ⌨️ Code (6 fehlen) **Empfohlene Quelle:** code.claude.com/docs — CLI-Aufnahmen und VS-Code-Extension direkt. ### Claude Code im Unterricht - **`claude-code-unterricht-step-3.png`** — Step «Interaktive Inhalte (HTML)»: Screenshot: Claude Code Desktop-App mit einer generierten HTML-Datei und der Vorschau im Browser ### Profi-Prompting für Claude Code - **`claude-code-profi-prompting-step-1.png`** — Step «Die Screenshot-Methode»: (keine Beschreibung — siehe Step-Content) - **`claude-code-profi-prompting-step-2.png`** — Step «Brief statt Code-Anweisungen»: (keine Beschreibung — siehe Step-Content) - **`claude-code-profi-prompting-step-3.png`** — Step «Kontext + CLAUDE.md-Memory»: (keine Beschreibung — siehe Step-Content) - **`claude-code-profi-prompting-step-4.png`** — Step «Workflow & Fehler-Handling»: (keine Beschreibung — siehe Step-Content) - **`claude-code-profi-prompting-step-5.png`** — Step «Die 3-Part-Struktur: Context · Instruction · Ask First»: (keine Beschreibung — siehe Step-Content) ## 🤖 Agenten mit Claude Code (5 fehlen) **Empfohlene Quelle:** code.claude.com/docs/en/agents — eigene Terminal-Aufnahmen (iTerm/Warp) mit /agents-Befehl. ### Subagents und Agent Teams - **`managed-agents-step-1.png`** — Step «Worum es hier geht — und worum nicht»: (keine Beschreibung — siehe Step-Content) - **`managed-agents-step-2.png`** — Step «Was sind Subagents?»: (keine Beschreibung — siehe Step-Content) - **`managed-agents-step-3.png`** — Step «Einen Subagent in Claude Code anlegen»: (keine Beschreibung — siehe Step-Content) - **`managed-agents-step-4.png`** — Step «Agent Teams: mehrere Subagenten parallel»: (keine Beschreibung — siehe Step-Content) - **`managed-agents-step-5.png`** — Step «Grenzen und realistische Empfehlung»: (keine Beschreibung — siehe Step-Content) ## 🚀 Antigravity (12 fehlen) **Empfohlene Quelle:** codelabs.developers.google.com/getting-started-google-antigravity und developers.googleblog.com/build-with-google-antigravity-our-new-agentic-development-platform/ — sehr gute offizielle Screenshots. ### Einrichtung und erster Blick - **`antigravity-einrichtung-step-1.png`** — Step «Was ist Antigravity?»: (keine Beschreibung — siehe Step-Content) - **`antigravity-einrichtung-step-2.png`** — Step «Installation»: (keine Beschreibung — siehe Step-Content) - **`antigravity-einrichtung-step-3.png`** — Step «Die Oberfläche verstehen»: (keine Beschreibung — siehe Step-Content) - **`antigravity-einrichtung-step-4.png`** — Step «Erster Agent: «Hallo Welt»»: (keine Beschreibung — siehe Step-Content) ### Mit Agenten arbeiten - **`antigravity-agenten-step-1.png`** — Step «Wie ein Agent «denkt»»: (keine Beschreibung — siehe Step-Content) - **`antigravity-agenten-step-2.png`** — Step «Gute Aufträge formulieren»: (keine Beschreibung — siehe Step-Content) - **`antigravity-agenten-step-3.png`** — Step «Mehrere Agenten parallel»: (keine Beschreibung — siehe Step-Content) - **`antigravity-agenten-step-4.png`** — Step «Artefakte reviewen und ablehnen»: (keine Beschreibung — siehe Step-Content) ### Antigravity im Schulalltag - **`antigravity-schulalltag-step-1.png`** — Step «Use-Case 1: Interaktive Unterrichts-App»: (keine Beschreibung — siehe Step-Content) - **`antigravity-schulalltag-step-2.png`** — Step «Use-Case 2: Prüfungs-Auswertung mit CSV»: (keine Beschreibung — siehe Step-Content) - **`antigravity-schulalltag-step-3.png`** — Step «Grenzen: wann Antigravity nicht das richtige Werkzeug ist»: (keine Beschreibung — siehe Step-Content) - **`antigravity-schulalltag-step-4.png`** — Step «Einstieg für Informatik-Lehrpersonen»: (keine Beschreibung — siehe Step-Content) ## 🛠️ Apps entwickeln (19 fehlen) **Empfohlene Quelle:** Mix — claude.ai für Artefakte, chatgpt.com für Canvas, gemini.google.com für Canvas, fobizz.com für Assistent, github.com für Pages-Setup. Eigene Aufnahmen empfehlenswert. ### HTML-Apps für den Unterricht - **`apps-einfuehrung-step-2.png`** — Step «Was kann man damit machen?»: Screenshot: Drei Beispiele nebeneinander — ein Quiz, ein Lernkarten-Set und eine Zeitleiste als HTML-Apps ### Apps mit Claude - **`apps-claude-step-1.png`** — Step «Was sind Artefakte?»: Screenshot: Claude Chat mit einem Artefakt — links der Chat, rechts die Live-Vorschau einer HTML-App - **`apps-claude-step-2.png`** — Step «Eine App erstellen — Schritt für Schritt»: Screenshot: Claude zeigt das fertige Lernkarten-Artefakt mit einer Schweizer Kantonskarte - **`apps-claude-step-3.png`** — Step «Artefakt teilen»: Screenshot: Der Teilen-Dialog von Claude mit dem kopierbaren Link und dem Veröffentlichen-Button - **`apps-claude-step-4.png`** — Step «Praxis: Drei Apps in 10 Minuten»: Screenshot: Drei Claude-Artefakte nebeneinander — Quiz, Timer und Vokabeltrainer ### Apps mit ChatGPT - **`apps-chatgpt-step-1.png`** — Step «So erstellst du HTML mit ChatGPT»: Screenshot: ChatGPT mit Canvas-Ansicht, die HTML-Code zeigt - **`apps-chatgpt-step-2.png`** — Step «HTML-Datei speichern und testen»: Screenshot: TextEdit mit eingefügtem HTML-Code und dem Speichern-Dialog mit .html Endung - **`apps-chatgpt-step-3.png`** — Step «App veröffentlichen auf Lerndrop.ch»: Screenshot: Die Lerndrop.ch-Oberfläche mit dem Upload-Bereich und einem generierten Link - **`apps-chatgpt-step-4.png`** — Step «Praxis: Vom Prompt zur fertigen App»: Screenshot: Das fertige Periodensystem im Browser — farbcodiert mit einer offenen Info-Box ### Apps mit Gemini - **`apps-gemini-step-1.png`** — Step «HTML mit Gemini erstellen»: Screenshot: Gemini mit Code-Ausgabe für eine HTML-App - **`apps-gemini-step-4.png`** — Step «Praxis: Interaktive Zeitleiste»: Screenshot: Die fertige interaktive Zeitleiste im Browser mit einem geöffneten Ereignis-Detail ### Apps mit Fobizz - **`apps-fobizz-step-1.png`** — Step «Was ist Fobizz?»: Screenshot: Die Fobizz-Oberfläche mit dem KI-Assistenten - **`apps-fobizz-step-2.png`** — Step «HTML-App erstellen mit Fobizz»: Screenshot: Der Fobizz KI-Assistent mit einem Prompt für eine HTML-App - **`apps-fobizz-step-4.png`** — Step «Veröffentlichen und teilen»: Screenshot: Der komplette Workflow als Übersicht — von Prompt bis geteiltem Link ### Apps hosten auf Lerndrop.ch - **`apps-hosting-step-2.png`** — Step «App hochladen — Schritt für Schritt»: Screenshot: Die Lerndrop.ch-Oberfläche mit einer hochgeladenen Datei und dem kopierbaren Link - **`apps-hosting-step-3.png`** — Step «QR-Code erstellen»: Screenshot: Ein ausgedruckter QR-Code neben einem Tablet, das die entsprechende App zeigt ### Mit GitHub Pages veröffentlichen - **`apps-github-pages-step-1.png`** — Step «Warum GitHub Pages? Abgrenzung zu Lerndrop.ch»: Screenshot: Split-Vergleich Lerndrop.ch (links) und GitHub Pages (rechts), jeweils Startseite - **`apps-github-pages-step-2.png`** — Step «Kostenlos anmelden und erstes Repository erstellen»: Screenshot: GitHub «Create repository»-Dialog mit dem Feld username.github.io ausgefüllt - **`apps-github-pages-step-3.png`** — Step «HTML-Datei hochladen (Drag & Drop)»: Screenshot: Drag-&-Drop-Upload-Bereich im Repository, index.html bereits sichtbar in der Dateiliste *68 Screenshots, Stand 2026-04-17. Erstellt durch build.py / screenshot-guide generator.*