O Bannerify consegue transformar as camadas e os tempos atuais de um banner em um prompt estruturado para o ChatGPT, o Claude, o Gemini ou outro assistente de IA. Cole o JSON retornado no Bannerify para validar e revisar as animações de entrada, saída e hover propostas antes de aplicar qualquer coisa.

O Bannerify não se conecta a nenhum serviço de IA nem altera a linha do tempo quando você copia o prompt. Você escolhe onde colá-lo, e a linha do tempo só é atualizada depois que a resposta em JSON passa na validação e você clica em Apply AI Timeline.

Criar uma linha do tempo com IA

1. Carregue seus frames ou seções de banner no Bannerify.
2. Clique no ícone de prompt Create AI Animation Timeline no cabeçalho do banner que você quer animar.
3. Descreva a direção que você quer. Inclua o clima pretendido, a hierarquia visual, a ordem das camadas importantes ou os elementos que devem continuar sutis.
4. Clique em Copy AI Prompt.
5. Depois que o Bannerify confirmar que o prompt foi copiado, cole-o no seu assistente de IA preferido e envie sem remover os dados da linha do tempo nem as regras incluídas. O prompt gerado é copiado direto para a área de transferência, em vez de ser exibido no plugin.
6. Copie o objeto JSON da resposta da IA.
7. Volte ao Bannerify e cole a resposta em Paste and validate the JSON response. O Bannerify valida automaticamente o JSON colado, ou você pode clicar em Validate JSON.
8. Se o Bannerify indicar um problema, clique em Copy JSON Fix Prompt, cole esse prompt na mesma conversa com a IA e depois copie e valide a resposta em JSON corrigida.
9. Revise cada alteração proposta, incluindo a animação e o tempo anteriores e os recomendados.
10. Clique em Apply AI Timeline para atualizar apenas este banner. Se você carregou mais de um banner e a estrutura de camadas deles é consistente, clique em Apply to All Matching Banners.

A pré-visualização é atualizada na hora, e o Bannerify salva as novas configurações de animação nas camadas do Figma.

Para resultados mais úteis, descreva a sequência de leitura em vez de citar predefinições de animação. Por exemplo: Apresente primeiro o título, traga o produto pela direita e depois revele o CTA. Mantenha o movimento discreto e adicione um hover sutil no CTA. O prompt copiado já fornece os nomes das animações compatíveis do Bannerify.

Revisar e desfazer o resultado

O painel de revisão abre na coluna da direita e mostra apenas as faixas que vão mudar. A lista de camadas rola de forma independente, para que o título da revisão e os botões de aplicar continuem visíveis. Cada faixa alterada compara as configurações atuais de entrada, saída e hover com a recomendação validada para a camada afetada.

Apply to All Matching Banners reutiliza com segurança o plano validado nos banners carregados no Bannerify no momento. Um banner só corresponde quando cada camada de origem editável tem uma única camada com o mesmo nome normalizado, o mesmo tipo de camada e a mesma posição de cena da seção, e quando o banner usa o mesmo modo de origem e a mesma duração da linha do tempo. Antes de aplicar, o Bannerify valida o plano remapeado em relação à compatibilidade de animação e às janelas de tempo desse banner. Banners ambíguos ou incompatíveis são ignorados, e a mensagem de confirmação informa quantos banners corresponderam ou foram ignorados.

Aplicar uma linha do tempo com IA cria uma única etapa no histórico do Bannerify, mesmo quando várias camadas ou banners correspondentes mudam. Use o botão Undo ou Command + Z no macOS / Ctrl + Z no Windows para restaurar toda a linha do tempo anterior. Depois, você pode refazer o mesmo plano da IA ou gerar um novo. Veja Desfazer e refazer alterações na linha do tempo para conhecer todos os atalhos e o comportamento do histórico.

O que o Bannerify inclui no prompt

Cada prompt copiado contém as informações de que a IA precisa para criar um plano válido:

• Uma referência temporária, como L1, para cada camada editável da linha do tempo
• Nomes, tipos, ordem de empilhamento e limites das camadas
• As dimensões do banner e a duração da linha do tempo
• As configurações atuais de entrada, saída e hover
• A janela de tempo permitida para cada camada ou cena da seção
• A compatibilidade com Split Text e SVG Draw
• Um catálogo dos IDs de animação compatíveis do Bannerify, incluindo as animações personalizadas salvas que podem ser usadas nas faixas de entrada ou saída
• A direção de animação que você descreveu

