🎤 Trainer-Drehbuch – Claude Code Workshop (26 Teilnehmer)

Nur für dich als Moderator. Timing, Ansagen, Stolperfallen, Notfallpläne. Gesamtdauer: ~3,5 Std. inkl. Pausen. Lässt sich auf 2,5 Std. straffen (siehe „Kurzversion“).

0. Vor dem Workshop (Checkliste für IT / dich)

Unbedingt vorab auf allen Rechnern:

Claude Code installiert und einmal eingeloggt getestet (claude startet)
Git installiert (git --version funktioniert)
GitHub CLI gh installiert (gh --version) – Claude nutzt es zum Hochladen
Browser aktuell, kein aggressiver Werbeblocker auf github.com / cloudflare.com / webhook.site

Organisatorisch:

Stabiles WLAN (26 Leute laden gleichzeitig – das ist der #1-Risikofaktor)
Beamer + dein Bildschirm gespiegelt
Workshop-Slides.html im Browser geöffnet, Vollbild mit F11 (Navigation: Pfeiltasten/Leertaste/Scrollen). Foliennummern unten in diesem Drehbuch passen 1:1 zu den HTML-Folien.
Optional: Slides-Link an alle verteilen (Datei verschicken oder auf Cloudflare Pages legen)
Workshop-Chat (Slack-Channel) für Live-URLs und Fragen
2–3 Helfer:innen im Raum eingeteilt (Technik-affine Kolleg:innen), die bei Phase 3 & 5 herumgehen
Material verteilt: 02_Teilnehmer_Lab-Guide.md + 03_Cheat-Sheet.md (ausgedruckt oder als PDF)
Du hast das Referenzprojekt (referenz-projekt/) auf deinem Rechner als Demo/Fallback

Vorab selbst einmal komplett durchspielen! Mach den ganzen Lab-Guide einmal mit einem frischen Test-Account durch. Du fühlst dann jede Stolperfalle und kennst die exakten UI-Klickwege (die sich bei GitHub/Cloudflare gelegentlich leicht ändern).

1. Einstieg & Big Picture (15 Min) — Folien 1–4

Ziel: Neugier wecken, Angst nehmen.

Ansage (sinngemäß):

„Heute lernt ihr keinen Programmierkurs. Ihr lernt, mit einem neuen digitalen Kollegen zu arbeiten. Am Ende des Tages hat jede:r von euch eine echte Webseite im Internet – mit Lead-Formular. Versprochen.“

Zeig deine eigene fertige Referenzseite live (die .pages.dev-URL) + trag einen Lead ein, zeig wie er auf webhook.site aufpoppt. Das ist der Köder. „Das baut ihr heute selbst.“
Erkläre die Tagesstruktur (Konzepte → selber bauen).

💡 Tipp: Halte den Konzeptteil kurz und konkret. Die Leute lernen die Begriffe später beim Tun wirklich. Die Folien sind Anker, kein Vortrag.

2. Konzeptteil: Die 4 Grundbegriffe (30 Min) — Folien 5–12

Nutze die Kollegen-Metapher als roten Faden (Hände / der Kollege / Handbücher / Zugänge).

Begriff	Zeit	Kernbotschaft	Live-Demo (optional, stark!)
Tools	5 Min	„Claude handelt, nicht nur reden.“	Lass Claude live eine Datei anlegen
Agent	8 Min	„Claude bringt eine Aufgabe eigenständig zu Ende, holt sich Helfer.“	„Bau mir eine To-do-Seite“ live tippen
Skill	8 Min	„Gespeichertes Firmen-Playbook, automatisch zur Hand.“	`/kongress-pipeline` zeigen
MCP	7 Min	„Adapter zu unseren anderen Tools (Slack, Shopify …).“	Eine verbundene MCP-Aktion zeigen
Zusammenspiel	2 Min	Das Slack→Mail-Beispiel von Folie 12	—

Stolperfalle: Nicht in Technik-Details abrutschen (keine Erklärung von Protokollen/JSON). Bei Detailfragen: „Super Frage – das schauen wir uns beim Bauen an / hängen wir hinten dran.“

Interaktion: Frag in die Runde: „Wo in eurem Job wäre so ein Kollege nützlich?“ 2–3 Antworten einsammeln, an die Konzepte andocken (CRM → MCP, Kongresstexte → Skill, …).

☕ Pause (10 Min)

Vor der Pause: alle sollen GitHub- und Cloudflare-Accounts schon anlegen (Phase 1 & 2). So nutzt ihr die Pause für die langweiligen Bestätigungsmails und verliert keine gemeinsame Zeit.

Ansage: „In der Pause Aufgabe: legt schon mal die zwei Accounts an – Anleitung Phase 1 und 2. Wer fertig ist, holt sich einen Kaffee.“

3. Hands-on Block A: Verbinden & Bauen (40 Min) — Folie 13

Gemeinsam, im Gleichschritt. Du machst jeden Schritt am Beamer vor, dann machen alle nach.

Schritt	Du am Beamer	Achtung
Phase 0	Claude starten, „Hallo“-Prompt	Falls `claude` nicht startet → Helfer:in
Phase 3	GitHub-Token erstellen (Scopes `repo`+`workflow`!)	#1 Fehler: Token nicht kopiert → muss neu erstellt werden
Phase 3b	`gh auth login` via Claude	Benutzername bereithalten
Phase 4	Webseite-Prompt absetzen, Vorschau zeigen	Alle dürfen eigenes Thema wählen → Identifikation!

Ansage zum Token: „Der Token wird nur einmal angezeigt. Sofort kopieren. Wenn weg: einfach neuen erstellen, ist kein Drama.“

Tempo-Management: Es wird auseinanderlaufen. Setze einen Sync-Punkt: „In 10 Minuten haben alle ihre Seite in der Vorschau. Wer fertig ist, hilft Nachbar:in.“ Helfer:innen schwärmen aus.

4. Hands-on Block B: Online stellen (30 Min) — Folie 14

Der Höhepunkt – das erste Deployment. Hier MUSS jede:r ankommen.

Phase 5a (Push zu GitHub via Claude) gemeinsam.
Phase 5b (Cloudflare ↔ GitHub verbinden) Klick für Klick am Beamer. Das ist die UI-lastigste Stelle – langsam machen.
- Kritische Einstellung betonen: Build output directory = /, Build command leer, Framework None. Falsch gesetzt = leere Seite.
Feiermoment orchestrieren: Wenn die ersten .pages.dev-URLs live gehen → in den Chat posten lassen, gemeinsam anschauen, applaudieren. Diese Energie ist der Workshop.

Stolperfalle: GitHub-Autorisierung in Cloudflare. Manche müssen Cloudflare explizit Zugriff auf das Repo geben („Only select repositories“ → Repo auswählen, oder „All repositories“).

☕ Pause (10 Min)

5. Hands-on Block C: Lead-Formular + Secret (35 Min) — Folie 15

Phase 6a: alle holen sich eine webhook.site-URL (10 Sek pro Person).
Phase 6b: der große Claude-Prompt baut die Funktion + pusht. Gemeinsam absetzen.
Phase 6c: Secret in Cloudflare setzen. „Encrypt“ nicht vergessen → sonst kein Secret.
Retry deployment betonen – sonst greift das neue Secret nicht.
Phase 7: Großes Finale. Alle testen ihr Formular, sehen den Lead auf webhook.site. → Zweite Applaus-Runde.

Stolperfalle: Wenn der Lead nicht auf webhook.site ankommt, aber die Dankesmeldung erscheint: fast immer fehlt das Retry/Re-Deploy nach dem Secret-Setzen, oder die URL hat einen Tippfehler.

6. Abschluss & Ausblick (15 Min) — Folien 16–17

Würdigung: „Ihr habt heute Accounts erstellt, einen API-Token gebaut, ein Secret gesetzt, eine Seite live gestellt und ein funktionierendes Lead-Formular gebaut. Das ist das Fundament jedes Funnels bei uns.“
Brücke zur echten Arbeit: Zeig, wie dasselbe Prinzip in groß aussieht (Kongress-Funnel, Content-Hub). Erwähne die echten Skills (kongress-pipeline, content-hub-pipeline).
Bonus-Aufgaben für Schnelle (siehe Lab-Guide) – können sie auch danach weitermachen.
Nächste Schritte: Wo bekommen sie Hilfe? Welcher Slack-Channel? Wer ist Ansprechpartner?
Optional: kurze Feedback-Runde – ein Wort pro Person: „Was nimmst du mit?“

⏱️ Kurzversion (2,5 Std.)

Konzeptteil auf 20 Min straffen (nur Metapher + 1 Live-Demo).
Accounts (Phase 1/2) als Hausaufgabe vorab per Mail verschicken.
Bonus-Aufgaben streichen.
Eine Pause statt zwei.

🧯 Notfallpläne

Problem	Sofortlösung
WLAN bricht zusammen	Konzeptteil vorziehen/dehnen, bis Netz wieder da; Hotspot als Backup
Einzelne hängen ewig in Phase 3/5	Helfer:in setzt sich daneben; Gruppe nicht aufhalten, Sync-Punkte nutzen
Cloudflare-UI sieht anders aus	„Frag Claude: ‚Wo finde ich in Cloudflare Pages X?‘“ – funktioniert erstaunlich gut
Jemand kommt gar nicht mit	Pair-Bauen: zu zweit an einem Rechner, Erfolgserlebnis trotzdem
Zeit läuft davon	Lead-Formular (Block C) ist der kürzbare Teil; Hauptziel = Seite ist live
Deine Demo crasht	Referenzprojekt (`referenz-projekt/`) liegt bereit – zeig das stattdessen

🎯 Erfolgskriterien (woran du merkst, dass es ein guter Workshop war)

Jede:r hat eine eigene Live-URL. (Das ist das Muss-Ziel.)
Die Mehrheit hat ein funktionierendes Lead-Formular.
Mindestens zwei spontane „Wow / cool“-Momente im Raum.
Die Leute reden hinterher in ihren eigenen Worten über Agent/Skill/MCP.