Bannerify puede convertir las capas y los tiempos actuales de un banner en un prompt estructurado para ChatGPT, Claude, Gemini u otro asistente de IA. Pega el JSON que te devuelva en Bannerify para validar y revisar las animaciones de entrada, salida y hover propuestas antes de aplicar nada.

Bannerify no se conecta a ningún servicio de IA ni cambia la línea de tiempo cuando copias el prompt. Tú eliges dónde pegarlo, y la línea de tiempo solo se actualiza cuando la respuesta JSON supera la validación y haces clic en Apply AI Timeline.

Crear una línea de tiempo con IA

1. Carga los frames o las secciones de tus banners en Bannerify.
2. Haz clic en el icono de prompt Create AI Animation Timeline en la cabecera del banner que quieres animar.
3. Describe el enfoque que buscas. Incluye el tono, la jerarquía visual, el orden importante de las capas o los elementos que deben ser sutiles.
4. Haz clic en Copy AI Prompt.
5. Cuando Bannerify confirme que se ha copiado el prompt, pégalo en tu asistente de IA y envíalo sin quitar los datos ni las reglas de la línea de tiempo que incluye. El prompt generado se copia directamente en el portapapeles en lugar de mostrarse en el plugin.
6. Copia el objeto JSON de la respuesta de la IA.
7. Vuelve a Bannerify y pega la respuesta en Paste and validate the JSON response. Bannerify valida automáticamente el JSON pegado, aunque también puedes hacer clic en Validate JSON.
8. Si Bannerify indica algún problema, haz clic en Copy JSON Fix Prompt, pega ese prompt en la misma conversación con la IA y después copia y valida la respuesta JSON corregida.
9. Revisa cada cambio propuesto, incluidas la animación y los tiempos anteriores y los recomendados.
10. Haz clic en Apply AI Timeline para actualizar solo este banner. Si has cargado más de un banner y su estructura de capas es coherente, haz clic en Apply to All Matching Banners.

La vista previa se actualiza al instante y Bannerify guarda los nuevos ajustes de animación en las capas de Figma.

Para obtener mejores resultados, describe el orden en que se debe ver el banner en lugar de nombrar ajustes predefinidos de animación. Por ejemplo: Presenta primero el titular, haz entrar el producto por la derecha y después muestra el CTA. Mantén un movimiento contenido y añade un hover sutil al CTA. El prompt copiado ya incluye los nombres de las animaciones compatibles de Bannerify.

Revisar y deshacer el resultado

El panel de revisión se abre en la columna derecha y muestra solo las pistas que van a cambiar. Su lista de capas se desplaza de forma independiente, así que el título de la revisión y los botones para aplicar siguen a mano. Cada pista modificada compara los ajustes actuales de entrada, salida y hover con la recomendación validada para la capa afectada.

Apply to All Matching Banners reutiliza con seguridad el plan validado en los banners cargados en ese momento en Bannerify. Un banner solo coincide cuando cada capa de origen editable tiene una única capa con el mismo nombre normalizado, el mismo tipo de capa y la misma posición de escena de sección, y el banner usa el mismo modo de origen y la misma duración de línea de tiempo. Antes de aplicarlo, Bannerify valida el plan reasignado según la compatibilidad de animaciones y las ventanas de tiempo de ese banner. Los banners ambiguos o incompatibles se omiten, y el mensaje de confirmación indica cuántos banners han coincidido o se han omitido.

Aplicar una línea de tiempo con IA crea un único paso en el historial de Bannerify, aunque cambien varias capas o varios banners coincidentes. Usa el botón Undo o Command + Z en macOS / Ctrl + Z en Windows para recuperar toda la línea de tiempo anterior. Después puedes rehacer el mismo plan de IA o generar uno nuevo. Consulta Deshacer y rehacer cambios en la línea de tiempo para ver todos los atajos y cómo funciona el historial.

Qué incluye Bannerify en el prompt

Cada prompt copiado contiene la información que necesita la IA para crear un plan válido:

• Una referencia temporal, como L1, para cada capa editable de la línea de tiempo
• Los nombres, tipos, orden de apilamiento y límites de las capas
• Las dimensiones del banner y la duración de la línea de tiempo
• Los ajustes actuales de entrada, salida y hover
• La ventana de tiempo permitida para cada capa o escena de sección
• La compatibilidad con Split Text y SVG Draw
• Un catálogo de los ID de animación compatibles de Bannerify, incluidas las animaciones personalizadas guardadas que se pueden usar en las pistas de entrada o salida
• El enfoque que buscas para la animación

Bannerify no incluye los ID internos de los banners o capas de Figma, los datos de imágenes exportadas, el marcado SVG ni otros bytes de los recursos de las capas. El prompt copiado sí incluye los nombres de las capas y los metadatos de maquetación y línea de tiempo, así que revísalo antes de compartir diseños con nombres o estructuras confidenciales.

