Professionelle Prasentationen mit Claude AI

Erstelle beeindruckende HTML-Prasentationen in Sekunden - ohne PowerPoint, ohne Design-Kenntnisse.

⚡

Blitzschnell

Von der Idee zur fertigen Prasentation in unter einer Minute.

🎨

Professionelles Design

Konsistente, moderne Styles ohne Design-Expertise.

🌐

Sofort Online

Automatisches Publishing uber GitHub Pages.

Jetzt starten → Mehr erfahren

Das Problem mit traditionellen Prasentationen

PowerPoint-Frustration

  • Stundenlange Formatierung fur konsistentes Design
  • Versionskonflikte bei Teamarbeit
  • Eingeschrankte Interaktivitat
  • Grosse Dateien, schwer zu teilen
  • Nicht responsiv fur mobile Gerate

Der typische Workflow

Inhalt erstellen

Text schreiben, Struktur uberlegen

Design kampf

Farben, Fonts, Layouts anpassen

Export-Chaos

PDF, PPTX, Google Slides - was funktioniert?

Teilen

Email-Anhange, Cloud-Links, Kompatibilitatsprobleme

Die Losung: HTML-Prasentationen mit Claude

Ein einziger Prompt. Eine fertige Prasentation. Automatisch online.

Der neue Workflow

1 Beschreibe deine Prasentation in naturlicher Sprache

2 Claude generiert professionelles HTML/CSS/JS

3 Automatischer Push zu GitHub Pages

4 Teile einen Link - fertig!

🛠

Keine Software notig

Kein PowerPoint, kein Google Slides. Nur ein Browser.

📱

Responsive

Perfekt auf Desktop, Tablet und Smartphone.

✏

Versionskontrolle

Git-Historie fur alle Anderungen.

⚡

Interaktiv

Animationen, Accordions, Tabs - alles moglich.

Voraussetzungen

Was du brauchst

  • GitHub Account - Kostenlos auf github.com
  • Claude Pro/Team - Fur Custom Skills und GitHub-Integration
  • 5 Minuten Zeit - Fur die einmalige Einrichtung

Empfohlen

  • Grundlegendes Verstandnis von Git (hilfreich, aber nicht zwingend)
  • Ein Thema fur deine erste Prasentation

GitHub Setup

1 Repository erstellen

Erstelle ein neues Repository auf GitHub:

  • Name: z.B. presentations oder slides
  • Visibility: Public (fur GitHub Pages)
  • README hinzufugen: Optional

2 GitHub Pages aktivieren

In den Repository-Einstellungen:

  • Gehe zu Settings → Pages
  • Source: Deploy from a branch
  • Branch: main, Folder: / (root)
  • Save

Deine URL wird sein: https://[username].github.io/[repo-name]/

Tipp

Du kannst mehrere Prasentationen im selben Repository haben. Jede Prasentation bekommt ihren eigenen Ordner und ist unter /ordnername/ erreichbar.

Claude Skill einrichten

1 GitHub verbinden

In Claude.ai:

  • Offne die Einstellungen (Zahnrad-Icon)
  • Gehe zu Connected Apps
  • Verbinde deinen GitHub Account
  • Wahle das Repository aus

2 Custom Skill erstellen

Erstelle einen neuen Skill mit folgendem Inhalt:

1 Repository klonen

bash 
git clone https://github.com/[username]/presentations.git
cd presentations

2 Claude Code starten

bash 
claude

Skill-Anweisungen

Kopiere diese Anweisungen in deinen Custom Skill:

markdown 
# Presentation Skill

Du erstellst professionelle HTML-Prasentationen.

## Design-Prinzipien
- Dark Mode mit Glassmorphism-Effekten
- Responsive fur alle Bildschirmgrossen
- Keyboard-Navigation (Pfeiltasten)
- Sidebar-Navigation mit Fortschrittsanzeige

## Technische Anforderungen
- Single HTML file (inline CSS/JS)
- Keine externen Dependencies
- Vanilla JavaScript nur
- CSS Variables fur einfache Anpassung

