HTML-First Deck

Was macht HTML-First Deck?

Eine Zwei-Phasen-Methode, um eine maßgeschneiderte, ansprechende Präsentation zu erstellen, die der Benutzer weiterhin in PowerPoint bearbeiten kann.

Warum dieser Workflow

PowerPoint ist der schlechteste Ort, um iterativ am visuellen Design zu arbeiten – langsam, fummelig und schwer konsistent zu halten. HTML/CSS ist der beste Ort zum Iterieren: Sie können eine Folie layouten, in Sekunden eine Vorschau anzeigen und Abstände, Farben und Hierarchie verfeinern. Aber das endgültige Artefakt muss eine echte, bearbeitbare .pptx sein, damit der Benutzer Formulierungen und Branding in seinem eigenen Tool anpassen kann (ein Export mit einem Bild pro Folie ist für ihn nutzlos).

Also: Design in HTML, Auslieferung als native PPTX. Sie erhalten schnelles Iterieren UND ein bearbeitbares Ergebnis.

Was sich in diesem Ordner befindet:

Datei	Was es ist
references/html_prototype.html	Phase-1-Startpunkt: drei Folien, Markenfarben als CSS-Variablen, Diashow-Navigation
scripts/pptx_helpers.py	Phase-2-Hilfsbibliothek: Geometrie, Palette, Header-/Footer-/Karten-/Pillen-/Takeaway-Komponenten
scripts/render_diagram.py	Rendert ein per Code gezeichnetes SVG in ein hochauflösendes PNG
scripts/render_pptx.ps1	Exportiert jede Folie einer .pptx als PNG zur Überprüfung (Windows + PowerPoint)
examples/example_deck.py	Eine ausführbare Drei-Folien-Präsentation, die auf den Hilfsfunktionen aufbaut
examples/example_diagram.py	Ein ausführbarer Diagrammgenerator, der jede Technik aus dem Diagrammabschnitt zeigt

Sprachstil – Titel wie ein Berater schreiben, nicht wie ein Texter

Lesen Sie dies, bevor Sie eine einzige Überschrift, Unterüberschrift oder Textzeile schreiben. Das Layout richtig und die Worte falsch zu haben, erzeugt eine Präsentation, die der Benutzer umschreiben muss, was schlimmer ist als gar keine Präsentation. Dies gilt für alles, was vor Kunden oder Kollegen kommt – Präsentationen, HTML-Diashows, Dashboards, Statusberichte, Einseiter.

Der Standard-LLM-Register für Folien ist reißerische Werbeagentur-Kopie. Die meisten Geschäftsleute wollen das nicht. Sofern der Benutzer nichts anderes verlangt, schreiben Sie im Register eines Senior-Beraters, der für ein Führungspublikum schreibt: klar, aussagend, spezifisch und in einem Durchgang fertig.

Die Regel

Ein Titel sagt, worum es auf der Folie geht. Er führt nichts auf.

Nennen Sie den Inhalt. Wenn ein Leser, der nur die Titel überfliegt, das Argument nicht rekonstruieren kann, haben die Titel versagt. Beschriftet und nummeriert schlägt immer ausgeklügelt – Phase 1: Rückerstattungsleckage sagt dem Leser, wo er ist; Die, mit der wir beginnen sagt ihm nichts und zwingt ihn, weiterzulesen, um es herauszufinden.

Zu vermeidende Konstruktionen

