Varnan-Tech/opendirectory

Grafik-Foliensatz

Generieren Sie einen professionell gestalteten HTML-Foliensatz aus einer kurzen Beschreibung, Inhaltsnotizen oder einer vorhandenen Datei. Die Ausgabe ist eine einzelne, eigenständige HTML-Datei – öffnet sich in jedem Browser, keine Build-Tools erforderlich.

---

Kritische Regeln – nicht verhandelbar:

1. JEDE Folie MUSS innerhalb von 100vh passen. Kein Scrollen innerhalb von Folien. Überlaufender Inhalt → in zwei Folien aufteilen.
2. ALLE Schriftgrößen und Abstände MÜSSEN clamp() verwenden. Niemals feste px/rem für skalierende Elemente.
3. Einzelne eigenständige HTML-Datei: Alle CSS/JS inline. Keine externen Abhängigkeiten außer einem Font-CDN-Link.
4. Niemals HTML im Chat ausgeben. In Datei speichern, nur Zusammenfassung anzeigen.
5. Keine generische KI-Ästhetik – gegen die DO-NOT-USE-Liste in references/style-presets.md prüfen.

---

Schritt 1: Briefing-Erfassung

Drei Dinge sind erforderlich, um zu starten. Wenn alle drei in der Nachricht vorhanden sind: Springe zu Schritt 2.

Falls etwas fehlt, frage genau:

„Um zu starten, brauche ich drei Dinge:

1. Zweck – wofür ist dieser Foliensatz? (Investoren-Pitch / Verkaufsgespräch / Konferenzvortrag / interne Präsentation / Onboarding / Sonstiges)
2. Zielgruppe – wer wird ihn sehen? (VCs, Interessenten, Ihr Team, Führungskräfte, Konferenzraum, LinkedIn)
3. Thema oder Inhalt – Notizen einfügen, eine URL, eine kurze Beschreibung oder eine Datei hochladen“

Warte auf alle drei, bevor du fortfährst.

---

Schritt 2: Vollständige Erfassung

Stelle alle Fragen in einer Nachricht, gruppiert nach Kategorie. Der Benutzer kann alle überspringen – Standardwerte gelten.

„Ein paar Fragen, bevor ich beginne:

Inhalt

1. Kernbotschaft – ein einziger Satz, den das Publikum nach dem Verlassen behalten soll
2. Folienanzahl – Kurz (5-10) / Mittel (10-20) / Lang (20+)?
3. Inhaltsquelle – Alle Inhalte bereit / Grobe Notizen (ich strukturiere) / Nur Thema (ich entwerfe)?
4. Vorhandene Assets – Gibt es Bilder, Screenshots oder Logos, die eingefügt werden sollen? (ja + Pfade / nein)

Design 5. Stil – midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / „Optionen anzeigen“ 6. Seitenverhältnis – 16:9 (1920×1080, Standard) / 1:1 (1080×1080, LinkedIn) 7. Inline-Bearbeitung – soll Text nach dem Export im Browser bearbeitbar sein? (Ja / Nein)

Ausgabe 8. Ausgabeformat – Nur HTML / HTML + PDF / HTML + PDF + auf URL bereitstellen 9. Foliensatz-Name – Slug für Datei-/Ordnerbenennung (z.B. „q2-investor-pitch“); Ich leite ab, wenn übersprungen“

Standardwerte, wenn übersprungen:

Frage	Standard
Kernbotschaft	aus Zweck + Thema abgeleitet
Folienanzahl	12
Inhaltsquelle	Nur Thema
Vorhandene Assets	keine
Stil	clean-slate
Seitenverhältnis	16:9
Inline-Bearbeitung	Nein
Ausgabeformat	HTML + PDF
Foliensatz-Name	aus Themaslug abgeleitet

Wenn Stil = „Optionen anzeigen“: Generiere 3 Einzelfolien-HTML-Vorschauen (eine für jeden von 3 verschiedenen Stilvorlagen, die zum Zweck des Foliensatzes passen). Speichere unter .claude-design/previews/style-a.html, style-b.html, style-c.html. Öffne jede: open .claude-design/previews/style-a.html usw. Frage den Benutzer vor Schritt 3 nach der Auswahl.

---

Schritt 2.5: Interne Design-Richtung (wird dem Benutzer nicht angezeigt)

Basierend auf den Antworten von Schritt 2, ermittle vor Schritt 3:

Visueller Charakter (aus dem Stil abgeleitet oder falls nicht angegeben, erschlossen):

• midnight-editorial oder magazine-red → dark-editorial
• clean-slate oder product-minimal → light-minimal
• matt-gray → neutral-professional
• brutalist → bold-expressive
• mint-pixel-corporate oder soft-cloud → fresh-corporate
• Stil nicht angegeben: Investoren-Pitch → midnight-editorial; Verkauf → clean-slate; Konferenz → brutalist oder midnight-editorial; intern → matt-gray

