Bannerify kann die Ebenen und aktuellen Timings eines Banners in einen strukturierten Prompt für ChatGPT, Claude, Gemini oder einen anderen KI-Assistenten umwandeln. Füge das zurückgegebene JSON in Bannerify ein, um die vorgeschlagenen Eingangs-, Ausgangs- und Hover-Animationen zu validieren und zu prüfen, bevor irgendetwas angewendet wird.

Beim Kopieren des Prompts kontaktiert Bannerify keinen KI-Dienst und ändert die Zeitleiste nicht. Du entscheidest, wo du den Prompt einfügst, und die Zeitleiste wird erst aktualisiert, wenn die JSON-Antwort die Validierung bestanden hat und du auf Apply AI Timeline klickst.

Eine KI-Zeitleiste erstellen

1. Lade deine Banner-Frames oder -Sections in Bannerify.
2. Klick im Kopfbereich des Banners, das du animieren willst, auf das Prompt-Symbol Create AI Animation Timeline.
3. Beschreib die gewünschte Richtung. Nenne die beabsichtigte Stimmung, die visuelle Hierarchie, eine wichtige Reihenfolge der Ebenen oder Elemente, die dezent bleiben sollen.
4. Klick auf Copy AI Prompt.
5. Sobald Bannerify bestätigt, dass der Prompt kopiert wurde, füge ihn in deinen bevorzugten KI-Assistenten ein und sende ihn ab, ohne die enthaltenen Zeitleistendaten oder Regeln zu entfernen. Der erzeugte Prompt wird direkt in deine Zwischenablage kopiert und nicht im Plugin angezeigt.
6. Kopiere das JSON-Objekt aus der Antwort der KI.
7. Geh zurück zu Bannerify und füge die Antwort in Paste and validate the JSON response ein. Bannerify validiert eingefügtes JSON automatisch, du kannst aber auch auf Validate JSON klicken.
8. Meldet Bannerify ein Problem, klick auf Copy JSON Fix Prompt, füge diesen Prompt in dieselbe KI-Unterhaltung ein und kopiere und validiere dann die korrigierte JSON-Antwort.
9. Prüfe jede vorgeschlagene Änderung, einschließlich der bisherigen und der empfohlenen Animation und des Timings.
10. Klick auf Apply AI Timeline, um nur dieses Banner zu aktualisieren. Hast du mehr als ein Banner geladen und ist ihre Ebenenstruktur einheitlich, klick stattdessen auf Apply to All Matching Banners.

Die Vorschau wird sofort aktualisiert, und Bannerify speichert die neuen Animationseinstellungen in den Figma-Ebenen.

Bessere Ergebnisse bekommst du, wenn du die Abfolge beim Betrachten beschreibst, statt Animations-Presets zu nennen. Zum Beispiel: Zeig zuerst die Überschrift, lass das Produkt von rechts hereinkommen und blende dann den CTA ein. Halte die Bewegung zurückhaltend und füge dem CTA einen dezenten Hover hinzu. Der kopierte Prompt liefert die unterstützten Animationsnamen von Bannerify bereits mit.

Das Ergebnis prüfen und rückgängig machen

Das Prüf-Panel öffnet sich in der rechten Spalte und zeigt nur die Spuren, die sich ändern. Die Ebenenliste scrollt unabhängig, sodass Titel und Anwenden-Buttons des Panels erreichbar bleiben. Jede geänderte Spur vergleicht die aktuellen Einstellungen für Eingang, Ausgang und Hover mit der validierten Empfehlung für die betroffene Ebene.

Apply to All Matching Banners überträgt den validierten Plan sicher auf die Banner, die gerade in Bannerify geladen sind. Ein Banner passt nur, wenn es für jede bearbeitbare Quellebene genau eine Ebene mit demselben normalisierten Namen, demselben Ebenentyp und derselben Szenenposition in der Section gibt und das Banner denselben Quellmodus und dieselbe Zeitleistenlänge nutzt. Bevor Bannerify den übertragenen Plan anwendet, validiert es ihn gegen die Animationskompatibilität und die Zeitfenster dieses Banners. Mehrdeutige oder inkompatible Banner werden übersprungen, und die Bestätigungsmeldung zeigt, wie viele Banner gepasst haben oder übersprungen wurden.

