Bannerify może zamienić warstwy i bieżące czasy jednego baneru w ustrukturyzowany prompt dla ChatGPT, Claude, Gemini lub innego asystenta AI. Wklej zwrócony JSON do Bannerify, aby go zweryfikować i przejrzeć proponowane animacje wejścia, wyjścia i hover, zanim cokolwiek zastosujesz.

Kopiowanie promptu nie łączy Bannerify z żadną usługą AI ani nie zmienia osi czasu. To Ty decydujesz, gdzie go wkleić, a oś czasu zmienia się dopiero wtedy, gdy odpowiedź JSON przejdzie walidację i klikniesz Apply AI Timeline.

Tworzenie osi czasu z AI

1. Wczytaj ramki lub sekcje banerów do Bannerify.
2. Kliknij ikonę promptu Create AI Animation Timeline w nagłówku baneru, który chcesz animować.
3. Opisz oczekiwany kierunek. Podaj zamierzony nastrój, hierarchię wizualną, ważną kolejność warstw lub elementy, które mają pozostać subtelne.
4. Kliknij Copy AI Prompt.
5. Gdy Bannerify potwierdzi skopiowanie promptu, wklej go do wybranego asystenta AI i wyślij, nie usuwając dołączonych danych osi czasu ani reguł. Wygenerowany prompt trafia bezpośrednio do schowka i nie jest wyświetlany we wtyczce.
6. Skopiuj obiekt JSON z odpowiedzi AI.
7. Wróć do Bannerify i wklej odpowiedź w pole Paste and validate the JSON response. Bannerify automatycznie weryfikuje wklejony JSON, ale możesz też kliknąć Validate JSON.
8. Jeśli Bannerify zgłosi problem, kliknij Copy JSON Fix Prompt, wklej ten prompt do tej samej rozmowy z AI, a potem skopiuj i zweryfikuj poprawioną odpowiedź JSON.
9. Przejrzyj każdą proponowaną zmianę, w tym poprzednią i zalecaną animację oraz czasy.
10. Kliknij Apply AI Timeline, aby zaktualizować tylko ten baner. Jeśli wczytano więcej niż jeden baner, a ich struktura warstw jest spójna, kliknij zamiast tego Apply to All Matching Banners.

Podgląd od razu się aktualizuje, a Bannerify zapisuje nowe ustawienia animacji w warstwach Figmy.

Aby uzyskać lepsze wyniki, opisz kolejność oglądania, zamiast wymieniać nazwy presetów animacji. Na przykład: Najpierw pokaż nagłówek, wprowadź produkt z prawej strony, a potem odsłoń CTA. Utrzymaj ruch w umiarkowanym tempie i dodaj subtelny hover na CTA. Skopiowany prompt zawiera już obsługiwane nazwy animacji Bannerify.

Przeglądanie i cofanie wyniku

Panel przeglądu otwiera się w prawej kolumnie i pokazuje tylko ścieżki, które się zmienią. Jego lista warstw przewija się niezależnie, więc tytuł przeglądu i przyciski zastosowania pozostają dostępne. Każda zmieniona ścieżka porównuje bieżące ustawienia wejścia, wyjścia i hover ze zweryfikowaną rekomendacją dla danej warstwy.

Apply to All Matching Banners bezpiecznie wykorzystuje zweryfikowany plan we wszystkich banerach wczytanych obecnie do Bannerify. Baner pasuje tylko wtedy, gdy każdej edytowalnej warstwie źródłowej odpowiada dokładnie jedna warstwa o tej samej znormalizowanej nazwie, typie warstwy i położeniu w scenie sekcji, a baner ma ten sam tryb źródła i tę samą długość osi czasu. Przed zastosowaniem Bannerify sprawdza przeniesiony plan pod kątem zgodności animacji i okien czasowych danego baneru. Niejednoznaczne lub niezgodne banery są pomijane, a komunikat potwierdzenia podaje, ile banerów pasowało, a ile pominięto.

Zastosowanie osi czasu z AI tworzy jeden krok historii Bannerify, nawet gdy zmienia się kilka warstw lub pasujących banerów. Użyj przycisku Undo albo Command + Z w macOS / Ctrl + Z w Windows, aby przywrócić całą poprzednią oś czasu. Potem możesz ponowić ten sam plan AI albo wygenerować nowy. Wszystkie skróty i działanie historii opisuje artykuł Cofanie i ponawianie zmian na osi czasu.

Co Bannerify umieszcza w prompcie

Każdy skopiowany prompt zawiera informacje, których AI potrzebuje do utworzenia poprawnego planu:

• Tymczasowy identyfikator, taki jak L1, dla każdej edytowalnej warstwy na osi czasu
• Nazwy warstw, ich typy, kolejność w stosie i obwiednie
• Wymiary baneru i długość osi czasu
• Bieżące ustawienia wejścia, wyjścia i hover
• Dozwolone okno czasowe dla każdej warstwy lub sceny sekcji
• Zgodność z animacjami Split Text i SVG Draw
• Katalog obsługiwanych identyfikatorów animacji Bannerify, w tym zapisanych własnych animacji, których można użyć na ścieżkach wejścia lub wyjścia
• Twój opis kierunku animacji

Bannerify nie umieszcza w prompcie surowych identyfikatorów banerów ani warstw z Figmy, danych eksportowanych obrazów, kodu SVG ani innych bajtów zasobów warstw. Skopiowany prompt zawiera natomiast nazwy warstw oraz metadane układu i osi czasu, więc przejrzyj go przed udostępnieniem projektów z poufnymi nazwami lub strukturą.

