Foliensets erstellen

Erstelle wunderschöne, in sich geschlossene HTML-Foliensets mit umfangreichen visuellen Komponenten. Kein PowerPoint, kein Google Slides, keine Abhängigkeiten. Einfach die HTML-Datei im Browser öffnen und präsentieren.

Funktionsweise

Wenn du sagst "erstelle ein Folienset über [Thema]" oder "erstelle Folien für [Präsentation]", baut diese Skill eine vollständige HTML-Datei mit Vollbild-Folien, Tastaturnavigation und ausgefeilten visuellen Komponenten.

Folienstruktur

Jedes Set folgt diesem bewährten Ablauf:

Folie	Zweck	Inhalt
1. Titel	Die Bühne bereiten	Grosser Titel, Untertitel, Name oder Marke
2. Einstieg	Problem oder Kontext rahmen	Warum das wichtig ist, was das Publikum lernen wird
3-8. Kerninhalt	Die Substanz liefern	Eine Idee pro Folie, jeweils mit visueller Komponente
9. Beleg	Den Punkt belegen	Statistiken, Zitate, Fallstudien, Beispiele
10. Kernaussage	Die Botschaft verankern	Zusammenfassung, Handlungsaufforderung, nächste Schritte

Die Anzahl der Kerninhalt-Folien je nach Themenkomplexität anpassen. Einfache Themen: 5-7 Folien insgesamt. Komplexe Themen: 10-15 Folien. Nie mehr als 15 Folien.

Visuelle Komponenten

Jede einzelne Folie MUSS eine visuelle Komponente haben. Reine Textfolien sind nicht erlaubt. Zur Auswahl:

Karten-Raster

2-4 Karten in einer Reihe, jede mit Icon/Emoji, Titel und einzeiliger Beschreibung. Verwenden für: Merkmale, Vorteile, Kategorien.

Vergleichspanel

Zwei Spalten nebeneinander mit einem "vs"-Trenner. Verwenden für: alt vs. neu, Tool A vs. Tool B, vorher vs. nachher.

Statistik-Highlight

Eine riesige Zahl oder ein Prozentsatz mit einer kurzen Beschriftung darunter. Verwenden für: beeindruckende Datenpunkte, Wachstumszahlen, Kosten.

Schritt-Ablauf

Horizontale oder vertikale nummerierte Schritte mit Pfeilen dazwischen. Verwenden für: Prozesse, Anleitungen, Funktionsweisen.

Zitat-Block

Grosse Anführungszeichen, kursiver Text, Zuordnung darunter. Verwenden für: Testimonials, Expertenzitate, zentrale Aussagen.

Icon-plus-Label-Liste

Vertikale Liste mit Emoji oder Icons links, Beschriftungen rechts. Verwenden für: Merkmalslisten, Agenden, Checklisten.

Codeblock

Monospace-Text auf dunkler Karte mit Syntax-ähnlicher Farbgebung. Verwenden für: Codebeispiele, Kommandozeile, Konfigurationsdateien.

Zeitleiste

Horizontale Linie mit Punkten und Beschriftungen darüber und darunter. Verwenden für: Geschichte, Roadmap, Projektphasen.

Bild plus Bildunterschrift

Zentrierter Bildplatzhalter mit Bildunterschrift darunter. Verwenden für: Screenshots, Diagramme, Produktfotos.

Metrik-Dashboard

3-4 Statistikboxen in einer Reihe, jede mit Beschriftung und Wert. Verwenden für: KPIs, Leistungsdaten, Vergleiche.

HTML-Ausgabe

Erstelle eine einzelne, in sich geschlossene HTML-Datei. Keine externen Schriftarten, CDN-Links oder Bilder. Alles inline.

Layout: Vollbild-Folien (100vw x 100vh), Inhalt zentriert, max-width 900px, 60px Padding.

Farben: Hintergrund #0a0a0a, Text #ffffff, sekundär #a0a0a0, Karten #1a1a1a, Rahmen #2a2a2a, plus eine Akzentfarbe pro Set.

Typografie: Überschriften fett serifenlos 48-64px, Fliesstext 24-28px, Statistikzahlen 72-96px in Akzentfarbe, Code monospace 18px.

Navigation: Pfeiltasten zum Wechseln der Folien, Zähler unten rechts, sanfte Übergänge, optional Klick zum Weiterblättern.

Inhaltsregeln

1. Eine Idee pro Folie. Bei zwei Punkten zwei Folien erstellen
2. Max. 30 Wörter pro Folie. Folien sind visuelle Hilfsmittel, keine Dokumente
3. Jede Folie hat eine visuelle Komponente. Keine Ausnahmen. Siehe Liste oben
4. Konsistente Akzentfarbe. Eine Akzentfarbe wählen und für alle Highlights, Buttons und Hervorhebungen verwenden
5. Keine Aufzählungslawinen. Bei Bedarf an Aufzählungen stattdessen eine Icon-plus-Label-Liste-Komponente verwenden
6. Grosser Text schlägt kleinen Text. Im Zweifel grösser machen
7. Weissraum ist dein Freund. Überfüllte Folien verlieren das Publikum

Auswahl der Akzentfarbe

Wähle eine Akzentfarbe passend zum Thema:

Themenbereich	Empfohlener Akzent	Hex
KI / Technik	Elektroblau	#3B82F6
Business	Warmer Amber	#F59E0B
Design	Korallenrosa	#F43F5E
Finanzen	Smaragdgrün	#10B981
Gesundheit	Sanftes Türkis	#14B8A6
Bildung	Königsviolett	#8B5CF6
Marketing	Kräftiges Orange	#F97316
Allgemein	Klarer weisser Akzent auf Dunkel	#E5E5E5

Beispiele für die Verwendung

• "Erstelle ein Folienset darüber, wie KI-Agenten funktionieren"
• "Erstelle Folien für mein Team-Meeting zu den Q1-Ergebnissen"
• "Erstelle eine Präsentation, die unser neues Produkt erklärt"
• "Erstelle Folien für einen 5-minütigen Vortrag über Prompt Engineering"

Tipps für beste Ergebnisse

• Sag der Skill, wie viele Folien du möchtest, und sie passt die Dichte an
• Nenne dein Publikum, damit das Inhaltsniveau kalibriert wird
• Teile deine Markenfarbe mit, und sie wird zum Akzent
• Bitte um Sprechernotizen, wenn du zu jeder Folie Gesprächspunkte möchtest
• Die HTML-Datei funktioniert offline -- kein Internet zum Präsentieren nötig

---

Zuletzt aktualisiert: 01.08.2026 · Version 1.0.0 · skills.fragroger.ai

Lizenz: CC BY-NC-ND 4.0 (Namensnennung – nicht kommerziell – keine Bearbeitungen). Nutzung nur für den Eigengebrauch. https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de