Guizang PPT Skill: Atemberaubende HTML-Slide-Decks direkt in Claude Code erstellen

Hast du schon einmal einen langen Artikel, eine Produktanalyse oder sogar einen persönlichen Essay in ein wirklich gut gestaltetes Slide-Deck verwandeln wollen – ohne PowerPoint zu öffnen und mit Textfeldern zu kämpfen? Damit bist du nicht allein. Genau dieses Problem löst Guizang PPT Skill. Dieser Open-Source-Skill wurde von dem KI-Vordenker 歸藏 entwickelt und durch tatsächliche Offline-Vorträge verfeinert. Er läuft in Claude Code, Codex und ähnlichen Agent-Umgebungen und erzeugt schöne HTML-Präsentationen als einzelne Datei. Er ist aber auch kein Spielzeug: Er bringt zwei unterschiedliche visuelle Systeme, 22 feste Layouts, einen vollwertigen Präsentationsmodus und sogar optionale KI-Bildgenerierung für Cover und Diagramme mit.

Warum HTML statt PPTX?

Das gesamte Projekt folgt einer einfachen Grundidee: HTML ist das ideale Format für KI-Agenten, um Folien zu erstellen. Da HTML und CSS reiner Text sind, kann der Agent die Datei direkt lesen, bearbeiten und validieren. Anders als Markdown-Slide-Decks bietet HTML dir Pixel-genaue Layoutkontrolle, Animationen und responsives Design. Und anders als PPTX ist das Endergebnis eine einzelne Datei, die du in jedem Browser öffnen, präsentieren, als Screenshot festhalten oder an Kollegen senden kannst. Kein Build-Schritt, kein Server, keine Dependency-Hölle.

Der größte Vorteil ist jedoch die Qualitätskontrolle. Der Skill enthält Validierungsskripte, die Dinge wie Layout-Überlauf, Ausrichtung und ob Bilder innerhalb ihrer vorgesehenen Bereiche bleiben, prüfen. Das bedeutet, die KI rät nicht nur; sie misst das tatsächlich gerenderte Ergebnis, wenn Playwright verfügbar ist.

Zwei visuelle Stile für verschiedene Geschichten

Der Skill bringt zwei Stilsysteme mit. Stil A heißt „Electronic Magazine × Electronic Ink“. Stell dir vor, das Monocle-Magazin trifft auf eine minimalistische Code-Ästhetik. Er ist perfekt für Erzählungen, Meinungen, persönliche Beiträge und alles, bei dem Persönlichkeit zählt. Es gibt zehn flexible Layouts für Dinge wie Kapitelauftakt, Datenseiten, Bildraster, Pipelines und Vergleiche. Du kannst aus fünf tinteinspirierten Themes wählen: Classic Ink, Indigo Porcelain, Forest Ink, Kraft Paper und Dune.

Stil B schlägt die entgegengesetzte Richtung ein: Swiss International Style. Hier dreht sich alles um strenge Raster, eine kräftige Ankerfarbe mit hoher Sättigung, rechte Winkel, Haarlinien und dramatische Schriftgrößen. Dieser Stil ist für Fakten, Produkte, Analysen und Methodik gemacht. Es gibt 22 feste Layouts, von Cover und Statement bis KPI Tower, Loop Diagram, Duo Compare und Closing Manifesto. Als Ankerfarbe stehen vier Designs zur Verfügung: Klein Blue, Lemon Yellow, Lemon Green und Safety Orange. Wenn du ein Swiss-Deck anforderst, ohne eine Farbe anzugeben, empfiehlt der Agent standardmäßig Klein Blue.

Dieses Dualsystem bedeutet, dass du nicht jedes Mal das Designrad neu erfinden musst. Du sagst einfach, welche Stimmung du möchtest, und der Skill setzt ein konsistentes ästhetisches System durch – inklusive strenger Regeln wie keine eigenen Hex-Werte, denn den Design-Sinn zu bewahren ist wichtiger, als jedem zu erlauben, frei Farben zu wählen.

In 30 Sekunden starten

Die Installation ist erfrischend einfach. Der empfohlene Einzeiler lautet:

Wenn du es vorziehst, alles von der KI erledigen zu lassen, füge Folgendes in Claude Code, Cursor oder einen anderen Agenten mit Shell-Zugriff ein:

帮我安装 guizang-ppt-skill。请把 https://github.com/op7418/guizang-ppt-skill 克隆到 ~/.claude/skills/guizang-ppt-skill,安装完成后检查 SKILL.md、assets/、references/ 是否存在。

Für den manuellen Weg führst du einfach Folgendes aus:

Nach der Installation wird der Skill automatisch ausgelöst, wenn du Anfragen wie diese stellst:

Wie ein echter Workflow aussieht

