Communitygithub.com

cclank/lanshu-html-ppt-templates

Basierend auf 30 HTML-Präsentationsvorlagen von Lanshu (岚叔) Präsentationen erstellen, bearbeiten und anpassen – geeignet für Geschäftsberichte, Regierungspräsentationen, Pitches, Produkteinführungen, akademische Verteidigungen, Lehrmaterialien, datengestütztes Storytelling und interaktive Demonstrationen.

Was ist lanshu-html-ppt-templates?

Dieses Skill (cclank/lanshu-html-ppt-templates) bietet Zugriff auf 30 professionelle, eigenständige HTML-Präsentationsvorlagen, die für verschiedene Anwendungsfälle optimiert sind – von Unternehmensberatung und Finanzierungspitches bis hin zu akademischen Präsentationen und kreativen Portfolios. Der Benutzer wählt zunächst eine Vorlage aus dem Katalog (z. B. 07-consulting für geschäftliche Inhalte, 03-aurora für Produkteinführungen, 21-academic für akademische Arbeiten) und erstellt dann mit dem CLI-Tool `scripts/deck.py new` eine neue Präsentation. Das Skill unterstützt die direkte Bearbeitung der HTML-Datei: Ersetzen von Texten, Aktualisieren von Diagrammdaten und Anpassen von Markenelementen. Die wichtigsten Besonderheiten sind die eingebettete chinesische Schriftarteinbettung (die nach Textänderungen mit `scripts/embed_fonts.py` neu geschnitten werden muss), die eingebauten Präsentationswerkzeuge (Tastaturkürzel wie ? für Hilfe, O für Übersicht, B/W für schwarzen/weißen Bildschirm, D für Zeichnen) und die mobile Fernbedienung über `scripts/present.py`. Das Skill validiert die Ausgabe mit `scripts/deck.py validate` und stellt sicher, dass die Notizen-JSON und das Inline-JavaScript syntaktisch korrekt sind. Die Ausgabe ist ein einzelnes HTML-Dokument, das ohne externe Abhängigkeiten abgespielt werden kann. Dieses Skill ist insbesondere für Entwickler und fortgeschrittene Benutzer geeignet, die Präsentationen mit Code steuern möchten, und unterstützt Workflows wie lokale Bearbeitung, Browser-Vorschau und PDF-Export über die Druckfunktion des Browsers.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cclank/lanshu-html-ppt-templates/tree/HEAD

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

岚叔 HTML 演示模板

Verwenden Sie die kompletten Einzeldatei-Vorlagen aus assets/templates/, um direkt abspielbare HTML-Präsentationen zu erstellen. Online-Katalog: https://ppt.lanshuagent.com/; Autor: https://x.com/LufzzLiz.

Vorlage auswählen

Lesen Sie zuerst references/template-catalog.md, um basierend auf Inhalt, Zielgruppe und Ausgabeformat die passende Vorlage auszuwählen. Wenn der Benutzer bereits einen Stil vorgegeben hat, verwenden Sie diesen; ansonsten wählen Sie anhand des Materials aus und geben Sie eine kurze Begründung. Bei Standardformaten ist keine zusätzliche Bestätigung erforderlich.

  • Geschäftsberichte, Strategie und informationsintensive Inhalte: 07-consulting, 01-swiss.
  • Finanzierungspitches, Produkt- und Technologievorstellungen: 04-brutalism, 03-aurora, 17-terminal.
  • Marke, Kultur, Kuratierung und Lifestyle: 02-editorial, 08-oriental, 09-organic, 18-riso, 19-collage.
  • Datenverteilung und fortlaufende Erzählungen: 11-morph; anpassbare Geschäftsannahmen: 14-live-model; Geografie und globale Netzwerke: 20-globe.
  • Akademische Verteidigungen und Projektberichte: 21-academic; Lehrmaterialien und Schulungen: 23-chalkboard.
  • Produktfunktionsvorstellungen und Jahresrückblicke: 22-bento; KI-Produkte und Kundengeschichten: 24-chat; Jahresabschlussfeiern und Team-Retrospektiven: 25-pixel.
  • Berichte für Regierung, Staatsbetriebe und Behörden: 28-official; Jahreschroniken, Unternehmenszeitschriften: 26-newspaper.
  • Technische Reviews und Hardware-Lösungen: 27-blueprint; Produkt-Roadmaps und strategische Planung: 29-metro; User Stories und Markengeschichten: 30-comic.
  • Wenn der Benutzer mehrseitige PDFs benötigt, bevorzugen Sie Vorlagen, die im Katalog mit einem mehrseitigen Drucklayout gekennzeichnet sind; das Druckergebnis muss dennoch praktisch überprüft werden.

Erstellen und Bearbeiten

Die Pfade in den Befehlen beziehen sich auf das Skill-Verzeichnis; ermitteln Sie zuerst den tatsächlichen Installationspfad des Skills.

python3 scripts/deck.py list
python3 scripts/deck.py new 07-consulting --output /path/to/outputs/presentation.html --title "Presentation Title"
python3 scripts/deck.py source 07-consulting
python3 scripts/deck.py inspect /path/to/outputs/presentation.html

new kopiert die vollständige Vorlage, behält Schriftarten und Skripte bei und verweigert das Überschreiben vorhandener Dateien. --title ändert nur den Browsertitel; der Seiteninhalt muss weiter bearbeitet werden. source zeigt die Vorlage nur im Terminal an, wobei die Schriftarten-Base64 ausgeblendet wird, und behält die ursprünglichen Zeilennummern bei; speichern Sie dessen Ausgabe nicht als Präsentationsdatei.

