HTML-Präsentationen mit KI erstellen

Herzlich Willkommen zu den AI FIRST Insights! Stell Dir einmal vor, du könntest der KI deines Vertrauens ein Briefing für eine Präsentation geben und bekommst richtig gute PowerPoint Folien raus? Was so einfach klingt, bleibt bisher noch der heilige Gral für KI, den dutzende Anbieter versucht haben zu finden.

Ich könnte jetzt natürlich auch die Frage aufwerfen, warum wir im Jahre 2026 noch immer Unmengen an PowerPoint-Folien benötigen, um uns gegenseitig von Dingen zu überzeugen…aber das lassen wir für heute.

Stattdessen widmen wir uns dem Problem und seiner Lösung. Denn auch ich habe mir jahrelang die Zähne daran ausgebissen, wie ich mit KI meine Präsentationen bauen kann. Im Mai 2025 hatte ich einen Artikel geschrieben und alle gängigen KI-Präsentationstools getestet - alle mit mittelmäßigem Ergebnis.

Seitdem ist viel passiert. Die Modelle sind besser geworden, die Tools auch. Aber das Grundproblem ist geblieben: Wir bitten KI, in einem Format zu arbeiten, das nicht besonders gut zu ihrer eigentlichen Stärke passt. Ich meine in der Zwischenzeit einen Weg gefunden zu haben, der deutlich besser funktioniert.

Heute zeige ich dir meinen aktuellen Workflow:

warum PowerPoint für KI so schwer zu erstellen ist
warum HTML als Arbeitsformat besser funktioniert
wie du aus einer Designreferenz, einer Folienstruktur und ein paar Skills ein gutes Deck baust
und wie du daraus am Ende ein Dokument bekommst, das du verschicken kannst

Los geht’s!

Warum KI kein PowerPoint kann

PowerPoint wurde für menschliche Bedürfnisse entwickelt. Wir müssen sehen und anpassen können, was auf der Folie passiert. Deshalb zieht man Textboxen, Bilder, Icons und Diagramme auf eine Fläche, schiebt sie zurecht und sieht sofort, ob es passt.

Für uns funktioniert das. Für KI ist das deutlich unangenehmer.

Eine .pptx ist keine einfache Datei mit ein paar Folien. Im Kern ist sie ein Paket aus XML-Dateien, Layoutdefinitionen, Masterfolien, Medien, Beziehungen, Formatierungen und Objektpositionen. Was für Menschen im Editor sichtbar ist, liegt technisch in vielen einzelnen Bausteinen, die sauber zusammenspielen müssen.

Und genau dort wird es schwierig.

Eine gute Folie besteht nicht nur aus Text. Sie braucht visuelle Hierarchie, Weißraum, Typografie, Rhythmus, Konsistenz, Reduktion und ein Gefühl dafür, welche Information wirklich auf die Folie gehört. Gleichzeitig muss die KI diese Gestaltung dann in ein Dateiformat übersetzen, das historisch für manuelle Bearbeitung gebaut wurde.

Sie muss also drei Aufgaben gleichzeitig lösen:

die Präsentation inhaltlich richtig denken
die Folien visuell gut gestalten
alles in ein schwer steuerbares Format schreiben

Das erklärt ziemlich gut, warum viele KI-PowerPoints so aussehen, wie sie aussehen:

Kennen wir alle, oder?

Entweder bekommst du formal eine Präsentation, aber sie wirkt generisch und austauschbar. Oder das Tool versucht visuell ambitionierter zu werden, aber dann brechen Abstände, Textgrößen, Bildlogik und Konsistenz.

PowerPoint bleibt als Endformat für Unternehmen sinnvoll, in denen Menschen später weiterbearbeiten und kollaborieren müssen. In vielen Fällen geht es aber nur darum, einen Inhalt visuell darzustellen.

Genau dafür benötigen wir ein Format, mit dem KI besser arbeiten kann.

HTML: Der Stoff aus dem KI-Folien gemacht sind

Bei PowerPoint bitte ich KI, ein visuelles Layout in einem Dateiformat zu bauen, das sie nur indirekt kontrollieren kann. Bei HTML gebe ich ihr ein Format, das sie lesen, schreiben, verändern und direkt im Browser überprüfen kann.

