Guizang HTML PPT Agenten-Fertigkeit

Eine Agenten-Fähigkeit für Claude Code, Codex und ähnliche Coding-Agenten-Umgebungen. Sie generiert einzelne HTML-Dateien für horizontale Swipe-Decks, Deck-Visuals und Social-Cover-Seiten.

Sie wird mit zwei visuellen Systemen ausgeliefert:

• Stil A: redaktionelles Magazin × elektronische Tinte. Stellen Sie sich Monocle mit eingewebtem Code vor. Am besten für erzählerische Vorträge, Meinungen, Salons und persönliche Stimme.
• Stil B: Schweizer Internationaler Typografischer Stil. Rasterbasiert, eine stark gesättigte Akzentfarbe, scharfe Rechtecke, haarfeine Linien und extreme Schriftkontraste. Am besten für Fakten, Produkte, Analysen und Frameworks.

Destilliert von Guizang aus Offline-Vorträgen wie "One-Person Company: Organizations Folded by AI" und "A New Way of Working." Jede dabei aufgetretene Falle ist in checklist.md protokolliert.

Altes Thema · Stil A Redaktionelles Magazin

Neues Thema · Stil B Schweizer International

30-Sekunden-Start

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Oder fügen Sie dies in einen KI-Agenten mit Shell-Zugriff ein:

Installiere guizang-ppt-skill für mich. Klone https://github.com/op7418/guizang-ppt-skill nach ~/.claude/skills/guizang-ppt-skill und überprüfe dann, ob SKILL.md, assets/ und references/ vorhanden sind.

Falls bereits installiert, aktualisiere mit:

Aktualisiere guizang-ppt-skill für mich. Gehe zu ~/.claude/skills/guizang-ppt-skill, führe git pull aus und teile mir den neuesten Commit mit.

Dann fragen Sie Ihren Agenten:

Erstelle ein Deck im Schweizer Stil aus diesem Artikel, etwa 7 Folien, mit 2-3 generierten Bildern.

Weitere nützliche Prompts:

Wandle diese Markdown-Datei in eine Präsentation im redaktionellen Magazinstil um.
Erstelle ein 21:9 Social Cover aus der Kernidee dieses Decks.
Gestalte diesen Produkt-Screenshot als 16:10 Folienvisual um.

Was Sie erhalten

• 🖋 Zwei visuelle Systeme: redaktionelles Storytelling für Stil A, faktische Schweizer Struktur für Stil B
• 📐 Horizontale Wisch-Navigation: Pfeiltasten ← → / Mausrad / Touch-Swipe / untere Punkte / ESC für den Index
• 🧩 Stil A 10 Layouts: Titelseite, Trennseite, große Zahlen, Bild/Text, Bildraster, Pipeline, Vergleich und mehr
• 🧱 Stil B 22 feste Layouts: Cover, Statement, KPI-Turm, Schleifendiagramm, Duo-Vergleich, Bildheld, Abschlussmanifest und mehr
• 🎨 Kuratierte Themenvoreinstellungen: 5 Themen mit elektronischer Tinte für Stil A, 4 Schweizer Akzentfarben-Themen für Stil B
• 🖼 Optionaler Codex-Bildfluss: generative dokumentarische Fotos, Infografiken, Flussdiagramme, Systemkarten und UI-Szenen mit GPT-Image 2.0 / GPT-M 2.0, dann Einfügen in vorgabensicheren Seitenverhältnissen
• 📰 Social Covers: generative 21:9 WeChat-Titelbilder, 1:1 Share Cards, 3:4 Xiaohongshu-Cover, Video-Thumbnails und verwandte Varianten
• 📴 Energiesparmodus: drücken Sie B, um WebGL-/Canvas-Animationen in statische Bilder umzuwandeln
• 📄 Einzelne HTML-Datei — kein Build, kein Server, direkt im Browser öffnen

Passt / Passt nicht