EINE unübersehbare Folie – identifiziere vor Schritt 3:

• Investoren-Pitch → stat-highlight (Traction/Metriken-Folie)
• Verkaufsgespräch → stat-highlight (ROI/Ergebnisse-Folie)
• Konferenzvortrag → quote-callout oder stat-highlight (wichtige Erkenntnis)
• Interne Präsentation → closing-cta (Entscheidungs-/Empfehlungsfolie)

Layout-Auswahl-Bias – notiere die 2-3 relevantesten Layouts für diesen Foliensatz-Typ, um sie in Schritt 3 zu priorisieren.

Frage den Benutzer nie nach der Design-Richtung – leite sie vollständig aus seinen Antworten ab.

---

Schritt 3: Struktur-Design

Lies references/layout-library.md, bevor du planst.

Plane die gesamte Foliensequenz. Weise jeder Folie einen Layout-Typ aus den 13 in references/layout-library.md zu.

Foliensatz-Typ → typische Struktur:

Investoren-Pitch (12 Folien):

1. [title-hero] Unternehmen + Slogan
2. [section-divider] Das Problem
3. [text-full] Problemdetail
4. [text-left-image-right] Lösungsübersicht
5. [image-full] Produkt-Screenshot
6. [stat-highlight] Traction – unübersehbare Folie
7. [comparison-table] vs. Wettbewerber
8. [timeline] Roadmap
9. [text-full] Team
10. [stat-highlight] Marktgröße
11. [text-left-image-right] Geschäftsmodell
12. [closing-cta] Die Bitte

Verkaufsgespräch (8-10 Folien):

1. [title-hero]
2. [quote-callout] Schmerzpunkt des Interessenten
3. [text-left-image-right] Lösung
4. [image-grid] Produkt-Screenshots
5. [stat-highlight] ROI/Ergebnisse – unübersehbar
6. [comparison-table] vs. Alternativen
7. [text-full] Implementierung / nächste Schritte
8. [closing-cta]

Konferenzvortrag (15-20 Folien): title-hero → section-dividers → text-full-Folien → image-full → stat-highlight oder quote-callout (unübersehbar) → timeline → closing-cta

Interne Präsentation (8-12 Folien): title-hero → text-full (Kontext) → stat-highlight (aktueller Zustand) → two-column-text (Optionen) → comparison-table → text-full (Empfehlung) → closing-cta (die Entscheidung – unübersehbar)

Gib die vorgeschlagene Struktur als nummerierte Liste mit [Layout-Typ] in Klammern aus. Beispiel:

Vorgeschlagene Struktur (12 Folien, midnight-editorial-Stil):

1. [title-hero] DataPulse – Umsatzentscheidungen in 5 Minuten
2. [section-divider] Das Problem
...
12. [closing-cta] Die Bitte + [email protected]

Funktioniert diese Struktur, oder soll ich Folien anpassen?

Warte auf Bestätigung vor Schritt 4.

---

Schritt 4: Inhaltsentwurf

Schreibe den Text pro Folie der Reihe nach. Nur Klartext – noch kein HTML.

Kopier-Regeln pro Layout:

• title-hero: Überschrift (max. 6 Wörter) + Untertitel (1 Satz) + optionaler Pill-Badge-Text
• section-divider: Nur 2-4 Wörter Abschnittsbezeichnung
• text-full: Überschrift (max. 5 Wörter) + 4-6 Aufzählungspunkte ODER 2 Absätze (niemals beides auf derselben Folie)
• text-left-image-right / image-left-text-right: Überschrift + 3-4 Aufzählungspunkte + [IMAGE: Beschreibung]
• two-column-text: 2 Spaltenüberschriften + max. 3 Aufzählungspunkte pro Spalte
• image-full: [IMAGE: Beschreibung] + optionale Bildunterschrift (max. 10 Wörter)
• image-grid: bis zu 6 [IMAGE: Beschreibung]-Platzhalter mit kurzen Bildunterschriften
• stat-highlight: 2-4 Metriken geschrieben als ZAHL | Bezeichnung (z.B. 3× | schnellere Abschlüsse). NULL Fließtext.
• quote-callout: Zitat (max. 30 Wörter) + Quellenangabe (Name, Titel)
• comparison-table: Spaltenüberschriften (max. 3) + 4-6 Zeilenbezeichnungen + Zelleninhalt (je 1-3 Wörter)
• timeline: 3-6 Meilensteine (Bezeichnung + Datum + 1-zeilige Beschreibung)
• closing-cta: Überschrift (max. 5 Wörter) + CTA-Aktionstext + Kontaktinformationen (E-Mail + URL – beides erforderlich)