Das Anwenden einer KI-Zeitleiste erzeugt einen einzigen Schritt im Verlauf von Bannerify, auch wenn sich mehrere Ebenen oder passende Banner ändern. Mit dem Button Undo oder Command + Z unter macOS bzw. Ctrl + Z unter Windows stellst du die vollständige vorherige Zeitleiste wieder her. Danach kannst du denselben KI-Plan wiederholen oder einen neuen erzeugen. Alle Tastenkürzel und das Verhalten des Verlaufs findest du unter Änderungen an der Zeitleiste rückgängig machen und wiederholen.

Was Bannerify in den Prompt aufnimmt

Jeder kopierte Prompt enthält die Informationen, die die KI für einen gültigen Plan braucht:

• Eine temporäre Referenz wie L1 für jede bearbeitbare Ebene der Zeitleiste
• Namen, Typen, Stapelreihenfolge und Begrenzungen der Ebenen
• Die Maße des Banners und die Länge der Zeitleiste
• Die aktuellen Einstellungen für Eingang, Ausgang und Hover
• Das erlaubte Zeitfenster für jede Ebene oder Szene einer Section
• Die Kompatibilität mit Split Text und SVG Draw
• Einen Katalog der unterstützten Animations-IDs von Bannerify, einschließlich gespeicherter eigener Animationen, die für Eingangs- oder Ausgangsspuren nutzbar sind
• Deine Vorgaben für die Animation

Bannerify nimmt keine rohen Figma-IDs von Bannern oder Ebenen, keine exportierten Bilddaten, kein SVG-Markup und keine anderen Asset-Bytes von Ebenen auf. Der kopierte Prompt enthält aber Ebenennamen sowie Metadaten zu Layout und Zeitleiste. Prüfe ihn also, bevor du Designs mit vertraulichen Namen oder Strukturen teilst.

Wie das JSON validiert wird

Bannerify validiert die vollständige Antwort, bevor irgendeine Ebene geändert wird. Dabei wird geprüft, dass:

• die Antwort das aktuelle Zeitleisten-Schema von Bannerify nutzt und zum kopierten Prompt passt
• jede gelieferte Ebenenreferenz genau einmal vorkommt
• keine unbekannten Ebenenreferenzen oder Animations-IDs erfunden wurden
• Split-Text- und SVG-Draw-Animationen nur auf kompatiblen Ebenen genutzt werden
• Eingangs- und Ausgangsanimationen in das erlaubte Zeit- oder Szenenfenster der Ebene passen
• sich die Bereiche für Eingang und Ausgang nicht überschneiden
• die Dauer jeweils mindestens 0,1 Sekunden beträgt
• sich die Timing-Werte auf die 0,1-Sekunden-Schritte der Zeitleiste von Bannerify normalisieren lassen

Der ursprüngliche Prompt bittet die KI, striktes JSON vor dem Antworten selbst zu prüfen, und schließt Fließtext, URLs, Kommentare, nachgestellte Kommas und in einen anderen String verpacktes JSON ausdrücklich aus. Besteht die Antwort die Validierung trotzdem nicht, erstellt Copy JSON Fix Prompt einen neuen Prompt mit den genauen Fehlern, der abgelehnten Antwort und den ursprünglichen bereinigten Zeitleistenanweisungen, damit die KI die Antwort korrigieren kann, ohne neu anzufangen.

Ändern sich nach dem Kopieren eines Prompts die Zeitleiste, die Ebeneneinstellungen, der Katalog eigener Animationen oder das Timing der Szenen, lehnt Bannerify die alte Antwort ab. Klick auf Copy Fresh Prompt und frag die KI erneut, damit ihr Plan auf der aktuellen Zeitleiste beruht.

Format der JSON-Antwort

Der kopierte Prompt bittet die KI, ein einzelnes JSON-Objekt in diesem Format zurückzugeben:

{
  "schemaVersion": "bannerify.timeline-plan.v1",
  "snapshotId": "ai-example-snapshot",
  "timelineSeconds": 5,
  "layers": [
    {
      "layerRef": "L1",
      "entry": {
        "animationId": "fade-in-bottom",
        "startSeconds": 0.2,
        "durationSeconds": 0.6,
        "loop": false
      },
      "exit": {
        "animationId": "fade-out",
        "startSeconds": 4.3,
        "durationSeconds": 0.5,
        "loop": false
      },
      "hover": null
    }
  ]
}

Jeder Wert für entry, exit oder hover kann Folgendes sein:

• Ein Animationsobjekt, das diese Spur ersetzt
• null, um die Animation zu entfernen
• "keep", um den aktuellen Wert unverändert zu lassen

Bearbeite schemaVersion, snapshotId, timelineSeconds, die Ebenenreferenzen und die Animations-IDs nicht. Verpackt eine KI die Antwort in einen einzelnen json-Codeblock, kann Bannerify sie trotzdem lesen.

Mit Szenen aus Sections und besonderen Animationen arbeiten

Bei Bannern, die aus Figma-Sections geladen wurden, enthält der Prompt das aktuelle Zeitfenster jeder Szene. Die KI kann die Timings der Ebenen innerhalb dieses Fensters ändern, eine Ebene aber nicht in eine andere Szene verschieben. Pass das Timing der Szenen zuerst in Bannerify an und kopiere dann einen neuen Prompt, wenn die KI das neue Fenster nutzen soll.

Split-Text-Animationen sind nur verfügbar, wenn die Textebene dafür geeignet ist. SVG-Draw-Animationen gibt es nur für kompatible SVG-Ebenen. Gespeicherte eigene Keyframe-Animationen sind als Optionen für Eingang und Ausgang enthalten. Bestehende Animationen, die nicht im gelieferten KI-Katalog stehen, bleiben erhalten, wenn für diese Spur "keep" zurückgegeben wird.

Ebenen, deren Name mit locked- beginnt, werden absichtlich ausgelassen. Fehlt eine verschachtelte Ebene, klapp sie in die Zeitleiste von Bannerify aus, aktualisiere das Banner und kopiere einen neuen Prompt.

Fehlerbehebung

Die Antwort ist kein gültiges JSON

Klick in der Validierungswarnung auf Copy JSON Fix Prompt, füge den Prompt in dieselbe KI-Unterhaltung ein und sende ihn ab, ohne die enthaltenen Fehler oder Zeitleistenanweisungen zu bearbeiten. Ersetze die abgelehnte Antwort in Bannerify durch das korrigierte JSON und klick dann erneut auf Validate JSON.

Die Antwort meldet, dass sich die Zeitleiste geändert hat

Der Prompt beruht nicht mehr auf dem aktuellen Stand des Banners. Klick auf Copy Fresh Prompt, ersetze den vorherigen Prompt in deinem KI-Assistenten und nutze die neue JSON-Antwort.

Eine Animations-ID steht nicht im Katalog

Bitte die KI, ausschließlich die exakten animationCatalog-IDs aus dem kopierten Prompt zu nutzen. Ersetze sie nicht durch einen Anzeigenamen und erfinde keinen neuen Animationsnamen.

Eine Ebene fehlt oder ist doppelt

Die Antwort der KI muss jede gelieferte layerRef genau einmal enthalten, auch wenn alle Spuren dieser Ebene auf "keep" stehen.

Eingangs- und Ausgangsanimation überschneiden sich

Bitte die KI, den Eingang abzuschließen, bevor der Ausgang beginnt. Beide Bereiche müssen außerdem innerhalb von timeWindowSeconds der Ebene bleiben.

Das JSON ist gültig, zeigt aber keine Änderungen

Die Antwort hat die aktuellen Werte beibehalten oder die Einstellungen empfohlen, die bereits in der Zeitleiste stehen. Pass deine Vorgaben an und kopiere einen neuen Prompt, wenn du ein anderes Ergebnis willst.

Sieh dir vor dem Export immer das vollständige Banner in der Vorschau an. Die JSON-Validierung bestätigt, dass der Plan strukturell sicher und mit der aktuellen Zeitleiste kompatibel ist, aber das kreative Ergebnis braucht trotzdem eine visuelle Prüfung.