Nicht	Warum es scheitert	Tun
Das Dashboard berichtet. / Es erklärt nicht.	Der Zweitakt „Aufbau dann Pointe“. Liest sich wie ein Slogan, nicht wie eine Erkenntnis.	Das aktuelle Dashboard zeigt die Zahlen, analysiert sie aber nicht
Sie haben das letzte Tool wegen Dashboards abgelehnt. / Verkaufen Sie ihnen kein weiteres Dashboard.	Gleicher Zweitakt, plus es belehrt den Leser.	Warum ein weiteres Dashboard dieses Problem nicht löst
Die, mit der wir beginnen:	Ein Doppelpunkt-Teaser, der die Antwort vorenthält, um Spannung zu erzeugen.	Phase 1: Rückerstattungsleckage
Und so beheben Sie es.	Umgangssprachlich und beantwortet eine Frage, die niemand gestellt hat.	Empfohlene Lösung und Kostenschätzung
Drei Dinge. Dann beweisen wir es.	Abgehackte Fragmente für den Rhythmus.	Was wir von diesem Meeting brauchen
Was auf den Tisch kommt.	Redewendung anstelle einer Beschreibung.	Was wir liefern
Alle zwei Wochen eine Erkenntnis mit einer Zahl.	Ein Slogan, wo ein Label hingehört.	Zeitplan
Nur jemand, der alle vier Lieferanten sieht, wird dies je finden.	Rhetorischer Aufbau.	Warum unser Team für diese Arbeit positioniert ist

Vermeiden Sie auch: rhetorische Fragen als Überschriften; einwort-Dramatik (Die Falle, Der Zug, Der Abschluss) als Haupttitel; Satzfragmente für den Effekt; Gedankenstrich-Enthüllungen; „Hier ist die Sache“; alles, was sich anhört, als wolle es laut vorgelesen werden.

Konkret

• Titel: Nominalphrasen oder klare Aussagen. Analysemethode. Datenanforderungen und Liefertermine. Fragen an den Kunden. Notwendig für Phase 1.
• Nummerieren Sie die Arbeit. Phasen, Stufen, Schritte. Phase 1 bis Phase 8, Stufe 1/2/3. Nummerierung macht ein Programm lesbar und gibt den Leuten etwas, auf das sie sich in einem Meeting beziehen können.
• Unterüberschriften tragen die Einschränkung, keinen Witz: Phase 1 · Methode, Datenanfrage · Stufe 1.
• Fließtext: vollständige Sätze mit Subjekt und Verb. Sagen Sie die Sache einmal, richtig, statt dreimal mit zunehmender Betonung.
• Behalten Sie die Details. Klar bedeutet nicht vage. $8,4 Mio. bisher im Jahr bei einer Rückerstattungsrate von 12,5 % ist genau richtig. Zahlen, Namen, Daten und Quellen machen es glaubwürdig.
• Fett sparsam einsetzen – für den einen Satz in einem Absatz, der das Gewicht trägt, nicht für den Rhythmus.
• Zitate sind die Ausnahme. Ein wörtliches Kunden-Zitat kann wörtlich bleiben, und ein wirklich starker einzelner Satz kann in einem hervorgehobenen Zitat stehen – aber formulieren Sie es als Erkenntnis, nicht als Slogan.

Prozentsätze müssen ihre Basis mitführen

Prozentsätze sind gut – verwenden Sie sie weiterhin. Aber ein Prozentsatz ohne Basis kann nicht beurteilt werden. „Die oberen 10 % der Agenten“ bedeutet 2 Personen bei 20 Agenten und 100 Personen bei 1.000; der Leser kann nicht erkennen, ob es ein Muster oder zwei Einzelpersonen sind.

• Nennen Sie die Anzahl neben dem Prozentsatz, jedes Mal, wenn es sich um einen Anteil an Personen, Dingen oder Ereignissen handelt. Die oberen 6 Agenten (10 % von 60) · 4.100 Kunden (0,5 % von 820.000) · Lieferant A erhielt 12,0 Mio. $, die Hälfte aller Rückerstattungsdollars (24,0 Mio. $).
• Wenn die Gruppe klein ist, führen Sie mit der Zahl, nicht mit dem Prozentsatz. Bei unter ~30 Elementen ist die Anzahl die Erkenntnis: 6 Agenten stellten 18.000 $ aus ist besser als 10 % der Agenten stellten 20 % aus.
• Zwei Prozentsätze nebeneinander benötigen beide Basen. 20 % des Geldes auf 12 % der Kontakte ist nur nützlich, wenn der Leser auch weiß, dass es sich um 18.000 $ von 90.000 $ und 3.600 von 30.000 Kontakten handelt.
• Nennen Sie den Nenner. Sagen Sie, wovon der Prozentsatz ist: der August-Rückerstattungsdollars, der Kunden, die mindestens einmal abgerechnet haben, der Agenten mit 10 oder mehr Arbeitstagen.
• Sagen Sie, was ein Prozentsatz in Geld oder Personen bedeutet, wenn Sie können. „3 % wurden auf ein anderes Konto gezahlt“ wird zu 1.500 Rückerstattungen (150.000 $), 3 % der Jahressumme.
• Anteile-am-Ganzen-Erkenntnisse verdienen ein Anteile-am-Ganzen-Diagramm, z. B. einen 100 % gestapelten Balken, damit der Leser die Hälfte sieht, ohne rechnen zu müssen.