Jak weryfikowany jest JSON

Bannerify weryfikuje całą odpowiedź, zanim zmieni jakąkolwiek warstwę. Sprawdza, czy:

• Odpowiedź używa bieżącego schematu osi czasu Bannerify i pasuje do skopiowanego promptu
• Każdy podany identyfikator warstwy występuje dokładnie raz
• Nie wymyślono nieznanych identyfikatorów warstw ani animacji
• Animacje Split Text i SVG Draw są użyte tylko na zgodnych warstwach
• Animacje wejścia i wyjścia mieszczą się w dozwolonym oknie osi czasu lub sceny danej warstwy
• Zakresy wejścia i wyjścia nie nachodzą na siebie
• Czasy trwania wynoszą co najmniej 0,1 sekundy
• Wartości czasu da się znormalizować do kroków osi czasu Bannerify wynoszących 0,1 sekundy

Pierwotny prompt prosi AI, aby przed odpowiedzią samo sprawdziło poprawność ścisłego JSON-a, i wprost wyklucza tekst opisowy, adresy URL, komentarze, końcowe przecinki oraz JSON zapisany wewnątrz innego ciągu znaków. Jeśli odpowiedź mimo to nie przejdzie walidacji, Copy JSON Fix Prompt tworzy nowy prompt z dokładnymi błędami, odrzuconą odpowiedzią i pierwotnymi, oczyszczonymi instrukcjami osi czasu, aby AI mogło ją poprawić bez zaczynania od nowa.

Jeśli po skopiowaniu promptu zmieni się oś czasu, ustawienia warstw, katalog własnych animacji lub czasy scen, Bannerify odrzuci starą odpowiedź. Kliknij Copy Fresh Prompt i zapytaj AI ponownie, aby plan opierał się na bieżącej osi czasu.

Format odpowiedzi JSON

Skopiowany prompt prosi AI o zwrócenie pojedynczego obiektu JSON w tym formacie:

{
  "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
    }
  ]
}

Każda wartość entry, exit lub hover może być:

• Obiektem animacji, który zastępuje tę ścieżkę
• null, aby usunąć jej animację
• "keep", aby pozostawić bieżącą wartość bez zmian

Nie edytuj pól schemaVersion, snapshotId, timelineSeconds, identyfikatorów warstw ani identyfikatorów animacji. Jeśli AI umieści odpowiedź w pojedynczym bloku kodu json, Bannerify nadal ją odczyta.

Praca ze scenami sekcji i animacjami specjalnymi

W przypadku banerów wczytanych z sekcji Figmy prompt zawiera bieżące okno czasowe każdej sceny. AI może zmieniać czasy warstw w tym oknie, ale nie może przenieść warstwy do innej sceny. Najpierw dostosuj czasy scen w Bannerify, a potem skopiuj nowy prompt, jeśli chcesz, aby AI uwzględniło nowe okno.

Animacje Split Text są dostępne tylko wtedy, gdy warstwa tekstowa się do nich kwalifikuje. Animacje SVG Draw są dostępne tylko dla zgodnych warstw SVG. Zapisane własne animacje z klatkami kluczowymi są uwzględniane jako opcje wejścia i wyjścia. Istniejące animacje spoza przekazanego AI katalogu można zachować, zwracając "keep" dla danej ścieżki.

Warstwy, których nazwa zaczyna się od locked-, są celowo pomijane. Jeśli brakuje zagnieżdżonej warstwy, rozwiń ją na osi czasu Bannerify, odśwież baner i skopiuj nowy prompt.

Rozwiązywanie problemów

Odpowiedź nie jest poprawnym JSON-em

Kliknij Copy JSON Fix Prompt w ostrzeżeniu o walidacji, wklej prompt do tej samej rozmowy z AI i wyślij go bez edytowania dołączonych błędów ani instrukcji osi czasu. Zastąp odrzuconą odpowiedź w Bannerify poprawionym JSON-em, a potem ponownie kliknij Validate JSON.

Odpowiedź informuje, że oś czasu się zmieniła

Prompt nie odpowiada już bieżącemu stanowi baneru. Kliknij Copy Fresh Prompt, zastąp poprzedni prompt w asystencie AI i użyj nowej odpowiedzi JSON.

Identyfikatora animacji nie ma w katalogu

Poproś AI, aby używało wyłącznie dokładnych identyfikatorów z animationCatalog podanych w skopiowanym prompcie. Nie zastępuj ich nazwą wyświetlaną i nie wymyślaj nowych nazw animacji.

Brakuje warstwy lub występuje dwukrotnie

Odpowiedź AI musi zawierać każdy podany layerRef dokładnie raz, nawet gdy wszystkie ścieżki tej warstwy mają wartość "keep".

Animacje wejścia i wyjścia nachodzą na siebie

Poproś AI, aby animacja wejścia kończyła się przed rozpoczęciem animacji wyjścia. Oba zakresy muszą też mieścić się w timeWindowSeconds danej warstwy.

JSON jest poprawny, ale nie pokazuje żadnych zmian

Odpowiedź zachowała bieżące wartości albo zaleciła ustawienia, które już są na osi czasu. Zmień opis kierunku i skopiuj nowy prompt, jeśli chcesz uzyskać inny wynik.

Przed eksportem zawsze obejrzyj podgląd całego baneru. Walidacja JSON potwierdza, że plan jest poprawny strukturalnie i zgodny z bieżącą osią czasu, ale efekt kreatywny nadal wymaga oceny wizualnej.