WIGTN PPT Generator

Was macht WIGTN PPT Generator?

Skill zum Erstellen einer einzelnen HTML-Präsentation, die die Markenidentität von WIGTN widerspiegelt. Ohne Vorlage (.pptx), allein auf Basis von Markenprinzipien und Referenz(en) gestaltet Claude jedes Mal neu.

Kernprinzipien

1. Prinzipbasiert, vorlagenunabhängig – Keine Abhängigkeit von festen Vorlagendateien. Liest die Markentokens + Layoutprinzipien aus references/ und generiert sie bei Bedarf.
2. Markentreue (Brand Fidelity) – Nur exakte HEX-Werte verwenden. Keine „ähnlichen Farben“. Ink #1E1E28, Signatur-Lila (Pantone 265) #9B51E0.
3. Wiederholung des Signatur-lila Punkts – Der lila Punkt (.), der vom Punkt in wigtn. stammt, ist das Markenzeichen. Auf jeder Folie wird das lila Punktmotiv mindestens einmal konsistent wiederholt (Punkt neben der Seitenzahl, Punkt bei Abschnittsnummern, Eckpunkt, Fortschrittspunkte usw.).
4. Light / Dark Dual-Thema – Je nach Präsentationsumgebung wird eines der beiden ausgewählt. Nicht innerhalb einer Präsentation mischen.
5. Viewport-Anpassung – Jede Folie ist exakt 100vh. Absolutes Verbot von Scrollen innerhalb einer Folie.
6. Keine reine Textfolie – Jede Folie enthält mindestens ein visuelles Element (Form, Farbblock, Punkt, Linie, Symbol).
7. Show, Don't Tell – Nicht nach dem Design fragen. Sobald Thema/Inhalt festgelegt ist, sofort erstellen, per Screenshot zeigen und dann anpassen.
8. Zero-Dependency – Einzelne HTML-Datei. Direkt im Browser präsentierbar (Schriftarten via CDN <link> – nur 1 Zeile erlaubt).

Marke (Zusammenfassung)

Token	Wert	Verwendung
Ink (Navy)	#1E1E28	Dark-Hintergrund / Light-Text
Lila (Pantone 265)	#9B51E0	Signatur-Punkt, Hervorhebung, Links
Lila Deep	#6B2EAA	Punktschatten, Tiefe, Verlaufsende
Weiß	#FFFFFF	Light-Hintergrund / Dark-Text

Die gesamte Palette (Light/Dark :root-Snippets), die Regeln für die Verwendung von Logovarianten, Typografie und die Punkt-Signatur-Regeln müssen nach dem Lesen von references/brand.md angewendet werden.

Arbeitsablauf (4 Phasen)

Phase 0: Thema + Inhalt (1 AskUserQuestion)

Mit AskUserQuestion in einem Durchgang erfragen:

1. Thema — Light (helle Präsentationsumgebung, dokumentenartig) / Dark (Bühne, Keynote-Stil). Inkl. Empfehlung.
2. Zweck — Konferenz / Team-Share / Pitchdeck / Schulung / Management-Report
3. Umfang — 5–10 Folien / 10–20 Folien / 20+ Folien
4. Kernbotschaft & Bilder — Zu vermittelnde Inhalte, vorhandene Bilder inkl. Position

Auch Metadaten für das Deckblatt (Name des Vortragenden, Datum, Unternehmen/Produktname usw.) werden erfragt.

Phase 1: Strukturentwurf

Die Inhalte in eine Folienkarte zerlegen. Dichtebeschränkung: Deckblatt mit Titel+Untertitel, Inhaltsfolien maximal 4–6 Aufzählungspunkte (oder gleichwertige visuelle Blöcke) pro Folie. Bei Überschreitung automatisch teilen.

Grundgerüst: Deckblatt → Inhaltsverzeichnis → (Abschnittstrenner → Inhalt N) × Kapitel → Abschluss (Danke). FÜR jede Folie wird aus references/design-guide.md das passende Inhaltslayout ausgewählt.

Phase 2: Diagramm (bei Bedarf)

Falls Flussdiagramme oder Architekturdarstellungen benötigt werden, wird der handdrawn-diagram Skill desselben Plugins aufgerufen, um ein committables Diagramm (SVG+PNG) zu erstellen und in die Folie einzufügen. Falls der handgezeichnete Stil nicht passt, wird direkt mit einfachen CSS/SVG-Formen gezeichnet.

Phase 3: HTML-Generierung