Eigenkontrolle: Kann der Leser bei jedem % auf der Seite die Frage „von wie vielen?“ beantworten, ohne den Satz zu verlassen? Wenn nicht, fügen Sie die Anzahl hinzu.

Die Eigenkontrolle vor dem Abschluss

Lesen Sie die Titel der Präsentation der Reihe nach, für sich allein. Wenn sie sich wie ein Inhaltsverzeichnis lesen, ist es richtig. Wenn sie sich wie ein Pitch lesen, schreiben Sie sie um.

Phase 1 – Prototyp in HTML

Erstellen Sie deck.html mit einem .slide-div pro Folie auf einer 16:9-Leinwand (1280×720). Setzen Sie die Markenfarben in :root-CSS-Variablen (ziehen Sie sie aus der Vorlage des Benutzers – siehe „Branding“ unten). Layouten Sie Kopfzeilen, Abschnittstitel, Karten, Hervorhebungen, Tabellen. Iterieren Sie hier, bis das Design stimmt – Vorschau durch Öffnen / Screenshot davon anzeigen und die Zustimmung des Benutzers zu Struktur und Aussehen einholen.

references/html_prototype.html ist ein gebrauchsfertiger Startpunkt (Titel, eine Folie mit Kopfzeile + drei Karten + Takeaway, eine Bildfolie, Fußzeile) mit der CSS-Variablen-Palette. Lesen und passen Sie es an.

Diese Phase ist der Design-Sandkasten. Perfektionieren Sie nicht jedes Wort – nageln Sie das Layout-System fest (das Kopf-/Fuß-Chrom, den Kartenstil, die Schriftgrößenskala, die Akzentverwendung), denn Phase 2 spiegelt es wider.

Machen Sie den Prototypen wie eine Diashow navigierbar

Fügen Sie immer dieses kleine Skript vor </body> ein, damit die HTML-Vorschau wie PowerPoint vorwärts geht – Klick (oder →/↓/Leertaste) geht zur nächsten Folie, ←/↑ geht zurück. Es macht die Phase-1-Überprüfung wie beim Präsentieren und ist nur HTML (nichts, was in Phase 2 mitgenommen werden muss).

Textmarkieren darf niemals die Seite umblättern. Leute wählen Text auf Folien aus, um ihn zu kopieren. Ein Ziehen endet in einem click-Ereignis, sodass ein einfacher Klick-Handler mitten im Kopieren zur nächsten Folie springt. Das folgende Skript ignoriert den Klick, wenn die Maus mehr als 5px zwischen Drücken und Loslassen bewegt wurde oder wenn Text ausgewählt ist. Ein echter Klick schreitet immer noch voran.

Ein Klick muss von der angeklickten Folie aus vorwärts gehen, niemals von einer Schätzung basierend auf der Scroll-Position. Die Schätzung wählt bei manchen Fenstergrößen die falsche Folie aus, sodass ein Klick zwei Folien überspringt. Tasten (→/←) können weiterhin die Scroll-Position verwenden, da es nichts zu klicken gibt.