Kurz zur Definition:

HTML (HyperText Markup Language) ist die Struktursprache fürs Web: Sie beschreibt, welche Elemente es gibt (z.B. Überschrift, Absatz, Bild, Liste, Abschnitt) und wie sie hierarchisch zueinander stehen.
CSS (Cascading Style Sheets) ist die Gestaltungssprache fürs Web: Sie definiert wie diese Elemente aussehen (z.B. Farben, Schrift, Abstände, Raster, Größen, Positionierung, Responsive-/Print-Regeln).

Stellen wir das noch einmal gegenüber. Bei PowerPoint-Output arbeitet die KI auf ein Ergebnis hin, das am Ende als „Folie“ erscheinen soll - du steuerst primär das Resultat. Bei HTML/CSS-Output gibst du der KI ein explizites, textbasiertes Regel- und Bausystem: Struktur (HTML) + Designregeln (CSS). Dadurch kann sie Schritt für Schritt verbessern, Regeln konsequent anwenden und du siehst das Ergebnis sofort im Browser.

Praktisch heißt das: Du gibst der KI nicht nur ein Ziel („mach eine schöne Präsentation“), sondern ein Regelwerk, das sie zuverlässig anwenden kann (Tokens, Komponenten, Abstände, Typo-Skalen, Print-CSS für PDF). Dadurch wird die Generierung viel kontrollierbarer.

Für mich steckt darin ein größeres Prinzip, das ich immer wieder predige: Das Implizite muss explizit werden. Geschmack, Designlogik, Qualitätskriterien und Storystruktur müssen raus aus dem Kopf und rein in eine Arbeitsanweisung.

HTML macht aus „mach es schön“ eine Form, mit der KI wirklich arbeiten kann.

Mein Workflow in 4 Schritten

Ich habe diese Woche unser Pitch-Deck neu gebaut und dabei einen 4-schrittigen Workflow genutzt, der sehr gut funktioniert hat. Über den gesamten Prozess hinweg gilt: Der Mensch definiert Ziel, Geschmack und Qualität. Die KI übernimmt das Heavy Lifting in der Mitte.

Der Workflow besteht aus vier Schritten.

1. Designreferenz analysieren und als Markdown-Guideline festhalten

Ich starte nicht mit einer leeren Präsentation. Ich starte mit einer visuellen Referenz.

Das kann vieles sein:

ein bestehendes Deck
eine Website
eine Landingpage
ein PDF-Report
ein Figma-Screen
ein Brand Guide
ein Screenshot eines Designs, das zur gewünschten Wirkung passt

Die KI soll daraus die Designlogiken ableiten und in eine Struktur bringen, die ich anschließend nutzen kann, um wiederum neue Präsentationen nach dieser Designlogik zu bauen. Reverse Engineering nennt sich das.

Du kannst dafür folgenden Prompt nutzen:

Extrahiere aus der Designreferenz eine detaillierte, vollständige Design-Guideline für HTML-Präsentationen (nicht kopieren, nur Logik).
Keine Floskeln; alles als konkrete Regeln + Werte. Markiere Annahmen.

Liefern als Markdown:
- North Star (Wirkung, 1-Satz-Prinzip, 3-5 Merkmale)
- Farben + Regeln + No-Gos
- Typo-Skalen (H1/H2/Body/Label/Sonstige)
- Layout-System (16:9, Grid, Ränder, Weißraum, Footer, Sonstige)
- Komponenten (Card/Badge/Table/Framework/Sonstige): Aufbau + Regeln
- Bildsprache (Icons/Bilder/Sonstige)
- 6–10 Folientypen (Zweck, Layout, Visual-Logik, Sonstige)
- 10 Hard Rules + QC-Checkliste
- CSS Tokens (colors/typography/spacing/radius/shadow/lines/other)

Im Anschluss erhältst du eine Markdown-Datei, die du abspeicherst.

Bei AI FIRST haben wir eine eigene Website aufgebaut, wo im Detail alle unsere Farben, Schriften, Formen, Prinzipien etc. festgehalten sind. KI kann auf den Website-Code zugreifen, um daraus wiederum sämtliche neue Assets wie zB Präsentationen oder andere Websites zu bauen.