1. references/brand.md und references/design-guide.md lesen.
2. Einzelnes HTML mit den :root-Tokens des gewählten Themas schreiben. Zwingende Regeln:
   • .slide { height: 100vh; height: 100dvh; overflow: hidden; }
   • Alle Schriftgrößen und Abstände mit clamp(min, pref, max) (keine festen px-Werte)
   • Höhenbasierte Media Queries (max-height: 700px/600px) für schrittweise Verkleinerung
   • Fortschrittsbalken + Navigationspunkte (lila) + Tastatur-/Touch-/Swipe-Unterstützung + prefers-reduced-motion
   • Signatur-lila Punkt auf jeder Folie wiederholt
   • Logo einfügen: Gemäß den Regeln unter „Logo-Verwendung“
3. Inhalte einfügen, Animationen sparsam einsetzen (professionell: 0.2–0.4s Ein-/Ausblenden/Schieben).

Phase 4: Validierung und Übergabe

Per Screenshot die Viewport-Anpassung, Markenkonsistenz und Punkt-Signatur prüfen. Falls Playwright/Chrome verfügbar ist, werden für jede Folie PNGs gerendert und per Read überprüft; ansonsten wird der Benutzer gebeten, die Datei im Browser zu öffnen.

Erstellung abgeschlossen:
- HTML: docs/{Dateiname}-presentation.html  (Im Browser F für Vollbild → Pfeiltasten/Swipe)

Logo-Verwendung

Das WIGTN-Logo ist ein teaminternes Asset und wird nicht in öffentliche Plugins committed (.gitignore). Die Suche erfolgt in dieser Reihenfolge:

1. ${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/ — Gebündeltes Logo (team-lokal, *.png per gitignore, daher bei öffentlichem Repo-Klon nicht vorhanden)
2. <project>/docs/images/ — Team-lokaler Speicherort für Brand-Assets (ebenfalls gitignore, nicht in öffentlichen Repos enthalten)
3. CSS/SVG-Wortmarke Fallback — Wenn in den beiden Pfaden kein PNG vorhanden ist (Standardzustand bei öffentlichem Klon/neuer Umgebung), wird wigtn + der lila Punkt direkt als Schrift/SVG gerendert (Snippet in brand.md). Der Fallback funktioniert immer.

Bei Verwendung des Logos wird die Datei in den Präsentationsarbeitsbereich (z.B. docs/workspace/) kopiert und dann im HTML relativ referenziert. Die themenspezifischen Varianten folgen der Mapping-Tabelle in brand.md (Light → NAVY-Logo, Dark → WHITE-Logo).

Anti-Patterns (zu vermeiden)

• Lila-Verlaufsklischee (#6366f1), auf weißem Hintergrund Standard-Lila/Rosa → Nur WIGTN-Lila #9B51E0 verwenden
• Inter/Roboto/Arial als Display-Schrift verwenden (bricht den Markenton)
• Alle Elemente zentrieren, immer gleiches Kartenraster wiederholen
• min-height verwenden (ermöglicht Überlauf der Folie) → zwingend height
• Fehlende Punkt-Signatur, Mischen von Themes, Ersatz durch „ähnliche Farben“

Referenzen

• references/brand.md — WIGTN-Markensystem: Light/Dark-Palette, Logovarianten und -Positionierung, Lila-Punkt-Regeln, Typografie, CSS-Wortmarke Fallback
• references/design-guide.md — Layout-Prinzipien nach Folientyp (Deckblatt/Inhalt/Abschnitt/Inhalt/Abschluss), Viewport-Regeln, Animationen, Anti-Patterns
• design-system-reference Skill — Ideen für Layout-Dichte und typografische Hierarchie wiederverwenden (Swiss Minimal, Editorial, Minimal Corporate liegen dem WIGTN-Ton am nächsten). Farben, Punkte und Logos werden jedoch immer mit den WIGTN-Tokens überschrieben.
• handdrawn-diagram Skill — Für Folien, die ein Diagramm benötigen

Checkliste

• Phase 0: AskUserQuestion für Thema (Light/Dark) + Inhalt in einem Durchgang gesammelt
• Phase 1: Folienkarte + Dichtebeschränkung
• Phase 2: Diagrammbedarf erkannt (handdrawn-diagram)
• Phase 3: brand.md + design-guide.md gelesen → Einzelnes HTML generiert (Viewport, lila Punkt, Logo)
• Phase 4: Screenshot-Validierung → Übergabe