✅ Passt: Offline-Vorträge, Branchen-Keynotes, private Salons, KI-Produkteinführungen, Demo-Tage, Präsentationen mit starker persönlicher Note

❌ Passt nicht: datenschwere Tabellen, Schulungsdecks (zu geringe Dichte), kollaborative Bearbeitung durch mehrere Benutzer (statisches HTML)

Häufige Anwendungsfälle

Warum HTML-Decks

• Agenten-native Bearbeitung: HTML / CSS ist Klartext, sodass Agenten es direkt lesen, bearbeiten und validieren können.
• Höhere visuelle Dichte als Markdown: präzises Layout, Positionierung, Bewegung, Interaktivität und Cover-Formate.
• Leichte Bereitstellung: eine HTML-Datei kann geöffnet, präsentiert, versendet, als Screenshot erstellt oder aufgenommen werden.
• Bessere Qualitätshürden: der Schweizer Validator kann Layout-Abweichungen, unsichere Bildplatzierung, zentrierte Haupttitel und SVG-Textfallen erkennen.
• Ein visuelles System über alle Ausgaben hinweg: Decks, generierte Bilder, Cover und Screenshot-Umgestaltungen können dieselben Stilregeln verwenden.

Plattformunterstützung

Installation

Option 1: Einzeilige Installation (empfohlen)

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Option 2: Dies an eine KI einfügen

Installiere die guizang-ppt-skill Claude Code Fähigkeit für mich. Schritte:

1. Stelle sicher, dass ~/.claude/skills/ existiert (falls nicht, erstelle es)
2. Führe git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill aus
3. Überprüfe: ls ~/.claude/skills/guizang-ppt-skill/ sollte SKILL.md, assets/, references/ anzeigen
4. Informiere mich, wenn es erledigt ist. Später werden Sätze wie "mach mir ein Deck im Magazinstil" diese Fähigkeit auslösen.

Füge den obigen Block in Claude Code / Cursor / einen beliebigen KI-Agenten mit Shell-Zugriff ein und er kümmert sich um die Installation.

Option 3: Manuelle CLI

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

So lösen Sie es aus

Einmal installiert, erkennt Claude Code die Fähigkeit automatisch. Auslöse-Sätze:

• "Mach mir ein Deck im Magazinstil"
• "Mach mir ein Deck im Schweizer Stil"
• "Generiere ein horizontales Wisch-Deck"
• "Präsentation im redaktionellen Magazinstil"
• "Elektronische Tinte Folien für meinen Vortrag"
• "Erstelle ein 21:9 WeChat-Cover aus diesem Artikel"
• "Erstelle eine 1:1 Share Card aus diesem Deck"

Workflow

Die Fähigkeit ist ein strukturierter Arbeitsablauf; der Agent führt Sie durch jeden Schritt:

1. Stil wählen — Stil A redaktionelles Magazin oder Stil B Schweizer International
2. Absicht klären — 7-Fragen-Checkliste: Stil, Publikum, Dauer, Quellmaterial, Bilder/Screenshots, Thema, harte Einschränkungen
3. Vorlage kopieren — Stil A verwendet assets/template.html; Stil B verwendet assets/template-swiss.html
4. Inhalt füllen — einen Rhythmusplan erstellen, dann die passenden Layout-Skelette auswählen und anpassen
5. Optionale Bildgenerierung — in Codex fragen, ob GPT-Image 2.0 / GPT-M 2.0 Bilder verwendet werden sollen, und sie dann in seitenangemessenen Seitenverhältnissen einfügen
6. Selbstcheck — mit references/checklist.md abgleichen; P0-Probleme müssen alle bestehen; Schweizer Decks müssen auch den Layout-Validator bestehen
7. Vorschau — die HTML-Datei in einem Browser öffnen
8. Iterieren — Inline-Stile verwenden, um Schriftgröße, Höhe und Abstände anzupassen

Vollständige Spezifikation in SKILL.md.

