DeckMason: KI-Präsentations-Workflow

Zusammenfassung: Erstelle produktionsreife HTML-Foliensätze aus einem Thema, einem Dokument oder einer Gliederung. Diese Datei ist der Einstiegspunkt für den 6-Phasen-Workflow. Lies dies zuerst, dann lade die Referenzdateien bei Bedarf, wenn du die jeweilige Phase erreichst. Lade nicht alle Referenzdateien auf einmal.

Erfordert einen KI-Coding-Agenten mit Dateisystemzugriff: Claude Code, Cursor, Codex CLI, Windsurf, Aider oder jeden Agenten, der Dateien lesen und Skripte ausführen kann.

Ausgabequalitätsstandard

Jede Präsentation sollte sich anfühlen, als gehöre sie auf eine erstklassige SaaS-Marketingseite oder eine redaktionelle Doppelseite. Sauber, selbstbewusst, minimalistisch, professionell. Kein KI-Schrott. Keine generischen Farbverläufe. Kein Füller-Text.

Schnellstart

Für eine neue Präsentation:

"Erstelle einen Pitch-Deck zum Thema [Thema]"
"Erstelle eine Präsentation über [Thema] für [Zielgruppe]"

Mit eigenem Inhalt:

"Verwandle diese Notizen in Folien: [Inhalt einfügen]"
"Gestalte diese Gliederung als Präsentation"

Mit einer Marke:

"Erstelle eine Präsentation mit dem Branding aus company-deck.pptx"
"Passe den Stil von https://linear.app für diesen Pitch-Deck an"

Importiere eine vorhandene PPTX:

"Konvertiere company-deck.pptx in eine HTML-Präsentation"

Pre-Flight-Eingrenzung (vor dem Generieren eines Decks)

Lege die ästhetische Richtung fest, bevor du eine einzige Folie schreibst. Überspringe eine Frage nur, wenn der Benutzer bereits eine eindeutige Antwort gegeben hat. Wenn du überspringst, formuliere die Annahme explizit neu.

Schritt 0: Visuelle Vorschau (bevorzugter Weg)

Generiere 3 schnelle visuelle Vorschaufelien mit 3 verschiedenen Designs, damit der Benutzer eine Richtung visuell auswählen kann:

python3 scripts/preview_themes.py "Dein Thema hier"

Dies erstellt 3 Einzelfolien-HTML-Dateien im Ordner previews/:

previews/preview-1-dark.html (Deep Space-Design)
previews/preview-2-light.html (Modern SaaS-Design)
previews/preview-3-bold.html (Bold Signal-Design)

Sage dem Benutzer, er solle die 3 Dateien öffnen und eine Richtung wählen. Die gewählte Richtung wird zur ästhetischen Richtung (Schritt 1), wobei der untenstehende textbasierte Vorschlag übersprungen wird.

Schritt 1: Ästhetische Richtung (Text-Fallback)

Wenn der Benutzer Text bevorzugt, schlage 3 visuelle Richtungen vor, die auf DIESES spezifische Thema und diese Zielgruppe zugeschnitten sind. Nicht aus einer festen vordefinierten Liste. Jede Option kombiniert ein Stimmungswort + einen konkreten visuellen Hinweis (Palette, Typografie, Motiv), damit der Benutzer es sich vorstellen kann. Die drei Richtungen müssen sich deutlich voneinander unterscheiden, nicht drei Varianten derselben Idee. Markiere eine als empfohlen.

Gib für jede Richtung die Farbharmonie (monochromatisch, analog, komplementär, split-komplementär, triadisch, neutral+Akzent), die Temperatur (warm, kalt, neutral) und die 60-30-10-Verteilung an (welche Farbe dominant, sekundär, Akzent). Dies erzwingt Farbentscheidungen in der Planungsphase, nicht als nachträglichen Einfall.

Schritt 2: Folienumfang

Biete Kategorien an:

3-5 Folien: kurz / Teaser
6-10 Folien: Standard
11-20 Folien: Deep Dive
Benutzerdefiniert: vom Benutzer angegeben

Schritt 3: Textdichte pro Seite

Eine von vier Stufen:

Minimal: eine Zeile oder eine große Zahl
Leicht: Überschrift + 2-3 Aufzählungspunkte
Standard: Überschrift + 4-5 Aufzählungspunkte
Dicht: mehrspaltig oder detaillierter Referenzinhalt

Schritt 4: Bewegung

Statisch, dezente Live-Review-Animation oder separates Video-Asset. Standardmäßig statisch für PDF, PPTX, Google Slides und zum Vorab-Lesen.

Für GSAP-basierte Animationsmuster (fade-in-up, stagger-reveal, clip-path-reveal, scale-in, slide-in-left/right, blur-in) siehe references/animation-patterns.md. Verwende diese, wenn der Benutzer eine Live-HTML-Ansicht oder eine Keynote-artige Wiedergabe wünscht.

Fahre erst mit der Gliederung fort, nachdem diese Punkte festgelegt wurden.

Der 6-Phasen-Workflow (Überblick)

Lies diesen Überblick, um die gesamte Pipeline zu verstehen. Lade die jeweilige Referenzdatei, wenn du diese Phase erreichst.

Phase	Name	Was passiert	Referenzdatei
Pre-Flight	Eingrenzung	Visuelle Vorschau oder 4 Textfragen: ästhetische Richtung, Folienumfang, Textdichte, Bewegung	Diese Datei (oben)
0	Briefing	Anfrage, Standardwerte, Annahmen notieren. Briefing mit Zielgruppe, Spannungsbogen, Aufforderung, Erfolg verfassen. Deckt auch PPT-Import-Workflow ab.	`references/phase0-brief.md`
1	Struktur	Pyramid-Prinzip, Behauptungs-Nachweis-Überschriften, These, Kontrastschläge, Product Design Layers	`references/phase1-structure.md`
2	Gliederung	Seiten-Typen-Taxonomie, 10 redaktionelle Layout-Typen, Skalierung der Folienanzahl	`references/phase2-outline.md`
3	HTML	Canvas-Skala-Architektur, Viewport-Anpassung, Vertikale Budget-Mathematik, Eine Idee pro Folie, HTML-Struktur, Animationsmuster, DOM-Regeln, Rasterverhältnisse	`references/phase3-html.md`
4	Bilder	7 benannte Bildrollen, Bildtypen-Taxonomie, Bildfolien-Modus, Diagramm-Anti-Patterns	`references/phase4-images.md`
5	Verfeinerung	Seiten-Rhythmus, Schrift-Hierarchie, Farbtheorie-System, KI-Verirrungen, Branchenvorgaben, Sprachrichtlinien, Designer-Kritik, Erzählstrang	`references/phase5-polish.md`
6	Export	PPTX (python-pptx oder pptxgenjs), PDF, Vercel-Deploy	`references/phase6-export.md`

Spezialmodi (bei Bedarf laden)

Cinematic Slide Mode: 22-Sekunden-Filmclip mit 5 Szenen für Workflow-Demos
Swiss International Strict Mode: Vignelli-inspiriertes, extrem klares Rasterdesign
Editorial Web Deck Mode: Magazinartige Keynote-Deck
HTML Slide Template Library: 32 produktionsreife Vorlagen aus beautiful-html-templates
Theme Variation Protocol: 3 unterschiedliche visuelle Richtungen vor der Festlegung
Design Philosophy School System: 5 Schulen für vage Briefings
Speaker Notes Overlay: N-Taste-Umschaltung, automatisch aktualisierend pro Folie
Brand Import Workflow: Design aus PPTX, Website-URL oder Markenrichtlinien-PDF extrahieren

Alle Details zu allen Spezialmodi: references/specialized-modes.md

Qualitätssicherung (vor der Auslieferung laden)