Der wahre Zauber liegt darin, dass der Skill ein strukturierter Workflow und kein vager Prompt ist. Wenn du ein Deck anforderst, durchläuft der Agent mehrere Schritte: Stil auswählen, Anforderungen mithilfe einer Liste mit sieben Fragen klären, die richtige Vorlage aus assets/template.html oder assets/template-swiss.html kopieren, Inhalte anhand einer Rhythmus-Tabelle einfügen, optional Bilder generieren, Sprechernotizen erstellen, Validierungsprüfungen durchführen und das Deck im Browser in der Vorschau anzeigen.

Eine typische Anfrage könnte lauten: “帮我把这个产品分析文档做成电子杂志风 PPT，重点突出观点和叙事节奏。” Der Agent erstellt anschließend ein HTML-Deck als einzelne Datei mit der Magazin-Vorlage, komplett mit Seitenübergängen, Theme-Farben, Sprechernotizen und der integrierten Presenter-Runtime.

Präsentationsmodus, der wirklich nützlich ist

Eine überraschend umfangreiche Funktion ist der eingebaute Präsentationsmodus. Klicke in der unteren rechten Ecke auf P, und das Deck öffnet eine eigene Präsentationsansicht, während in einem anderen Tab ein sauberes Publikumsfenster erscheint. Du erhältst eine Live-Vorschau der aktuellen und der nächsten Folie im Format 16:9, strukturierte Notizen mit Zielsetzung und Stichpunkten, Timer für die verstrichene Zeit und das Gesamttempo sowie einen Probenmodus, der die tatsächliche Zeit pro Seite lokal aufzeichnet. Außerdem gibt es nützliche Werkzeuge wie einen Laserpointer, einen Zeichen-Highlighter und eine Ein-Klick-Funktion für einen schwarzen oder weißen Bildschirm. Wenn das Internet ausfällt, bricht nichts davon zusammen – alles ist lokales HTML mit Browser-APIs und kein Cloud-Dienst.

KI-generierte Bilder und Cover

In Codex kann der Skill auf GPT-Image 2.0 / GPT-M 2.0 zurückgreifen, um dokumentarische Fotos, Infografiken, Flussdiagramme, Systemdiagramme und UI-Mockups zu generieren. Die wichtigste Regel ist, dass Bilder eingebettete Assets sind, keine eigenständigen Poster – sie sollten also keine eigenen Fußzeilen, Titel oder dekorativen Rahmen enthalten. Der Skill kann außerdem unordentliche Screenshots mithilfe der integrierten Hintergrundbibliothek in saubere Präsentations-Assets umwandeln, was ein Lebensretter ist, wenn du einheitliche visuelle Elemente benötigst, ohne jede Folie manuell neu erstellen zu müssen.

Über die Folien hinaus erstreckt sich dasselbe visuelle System auf Social-Media-Cover. Du kannst ein Hero-Bild für einen WeChat-Official-Account im Format 21:9, eine Share-Card im Format 1:1, ein Xiaohongshu-Cover im Format 3:4 oder ein horizontales Video-Cover im Format 16:9 erzeugen – alles passend zur Theme-Farbe und Typografie des Decks.

Wann du es verwenden solltest (und wann nicht)

Guizang PPT Skill glänzt bei Offline-Vorträgen, internen Präsentationen, KI-Produkteinführungen, Demo-Days und jeder Rede mit einer starken persönlichen Stimme. Weniger geeignet ist er für dichte Tabellen-Dashboards, Schulungsunterlagen oder Decks, bei denen eine intensive Echtzeit-Zusammenarbeit nötig ist, denn das Ergebnis ist bewusst eine statische HTML-Datei.

Die Designphilosophie des Projekts ist erfrischend: Zurückhaltung statt Effekthascherei, Struktur statt Dekoration und Bilder werden als vollwertige Elemente mit stabilen Seitenverhältnissen behandelt. Du kannst B drücken, um WebGL-/Canvas-Animationen zu deaktivieren und in einen statischen Modus mit geringer Systemlast zu wechseln, falls dein Rechner damit zu kämpfen hat.

So geht es weiter

Guizang PPT Skill ist ein Open-Source-Projekt mit einer aktiven Roadmap, die weitere Fallstudien, mehr Swiss-Validierungsregeln und erweiterte Cover-Vorgaben umfasst. Wenn du dir schon immer gewünscht hast, dass dein KI-Assistent einfach die Folien erstellt, ist das ein solides Werkzeug, das du heute ausprobieren kannst. Installiere den Skill mit dem obigen npx-Befehl, übergib dem Agenten einen Artikel und sieh zu, wie er ein ausgefeiltes HTML-Deck erzeugt, das du direkt im Browser präsentieren kannst.