Stil B Schweizer

Das Schweizer Thema ist ein strenges Layout-System, nicht nur eine CSS-Haut.

• 22 benannte Layouts: Hauptfolien müssen S01 bis S22 verwenden; keine neuen Strukturen erfinden
• 4 Akzentfarben: Internationales Kleinblau, Zitronengelb, Zitronengrün, Sicherheitsorange
• Rastersperre: 16-Spalten-Raster, scharfe Rechtecke, 1px-Haarlineale, keine Schatten, keine Verläufe, keine abgerundeten Karten
• Chinesische Titelskalierung: rein chinesische Überschriften sollten eine Stufe kleiner sein, um Platz für Inhalt und Bilder zu bewahren
• Bild/Text untere Ausrichtung: Text- und Bildblöcke sollten in linken/rechten Bildlayouts unten ausgerichtet sein, dabei aber Seitensteuerungen freihalten
• Bild-Slots: Bilder müssen in vorlagendefinierten data-image-slot-Bereichen sitzen, oft mit 21:9 oder 16:10 generiert
• Harte Validierung: der Validator erfasst zentrierte Haupttitel, experimentelle Layouts, sichtbaren SVG-Text und Bilder außerhalb von Slots

Schweizer Validierung:

node scripts/validate-swiss-deck.mjs path/to/index.html

Codex-Bildfluss

In Codex kann der Agent, nachdem der erste Deck-Entwurf fertig ist, fragen, ob der Benutzer generierte Bilder wünscht. Nach Bestätigung einen Bildtyp oder -stil wählen. Häufige Typen sind:

• Dokumentarische Fotos: Fuji-/Leica-ähnliche reale Szenen, die menschliche Textur hinzufügen
• Infografiken / Flussdiagramme / Vergleichsdiagramme / Systemkarten: für Konzepte, die sich mit Fotos nicht gut erklären lassen
• Screenshot-Einrahmung / Screenshot-Umgestaltungen: Roh-Screenshots zuerst mit gebündelten Hintergrund-Assets und einer CleanShot X-artigen Leinwand bewahren; UI-Szenengenerierung nur dann verwenden, wenn der Screenshot neu aufgebaut werden muss
• Datenposter / Diagramme: Schlüsselzahlen in einfügebereite visuelle Assets verwandeln
• Mehrbild-Kompositionen: nützlich für ultrabreite Slots, wo drei nicht zusammenhängende 16:9 Bilder das Raster brechen würden

Generierte Bilder müssen vier Kernregeln folgen:

• Das Bild als eingebettetes Asset behandeln, nicht als eigenständige Folie: keine Fußzeile, Seitenende, Titel, Seitenzahl, Eckmarkierung, Signatur oder dekorativer Rahmen
• Die Deck-Sprache abgleichen: Chinesische Decks verwenden chinesische Beschriftungen in Infografiken, englische Decks englische Beschriftungen
• Das Slot-Seitenverhältnis vor der Generierung abgleichen: 21:9 für viele Schweizer Helden-Slots, 16:9 / 16:10 für übliche Hauptbilder, 16:10 für UI-Szenen, feste gleiche Höhen für Bildraster
• Wenn ein Roh-Screenshot originalgetreu bleiben muss, zuerst references/screenshot-framing.md lesen und gebündelte assets/screenshot-backgrounds/-Hintergründe sowie programmatische Skalierung, Polsterung und Ausrichtung verwenden, anstatt den Screenshot standardmäßig neu zu zeichnen

Bildprompts befinden sich in references/image-prompts.md. Screenshot-Einrahmung befindet sich in references/screenshot-framing.md.

Cover-Generierung

Die Fähigkeit kann auch einen Artikel oder eine Deck-Idee in Plattform-Cover umwandeln:

• WeChat-Hauptcover: 21:9, überschriftsorientiert, mit einem visuellen Anker
• WeChat-Share-Card: 1:1, visuell mit dem 21:9-Cover gepaart
• Xiaohongshu-Cover / Karussell: 3:4, großer Titel, konsistente Schriftgröße über eine Reihe hinweg
• Video-Thumbnail: 16:9, Titel + Untertitel + ein zentrales Bild

Es gilt dieselbe Regel: wenige starke Schlüsselwörter verwenden, den Titel als visuelles Zentrum halten und die Leinwand nicht mit Fließtext füllen.

Beispiel-Prompts

Kopieren Sie einen dieser Prompts in Ihren Agenten und hängen Sie Ihren Artikel, Ihre Markdown-Datei oder Bild-Assets an:

Erstelle ein 8-Folien-Deck im Schweizer Stil aus diesem Artikel, mit 3 generierten Bildern, die auf die Vorlagen-Bildslots abgestimmt sind.

Wandle dieses Produktanalyse-Dokument in ein Deck im redaktionellen Magazinstil mit einem starken narrativen Rhythmus um.

Erstelle aus der Kernidee dieses Decks zwei Cover: ein 21:9-Hauptcover und eine visuell gepaarte 1:1-Share-Card.

Gestalte diese Produkt-Screenshots in konsistente 16:10-Folienvisuals um. Bewahre die wichtigsten UI-Informationen; füge keine Folientitel oder Fußzeilen innerhalb der Bilder hinzu.

Verzeichnis

guizang-ppt-skill/
├── SKILL.md              ← Haupt-Fähigkeitsdatei: Workflow, Prinzipien, häufige Fehler
├── README.md             ← Chinesische README
├── README.en.md          ← diese Datei
├── assets/
│   ├── template.html         ← Stil A redaktionelles Magazin-Vorlage
│   ├── template-swiss.html   ← Stil B Schweizer Vorlage
│   └── screenshot-backgrounds/ ← gebündelte WebP-Screenshot-Hintergründe: 5 Stil-A / 4 Stil-B
├── scripts/
│   └── validate-swiss-deck.mjs ← Schweizer Layout-Validator
└── references/
    ├── components.md     ← Komponentenkatalog (Typ, Farbe, Raster, Icons, Callout, Statistik, Pipeline)
    ├── layouts.md        ← 10 Layout-Skelette (einfügungsbereit)
    ├── layouts-swiss.md  ← 22 feste Schweizer Layouts
    ├── swiss-layout-lock.md ← Schweizer Originaltreue und Layout-Hartregeln
    ├── themes.md         ← 5 Themenvoreinstellungen (auswählen, nicht anpassen)
    ├── themes-swiss.md   ← 4 Schweizer Akzentfarben-Themen
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 Bildtypen, Seitenverhältnisse und Basisprompts
    ├── screenshot-framing.md ← CleanShot X-artige Screenshot-Einrahmungssemantik
    └── checklist.md      ← Qualitätscheckliste (P0 / P1 / P2 / P3 Stufen)

Themenvoreinstellungen

Aus references/themes.md auswählen. Benutzerdefinierte Hex-Werte sind nicht erlaubt — der Schutz der Ästhetik zählt mehr als Wahlfreiheit.

Stil A Redaktionelle Themen

Themenwechsel erfordert nur das Ersetzen der 6 Variablen oben im :root{}-Block von template.html — alle anderen CSS fließen durch var(--...).

Stil B Schweizer Themen

Aus references/themes-swiss.md auswählen. Benutzerdefinierte Hex-Werte sind auch hier nicht erlaubt.

Falls der Benutzer ein Deck im Schweizer Stil ohne Farbangabe wünscht, standardmäßig Internationales Kleinblau verwenden.

Kernprinzipien des Designs

