Aumnertic/scene-ppt

Szenariobasiertes PPT-Design

Dieses Skill bietet zwei Dinge:

1. Vorlagenreferenz: Fertige Muster in styles/<Zweig>/exemplar/ und samples/.
2. Designanleitung: Anleitungen in guide/, die erklären, wie organisiert und welche Formen verwendet werden.

Kernprinzip: Der Stil folgt dem Szenario und dem Material, nicht einem starren Schema. Die Muster dienen als Qualitätsmaßstab und Demonstration von Techniken, nicht zum Kopieren. Ein neues Deck muss basierend auf dem eigenen Inhalt neu komponiert werden. Das Kopieren des Layouts von Mustern oder das Erzeugen identischer Decks ist genau das, was dieses Skill vermeiden möchte: den „KI-Look“.

Systemanforderungen

• macOS, Google Chrome, uv. Das Rendern erfolgt mit dem lokal installierten Chrome – kein Download eines Browsers nötig.
• Schriftarten sind macOS-Systemschriften und können nicht mit dem Skill gepackt werden. Fette Stufen von chinesischen Schriftarten müssen mit PostScript-Namen angegeben werden, z. B. STSongti-SC-Black, FZLTTHK--GBK1-0. Nur den Familiennamen mit font-weight zu verwenden, führt zur Rücksetzung auf die reguläre Stufe.

Ablauf

00 Szenariobestimmung

Lies zuerst die Materialien des Benutzers. Wenn Materialien die Fragen bereits beantworten, stelle sie nicht erneut. Stelle nur Fragen, „deren Antwort die Designentscheidungen verändert“. Maximal 3 bis 4 Fragen auf einmal. Falls ein Fragewerkzeug verfügbar ist, verwende es.

Frage	Entscheidet über
Für welchen Anlass? Z. B. Wettbewerbspräsentation, Kurs-/akademischer Vortrag, Klassen-/Schulveranstaltung, Arbeitsbericht, Sonstiges	Welcher Stilzweig
Wird vor Ort per Beamer gezeigt oder als Datei zum Selbststudium verschickt? Wie lange ist der Vortrag?	Informationsdichte und Seitenanzahl. Bei Beamer: große Schrift, wenig Text, etwa 1 Minute pro Seite. Bei Datei: dichtere Informationen möglich
Was soll das Publikum behalten oder fühlen? Z. B. professionell vertrauenswürdig, ideenreich, warm und interessant, leidenschaftlich	Welches Thema innerhalb des Zweigs
Gibt es zwingend zu verwendende Farben, Logos oder Vorlagen? Z. B. Universitätslogo, Klassenfarben, Wettbewerbsvorgaben	Hauptfarbvariable

Szenario → Zweig und Thema

Szenario	Zweig	Themenauswahl	Dichte
Challenge Cup, Internet+-Wettbewerb, Startup-Präsentation, Projektverteidigung	roadshow-cn	Einzelthema; bei geschäftsorientiertem Wettbewerb goldener Ton mit heller, wissenschaftlichem Cyan	Sehr voll (über 70%)
Kursabschlussbericht, Buchvorstellung, Gruppenforschungspräsentation	course-report	Geistes-/Sozialwissenschaften wählen paper; MINT/Design/Daten wählen swiss	Freiraum möglich, sie sollten große Kontraste in der Schriftgröße aufweisen
Klassenversammlung, Halbjahres-/Jahresrückblick, Sportfest, Club, Abschluss	school-event	Erinnerung/Dank wählen handbook; Wettbewerb/Motivation wählen pop	Freiraum möglich, jede Seite hat ein „physisches Objekt“
Betonung von Designgefühl und persönlichem Stil: Portfolio-Präsentation, Bewerbungs-/Studienplatz-Selbstvorstellung, Design-Share, persönliche Themenrede	curve-minimal	Gewünscht: zurückhaltend, rational, wie ein Designentwurf, oder zur Dateiabgabe/Print: pen (heller Hintergrund); gewünscht: ausdrucksstärker, persönliche Ausstrahlung, Live-Projektion: ribbon (dunkler Hintergrund)	Sehr wenig, viel Freiraum; jede Seite hat nur einen Schwerpunkt
Keins passt	Neues Thema oder neuer Zweig, siehe unten	—	—

Wenn kein passender Zweig vorhanden ist, zwinge nicht den nächstgelegenen auf. Leite ein neues tokens.css in der Reihenfolge „Charakter → Schriftart → Formsprache → Farbe“ ab. Die Aufteilung in erforderliche und optionale Variablen steht am Anfang von styles/roadshow-cn/tokens.css. Verwende zuerst scripts/fontcheck.py, um zu bestätigen, dass Chrome die Schriftart tatsächlich verwendet.

Hauptfarben bevorzugt aus den Materialien des Benutzers übernehmen, z. B. Universitätsstandardfarben, Klassenfarben oder themenbezogene Farben.

01 Materialaufbereitung

Liste die Fotos, wichtigen Zahlen, Originalzitate und Zertifikatsdateien aus den Materialien des Benutzers auf. Die Anzahl der Fotos beeinflusst direkt das Layout: Bei weniger als 3 Fotos keine Fotowand erstellen. Dieser Schritt erfolgt derzeit manuell, es gibt noch kein Skript.

02 Gliederung

Definiere zuerst die Kapitel, dann weise jeder Seite eine Rolle zu: Titelseite, Kapitelseite, Inhaltsseite, Datenseite, Schlussseite. Typische Seitenrollen pro Zweig siehe styles/<Zweig>/style.md.