Cómo se valida el JSON

Bannerify valida la respuesta completa antes de cambiar ninguna capa. Comprueba que:

• La respuesta usa el esquema de línea de tiempo actual de Bannerify y corresponde al prompt copiado
• Cada referencia de capa aportada aparece exactamente una vez
• No se han inventado referencias de capa ni ID de animación desconocidos
• Las animaciones Split Text y SVG Draw solo se usan en capas compatibles
• Las animaciones de entrada y salida caben dentro de la ventana de línea de tiempo o de escena permitida para la capa
• Los rangos de entrada y salida no se solapan
• Las duraciones son de al menos 0,1 segundos
• Los valores de tiempo se pueden normalizar a los incrementos de 0,1 segundos de la línea de tiempo de Bannerify

El prompt original pide a la IA que compruebe que el JSON es estricto antes de responder y excluye expresamente el texto en prosa, las URL, los comentarios, las comas finales y el JSON metido dentro de otra cadena. Si la respuesta sigue sin superar la validación, Copy JSON Fix Prompt crea un nuevo prompt con los errores exactos, la respuesta rechazada y las instrucciones originales saneadas de la línea de tiempo, para que la IA pueda corregirla sin empezar de cero.

Si la línea de tiempo, los ajustes de capa, el catálogo de animaciones personalizadas o los tiempos de las escenas cambian después de copiar un prompt, Bannerify rechaza la respuesta antigua. Haz clic en Copy Fresh Prompt y vuelve a preguntar a la IA para que su plan se base en la línea de tiempo actual.

Formato de la respuesta JSON

El prompt copiado pide a la IA que devuelva un único objeto JSON con este 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 entry, exit o hover puede ser:

• Un objeto de animación para sustituir esa pista
• null para quitar su animación
• "keep" para dejar su valor actual sin cambios

No edites schemaVersion, snapshotId, timelineSeconds, las referencias de capa ni los ID de animación. Si una IA envuelve la respuesta en un único bloque de código json, Bannerify puede leerla igualmente.

Trabajar con escenas de sección y animaciones especiales

En los banners cargados desde secciones de Figma, el prompt contiene la ventana de tiempo actual de cada escena. La IA puede cambiar los tiempos de las capas dentro de esa ventana, pero no puede mover una capa a otra escena. Si quieres que la IA use una ventana nueva, ajusta primero los tiempos de la escena en Bannerify y luego copia un prompt nuevo.

Las animaciones Split Text solo están disponibles cuando la capa de texto es apta. Las animaciones SVG Draw solo están disponibles para capas SVG compatibles. Las animaciones personalizadas con fotogramas clave guardadas se incluyen como opciones de entrada y salida. Las animaciones existentes que no estén en el catálogo de IA aportado se pueden conservar devolviendo "keep" para esa pista.

Las capas que empiezan por locked- se omiten a propósito. Si falta una capa anidada, despliégala en la línea de tiempo de Bannerify, actualiza el banner y copia un prompt nuevo.

Solución de problemas

La respuesta no es un JSON válido

Haz clic en Copy JSON Fix Prompt en el aviso de validación, pégalo en la misma conversación con la IA y envíalo sin editar los errores ni las instrucciones de la línea de tiempo que incluye. Sustituye en Bannerify la respuesta rechazada por el JSON corregido y vuelve a hacer clic en Validate JSON.

La respuesta dice que la línea de tiempo ha cambiado

El prompt ya no se basa en el estado actual del banner. Haz clic en Copy Fresh Prompt, sustituye el prompt anterior en tu asistente de IA y usa su nueva respuesta JSON.

Un ID de animación no está en el catálogo

Pide a la IA que use solo los ID exactos de animationCatalog que aparecen en el prompt copiado. No los sustituyas por un nombre visible ni inventes un nombre de animación nuevo.

Falta una capa o está duplicada

La respuesta de la IA debe incluir cada layerRef aportado exactamente una vez, aunque todas las pistas de esa capa estén en "keep".

Las animaciones de entrada y salida se solapan

Pide a la IA que termine la entrada antes de que empiece la salida. Además, ambos rangos deben quedar dentro del timeWindowSeconds de esa capa.

El JSON es válido pero no muestra cambios

La respuesta ha conservado los valores actuales o ha recomendado los ajustes que ya tiene la línea de tiempo. Cambia el enfoque y copia un prompt nuevo si quieres un resultado distinto.

Previsualiza siempre el banner completo antes de exportarlo. La validación del JSON confirma que el plan es estructuralmente seguro y compatible con la línea de tiempo actual, pero el resultado creativo sigue necesitando una revisión visual.