1. Zurückhaltung statt Protz — WebGL-Hintergründe scheinen nur auf Heldenseiten durch
2. Struktur statt Dekoration — Informationshierarchie durch Schriftgröße + Schriftart + Rasterweißraum, nicht durch Schatten oder schwebende Karten
3. Bilder sind erstklassige Bürger — sie am Inhaltsbereich ausrichten, Seitenverhältnisse stabil halten, nur von unten beschneiden und oben/Seiten bewahren
4. Generierte Bilder sind Assets — nur das Kernfoto / Diagramm / UI behalten; keine Folientitel, Fußzeilen oder Eckmarkierungen innerhalb des Bildes darstellen
5. Rhythmus lebt auf Heldenseiten — Wechsel zwischen Helden-/Nicht-Heldenseiten hält das Auge frisch
6. Dynamische Effekte müssen optional sein — B schaltet den statischen Modus um, damit Animation nie zur Lesebelastung wird
7. Begriffe bleiben konsistent — Skills ist Skills; keine Mischmasch-Übersetzungen
8. Schweizer Layouts bleiben gesperrt — Stil B sollte das ursprüngliche 22-seitige Layoutsystem wiederherstellen und wiederverwenden, anstatt nicht verwandte Seiten zu erfinden

Visuelle Referenzen

• Monocle Magazinlayouts
• YC Garry Tan — "Thin Harness, Fat Skills"
• Massimo Vignelli / Helvetica Forever / Schweizer Internationaler Typografischer Stil
• Guizangs Offline-Vortragsdeck-Serie

Roadmap

• Weitere praxisnahe Beispiele und öffnbare HTML-Deck-Demos hinzufügen
• Cover-Formate für weitere Veröffentlichungsplattformen erweitern
• Weitere Schweizer Layout-Validierungsregeln hinzufügen
• Screenshot-Umgestaltungs- und Infografik-Generierungs-Workflows verbessern
• Marketplace-spezifische Varianten wie WorkBuddy vorbereiten
• Weitere kuratierte Themenpakete hinzufügen, während benutzerdefinierte Farben eingeschränkt bleiben

FAQ

Kann es nach PPTX exportieren? Die Hauptausgabe ist HTML. Sie können es in einem Browser präsentieren, einen Screenshot machen oder aufnehmen. PPTX-Konvertierung kann als separater Workflow durchgeführt werden, ist aber derzeit nicht der Kernpfad.

Warum sind benutzerdefinierte Farben nicht erlaubt? Die Fähigkeit ist auf stabile visuelle Ausgabe ausgelegt. Willkürliche Farben durchbrechen oft das System, daher müssen Decks kuratierte Voreinstellungen verwenden.

Kann ich mein eigenes Layout hinzufügen? Ja. Stil A Layouts können in references/layouts.md erweitert werden. Stil B ist strenger: template-swiss.html, layouts-swiss.md, swiss-layout-lock.md und den Validator gemeinsam aktualisieren.

Ist die Codex-Bildgenerierung erforderlich? Nein. Decks funktionieren auch ohne generierte Bilder. Der Bildfluss wird nur verwendet, wenn Sie Fotos, Infografiken, UI-Szenen oder Cover benötigen.

Wie aktualisiere ich die Fähigkeit? Führen Sie den Installationsbefehl erneut aus oder führen Sie git pull in Ihrem lokalen Skill-Verzeichnis aus.

Mitwirken

Fehler, Layout-Probleme, Anfragen für neue Layouts — Issues und PRs sind willkommen. Priorisieren Sie:

• Fügen Sie neue Klassen zuerst zu template.html hinzu; lassen Sie layouts.md nicht auf undefinierte Klassen verweisen
• Wenn Sie template-swiss.html ändern, aktualisieren Sie layouts-swiss.md und swiss-layout-lock.md gemeinsam
• Wenn Sie Schweizer Regeln hinzufügen, aktualisieren Sie scripts/validate-swiss-deck.mjs
• Protokollieren Sie Fallstricke in checklist.md auf der passenden P0 / P1 / P2 / P3 Stufe
• Neue Themenfarben kommen in themes.md mit einem empfohlenen Anwendungsfall

Lizenz

MIT © 2026 op7418