03 Formauswahl pro Seite

Erkenne für jede Seite die Informationsbeziehung (Hierarchie, Reihenfolge, Vergleich, Rangfolge, Anteile, Schlüsselzahlen, Nebeneinanderstellung, Live-Fotos …) und suche in guide/shapes.md nach den passenden Kandidatenformen. Wähle eine basierend auf den Auswahlkriterien und dem aktuellen Zweig. Wenn du nicht sagen kannst, „warum diese Form verwendet wird“, ist die Auswahl falsch. Dekorationen kommen zuletzt, ausgewählt nach ihrer kompositorischen Wirkung (siehe Abschnitt 4 desselben Dokuments).

04 Rendern

1. Schreibe die Datei nach der Dateistruktur des exemplar/deck.html des ausgewählten Zweigs, übernimm nicht dessen Layout:
   • Als erste Zeile in <head> das Themenskript <script>{const t=new URLSearchParams(location.search).get('theme');if(t)document.documentElement.dataset.theme=t}</script>. Fehlt es, wird beim Aufruf von render.py mit einem Themennamen stillschweigend das Standardthema gerendert;
   • Danach nacheinander tokens.css, lib/base.css und das components.css des Zweigs einbinden. roadshow-cn ist ein Einzelthemen-Zweig und bindet auch kein lib/base.css ein – schreibe nach seiner eigenen Vorlage;
   • Am Ende der Seite lib/shapes.js einbinden;
   • Jede Seite als <section class="slide">, Größe 1920×1080.
2. Schreibe in das Seiten-<style> nur Koordinaten und Größen. Farben immer mit var(--c-*) oder mit Shapes.T('Rollenname') aus JavaScript auslesen.
3. Fotoplätze mit <div class="photo" data-label="…"> kennzeichnen. Wenn echte Fotos vorhanden sind, <img> darin platzieren.
4. Rendern-Befehl:

uv run --with playwright python scripts/render.py <deck.html> <Ausgabeverzeichnis> [Themenname]

05 Prüfung

• render.py prüft automatisch: Textüberlauf (nur Elemente mit .fit), JS-Fehler, Auslassungspunkte, fehlende Themenvariablen.
• Das PNG jeder Seite muss visuell überprüft werden. Die automatische Prüfung erkennt keine Überlappungen, Verdeckungen oder einzelne Zeilen am Ende eines Absatzes. Bei neu erstellten Seiten treten diese Probleme bei der ersten Darstellung fast immer auf.
• Vergleiche mit guide/anti-patterns.md: Nur Karten, pink-violette Verläufe, Emojis als Illustrationen gelten als Fehlschlag.
• Große kalligrafische, handgeschriebene oder Display-Schriftarten in Überschriften nicht mit .fit versehen, sonst schlägt die Prüfung fälschlich an.

06 Auslieferung

Übergib dem Benutzer die PNG- und PDF-Dateien (von render.py bereits erstellt), damit er selbst die Wirkung beurteilen kann. Derzeit wird kein editierbares PPTX unterstützt; Änderungen erfolgen durch Bearbeiten des HTML und erneutes Rendern.

Dateiindex

Pfad	Inhalt	Wann lesen
guide/shapes.md	Informationsbeziehung → Form, mit Begründung, Szenariovarianten, Implementierung, Variablenabhängigkeit	Phase 03, wird pro Seite benötigt
guide/anti-patterns.md	Typische Merkmale von KI-gemachten PPTs	Phase 05
styles/<Zweig>/style.md	Einsatzzweck, Designmethoden, Seitenrollen, Themenauswahllogik des Zweigs	Nach Auswahl des Zweigs
styles/<Zweig>/tokens.css	Farb-, Schriftgrößen-Variablen; verschiedene Themen überschreiben mit [data-theme]	Bei Änderung der Hauptfarbe oder Erstellung eines neuen Themas
styles/<Zweig>/components.css	HTML-Komponenten des Zweigs	Phase 04
styles/<Zweig>/exemplar/	4-seitige Muster plus Screenshots aller Themen	Phase 04, um Techniken zu sehen
styles/school-event/samples/banhui-full/	12-seitiges vollständiges Klassenversammlungsmuster (Handbuch-Thema, positives Benutzerfeedback)	Als Referenz für die Erstellung eines vollständigen Decks
lib/shapes.js	19 SVG-Generatoren (Struktur, Daten, Dekoration, Handzeichnung)	Phase 04
lib/base.css	Reset-Styles, Leinwand, Fotoplätze	Phase 04
scripts/render.py	Rendern, Prüfen, Exportieren nach PNG und PDF	Phasen 04, 05
scripts/pixeldiff.py	Pixelgenauer Vergleich, für Regressionstests	Nach Änderungen an lib/
scripts/fontcheck.py	Prüft die tatsächlich von Chrome verwendeten Schriftarten	Bei neuem Thema oder Schriftartenwechsel

Noch nicht abgeschlossen

• Für die Phasen 01 bis 03 gibt es noch keine Skripte; sie werden manuell nach den obigen Anweisungen durchgeführt.
• guide/organization.md (Kapitelgerüst, Seitenrollen, Rhythmus eines gesamten Decks) ist noch nicht geschrieben.
• Der Export in editierbares PPTX wird nicht unterstützt.
• Schriftarten sind nicht geräteübergreifend: Beim Wechsel auf ein Nicht-macOS-System müssen auf packbare Open-Source-Webschriftarten umgestellt werden.