# Guizang HTML PPT Agenten-Fertigkeit
> Erstellen Sie HTML-Präsentationen mit zwei unterschiedlichen visuellen Stilen durch diese PPT-Agenten-Fertigkeit, komplett mit Bildgenerierung und plattformübergreifender Cover-Erstellung. Gestalten Sie professionelle und visuell ansprechende Präsentationen in Sekunden.
- Canonical: https://nanoskill.ai/de/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/de/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: de
- Source type: github
- Popularity signal: 11121
## Sources
- https://github.com/op7418/guizang-ppt-skill
## Install
```shell
npx skills add https://github.com/op7418/guizang-ppt-skill
```
## About
Die Guizang HTML PPT Agenten-Fertigkeit befähigt KI-Agenten, mühelos professionelle Einzeldatei-HTML-Präsentationen zu erstellen. Entwickelt für Plattformen wie Claude Code und Codex, optimiert diese Fertigkeit die Erstellung visuell ansprechender Inhalte und bietet zwei unterschiedliche ästhetische Systeme: den erzählorientierten Electronic-Magazine-Stil und den faktengetriebenen Swiss-Internationalism-Stil. Benutzer können Artikel schnell in ansprechende Decks umwandeln, detaillierte Produktanalysen erstellen und konsistente plattformübergreifende Cover generieren – und das bei hoher visueller Qualität.
Diese Fertigkeit zeichnet sich durch die Bereitstellung von leichtgewichtigem HTML-Output aus, der ohne komplexe Einrichtung leicht zu teilen und anzusehen ist. Sie integriert fortschrittliche Fähigkeiten wie KI-gestützte Bildgenerierung durch GPT-Image 2.0 / GPT-M 2.0 innerhalb von Codex und ermöglicht so kontextbezogene Visualisierungen und Infografiken. Darüber hinaus bietet sie strukturierte Layouts und strenge Designprinzipien, insbesondere für den Swiss-Stil, und gewährleistet so ein elegantes und konsistentes Erscheinungsbild über alle generierten Inhalte hinweg, von Folien bis zu Social-Media-Covern.
Ideal für eine Vielzahl von Szenarien, von internen Vorträgen und Produkteinführungen bis hin zum persönlichen Austausch und Methodenpräsentationen, vereinfacht die Guizang HTML PPT Agenten-Fertigkeit die Arbeitsabläufe bei der Inhaltserstellung. Sie ermöglicht es Benutzern, Langforminhalte in prägnante Präsentationen umzuwandeln, Produkt-Screenshots an spezifische Vorlagenverhältnisse anzupassen und eine einheitliche visuelle Identität über alle Kommunikationskanäle hinweg sicherzustellen. Der Fokus der Fertigkeit auf strukturierte Arbeitsabläufe und vordefinierte visuelle Regeln gewährleistet hochwertige, ästhetisch ansprechende Ergebnisse mit minimalem Aufwand.
## Key features
- **Duale visuelle Systeme**: Wählen Sie zwischen 'Stil A: Elektronisches Magazin × E-Tinte' für Erzählungen und persönlichen Ausdruck oder 'Stil B: Schweizer Internationalismus' für Fakten, Produktanalysen und Methodologien, um sicherzustellen, dass Ihre Botschaft effektiv vermittelt wird.
- **Einzeldatei-HTML-Ausgabe**: Generieren Sie leichtgewichtige, eigenständige HTML-Präsentationen, die keinen Build-Prozess oder Server benötigen, sodass sie einfach in jedem Webbrowser zu öffnen, zu teilen und direkt vorzuführen sind.
- **KI-Agenten-Kompatibilität**: Entwickelt für Claude Code, Codex und andere KI-Agenten mit Shell-Zugriff, ermöglicht es die nahtlose Generierung, Modifikation und Iteration von HTML-PPTs durch Befehle in natürlicher Sprache.
- **Codex-Bildgenerierung**: Integrieren Sie GPT-Bild 2.0 / GPT-M 2.0 in Codex, um hochwertige, kontextbezogene Bilder, Infografiken und UI-Szenarien zu generieren, die perfekt skaliert und in Ihre Folien eingefügt werden.
- **Plattformübergreifende Cover-Generierung**: Erstellen Sie automatisch konsistente, visuell einheitliche Cover für verschiedene Plattformen wie WeChat Offizielle Konten (21:9, 1:1), Xiaohongshu (3:4) und Videokonten (16:9) basierend auf dem Kerninhalt Ihrer Präsentation.
## Use cases
- **Artikel in Präsentationen umwandeln**: Konvertieren Sie lange Artikel oder Dokumente in prägnante, ansprechende HTML-PPTs für Reden, interne Vorträge oder private Austausch-Sessions, indem Sie Kernideen extrahieren und sie in eine überzeugende Erzählung strukturieren.
- **Professionelle Produktanalysen erstellen**: Nutzen Sie den strukturierten 'Stil B: Schweizer Internationalismus', um Produktanalysen, Methodologien oder KI-Produkteinführungen mit Fokus auf Fakten, Daten und klarer visueller Kommunikation zu präsentieren.
- **Konsistente plattformübergreifende Inhalte gestalten**: Generieren Sie eine einheitliche visuelle Identität über Ihre Präsentation, begleitende Bilder und verschiedene Social-Media-Cover hinweg, um Markenkonsistenz und Wirkung über alle Ihre Kommunikationskanäle sicherzustellen.
- **Screenshots für PPTs verbessern**: Gestalten Sie Produkt-Screenshots neu und passen Sie sie an Präsentationsvorlagen an, um Schlüsselinformationen beizubehalten und gleichzeitig einen konsistenten visuellen Stil zu erreichen, der für professionelle HTML-PPTs geeignet ist.
## Result preview
Sehen Sie eine echte PPT, die von dieser Agenten-Fertigkeit aus einem Artikel generiert wurde.
## Result walkthrough
### Schritt 1：Installieren
Fügen Sie die Fertigkeit zu Ihrem Agenten hinzu.
### Schritt 2：Inhalt bereitstellen
Geben Sie ein Thema oder Notizen ein oder laden Sie vorhandenes Material hoch (z. B. Bericht, Gliederung, Ideen).
### Schritt 3：Erhalten Sie Ihre PPT
Überprüfen Sie die HTML-Präsentation, die Sie direkt verwenden können.
## Skill definition
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](https://x.com/op7418) 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
```bash
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:
```text
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:
```text
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:
```text
Erstelle ein Deck im Schweizer Stil aus diesem Artikel, etwa 7 Folien, mit 2-3 generierten Bildern.
```
Weitere nützliche Prompts:
```text
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
| Aufgabe | Empfohlener Ablauf |
|------|------------------|
| Langer Artikel zu Vortragsdeck | Kernargument extrahieren, dann einen Rhythmus von 6-10 Folien aufbauen |
| Framework- / Produktanalyse | Stil B Schweizer mit festen Layouts und 21:9 Helden-Visuals verwenden |
| Persönlicher Vortrag / Meinungsbeitrag | Stil A redaktionelles Magazin für stärkeren narrativen Rhythmus verwenden |
| Deck-Visuals | In Codex Fotos, Infografiken, Flussdiagramme, Systemkarten oder UI-Szenen generieren |
| Social Covers | 21:9 Hauptcover, 1:1 Share Cards, 3:4 vertikale Cover und Video-Thumbnails aus derselben Idee generieren |
| Screenshot-Normalisierung | Roh-Screenshots vor dem Einfügen in Folien in vorgabensichere Seitenverhältnisse umgestalten |
## 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
| Plattform | Status | Hinweise |
|----------|--------|-------|
| Claude Code | Unterstützt | Nativer Skill-Workflow zum Erstellen und Iterieren von HTML-Decks |
| Codex | Unterstützt | Gut für Deck-Generierung, Bildgenerierung und browserbasierte visuelle QA |
| Cursor / andere lokale Agenten | Funktioniert | Erfordert Dateisystemzugriff und Shell-Ausführung |
| WorkBuddy | In Anpassung | Marketplace-fähige Version wird separat vorbereitet |
| Reiner Chatbot | Nicht empfohlen | Ohne Dateisystem und Browser-Vorschau ist die vollständige Deck-Generierung schwer zu stabilisieren |
## Installation
### Option 1: Einzeilige Installation (empfohlen)
```bash
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
```bash
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`](./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:
```bash
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`](./references/image-prompts.md). Screenshot-Einrahmung befindet sich in [`references/screenshot-framing.md`](./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:
```text
Erstelle ein 8-Folien-Deck im Schweizer Stil aus diesem Artikel, mit 3 generierten Bildern, die auf die Vorlagen-Bildslots abgestimmt sind.
```
```text
Wandle dieses Produktanalyse-Dokument in ein Deck im redaktionellen Magazinstil mit einem starken narrativen Rhythmus um.
```
```text
Erstelle aus der Kernidee dieses Decks zwei Cover: ein 21:9-Hauptcover und eine visuell gepaarte 1:1-Share-Card.
```
```text
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
| Vorschau | Thema | Kernfarben und am besten für |
|---------|-------|--------------------------|
| 
| 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea`. Allgemeiner Standard, kommerzielle Einführungen, im Zweifelsfall. |
| 
| 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5`. Technik, Forschung, KI, technische Keynotes. |
| 
| 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8`. Natur, Nachhaltigkeit, Kultur, Sachbücher. |
| 
| 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgisch, humanistisch, literarisch, Indie-Zines. |
| 
| 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Kunst, Design, Kreativ, Mode, galerieartige Decks. |
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**.
| Vorschau | Thema | Akzentfarbe und am besten für |
|---------|-------|---------------------------|
| 
| 🔵 **Internationales Kleinblau** | `#002FA7`. Standard, kommerzielle Einführungen, KI-Produkte, Frameworks. |
| 
| 🟡 **Zitronengelb** | `#FFD500`. Jugend, Sport, Einzelhandel, Konsumgüter, Y2K-Retro. |
| 
| 🟢 **Zitronengrün** | `#C5E803`. Ökologie, Nachhaltigkeit, Gesundheit, Gen Z-Marken. |
| 
| 🟠 **Sicherheitsorange** | `#FF6B35`. Warnungen, Nachrichten, Industriethemen, Sport, energiegeladene Themen. |
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*](https://monocle.com) 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](https://github.com/op7418)
## FAQ
### Was ist die Guizang-HTML-PPT-Agentenfähigkeit?
Die Guizang-HTML-PPT-Fähigkeit ist ein mit KI-Agenten kompatibles Werkzeug, das entwickelt wurde, um Einzeldatei-HTML-Präsentationen, begleitende Bilder und plattformübergreifende Cover zu generieren. Sie bietet zwei unterschiedliche visuelle Stile: Elektronisches Magazin und Schweizer Internationalismus.
### Wie installiere ich die Guizang-HTML-PPT-Agentenfähigkeit?
Sie können sie installieren, indem Sie \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` in Ihrem Terminal ausführen oder einen shell-fähigen KI-Agenten anweisen, das Repository in Ihr Fähigkeiten-Verzeichnis zu klonen.
### Kann ich die Farben meiner HTML-PPT anpassen?
Nein, benutzerdefinierte HEX-Werte sind nicht erlaubt. Die Fähigkeit bietet eine Auswahl an voreingestellten Themen für sowohl Stil A (Elektronisches Magazin) als auch Stil B (Schweizer Internationalismus), um ästhetische Konsistenz und qualitativ hochwertige Ausgabe zu gewährleisten.
### Welche beiden visuellen Stile werden angeboten?
Stil A, 'Elektronisches Magazin × E-Tinte', ist ideal für Geschichtenerzählen, Meinungen und persönlichen Ausdruck. Stil B, 'Schweizer Internationalismus', eignet sich am besten zur Darstellung von Fakten, Produktanalysen und Methodologien mit einem rasterbasierten, minimalistischen Design.
### Ist es möglich, die HTML-PPT in das PPTX-Format zu exportieren?
Die Kernlieferung ist HTML, das direkt in einem Browser vorgeführt, als Screenshot aufgenommen oder aufgezeichnet werden kann. Während der direkte PPTX-Export keine primäre Funktion ist, können Sie die HTML-Seiten bei Bedarf als visuelle Entwürfe für die Konvertierung verwenden.
### Unterstützt die Fähigkeit die Bilderzeugung für mein HTML-PPT?
Ja, wenn sie in einer Codex-Umgebung verwendet wird, kann die Fähigkeit GPT-Bild 2.0 / GPT-M 2.0 nutzen, um verschiedene Arten von Bildern, Infografiken und UI-Szenarien zu generieren, die dann gemäß den Vorlagenverhältnissen in Ihre Präsentation eingefügt werden.