Animiertes Diagramm, direkt im Code erstellt
Drei Prompts ausgehend von einer leeren Seite: baue es, lass es nochmals prüfen, exportiere es.
Bevor du startest: Lies brand.md und MOTION.md, falls vorhanden. Wenn nicht, führe zuerst brand-intake aus, oder frage nach Hex-Codes, einer Schriftart und einer Logo-Datei. Bezeichne ein Ergebnis niemals als „on-brand“, ohne diese Informationen zu haben.
Schritt 1: Frage nach den Zahlen, dann warte
Der Titel, die Beschriftungen, die genauen Werte und ob es sich um echte Ergebnisse oder Beispieldaten handelt. Beispieldaten erhalten auf jedem Frame ein „Illustrative data“-Label. Runde niemals, formatiere nicht um und füge keine Zahl hinzu.
Prompt 1: baue es
Ich möchte eine animierte Grafik für einen LinkedIn-Beitrag. Baue sie als einzelne HTML-Datei, die ich im Browser öffnen kann.
Titel: „[TITEL]“. [Bei Beispieldaten: „Illustrative data“ sichtbar lassen.]
Werte: [LABEL 1: WERT 1], [LABEL 2: WERT 2], …
Die Bewegung hat vier Zustände:
1. Start: [wie es zuerst aussieht].
2. Veränderung: [das einzige, was sich bewegt]. Nichts blendet aus und wird ersetzt.
3. Halten: das fertige Diagramm, mit [dem headline-Wert] beschriftet.
4. Rückkehr: es gleitet sanft zurück zum Start, sodass die Schleife keinen Sprung hat.
Timing: insgesamt 8 Sekunden. Etwa 2 Sekunden für die Veränderung, 4 Sekunden Halten, 1,5 Sekunden Rückkehr.
Aussehen: Hintergrund [HINTERGRUND], Text [TEXT], Akzent [AKZENT], [SCHRIFTART]. Keine externen Schriftarten oder Bilder. Keine Verläufe, kein Glühen, kein Hüpfen.
Größe: 1080 × 1350 Pixel.
Regeln für den Bau:
- Berechne jeden Frame ausschließlich aus der Zeit. Füge window.seek(seconds) hinzu.
- Titel, Beschriftungen und Achse bewegen sich nie. Nur das Diagramm ändert sich.
- Der letzte Frame muss exakt dem ersten Frame entsprechen.
Nach dem Bau: Erstelle Screenshots bei 0, 1, 2, 4 und 7 Sekunden. Überprüfe sie auf überlappende Texte oder abgeschnittene Elemente. Behebe, was du findest, und teile mir mit, was du geändert hast.
Prompt 2: lass es nochmals prüfen
Untersuche die fünf aufgenommenen Frames und die Schleifengrenze. Prüfe, ob die Werte gleich bleiben, Beschriftungen lesbar sind, nichts überlappt und jedes Element nur dann erscheint, wenn es soll. Berichte ausschließlich Probleme, die du tatsächlich beobachtest. Behebe alle gefundenen Probleme, bewahre die frühere Version auf und nimm dieselben Frames erneut auf. Wenn keine Probleme gefunden werden, sage dies und erfinde keine Überarbeitung.
Prompt 3: exportiere es
Wandle dies nun in ein Video und ein GIF um, das ich posten kann. Verwende die Tools, die bereits auf diesem Computer installiert sind. Wenn du etwas benötigst, das nicht installiert ist, stoppe und teile mir mit, was es ist, bevor du etwas installierst. Gib mir ein MP4 (1080 × 1350, 8 Sekunden) und ein GIF, das sich endlos wiederholt. Zeige mir dann drei Frames aus dem fertigen GIF, damit ich überprüfen kann, dass es korrekt ist.