<script>
  /* Vorschau wie eine Diashow: Klick oder →/↓/Leertaste = nächste Folie, ←/↑ = vorherige. Textauswahl schreitet nicht voran. */
  (function(){
    var slides=[].slice.call(document.querySelectorAll('.slide'));
    function next(){ var y=scrollY+10; return slides.find(function(s){return s.offsetTop>y;}) || null; }
    function prev(){ var y=scrollY-10, p=null; slides.forEach(function(s){ if(s.offsetTop<y) p=s; }); return p; }
    function to(s){ if(s) s.scrollIntoView({behavior:'smooth',block:'start'}); }
    var downX=0,downY=0;
    addEventListener('mousedown',function(e){ downX=e.clientX; downY=e.clientY; });
    addEventListener('click',function(e){
      if(e.target.closest('a,button,input,textarea,select'))return;
      /* Textmarkieren oder Ziehen der Maus ist kein Klick auf die Folie */
      var sel=window.getSelection&&String(window.getSelection()); if(sel&&sel.trim())return;
      if(Math.abs(e.clientX-downX)>5||Math.abs(e.clientY-downY)>5)return;
      /* Von der GEKLICKTEN Folie aus vorwärts gehen, nicht von einer Schätzung basierend auf der Scroll-Position */
      var s=e.target.closest('.slide'); to(s ? slides[slides.indexOf(s)+1] : next());
    });
    addEventListener('keydown',function(e){
      if(['ArrowRight','ArrowDown',' ','PageDown'].indexOf(e.key)>-1){e.preventDefault();to(next());}
      else if(['ArrowLeft','ArrowUp','PageUp'].indexOf(e.key)>-1){e.preventDefault();to(prev());}
    });
  })();
</script>

Wenn die Präsentation im Browser bleibt (eine HTML-Diashow), hören Sie hier auf: Phase 1 ist das Ergebnis.

Phase 2 – Die native bearbeitbare PPTX generieren

Erstellen Sie das genehmigte Design mit python-pptx neu, sodass jedes Element bearbeitbar ist. Verwenden Sie die gebündelte Hilfsbibliothek scripts/pptx_helpers.py – kopieren Sie sie in den Präsentationsordner. Sie bietet 16:9-Geometrie, einen Markenfarbpaletten-Block und die Komponenten, die Sie auf jeder Folie wiederverwenden:

• new_prs(), blank_slide(prs), body_bg(slide)
• add_header(slide, title, meta), add_footer(slide, left, right)
• add_section_title, add_subtitle
• add_text(...) – unterstützt einen String, eine Liste von Absätzen ODER gemischt formatierte Läufe: [[("Fetter Teil", {"fett": True}), ("normaler Teil", {"farbe": MUTED})]]
• add_rect, add_card (oberer/linker Akzentstreifen), add_pill, bulleted, add_takeaway
• add_image(slide, path, x, y, w) – platziert ein Bild in seinen eigenen Proportionen
• save_deck(prs, path) – speichert und wechselt zu einem neuen Dateinamen, wenn die Datei gesperrt/geöffnet ist

Struktur (siehe examples/example_deck.py für ein ausführbares Drei-Folien-Beispiel):

from pptx_helpers import *
def slide_intro(prs): ...      # eine Builder-Funktion pro Folie
def slide_cards(prs): ...
def main():
    prs = new_prs()
    slide_intro(prs); slide_cards(prs)
    print(save_deck(prs, DECK_DIR / "Meine Praesentation.pptx"))

Hart erarbeitete Regeln (diese verhindern die häufigsten Fehler)

