Was macht slide-creator?
Erstelle 16:9 Präsentationsfolien als HTML und exportiere sie als PDF (nicht PowerPoint). Verwende dies, um eine Präsentation, ein Deck oder einen Pitch zu erstellen (z. B. 10-Folien-Pitch-Deck für X, Schulungskurs über Y, Quartalsergebnis-Präsentation).
Überblick
Dieses Skill generiert HTML-basierte Folien, die mittels eines Browsers in ein PDF konvertiert werden. Du erhältst eine Datei slides.pdf – kein PowerPoint oder proprietäres Format.
Verwendung
- Installation – Stelle sicher, dass
nodeundnpminstalliert sind. - Skill klonen –
git clone <repo-url>undcd slide-creator - Abhängigkeiten installieren –
npm install - Folien erstellen – Bearbeite die Datei
slides/index.html(siehe Vorlage) - Exportieren –
npm run build(erzeugtdist/slides.pdf)
Folienstruktur
Jede Folie wird durch ein <section>-Element im HTML dargestellt. Beispiel:
<section>
<h1>Titel der Folie</h1>
<p>Inhalt der Folie</p>
</section>
Das CSS für das Layout liegt in styles.css. Standardmäßig sind Schriftarten Arial/Helvetica und ein minimales Farbschema definiert.
Konfiguration
--bg-color: Hintergrundfarbe (z. B.#f0f0f0)--text-color: Textfarbe (z. B.#333333)--font-family: Schriftart (z. B.'Open Sans', sans-serif)
Diese können in styles.css überschrieben werden.
Exportoptionen
npm run build– Erstellt ein PDF mit Standardeinstellungen (16:9, A4-Querformat).npm run build -- --size 4:3– Erstellt ein PDF mit 4:3 Seitenverhältnis.npm run build -- --theme dark– Wendet ein dunkles Design an.
Beispiel: Pitch-Deck (10 Folien)
Folie 1: Titel (Firma, Produktname)
Folie 2: Problem / Herausforderung
Folie 3: Lösung / Produkt
Folie 4: Marktchancen
Folie 5: Wettbewerbsvorteile
Folie 6: Geschäftsmodell
Folie 7: Team
Folie 8: Finanzprognose
Folie 9: Meilensteine / Roadmap
Folie 10: Kontakt / Call-to-Action
Fehlerbehebung
| Problem | Lösung |
|---|---|
| PDF wird nicht erzeugt | Prüfe, ob chromium oder puppeteer korrekt installiert ist. |
| Seitenverhältnis falsch | Setze --size 16:9 explizit. |
| Schriftarten fehlen | Installiere die Schriftart lokal oder verwende Google Fonts via <link> im <head>. |
Lizenz
MIT