Open Source für PPT-Skills: 10 Jahre Design-Erfahrung komprimiert in einem Tool

Letzte Woche wurde ich von Lehrer Li Jigang zu einem privaten Sharing-Gespräch über KI und Organisationen eingeladen.

Nach der Sitzung stellte ich fest, dass die am häufigsten gestellte Frage war: „Mit welchem Tool wurde diese PPT erstellt? Kannst du es als Open Source zur Verfügung stellen?“

Ich hätte nicht erwartet, dass das Nebenprodukt zum Hauptprodukt wird.

Also habe ich beschlossen, es als Open Source zu veröffentlichen und nenne es guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).

Im heutigen Artikel geht es darum, wie dieser Skill aussieht und warum ich, der zehn Jahre Designer war, ihn schön finde.

Wie esWie er aussieht

Wenn du eine mit dem Skill erstellte PPT öffnest, ist der erste Eindruck wahrscheinlich: Das sieht nicht nach KI-gemacht aus.

Ein paar intuitive Merkmale:

• Titelseite: Tintenfarbener Hintergrund + Serifen-Haupttitel, mit einer sanften WebGL-Flüssigkeit, die langsam dahinter fließt.
• Inhalt: Der Hintergrund wechselt zurück zu Papierweiß mit tintenfarbenem Text darauf, wie eine aufgeschlagene gedruckte Zeitschrift.
• Blättern: Horizontales Links-Rechts-Wischen, unterstützt Tastatur, Scrollrad und Touch-Gesten – nicht der Standard-PowerPoint „Nächste Folie“.
• Metadaten: Jede Seite hat kleine, nichtproportionale Schrift in den vier Ecken mit Angaben wie „Akt II · 15 / 25“, ähnlich wie Seitenzahlen in Zeitungen.

Ich habe dieser visuellen Note einen Namen gegeben: „Elektronisches Magazin × E-Ink.“

Die Inspiration stammt aus den Layout-Traditionen gedruckter Magazine wie Monocle, The Guardian und NYT, überlagert mit der Leseästhetik von Kindle-E-Paper, alles verbunden mit zeitgenössischer Web-Interaktions-Syntax.

Was er kann

Der Skill bietet derzeit 10 Seitenlayouts, 5 Themenfarben-Voreinstellungen und eine vollständige Reihe von Blätter-Interaktionen.

10 Layouts decken fast alle Seitentypen ab, die in einer 15-30-seitigen Sharing-Session vorkommen:

Eröffnungs-Titelseite, Kapiteltrenner, Daten-Poster, Text-links-Bild-rechts, Bildraster, Pipeline-Prozesse, Spannungsfragen, große Zitate, Vorher/Nachher-Vergleiche und gemischte Text-Bild-Layouts.

Jedes ist ein HTML-Skelett, das direkt eingefügt werden kann; du musst nur Text und Bilder austauschen, um es zu nutzen.

5 Themen entsprechen verschiedenen Szenarien:

• Ink Classic – Geschäftsveröffentlichungen, allgemeiner Standard
• Indigo Porcelain – Technologie, Forschung, KI-Konferenzen
• Forest Ink – Natur, Nachhaltigkeit, Geisteswissenschaften
• Kraft Paper – Nostalgie, Literatur, unabhängige Magazine
• Dune – Kunst, Design, Kreativität

Jedes Thema ist lediglich ein anderer Satz von Werten für 6 CSS-Variablen. Der Themenwechsel erfordert nur das Ersetzen dieser 6 Codezeilen in :root.

Benutzer dürfen keine benutzerdefinierten Hex-Codes festlegen; warum, erkläre ich später.

Blätter-Interaktionen unterstützen die linken/rechten Pfeiltasten der Tastatur, Mausrad, Touch-Wischen, untere Punkt-Sprünge und die ESC-Taste zum Öffnen eines Miniaturbild-Index.

Ziel ist es, dem Erlebnis des Blätterns in einem echten Magazin im Browser so nahe wie möglich zu kommen.

