AI-Slides in interaktive Deep-Dive-Präsentationen verwandeln: Das 6-Struktur-Framework

1【Prompt für interaktives Deck v2.1】
2Vollständiger Text aus Platzgründen weggelassen; bitte von note kopieren und einfügen.
3
4## Ergänzung: Mach es interaktiv
5Nutze diesen Block als Anhang an den obigen Prompt zur Deckerstellung. Füge dein Material unterhalb dieses Blocks ein (die Zeile „Material unterhalb hiervon einfügen" aus dem vorherigen Prompt muss unverändert bleiben).
6
7### Prioritäten
8- Inhalt (Umgang mit Zahlen, Headlines, Logik, Templates, Zeichenstandards, Prüfung) folgt dem obigen Prompt zur Deckerstellung.
9- Ausgabeformat priorisiert diesen Block: Interaktives HTML als Einzeldatei, 3 Seiten (4 bei umfangreichem Material), Headlines max. 36 Zeichen pro Zeile (kein Umbruch). Kein separates Design-Dokument ausgeben; stattdessen Seitenliste und Zahlenregister verwenden (die erforderlichen Design-Punkte aus dem vorherigen Prompt in diese beiden integrieren).
10- Fragen nur einmal vor dem Start stellen, und nur wenn Zweck oder Zielgruppe aus Material/Hintergrund unklar sind. Ansonsten eigene Entscheidungen treffen, Annahmen notieren und alles in einem Rutsch durchschreiben.
11
12### Seiten-Template (Visuell an folgendes Beispiel anpassen)
13- Seiten 2–3: Hauptdiagramm links (60 % Breite), Beleg-Panel rechts (Box mit hellem Hintergrund). Panel-Struktur: Eine große Zahl (88–96px) → Was sie bedeutet (1 Zeile) → Kontext (2–3 Zeilen) → Vergleichsziel & Delta (mit Formel) → „Aufschlüsselung ansehen ›"
14- Seite 1: Obere Reihe mit 3 großen Zahlen, unten der Gesamtfluss/die Struktur (was passiert wo). Karten mit Links zu bestimmten Seiten („S. 2 ›") innerhalb des Flusses platzieren.
15- Diagramme und Zahlen füllen den Rahmen komplett aus. Keine leeren Streifen unter dem Inhalt.
16- Alle Zahlen aus dem Material verwenden (Diagramme, Panels, Callouts, Belege). Deltas/Verhältnisse berechnen und Formeln zeigen. Keine Zahlen erfinden, die nicht im Material stehen.
17- Hauptthema in Primärfarbe, Vergleiche in hellen Verlaufstönen, alles andere grau. Eine große Zahl pro Seite.
18- Klickebare Elemente deutlich machen: „›", „Klicken, um …", Hover-Rahmen, Ring-Highlight einmalig beim Betreten der Seite. Balken/Punkte zeigen bei Hover einen Tooltip mit „Wert, Name, Quelle".
19
20### Eine Interaktion pro Seite (abgeleitet aus der Struktur)
21Genau eine Aktion pro Seite hinzufügen, mit der der Leser die Aussage der Headline überprüfen kann. Die Aktion richtet sich nach dem Strukturtyp der Headline.
22- Pyramide (Fazit/Beleg) → Klicken zum Drilldown. Beleg-Panel rechts (mit Quelle; auf fast allen Seiten einbauen).
23- Klassifizierung (Segmentierung) → Kriterien wechseln (Aggregationsansicht, Metrik, Jahr), um alle Balken neu zu sortieren.
24- Vergleich (Differenz) → Vorheriger Zustand morpht in den aktuellen, Delta/Differenz bleibt als gepunktete Linie sichtbar.
25- Kausalität (Ursache/Wirkung) → Slider passt Bedingung an, Ergebnis wird neu berechnet. Formel auf dem Bildschirm anzeigen.
26- Problemlösung (Lücke/Lösung) → Lösungen ein-/ausblenden, um Lücken zu füllen/offen zu lassen.
27- Abfolge (Fluss/Prozess/Zeit) → Schrittweiser Aufbau, Akteur bewegt sich durch den Prozess, „Jetzt"-Markierung auf der Timeline.
28Keine Animationen hinzufügen, die nichts mit der Headline zu tun haben. Quantitative Animationen müssen aus den Werten berechnet werden.
29
30### Beleg-Panel (gleitet beim Klicken von rechts herein)
31- Breite 720px. Gleitet von rechts herein, Hintergrund wird abgedunkelt. Schließen über X, Esc oder Klick auf den Hintergrund.
32- Struktur von oben nach unten: Ortskontext („Aktueller Status > Elementname") → Aussage (1–2 Zeilen) → Tabs (max. 2, z. B. Aufschlüsselung / Quellen & Annahmen) → Kleines Diagramm/Tabelle → Quelle.
33- Detaillierte Zahlen, die nicht auf die Hauptseite passen, hier platzieren. Auf fast allen Seiten einbauen.
34
35### Gesamtes Deck
36- Zoom-Navigation von der Übersicht auf Seite 1 zu spezifischen Seiten aktivieren. Sprünge von Lösungs- zu Belegseiten erlauben.
37- Tasten: → und Leertaste für nächste, ← für vorherige, Zahlen für Direktsprung, Esc zum Schließen/Zurück, O für Übersicht aller Seiten, D für Auto-Demo (Mauszeiger folgt dem Skript, endet mit Übersicht. Interaktive Elemente mit data-demo-Namen taggen).
38- Seiten bauen sich in ca. 3 Sekunden auf: Headline → Hauptdiagramm (Balken wachsen von 0, versetzt um 60ms) → Zahlen → Beleg-Panel. CSS-Transitions/Delays nutzen; bei JS requestAnimationFrame mit 50ms-Timer kombinieren.
39- URL-Parameter #static und Einstellung „Bewegung reduzieren" unterstützen, um den fertigen Endzustand zu zeigen (bei interaktiven Seiten den Zustand zeigen, in dem die Aussage der Headline sichtbar ist, z. B. alle Lösungen AN). Muss auch als statisches Deck lesbar sein.
40- 1920x1080-Canvas an Bildschirmgröße anpassen. Externe Ladeskripte auf Google Fonts Noto Sans JP beschränken.
41
42### Mindeststandards (nur falls kein obiger Prompt zur Deckerstellung vorhanden)
431. Zahlenregister aus dem Material erstellen (Element, Wert, Datum, Quelle, Grundgesamtheit). Fehlende Zahlen als „xx" markieren und notieren. Elemente ohne Werte ans Ende setzen.
442. Eine Botschaft pro Seite. Headlines sind vollständige Sätze, die Fakt und Aussage verbinden, max. 36 Zeichen/Zeile. Zweiteilige Strukturen wie „A. B", Zählweisen wie „Es gibt 3 …" oder Fragmente mit Substantiv am Ende vermeiden.
453. Zuerst alle Headlines schreiben, den roten Faden prüfen (Überblick→Beleg→Lösung), dann erst Diagramme erstellen.
464. Diagrammtyp anhand der strukturellen Absicht der Headline wählen (siehe „Eine Interaktion" oben).
475. Diagrammtitel: „Was, Wann, Einheit". Keine Aussagen in Titeln. Quelle sowohl im Seitenfuß als auch im Beleg-Panel angeben.
486. Farben: 1 Primärfarbe, 3 helle Verläufe, Grau. Standard-Primärfarbe #1976D2. Akzent (Amber #D97706) nur einmal im gesamten Deck verwenden. Minimale Schriftgröße 18px.
497. Keine Kausalität aus Korrelation ableiten. Schätzungen als „Schätzung" kennzeichnen, Formel und Annahmen auf dem Bildschirm zeigen.
50
51### Ausgabe
52- HTML: Bei Claude als Artifact, bei ChatGPT als Canvas (oder als einzelner Code-Block, falls beides nicht verfügbar). Alles in einem Rutsch durchschreiben. Seitenzahl begrenzen und Komponenten in Funktionen bündeln, um den Code kurz zu halten. Bei Abbruch auf „weiter" des Nutzers im selben Dokument fortfahren (nicht manuelles Einfügen verlangen).
53- Zeile 1 nennt die Methode: „Inhalt = Deck-Prompt / Interaktivität = Interaktiver Block" oder „Nur interaktiver Block (vereinfachte Inhaltsregeln angewendet)".
54- Seitenliste (Headline/Struktur/Aktion/Inhalt Beleg-Panel), Zahlenregister und Hinweise AUSSERHALB des HTML-Codes (im Antworttext) kurz aufführen. Nicht im HTML-Code.
55- Zielgröße des gesamten HTML-Codes ca. 40KB. Text bei Bedarf kürzen (Diagramme, Beleg-Panels und Aktionen NICHT kürzen).
56- Mit 2–3 Vorschlägen zur weiteren Verbesserung abschließen und den Nutzer zur Auswahl auffordern.
57
58### Abschlussprüfung
59Vor der Ausgabe prüfen und korrigieren: Jede Seite hat eine „Aktion zur Überprüfung der Headline" und ein „Beleg-Panel mit Quelle" / Keine erfundenen Zahlen / Keine leeren Streifen, Überlappungen, Overflows oder Text <18px / Headline-Endungen seitenübergreifend konsistent (nicht überall „sollte …") / Auto-Demo-Skript verweist nicht auf nicht existierende Elemente.
60
61(Code für eine Beispielseite folgt hier. Das Einbinden von Beispielen verbessert die Qualität erheblich. Die Vollversion mit Code findest du auf note.)