Verbotene Wörter (in allen Texten, keine Ausnahmen): „leistungsstark“, „nahtlos“, „bahnbrechend“, „nutzen“, „innovativ“, „revolutionär“, „transformieren“, „modernste“, „robust“, „freischalten“, „skalierbar“ (als Füll-Adjektiv).

Kopier-Philosophie: Fragmente sind in Ordnung. Zahlen schlagen Adjektive. Jedes Wort verdient seinen Platz.

---

Schritt 5: HTML-Generierung

Lies ALLES, bevor du HTML generierst:

Referenzen dieser Fähigkeit:

• references/design-system.md
• references/layout-library.md
• references/style-presets.md
• references/animation-guide.md

frontend-slides-Querverweise (lies diese genauen Dateien):

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css – füge den VOLLSTÄNDIGEN Inhalt wörtlich innerhalb des <style>-Blocks ein
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md – SlidePresentation-Klasse, Tastaturnavigation, Inline-Bearbeitungssystem
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md – Eingangsanimationen, Hintergrundeffekte, interaktive Effekte

Generierungsregeln:

1. Einzelne eigenständige HTML-Datei. Alle CSS und JS inline. Der Font-CDN-<link> ist der einzige externe Verweis.
2. Füge den VOLLSTÄNDIGEN wörtlichen Inhalt von viewport-base.css innerhalb des <style>-Blocks ein – paraphrasiere oder kürze ihn nicht.
3. Schriftarten nur von Google Fonts oder Fontshare. Die Schriftartwahl stammt aus der gewählten Vorlage in references/style-presets.md.
4. Verwende die SlidePresentation-Klasse aus html-template.md. Implementiere die vollständige Tastaturnavigation (Pfeile, Leertaste, Bild auf/ab), Touch/Wischen, Fortschrittsbalken und Navigationspunkte. navDotsContainer.innerHTML = "" vor dem Erstellen der Navigationspunkte – überspringe dies nie.
5. Falls Inline-Bearbeitung gewählt: Implementiere das vollständige Inline-Bearbeitungssystem aus html-template.md inklusive exportFile(). Die exportFile()-Funktion MUSS contenteditable, body.edit-active und .active/.show-Klassen entfernen, bevor outerHTML erfasst wird.
6. Seitenverhältnis:
   • 16:9 (Standard): Folien sind width: 100vw; height: 100vh
   • 1:1 (LinkedIn): Füge die CSS-Custom-Property --slide-height: min(100vh, 100vw) hinzu und verwende sie auf .slide
7. JEDER Folienabschnitt MUSS class="slide" verwenden – erforderlich für die Folien-Erkennung von export-pdf.sh.
8. Füge vor jeder Folie einen Kommentar ein: /* === SLIDE N: LAYOUT-TYP === */
9. Wende die EINE unübersehbare Folie aus Schritt 2.5 mit maximalem visuellen Gewicht an – größte Typografie, meiste Animation, das Signatur-Element der Stilvorlage in voller Intensität. Alle anderen Folien sind kompositorisch ruhiger.
10. Keine Bilder bereitgestellt → verwende CSS-generierte Visualisierungen (Verlaufsnetze, geometrische Formen, Rastermuster aus animation-patterns.md). Dies ist ein erstklassiger Pfad, kein Fallback.

Typografie-Disziplin:

• Stat-Zahlen: clamp(3.5rem, 12vw, 9rem) – eine Metrik, die ein Drittel der Folie einnimmt, wirkt autoritativ
• Helden-Überschrift: clamp(2.5rem, 8vw, 6rem) mindestens. Niemals aus Sicherheitsgründen verkleinern.
• Verwende niemals feste px/rem für Elemente, die der Benutzer sehen wird. Clampe alles.

CSS-Falle aus viewport-base.css: Schreibe nie -clamp(), -min(), -max() direkt in CSS. Ummantle mit calc(-1 * clamp(...)).

---

Schritt 6: Selbst-Qualitätssicherung

Prüfe jedes Element. Behebe jeden Fehler – überspringe nichts.

Viewport und Rendering:

• Jedes .slide hat height:100vh; height:100dvh; overflow:hidden
• ALLE Schriftgrößen und Abstände verwenden clamp() – keine festen px auf skalierenden Elementen
• Keine Folie läuft bei 1280×720 Viewport über (gegen Dichte-Grenzen aus layout-library.md prüfen)
• Bilder verwenden max-height: min(50vh, 400px)
• Breakpoints für 700px, 600px, 500px Viewport-Höhen vorhanden (aus viewport-base.css)
• prefers-reduced-motion-Media-Query vorhanden
• Kein -clamp(), -min(), -max() in CSS – bei Bedarf negativ mit calc(-1 * ...) ummantelt