Die Ausgabe ist eine einzelne HTML-Datei. Doppelklick zum Anzeigen im Browser. Das Versenden an andere ist nur eine Datei, sodass du dir keine Sorgen um Schriftarten oder Animationen auf fremden Computern machen musst.

Wie man ihn verwendet

Eigentlich liegt der wahre Wert dieses Skills nicht in der Vorlage selbst, sondern darin, dass er eine Schnittstelle für die Mensch × KI-Zusammenarbeit an PPTs definiert.

Hier sind drei Dinge, die ich nach einer Woche Selbstnutzung am wichtigsten finde, um sie anderen mitzuteilen.

Kläre diese 6 Dinge zuerst mit der KI

Sobald der Skill installiert ist, sagst du einfach „Hilf mir, eine Magazin-PPT zu erstellen“, und Claude wird dir proaktiv 6 Fragen stellen:

1. Wer ist das Publikum und was ist das Szenario? (Interne Branche / Geschäftsveröffentlichung / Privates Sharing)
2. Wie lang ist die Präsentation? (15 Min ≈ 10 Seiten, 30 Min ≈ 20 Seiten)
3. Gibt es Quellmaterial? (Dokumente, Daten, alte PPTs, Artikel-Links)
4. Gibt es Bilder und wo sind sie?
5. Welche Themenfarbe möchtest du? (Auswahl aus 5 Voreinstellungen)
6. Gibt es harte Einschränkungen? (Muss XX-Daten enthalten / Darf YY nicht zeigen)

Du musst nicht alles auf einmal sagen; sie fragt nacheinander. Nach der Beantwortung gibt sie dir zuerst eine Gliederung und eine Themen-Rhythmus-Tabelle. Erst abstimmen, dann Code schreiben – dieser Schritt verhindert 80 % meiner Nacharbeit.

Der größte Schmerzpunkt bei der Nutzung von KI für PPTs war bisher, dass sie sofort losschrieb und du erst auf Seite 10 merkst, dass die Richtung falsch war. Dieser Klärungsprozess verlagert die „Abstimmung“ ganz an den Anfang.

Wie man Bilder einfügt

Bilder werden in einem images/-Ordner auf derselben Ebene wie index.html abgelegt, mit spezifischen Namensregeln:

1ppt/
2├── index.html
3└── images/
4    ├── 01-cover.jpg
5    ├── 03-figma.png
6    └── 05-dashboard.png

• Mit Nullen aufgefüllte Seitennummern + englische Semantik – 01 statt 1, cover statt fengmian. Das erleichtert die Sortierung und die KI-Referenzierung.
• Verwende JPG für Fotos, PNG für Screenshots – Screenshots enthalten Text; PNG hält sie scharf.
• Einzelne Bildbreite ≥ 1600px – Damit es auf großen Projektionsleinwänden nicht unscharf ist.

Du sagst einfach zu Claude „Seite 3 ist ein Figma-Oberflächenscreenshot“, und es schreibt automatisch images/03-figma.png. Du legst die Datei mit demselben Namen in den Ordner.

Das Geheimnis des verlustfreien Bildaustauschs: Überschreiben mit demselben Namen

Das ist die größte Falle, auf die ich gestoßen bin – wenn ich nach Fertigstellung des Texts ein Bild ändern will, muss ich global Pfade suchen und ersetzen, was oft das HTML zerstört.

Der richtige Weg ist ein einziger Satz: Überschreibe das alte Bild mit dem neuen unter demselben Namen und ändere kein einziges Zeichen im HTML.

Warum es so aussieht

Nachdem wir besprochen haben, wie man es verwendet, sprechen wir darüber, warum es so ist, wie es ist.

Gutes Design ist kein Mysterium; es ist eine Reihe von zerlegbaren Entscheidungen. Was ich getan habe, ist im Wesentlichen, die Layout-Sprache, die die Magazinbranche über hundert Jahre angesammelt hat, in HTML zu übertragen.

