Dieser Inhalt ist nur für snipKI Mitglieder bestimmt.
Jetzt beitreten

Interaktive HTML-Präsentationen mit Claude und dem Magnific MCP bauen

Klicke auf die Sterne, um eine Bewertung hinzuzufügen
( 5 )
Published on 21 Stunden ago 77 Views 0 Comments

Du baust deine Präsentationen schon mit ChatGPT, Copilot oder Claude und das Ergebnis ist solide, sieht aber am Ende doch wieder aus wie PowerPoint? In diesem Snip zeige ich dir anhand eines Vorher-nachher-Beispiels, wie ich Präsentationen inzwischen baue: als HTML-Datei statt als Folien. Claude generiert dabei über den Magnific MCP eigene Bilder und Videos, baut interaktive Elemente ein und ergänzt auf Zuruf eine Sprecheransicht mit Notizen und Timer. So bist du nicht mehr an die Grenzen von PowerPoint, Keynote oder Google Slides gebunden.

Ergebnis: Nach diesem Snip hast du eine interaktive HTML-Präsentation mit KI-generierten Bildern und Videos lokal auf deinem Rechner, inklusive Notizmodus und eigener Sprecheransicht, die du per Prompt beliebig weiter ausbauen kannst.

AnfangerInnen
  1. Lass dir in Claude zum Vergleich erst eine klassische PowerPoint-Präsentation zu deinem Thema erstellen (z. B. “Erstelle mir eine PowerPoint-Präsentation, warum KI Marketing helfen kann”) und lade die PPTX herunter oder öffne sie in Google Slides.
  2. Schreib im selben Chat “Jetzt bitte als Claude-Präsentation”, öffne das Artefakt und probier die In-App-Bearbeitung aus: Texte ändern, Elemente verschieben, Farben anpassen, Kommentare setzen.
  3. Installiere den Magnific MCP in Claude, die Anleitung findest du direkt bei Magnific (alternativ Higgsfield). Dafür brauchst du einen Account beim jeweiligen Anbieter.
  4. Starte einen neuen Prompt zum selben Thema und ändere nur den Output, z. B.: “Erstelle die Präsentation als HTML, nutze den Magnific MCP für Bilder und Videos und schaffe eine interaktive Erfahrung, die nicht an PowerPoint erinnert.”
  5. Lass Claude arbeiten. In den Tool-Calls siehst du, welches Modell und welcher Prompt für jedes Bild und Video genutzt wird. Das dauert länger als eine normale Präsentation.
  6. Öffne das fertige Artefakt und teste die interaktiven Elemente wie Slider, Hover-Effekte auf Bildern, Buttons und Scroll-Bereiche.
  7. Frag Claude nach einer Statistik, wie viele Bilder und Videos generiert wurden und mit welchen Modellen. Wenn du willst, gibst du hier auch selbst Modelle vor.
  8. Lass dir die Präsentation mit “Bitte lokal als HTML speichern” als Datei ausgeben und öffne sie in deinem Browser.
  9. Prompte weiter, was du für deinen Vortrag brauchst, z. B. “Füge einen Präsentationsmodus und einen Notizmodus hinzu”. So bekommst du Notizen mit pausierbarem Timer und eine Sprecheransicht im eigenen Fenster, die du auf einen zweiten Bildschirm ziehen kannst.
  10. Prüf zum Schluss die Navigation (Pfeile seitlich und von oben nach unten, Menü) und die Hintergrundvideos. Wenn ein Video unscharf wirkt, lass es von Claude in höherer Auflösung neu generieren.
  1. Verstehen, wo die Grenzen von KI-generierten PowerPoint-Präsentationen liegen und was HTML zusätzlich möglich macht.
  2. Einen Bild- und Video-MCP wie Magnific in Claude einbinden und gezielt im Prompt ansprechen.
  3. Eine interaktive HTML-Präsentation mit generierten Bildern und Videos aus einem einzigen Prompt erstellen.
  4. Die Präsentation lokal speichern und per Prompt um eigene Funktionen wie Notizmodus, Timer und Sprecheransicht erweitern.
  1. Keynotes und Vorträge auf Events, bei denen du mit Bewegtbild und eigener Navigation auffallen willst.
  2. Pitches und Angebotspräsentationen, die der Kunde danach selbst im Browser durchklicken kann.
  3. Workshops und Schulungen mit interaktiven Elementen, etwa Abstimmungen oder Slidern, die sich auf Eingaben hin verändern.
  4. Interne Updates oder Strategie-Präsentationen, die du als Link teilst, statt eine PPTX per Mail zu verschicken.
  5. Datenpräsentationen, bei denen Zahlen und Grafiken interaktiv aufgebaut werden sollen.
Als nächstes
Share

Neugierig auf mehr?

Bereits über 420 praxisorientierte und kompakte KI-Tutorials warten auf dich!