Struktur:

• Folienanzahl stimmt mit Schritt-3-Plan überein
• Jede Folie verwendet class="slide"
• Jeder Layout-Typ korrekt gemäß references/layout-library.md implementiert
• SlidePresentation-Klasse vorhanden mit Tastaturnavigation, Touch, Fortschrittsbalken, Navigationspunkten
• navDotsContainer.innerHTML = "" vor dem Erstellen der Navigationspunkte
• Falls Inline-Bearbeitung gewählt: exportFile() entfernt Bearbeitungszustand, bevor outerHTML erfasst wird

Designqualität:

• EINE unübersehbare Folie visuell dominant – nicht unter gleichgewichtigen Folien vergraben
• Typografie-Hierarchie klar: Display >> Überschrift >> Fließtext (mindestens 2:1 Größenverhältnis zwischen den Ebenen)
• Stilvorlagen-Tokens konsistent angewendet (Farben, Schriftarten aus references/style-presets.md)
• Keine Schludrigkeitsmuster (gegen DO-NOT-USE-Liste in references/style-presets.md prüfen)

Inhalt:

• Keine verbotenen Wörter in Folientexten
• title-hero-Überschrift hat 6 Wörter oder weniger
• stat-highlight hat NULL Fließtext, der mit den Zahlen konkurriert
• closing-cta hat spezifische Aktion + Kontaktinformationen (nicht nur „Danke“)

Wenn ein Check fehlschlägt: Korrigiere inline, führe dann die Checkliste mental erneut aus, bevor du fortfährst.

---

Schritt 7: Ausgabe

Speichere zuerst das Haupt-HTML:

mkdir -p deck/[name]-slides

Schreibe nach: deck/[name]-slides/index.html

Öffne es: open deck/[name]-slides/index.html

Einzelfolien-HTML-Dateien (immer generieren):

Extrahiere jedes <section class="slide"> aus dem Haupt-HTML. Erstelle für jede eine eigenständige Datei mit:

• Dem vollständigen <style>-Block aus dem Haupt-HTML (wörtlich kopiert)
• Dem einzelnen <section class="slide">, verpackt in einer minimalen HTML-Hülle
• Kein SlidePresentation-JS (statische Einzelfolienansicht, keine Navigation erforderlich)

Schreibe nach: deck/[name]-slides/slide-001.html, slide-002.html usw. (null-aufgefüllt auf 3 Ziffern).

Wenn PDF angefordert:

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
  deck/[name]-slides/index.html \
  deck/[name].pdf

Hinweis: Beim ersten Ausführen wird Playwright automatisch installiert (~30-60 Sekunden). Informiere den Benutzer.

Wenn Bereitstellung angefordert:

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
  deck/[name]-slides/

Aufräumen: Lösche .claude-design/previews/, falls Stilvorschau-Dateien in Schritt 2 generiert wurden.

---

Schritt 8: Zusammenfassung (kein HTML im Chat)

Präsentiere im Chat:

## Foliensatz: [Foliensatz-Name]
Datum: [heute] | Stil: [Stil] | Folien: [N] | Seitenverhältnis: [16:9 oder 1:1]
Zweck: [Zweck] | Zielgruppe: [Zielgruppe]

---

### Dateien
Hauptdatei:      deck/[name]-slides/index.html
Pro Folie: deck/[name]-slides/slide-001.html → slide-0NN.html
PDF:       deck/[name].pdf  [falls generiert]
Live-URL:  [url]  [falls bereitgestellt]

---

### Navigation
Pfeiltasten / Leertaste / Bild Auf/Ab – Folien vorwärts bewegen
Navigationspunkte anklicken – zu jeder Folie springen
Touch / Wischen – funktioniert auf Mobilgeräten

---

### Anpassung
CSS-Variablen in :root am Anfang der Datei bearbeiten, um Farben zu ändern
Die @import-Schriftart-URL austauschen, um die Typografie zu ändern
.reveal-Klasse von Elementen entfernen, um Eingangsanimationen zu deaktivieren

---

### Checkliste für den Foliensatz
- [ ] [IMAGE: Beschreibung]-Platzhalter durch echte Bilder ersetzen
- [ ] Die Metrik/das Zitat auf Folie [N] auf Richtigkeit prüfen (die unübersehbare Folie)
- [ ] Auf der Zielbildschirmgröße testen ([1920×1080 oder 1080×1080])
- [ ] Bei Live-Präsentation: Tastaturnavigation im Vollbildmodus testen
- [ ] Falls bereitgestellt: Live-Link mit allen Beteiligten teilen

End-to-End-Beispielablauf

(Siehe Beispielablauf in der Original-SKILL.md)