Dreistufige Typografie-Einteilung

• Serifen → „Meinungen“. Verwende Serifen für Haupttitel; Leser spüren sofort: „Das ist ein Satz, den man ernst nehmen sollte.“
• Serifenlos → „Informationen“. Hohe Dichte für den Fließtext, leicht zu lesen.
• Nichtproportional → „Metadaten“. Kapitelnummern, Daten und Seitenzahlen in Kopf- und Fußzeilen, wie Magazinfußzeilen oder Code in einem Terminal.

Leser müssen nicht nachdenken; ihre Augen wissen automatisch, ob ein Satz Haupttext oder Fußnote ist.

Farbdisziplin

Papierweiß, Tintenfarbe und eine Akzentfarbe reichen aus.

Reines Weiß blendet, reines Schwarz wirkt aggressiv; die Druckindustrie macht das nie, und Kindle auch nicht.

In den 5 Themen des Skills ist keine Hintergrundfarbe #FFFFFF und keine Textfarbe #000000.

Jeder Satz setzt nur 6 CSS-Variablen frei, und SKILL.md stellt klar: Benutzer dürfen keine benutzerdefinierten Hex-Codes festlegen; sie müssen eine der fünf wählen.

Je strenger die Einschränkungen, desto stabiler der Stil. Ästhetik zu schützen ist wichtiger, als Benutzern Freiheit zu geben.

Raster und Rhythmus

Feste Raster wie 7:5, 6:6 und 8:4 sorgen für Ordnung auf einer einzelnen Seite.

Hero-Seiten und Nicht-Hero-Seiten müssen sich abwechseln, um den Rhythmus der gesamten Präsentation zu gewährleisten.

Eine Seite dicht, eine Seite luftig – das ist das Gefühl von „Atmen“ beim Durchblättern eines Magazins.

Eine harte Regel ist in den Skill geschrieben: Mehr als drei aufeinanderfolgende Seiten mit demselben Thema gelten als P0-Fehler.

Eine PPT ohne Rhythmus ist nur ein Stapel Folien, die zu einem PDF zusammengefügt wurden.

Abschließende Worte

Keine der obigen Regeln wurde von mir erfunden.

Ich bin seit zehn Jahren Designer, habe UI, Interaktion und KI-Effekte gemacht; das ist eigentlich Branchenwissen.

Ich habe sie nur eine nach der anderen in SKILL.md und checklist.md geschrieben, damit die KI sie für mich ausführen kann.

Mit anderen Worten, dieser Skill ist ein Komprimierungspaket meiner zehnjährigen Ästhetik.

Früher musste ich zwei Tage damit verbringen, manuell Raster anzupassen, Schriftgrößen auszuwählen und Farbwerte zu bestimmen, um eine anständige PPT zu machen.

Jetzt werfe ich einfach das Material der KI zu, sie setzt es nach diesen Regeln zusammen, und ich muss es nur noch prüfen.

Aus diesem Grund wage ich es, es als Open Source zu veröffentlichen.

Die Regeln waren nicht mein Eigentum; Monocle-Designer haben sie Jahrzehnte vor mir verwendet. Ich habe sie nur in HTML von 2026 kopiert.

Der Skill ist bereits auf GitHub: github.com/op7418/guizang-ppt-skill

Die README enthält einen „Installationsprompt für KI“. Kopiere ihn und füge ihn in deinen Claude Code oder einen anderen KI-Agenten ein, und die Installation erfolgt automatisch. Nach der Installation sage einfach „Hilf mir, eine Magazin-PPT zu erstellen“, um ihn auszulösen.

Du kannst ihn auch im Bloome Agent verwenden, der derzeit kostenlos ist:

https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G

Wenn dir dieser Inhalt gefällt, gib mir bitte ein Like oder teile ihn mit Freunden, die ihn brauchen.

Du kannst auch die mit diesem Skill erstellten PPTs in den Kommentaren teilen.