2. Folienstruktur mit Skill bauen

Bevor wir die Präsentation bauen lassen, brauchen wir zuerst die Inhalte und Storyline.

Das ist aus meiner Sicht der häufigste Fehler bei KI-Präsentationen: Man lässt die KI direkt Folien bauen, obwohl die Präsentation noch nicht gedacht ist.

Ich nutze dafür einen eigenen Skill, der als Präsentationsarchitekt arbeitet. Er bekommt Thema, Zielgruppe, Ziel, gewünschte Wirkung, vorhandene Inhalte und die Design-Guideline.

Der Output ist eine Folienarchitektur:

Kernbotschaft
Dramaturgie in 5–7 Stationen
Folientabelle
Kernbotschaft pro Folie
Visual-Idee pro Folie
passender Folientyp aus der Design-Guideline
Funktion im roten Faden
HTML-Briefing für den nächsten Schritt

Das Skill-Template findest du hier.

3. HTML-Präsentation mit Skill erstellen

Erst jetzt wird gebaut und natürlich nutzen wir auch dafür wieder einen Skill.

Der HTML-Skill bekommt vier Inputs:

die Markdown-Design-Guideline inkl. CSS-Design-Tokens (aus Schritt 1)
die Folienstruktur (aus Schritt 2)
das HTML-Briefing (Schritt 3)

Der Skill schreibt nicht einfach Folie für Folie los. Er macht zuerst einen Preflight-Plan:

Welche Folientypen werden gebraucht?
Welche Komponenten werden gebraucht?
Welche Folie nutzt welchen Folientyp?
Wo gibt es Risiken bei Textmenge, Layout oder PDF-Export?

Danach baut er das Designsystem im Code: Variablen, Grundlayout, Komponenten, Folientypen und Print-Regeln. Erst dann entstehen die einzelnen Folien.

Das Skill-Template findest du hier.

Der Preflight ist der kleine, aber wichtige Unterschied. Er zwingt die KI, erst das Deck als System zu planen, bevor sie Code produziert. Das fertig generierte HTML kannst du dir dann in deinem KI-Tool anschauen (in den meisten Fällen gibt es einen Preview-Modus) und Feedback geben, bis du zufrieden bist.

Bonus-Tipp: Nachdem du mehrere Feedback-Schleifen gedreht hast, der KI sagen dass sie diese Feedbacks in den “HTML-Präsentation”-Skill einbauen soll, damit die Qualität beim nächsten Mal direkt besser ist!

4. HTML als PDF exportieren

Wenn das Deck als HTML steht, bleibt meist nur eine Frage: Wie kann ich das versenden oder als Datei speichern?

Für den ersten Versuch reicht meistens der einfachste Weg: Sag deiner KI, dass sie eine PDF-Datei erstellen soll. Du kannst dir auch wieder einen Skill bauen, der das für dich automatisiert :)

Alternativ:

HTML-Datei runterladen und öffnen
Im Browser auf “Drucken”
Ziel: „Als PDF speichern“
Layout: Querformat
Ränder: Standard
Hintergrundgrafiken aktivieren
Skalierung: Standard
PDF speichern

Das ist nicht die technisch eleganteste Lösung, aber für einzelne Decks oft völlig ausreichend.

Online-Converter würde ich nur für unkritische Inhalte nutzen. Bei Kundenmaterial, internen Strategien oder vertraulichen Daten ist mir der Datenschutz zu heikel.

Fazit

Wenn du mit KI Folien bauen willst, dann musst du anfangen die Sprache der KI-Modelle sprechen. Und das ist nicht PowerPoint - sondern Code.

Der Workflow dahinter ist einfach:

Design-Guideline aus einer Referenz erstellen (s. Prompt oben)
Präsentationsstruktur entwickeln (Skill-Template)
HTML-Deck bauen lassen (Skill-Template)
Iterieren bis du zufrieden bist
Feedbacks in Skills einarbeiten lassen

Der größte Aufwand für uns entsteht am Anfang (Geschmack für Design entwickeln) und am Ende (Outputs auf Wirkung und Konsistenz prüfen und iterieren). KI kann jetzt das heavy lifting in der Mitte übernehmen.

Das war’s für diese Woche.

Bis nächsten Sonntag,

Felix