• Überschreiben Sie niemals eine Datei, die der Benutzer geöffnet hat. PowerPoint sperrt die Datei; ein einfaches prs.save() wirft dann PermissionError. save_deck() behandelt dies, indem es auf v2, v3 … hochzählt. Behalten Sie die Arbeitskopie an einem offensichtlichen Ort und teilen Sie dem Benutzer mit, welche Datei die neueste ist.
• Bauen Sie alles als Formen/Text, nicht als Bild. Das ist der ganze Punkt – sie müssen es bearbeiten können. Verwenden Sie echte Tabellen (slide.shapes.add_table) für dichte Vergleiche.
• Setzen Sie Schriftarten explizit für jeden Durchlauf (python-pptx erbt eine Design-Schriftart nicht zuverlässig).
• Entfernen Sie Standard-Schatten bei AutoFormen (shape.shadow.inherit = False) und löschen Sie deren Standard-Text – die Hilfsfunktionen machen dies bereits.
• Ein Builder pro Folie + ein main(), das sie in der richtigen Reihenfolge auflistet. Nummerieren Sie dort die Fußzeilen neu.

Vorschau-/Überprüfungszyklus (führen Sie dies durch – liefern Sie nichts unsichtbar aus)

Rendern Sie nach jedem Build die Folien in PNG und schauen Sie sie sich tatsächlich an; beheben Sie Überläufe/Abstände; bauen Sie neu.

• Windows (PowerPoint installiert):

  powershell -NoProfile -File scripts/render_pptx.ps1 -pptx "Meine Praesentation.pptx" -outdir preview
  

  Schreibt preview/s1.png, s2.png … Es öffnet die Datei schreibgeschützt, funktioniert also auch, während der Benutzer die Präsentation geöffnet hat, und lässt PowerPoint laufen, wenn es bereits lief.
• Kein PowerPoint – libreoffice --headless --convert-to pdf (oder in PNGs), falls verfügbar.

Lesen Sie dann die PNGs, passen Sie die Builder an, führen Sie sie erneut aus. Iterieren Sie, bis alles sauber ist.

Branding (Farben + Schriftarten)

Standardisieren Sie nicht auf eine Palette. Ziehen Sie das Branding aus dem Kontext des Benutzers: Lesen Sie das Design einer .pptx-Vorlage (ppt/theme/theme1.xml → <a:clrScheme>), die Website/CSS des Unternehmens, oder fragen Sie nach 2–3 Farben. Setzen Sie sie einmal in den :root-Variablen (HTML) und im BRAND-Block am Anfang von pptx_helpers.py (PPTX), sodass die beiden Phasen übereinstimmen. Setzen Sie WORDMARK_PATH auf ein Logo-PNG, um den Header zu branden, oder lassen Sie es None. Die Farben, die in beiden Dateien ausgeliefert werden, sind ein neutraler Platzhalter; ersetzen Sie sie.

Diagramme in Folien – mit Code zeichnen, nicht generieren

Für das Hauptbild auf einer Folie (ein Flussdiagramm, eine Pipeline, ein Trichter, eine Architektur oder ein Prozessdiagramm) platzieren Sie nicht Dutzende von PowerPoint-Formen von Hand und verwenden Sie keinen KI-Bildgenerator. Bildmodelle sind für Fotos und Kunst gemacht. Für Diagramme versagen sie: unscharfer Text, falsch geschriebene Beschriftungen, nicht ausgerichtete Formen, von der Markenfarbe abweichende Farben und nichts ist bearbeitbar.

Schreiben Sie stattdessen ein SVG (eine Vektorzeichnung, die in Code definiert ist: <path>, <circle>, <rect>, <text>, mit Verläufen und Filtern) und rendern Sie es in ein hochauflösendes PNG. Ein Computer zeichnet jede Linie nach Vorgabe, also ist es pixelgenau, exakt markenkonform, reproduzierbar und trivial bearbeitbar (ändern Sie einen Hex-Code oder ein Wort und rendern Sie neu).

Eine Analogie für den Benutzer: Ein Bildmodell um ein Diagramm zu bitten, ist wie einen Künstler zu bitten, aus dem Gedächtnis einen Bauplan freihändig zu zeichnen. Code zu schreiben, um es zu zeichnen, ist CAD – ein Lineal und ein Zirkel – jedes Mal exakt.

Verwenden Sie es für: Pipeline-/Fluss-/Trichterdiagramme, Architekturdiagramme, Prozesslandkarten, Konzeptabbildungen, …

… [für die Übersetzung gekürzt]