cerulean

Cerulean: Präsentationen mit Schritt-für-Schritt-Szenen

Du entwirfst, und Cerulean baut. Du schreibst drei Dateien: das Drehbuch als JSON, die programmierten Szenen in JS und die Haut in CSS. scripts/build.py validiert sie und wandelt sie in ein eigenständiges HTML mit integriertem Betrachter um.

Jede Szene ist eine Idee, erzählt in 2 bis 4 Schritten. Links erscheint eine Schrittekarte. Rechts befindet sich eine für diese Szene programmierte Illustration: das echte Objekt des Themas mit eigener Choreografie, das sich sanft mit jedem Schritt weiterbewegt und ein Eigenleben hat (schwebt, fließt, pulsiert). Es kann auch ein Screenshot oder Foto sein, das herangezoomt und beschriftet wird. Dass jede Szene anders aussieht und sich anders bewegt, macht eine gute Cerulean-Präsentation aus.

Jede Präsentation hat außerdem eine eigene visuelle Identität, die du für dieses Thema entwirfst: die Welt, in der sie lebt (ihre Objekte), die Farbpalette, die Schriftarten, der Rhythmus der Hintergründe und eine komplett dafür geschriebene CSS-Haut. Eine Präsentation über Sicherheit sieht aus wie eine Konsole; eine über Geschichte wie ein historischer Druck. Zwei verschiedene Themen sollten nicht wie aus derselben Kollektion wirken – deckt man den Titel ab, muss man das Thema erraten können.

Ablauf

1. Den Auftrag verstehen. Du benötigst das Thema, den Inhalt (Notizen, Stichpunkte, eingefügten Text) und, falls vorhanden, die Bilder. Wird nur das Thema genannt, entwickle es mit allgemein etabliertem Wissen weiter. Unterbrich nicht, um nach Bildern zu fragen: fehlt eines, lasse den Platz reserviert. Standard: Spanisch, 5 bis 9 Szenen.

2. Die Anleitung einmal lesen. Lese references/direccion.md (die visuelle Identität), references/formato.md (das JSON) und references/escenas.md (das Kit, das Timing und den Katalog der Animationen nach Ideentyp). assets/ejemplo.js enthält 7 vollständige Szenen: lies sie nur, wenn du unsicher bist, wie du etwas umsetzen sollst.

3. Die Identität entwerfen mit dem Prozess aus direccion.md: die Themenwelt (wo sie lebt und 6 bis 10 erkennbare Objekte), die Stimmung, die aus dieser Szene abgeleitete Palette, die Schriftarten, die diese Welt verwenden würde, den Rhythmus und die Bewegung – jeweils mit einer eigenen Zeile in why. Bestehe den Allgemeinheitstest: deckt man den Titel ab, errät man das Thema?

4. Das Drehbuch schreiben in presentaciones/<thema>.json: Texte, Schritte, Notizen und den design-Block. Erstelle den Ordner, falls er nicht existiert. Verteile „Hintergrund“ und „Papier“ entsprechend dem Rhythmus.

5. Die Haut schreiben in presentaciones/<thema>.css: die Karte, das Deckblatt, die Titel, die Beschriftungen, die Details und die Eingänge, so wie sie in dieser Welt aussehen würden (was bekleidet werden kann und was nicht, in direccion.md).

6. Die Szenen planen bevor du programmierst: für jede Szene, welcher Ideentyp erklärt wird (idea), ihre Metapher in einem Satz (form) mit einem Objekt aus der Themenwelt, und was sich in jedem Schritt ändert. Mindestens 3 Ideentypen, keine Metapher wiederholt. Verwende Bilder nur für reale Dinge, die die Person zeigen möchte (ihre App, ein Produkt, einen Ort).

7. Die Szenen programmieren in presentaciones/<thema>.js (escena("name", (K) => {…})), mit dem zugehörigen "draw" im JSON. 20 bis 60 Zeilen pro Szene. Zeichne das Artefakt der Welt, standardmäßig flach (siehe escenas.md).

8. Generieren und prüfen:

   python "<ordner dieses skills>/scripts/build.py" presentaciones/<thema>.json
   

   Schreibt presentaciones/<thema>.html. Korrigiere die Hinweise (Namen ohne Szene, Syntaxfehler, ausstehende Bilder, unvollständige visuelle Richtung, abgelehnte Haut, fehlende Vielfalt, Ähnlichkeit mit einer vorherigen Präsentation). Wenn du einen Browser hast, prüfe ohne Bildschirmfotos zu verschwenden:

   • Starte die Vorschau: python "<ordner dieses skills>/scripts/preview.py" presentaciones/<thema>.json im Hintergrund und öffne http://localhost:8767.
   • Führe JSON.stringify(CERULEAN_REPORT()) auf der Seite aus. Es zeigt, welche Szenen Fehler haben, Teile außerhalb der Leinwand oder Schritte ohne Änderungen, und welche Texte mit der Haut schlecht lesbar sind (legibilidad). Korrigiere und führe es erneut aus; die Seite lädt automatisch neu.
   • Mache ein einziges Bildschirmfoto der Übersichtsansicht (Schaltfläche „Alle“ oder Taste G), um das Gesamtbild zu beurteilen: dass die Identität erkennbar ist (Farben, Schrift, Zeichenstil) und dass sich die Szenen nicht ähneln. Fotografiere nicht Schritt für Schritt – das kostet am meisten Zeit und Tokens.

9. Ausliefern. Gib den Pfad des HTML an und erkläre in wenigen Zeilen die Bedienung:

   • → oder Leertaste vorwärts, ← rückwärts.
   • F Vollbild, N Notizen, G Übersicht.
   • E Bearbeitungsmodus: Texte korrigieren, Bilder ziehen und die Karte oder Illustration verschieben oder skalieren (Griffe ✥ und ⤡). „Kopie herunterladen“ speichert ein HTML mit den Änderungen.
   • Die PDF-Schaltfläche speichert die Präsentation mit einer Szene pro Seite.

   Sollten noch Bilder fehlen, beende mit einer Liste: Szene, was gezeigt werden muss und der Name presentaciones/imagenes/escena-<n>.png.

Unverhandelbare Regeln

• Erfinde keine Zahlen, Daten, Zitate, Namen oder Studien. Zahlen, die in einer Szene auftauchen, stammen aus dem Inhalt oder sehr etabliertem Wissen und stehen auch im Text des Schritts.
• Setze kein erfundenes oder beliebiges Bild anstelle eines fehlenden echten ein: lasse den Platz reserviert.
• Jede Szene hat ihre eigene Illustration und ihre eigene Choreografie und ändert sich in jedem Schritt.
• Jede Präsentation hat ihre eigene, für das Thema entworfene Identität: ihre Welt, ihre Palette, ihre Schriftarten und ihre Haut. Die Palette, die Schriftarten und das Standard-Aussehen sind keine Wahl.
• Bearbeite niemals assets/ für eine bestimmte Präsentation: Der Betrachter und das Kit sind für alle gleich.