Lesen Sie vor der Bearbeitung references/authoring.md. Nehmen Sie gezielte Änderungen am ausgewählten HTML vor:

  1. Erstellen Sie eine seitenweise Erzählung basierend auf dem Material des Benutzers und ersetzen Sie dann Titel, Text, Diagrammdaten, Kopf-/Fußzeilen und Markenelemente. Bevorzugen Sie die Wiederverwendung vorhandener Layouts und fügen/entfernen Sie Seiten je nach Inhalt.
  2. Behalten Sie IDs, Klassen, data-*, Ereignisbindungen und Diagrammschnittstellen, die von der Player-Engine benötigt werden, sowie die Codeblöcke TOOLKIT (Präsentationswerkzeuge) und PRESENTER (Rednerfenster); aktualisieren Sie beim Ändern der Seitenanzahl die Seitennummern, das Array und die Anzahl der Notizen.
  3. Aktualisieren Sie das JSON-Array in script#deck-notes, sodass die Reihenfolge der Notizen mit der tatsächlichen Präsentationsreihenfolge übereinstimmt. Beispielhafte Firmennamen, Zahlen, Quellenangaben und Kontaktinformationen in der Vorlage müssen ersetzt oder gelöscht werden.
  4. Geben Sie ein eigenständiges HTML aus. Verwenden Sie für statische Grafiken bevorzugt SVG/CSS; für Echtzeitgrafiken übernehmen Sie das vorhandene Canvas; neue Ressourcen müssen entweder eingebettet oder zusammen mit der Präsentation ausgeliefert werden.

Die chinesischen Schriftarten in der Vorlage sind auf die tatsächlich verwendeten Zeichen zugeschnitten; neue Texte werden zunächst mit System-Schriftarten als Fallback dargestellt. Nach der Textbearbeitung führen Sie python3 scripts/embed_fonts.py <Präsentationsdatei> online aus, um die Schriftarten basierend auf den tatsächlich auf den Seiten verwendeten Zeichen neu zuzuschneiden und einzubetten; offline bevorzugen Sie die vorhandene Schriftarten-Palette und überprüfen das Layout. Behalten Sie die vorhandenen Lizenzhinweise zu den Schriftarten bei.

Interaktion und Export-Grenzen

  • Normale Vorlagen verwenden .slide; unendliche Leinwände, Film-, Raum-, Terminal- und Collage-Interfaces haben jeweils eigene Datenstrukturen – siehe Autorenleitfaden.
  • Bei 14-live-model müssen Modellparameter, Cashflow und gebundene Elemente gemeinsam geändert werden; die Rednervorschau ist eine separate Instanz und synchronisiert standardmäßig keine temporären Modellanpassungen auf dem Hauptbildschirm.
  • Alle 30 Vorlagen enthalten ein integriertes Präsentations-Toolkit: ? Tastaturkürzel-Panel, O Übersicht, Seitennummer + Enter zum Springen, B/W schwarzer/weißer Bildschirm, L Laserpointer, D Stift-Annotationen, E zum Bearbeiten von Text, Notizen, globalem Ersetzen und Anpassen von Farbthemen im Browser mit Speichern als neue Datei. Öffnen Sie die Präsentation mit python3 scripts/present.py <Präsentationsdatei> und drücken Sie M, um sie über ein Smartphone im selben Wi-Fi per QR-Code fernzusteuern.
  • 17-terminal ist eine Web-Präsentation mit Terminal-Optik; die angezeigten Befehle sind Seiteninhalt.
  • 12-generative kann bei jeder Ausführung andere Bilder erzeugen; für reproduzierbare Ergebnisse legen Sie einen festen Seed fest.
  • Derzeit werden HTML und Browser-Druck-PDFs für einige Vorlagen bereitgestellt; Interaktionen und Animationen werden vom Browser abgespielt. Wenn ein bearbeitbares .pptx benötigt wird, erläutern Sie die Formatunterschiede und konvertieren Sie gemäß der Wahl des Benutzers.
  • Die Bereitstellung im öffentlichen Netz erfolgt nur auf Wunsch des Benutzers. Das Ändern der Domain in der Konfiguration gewährt nicht automatisch neue Domains oder Veröffentlichungsrechte.

Validierung und Auslieferung

python3 scripts/deck.py validate /path/to/outputs/presentation.html

Dieser Befehl überprüft die Syntax der Notizen-JSON und des Inline-JavaScripts; er benötigt Node.js auf dem Rechner, um die JavaScript-Überprüfung abzuschließen. Er führt keine Seitenskripte aus.

Überprüfen Sie in einem verfügbaren Browser: erste/letzte Seite, Schlüsseldiagramme, längsten Text, Seitenwechsel, Vollbild, Rednernotizen und Interaktionen; bei PDF-Anforderungen überprüfen Sie das tatsächliche Druckergebnis. Wenn kein Browser ausgeführt werden kann, erläutern Sie die durchgeführten statischen Prüfungen und die nicht verifizierten Teile.

Liefern Sie die verfügbaren Pfade, die Seitenanzahl und die notwendigen Abspielhinweise für das HTML aus; weisen Sie auf die Tastenkombination ? für alle Befehle hin. Wenn eine Fernsteuerung per Smartphone gewünscht ist, öffnen Sie die Präsentation mit scripts/present.py. Wenn der Benutzer ein PDF anfordert, liefern Sie gleichzeitig ein validiertes PDF aus und erläutern Sie das tatsächliche Verhalten von Interaktionszuständen und Animationen im exportierten Format.

Verwandte Skills