## Struktur
- Jede Section = 100vh (ein "Slide")
- Glassmorphism Cards fur Inhalte
- Gradient-Texte fur Uberschriften
- Feature-Grids fur Listen
- Code-Blocks mit Copy-Funktion
- Accordions fur FAQs
- Timeline fur Ablaufe

## Workflow
1. User beschreibt Prasentation
2. Du erstellst komplette HTML-Datei
3. Speichere als index.html (oder [name].html)
4. Commit und Push zu GitHub

Der Workflow

1. Prompt formulieren

Beschreibe deine Prasentation klar und deutlich. Je mehr Details, desto besser das Ergebnis.

2. Claude generiert

Claude erstellt eine komplette HTML-Datei mit CSS und JavaScript.

3. Review und Feedback

Prufe das Ergebnis. Bitte um Anderungen falls notig.

4. Automatischer Push

Claude pusht die Datei zu GitHub. GitHub Pages deployt automatisch.

5. Teilen

Teile den Link zu deiner Prasentation!

Beispiel-Prompt

"Erstelle eine Prasentation uber Machine Learning fur Einsteiger. 8 Slides: Einfuhrung, Was ist ML, Arten von ML, Supervised Learning, Unsupervised Learning, Anwendungsbeispiele, Wie anfangen, Ressourcen."

Deine erste Prasentation

Beispiel-Prompts zum Starten

"Erstelle eine Prasentation fur unser Startup [Name]. Slides: Vision, Problem, Losung, Markt, Geschaftsmodell, Team, Traction, Ask."

"Erstelle ein Tutorial uber Docker fur Entwickler. Slides: Was ist Docker, Warum Container, Installation, Erste Schritte, Dockerfile, Docker Compose, Best Practices, Nachste Schritte."

"Erstelle eine Schulung fur neue Mitarbeiter zum Thema IT-Sicherheit. Slides: Warum wichtig, Passworter, Phishing, Social Engineering, sicheres Arbeiten, Melden von Vorfallen, Quiz, Zusammenfassung."

Best Practices

Gute Prompts

  • Klare Struktur vorgeben
  • Zielgruppe nennen
  • Gewunschten Ton angeben
  • Beispiele nennen wenn moglich

Iterieren

  • Erst Struktur, dann Details
  • Feedback geben
  • Schrittweise verfeinern
  • Anderungen benennen

Pro-Tipp

Speichere gute Prompts als Templates fur zukunftige Prasentationen!

Troubleshooting

  • Prufe ob GitHub Pages aktiviert ist
  • Warte 1-2 Minuten nach dem Push
  • Stelle sicher, dass die Datei index.html heisst
  • Prufe die Branch-Einstellungen
  • CSS sollte inline im <style> Tag sein
  • Keine externen CSS-Dateien verwenden
  • Browser-Cache leeren
  • Prufe ob Section-IDs korrekt sind
  • JavaScript-Konsole auf Fehler prufen
  • Scroll-Behavior prufen

Erweiterte Techniken

Custom Themes

Passe die CSS-Variablen an fur eigene Farbschemas:

css 
:root {
    --accent-primary: #10b981;  /* Grun */
    --accent-secondary: #06b6d4; /* Cyan */
    --bg-color: #0a0a0a;        /* Schwarz */
}

Mehrere Prasentationen

Organisiere dein Repository:

text 
presentations/
  index.html          # Ubersicht
  ml-intro/
    index.html        # ML Prasentation
  docker-tutorial/
    index.html        # Docker Tutorial
  company-pitch/
    index.html        # Firmen-Pitch

Presenter Mode

Fugen einen Presenter-Modus hinzu mit Notizen und Timer - frage Claude danach!

Bereit zu starten?

Erstelle jetzt deine erste HTML-Prasentation mit Claude!

Nachste Schritte

  1. GitHub Repository erstellen
  2. GitHub Pages aktivieren
  3. Claude Skill einrichten
  4. Erste Prasentation prompten

Diese Prasentation

Diese Prasentation wurde mit genau diesem Workflow erstellt - sie ist der Beweis, dass es funktioniert!

↑ Zuruck zum Anfang