O Bannerify não inclui os IDs brutos de banners ou camadas do Figma, dados de imagens exportadas, marcação SVG nem outros bytes de recursos das camadas. O prompt copiado inclui os nomes das camadas e os metadados de layout e da linha do tempo, então revise-o antes de compartilhar designs com nomes ou estruturas confidenciais.

Como o JSON é validado

O Bannerify valida a resposta completa antes de alterar qualquer camada. Ele verifica se:

• A resposta usa o esquema atual de linha do tempo do Bannerify e corresponde ao prompt copiado
• Cada referência de camada fornecida aparece exatamente uma vez
• Nenhuma referência de camada ou ID de animação desconhecido foi inventado
• As animações Split Text e SVG Draw são usadas apenas em camadas compatíveis
• As animações de entrada e saída cabem dentro da janela de tempo ou da cena permitida para a camada
• Os intervalos de entrada e saída não se sobrepõem
• As durações são de pelo menos 0,1 segundo
• Os valores de tempo podem ser normalizados para os incrementos de 0,1 segundo da linha do tempo do Bannerify

O prompt original pede à IA que confira se o JSON é estrito antes de responder e exclui explicitamente texto corrido, URLs, comentários, vírgulas finais e JSON dentro de outra string. Se a resposta ainda assim falhar na validação, Copy JSON Fix Prompt cria um novo prompt com os erros exatos, a resposta rejeitada e as instruções originais e sanitizadas da linha do tempo, para que a IA possa corrigi-la sem começar de novo.

Se a linha do tempo, as configurações das camadas, o catálogo de animações personalizadas ou o tempo das cenas mudar depois que você copiar um prompt, o Bannerify rejeita a resposta antiga. Clique em Copy Fresh Prompt e peça de novo à IA, para que o plano se baseie na linha do tempo atual.

Formato da resposta em JSON

O prompt copiado pede à IA que retorne um único objeto JSON neste formato:

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

Cada valor de entry, exit ou hover pode ser:

• Um objeto de animação, para substituir essa faixa
• null, para remover a animação
• "keep", para manter o valor atual sem alterações

Não edite schemaVersion, snapshotId, timelineSeconds, as referências de camada nem os IDs de animação. Se uma IA colocar a resposta dentro de um único bloco de código json, o Bannerify ainda consegue lê-la.

Trabalhar com cenas de seção e animações especiais

Nos banners carregados a partir de seções do Figma, o prompt contém a janela de tempo atual de cada cena. A IA pode alterar os tempos das camadas dentro dessa janela, mas não pode mover uma camada para outra cena. Ajuste primeiro o tempo da cena no Bannerify e depois copie um novo prompt se quiser que a IA use a nova janela.

As animações Split Text só ficam disponíveis quando a camada de texto é elegível. As animações SVG Draw só ficam disponíveis para camadas SVG compatíveis. As animações de keyframes personalizadas salvas são incluídas como opções de entrada e saída. Animações existentes que não estão no catálogo fornecido à IA ainda podem ser mantidas se a faixa retornar "keep".

Camadas que começam com locked- são omitidas de propósito. Se faltar uma camada aninhada, expanda-a na linha do tempo do Bannerify, atualize o banner e copie um novo prompt.

Solução de problemas

A resposta não é um JSON válido

Clique em Copy JSON Fix Prompt no aviso de validação, cole o prompt na mesma conversa com a IA e envie sem editar os erros nem as instruções da linha do tempo incluídas. Substitua a resposta rejeitada no Bannerify pelo JSON corrigido e clique em Validate JSON de novo.

A resposta diz que a linha do tempo mudou

O prompt não reflete mais o estado atual do banner. Clique em Copy Fresh Prompt, substitua o prompt anterior no seu assistente de IA e use a nova resposta em JSON.

Um ID de animação não está no catálogo

Peça à IA que use apenas os IDs exatos de animationCatalog fornecidos no prompt copiado. Não use um nome de exibição no lugar do ID nem invente um novo nome de animação.

Uma camada está faltando ou duplicada

A resposta da IA precisa incluir cada layerRef fornecido exatamente uma vez, mesmo quando todas as faixas dessa camada estiverem definidas como "keep".

As animações de entrada e saída se sobrepõem

Peça à IA que termine a entrada antes de a saída começar. Os dois intervalos também precisam ficar dentro do timeWindowSeconds dessa camada.

O JSON é válido, mas não mostra alterações

A resposta manteve os valores atuais ou recomendou as configurações que já estão na linha do tempo. Ajuste a direção e copie um novo prompt se quiser um resultado diferente.

Sempre visualize o banner completo antes de exportar. A validação do JSON confirma que o plano é estruturalmente seguro e compatível com a linha do tempo atual, mas o resultado criativo ainda precisa de uma revisão visual.