Alle Qualitätssicherungen, verbotene Wörter, Data-Slop-Regel, 30%-Kürzungsregel, Selbstprüfung vor Auslieferung, Fehlerbehebung und Anforderungen: references/quality-guardrails.md

Designvoreinstellungen

Siehe STYLE_PRESETS.md für 31 kuratierte Stile (11 originale + 20 erweiterte) sowie Kami Warm Editorial:

Originale 11: Modern SaaS (Standard), Neon Cyber, Midnight Executive, Deep Space, Terminal Green, Paper & Ink, Swiss Modern, Soft Pastel, Warm Editorial, Brutalist, Gradient Wave

Erweiterte 20: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Liquid Glass Bento, Engineering Blueprint, Watercolor Map, Golden Serif Quote, Chalkboard Lesson, Exploded Layer Stack, Hyperreal Product, Summary Infographic, Cobalt Grid, 8-Bit Orbit, Raw Grid, Broadside

Kami Warm Editorial: eine vollständige redaktionelle Spezifikation für druckqualitätsfähige, papierähnliche Decks. Siehe den Kami-Abschnitt in STYLE_PRESETS.md.

Vollständige CSS- und Schriftarten-Details in STYLE_PRESETS.md.

So wird dieses Skill gelesen

Lies zuerst diese Datei. Sie enthält den Schnellstart, die Pre-Flight-Eingrenzung und den 6-Phasen-Überblick.
Lade Referenzdateien bei Bedarf, wenn du die jeweilige Phase erreichst. Lade nicht alle Referenzen auf einmal.
Bevor du ein Deck auslieferst, lade references/quality-guardrails.md und führe die Selbstprüfungs-Checkliste aus.
Für Spezialmodi (Cinematic, Swiss Strict, Editorial Web usw.) lade references/specialized-modes.md nur, wenn der Benutzer diesen Modus anfordert.
Für GSAP-Animationen lade references/animation-patterns.md, wenn der Benutzer Bewegung über die standardmäßigen CSS-Übergänge hinaus wünscht.

Diese Struktur der schrittweisen Offenlegung spart Kontext-Token. Die ursprüngliche einteilige SKILL.md-Datei war 1.195 Zeilen lang. Dieser Einstiegspunkt hat etwa 200 Zeilen. Jede Referenzdatei wird nur bei Bedarf geladen.

Export-Kurzreferenz

# PPTX-Export (Pfad A: python-pptx, bildbasiert)
python3 scripts/pptx_export.py presentation.html --output presentation.pptx

# PPTX-Import (vorhandene .pptx in JSON für DeckMason konvertieren)
python3 scripts/pptx_import.py input.pptx --output decks/input_deck.json

# Visuelle Vorschau (3 Designs zur Auswahl für den Benutzer)
python3 scripts/preview_themes.py "Dein Thema"

# PDF-Export (Headless Chrome)
chrome --headless --print-to-pdf=presentation.pdf --run-all-compositor-stages-before-draw --virtual-time-budget=5000 presentation.html

# Vercel-Deploy (Live-URL)
npx vercel

Voraussetzungen

Ein KI-Coding-Agent mit Dateisystem- und Terminalzugriff
Jedes leistungsfähige LLM-Backend
Python 3 + python-pptx für PPTX-Exportpfad A (pip3 install python-pptx)
Node.js + pptxgenjs für PPTX-Exportpfad B (npm install pptxgenjs)
Moderner Browser (Chrome/Edge/Firefox/Safari)

Keine zusätzlichen API-Schlüssel erforderlich. Alles läuft lokal.

npm-Installation (optional)

# Schnellstart ohne Klonen
npx deckmason init [Verzeichnis]

# Globale Installation
npm install -g deckmason
deckmason init
deckmason themes
deckmason preview "Dein Thema"
deckmason import company-deck.pptx

Siehe README.md für vollständige npm-Anweisungen.

a692570/deckmason

Was ist deckmason?

In Ihrer bevorzugten KI fragen

Dokumentation