Azdmjiny/html-ppt-creator

HTML PPT Creator

Erstelle einen klaren, visuell durchdachten HTML-Foliensatz, der direkt im Browser geöffnet wird. Standardmäßig wird eine eigenständige presentation.html mit inline CSS und JavaScript erzeugt, ohne Build-Schritt.

Arbeitsablauf

1. Untersuche die Kurzbeschreibung des Benutzers, den Quelltext, die Daten, die Marken-Assets und den gewünschten Ausgabeort.
2. Leite sinnvolle Standardwerte für fehlende Details ab. Frage nur nach, wenn Zielgruppe, Zweck, Sprache, Folienanzahl oder visuelle Ausrichtung das Ergebnis wesentlich beeinflussen und nicht abgeleitet werden können.
3. Entwerfe eine präzise Foliensequenz. Gib jeder Folie eine Aufgabe und einen aussagekräftigen Titel; entferne Wiederholungen vor dem Codieren.
4. Wähle ein visuelles System, das zum Thema passt. Definiere CSS-Custom-Properties für Farbe, Schriftart, Abstände, Rahmen, Schatten und Bewegung und verwende sie einheitlich.
5. Kopiere assets/starter.html als Basis, wenn du von Grund auf neu beginnst. Ersetze alle Beispiel-Folien und Theme-Token, anstatt das Beispiel-Styling als verbindliches Theme zu betrachten.
6. Implementiere den vollständigen Foliensatz. Verwende semantische <section class="slide">-Elemente, eine feste 16:9-Bühne, die auf den Viewport skaliert, sowie Tastatur-/Klick-/Touch-Navigation.
7. Lese references/QUALITY.md vor der endgültigen Qualitätssicherung. Öffne den Foliensatz im Browser (sofern Browsersteuerung verfügbar ist), überprüfe jede Folie, behebe Überlauf- und Interaktionsfehler und liefere die HTML-Datei aus.

Führe keinen Planungshaltpunkt ein und bitte nicht um kapitelweise Zustimmung, es sei denn, der Benutzer wünscht einen iterativen Arbeitsablauf.

Ausgabe-Vereinbarung

• Erzeuge standardmäßig presentation.html. Verwende einen Ordner mit mehreren Dateien nur, wenn der Benutzer dies wünscht oder der Foliensatz tatsächlich wiederverwendbare lokale Assets oder umfangreiche Anwendungslogik benötigt.
• Halte den Standard-Foliensatz offline-fähig: inline CSS und JavaScript; verwende lokale oder eingebettete Bilder und Schriftarten. Vermeide CDN-Abhängigkeiten, es sei denn, der Benutzer stimmt ihnen zu.
• Bewahre gelieferte Fakten, Formulierungsvorgaben, Zitate, Logos und Markenregeln. Erfinde keine Statistiken oder Quellen.
• Füge eine Titelfolie, einen kohärenten Hauptteil und eine abschließende Schlussfolie ein, wenn angemessen; erzwinge diese nicht, wenn das gewünschte Format etwas anderes vorgibt.
• Unterstütze ArrowLeft, ArrowRight, Space, PageUp, PageDown, Home und End; unterstütze Klick-/Tipp-Navigation und Touch-Wischgesten. Verwende F für den Vollbildmodus.
• Zeige eine dezente Foliennummer oder einen Fortschrittsindikator. Halte Steuerelemente visuell unauffällig und präsentationssicher.
• Füge Print-CSS hinzu, sodass jede Folie als eine Querformatseite gedruckt wird und dekorative Steuerelemente ausgeblendet sind.
• Respektiere prefers-reduced-motion. Verwende Bewegung sparsam und verlasse dich niemals auf Animationen, um wesentliche Informationen zu vermitteln.
• Füge keine Sprechernotizen, Erzählskripte, Audio, automatische Wiedergabe, Aufnahmehilfen, Video-Zeitachsen oder TTS-Infrastruktur hinzu, es sei denn, dies wird ausdrücklich gewünscht.

Inhalts- und visuelle Regeln

• Mach eine Hauptaussage pro Folie. Bevorzuge 3–6 prägnante unterstützende Punkte gegenüber Absätzen.
• Verwende die richtige visuelle Form für die Beziehung: Vergleich, Prozess, Zeitleiste, Hierarchie, Metrik, Zitat, Bild, Diagramm oder Schaubild.
• Bevorzuge echte Inhalte, einfaches SVG, CSS-Diagramme und aussagekräftige Diagramme gegenüber dekorativem Füllmaterial.
• Bewahre eine starke Hierarchie und großzügige Weißräume. Gestalte für die Betrachtung aus der Ferne, nicht zum Lesen von Dokumenten.
• Halte ein kohärentes Theme über den gesamten Foliensatz bei, erlaube jedoch Layout-Variationen. Vermeide, dass jede Folie dasselbe Raster aus abgerundeten Karten ist.
• Vermeide generisches KI-Styling: unnötige violette Farbverläufe, übermäßiges Glühen, zufällige Glasscheiben, Emoji-Dekoration, gefälschte App-Oberflächen und ornamentale Diagramme ohne Daten.
• Stelle Textkontrast, sichtbare Fokus-Zustände, sinnvolle Alt-Texte und eine sinnvolle DOM-Lesereihenfolge sicher.
• Wenn Inhalte nicht passen, kürze sie oder teile die Folie. Verkleinere den Haupttext nicht, bis er technisch passt.

Bearbeiten bestehender Foliensätze

Bewahre die aktuelle Architektur und Gestaltungssprache, es sei denn, der Benutzer wünscht ein Redesign. Nimm die kleinste kohärente Änderung vor und überprüfe dann Navigation, Foliennummerierung, Überlauf, Drucklayout und responsives Skalieren.

Abschlussprüfung

Bevor du die Fertigstellung meldest:

1. Überprüfe die gewünschten Nachrichten, Zahlen, Zitate und die Folienreihenfolge.
2. Teste die Ränder der ersten/letzten Folie und jede Navigationsmethode.
3. Überprüfe alle Folien in der Desktop-Größe 16:9 und mindestens einem kleineren Viewport.
4. Prüfe auf abgeschnittenen Text, Überlappungen, sehr kleine Schrift, defekte Medien, Konsolenfehler und unbeabsichtigtes Scrollen.
5. Bestätige, dass die Datei ohne Build-Schritt geöffnet werden kann und offline nutzbar bleibt, sofern keine externen Abhängigkeiten genehmigt wurden.
6. Behebe jeden Fehler, bevor du das Ergebnis übergibst.