Hay una idea que me encanta repetir cuando alguien me dice “esto del diseño no es para mí”: no necesitas ser diseñador para tener una landing web animada que se vea pro. Y si eres ingeniero de software como yo, probablemente te va a sonar todavía más real.
La diferencia hoy en día es que con inteligencia artificial puedes hacer el trabajo repetitivo de inspiración, adaptación y generación de assets, y luego solo conectarlo en una web. El resultado es una página con estética cuidada, animaciones y un fondo animado en loop, sin pelearte con Figma ni con 20 capas de CSS desde cero.
En este artículo te dejo el método completo, tal como se aplica en una landing hecha con Google Antigravity, usando modelos de IA para texto, imagen y video, y cerrando con un par de trucos para que no se te rompa el diseño cuando la IA se equivoca.
La meta no es lograr “perfección” a la primera. La meta es que tengas un flujo repetible, con prompts claros, iteraciones rápidas y decisiones técnicas que mantienen la calidad.
Tabla de contenido
- ✨ La idea base: inspírate y replica, no “inventes desde cero”
- 🧱 Herramientas que vas a usar (y opciones equivalentes)
- 📸 Paso 1: toma una referencia y súbela como “screenshot guía”
- 🚀 Paso 2: usa Antigravity “solo con Flash” (y con prompts súper específicos)
- 🖼️ Paso 3: genera la imagen del elemento (la gorrita) con fondo negro
- 🎥 Paso 4: convierte la imagen en video y asegúrate de que sea loopable
- 🧩 Paso 5: usa el video como fondo en Antigravity
- 🟩 Paso 6 (trucos): tapa marcas de agua con un bloque negro
- ✅ Mini checklist para que tu landing animada salga bien
- 🧠 La mentalidad correcta: prompts como iteraciones, no como magia
- 🎁 ¿Qué puedes hacer después de tener la landing animada?
- 📌 Recomendaciones finales (para que no te frustres)
✨ La idea base: inspírate y replica, no “inventes desde cero”
La forma más rápida de lograr una landing atractiva es partir de algo que ya existe. No para copiar sin pensar, sino para acelerar el camino: tomas una referencia que te gusta, defines qué elementos quieres respetar y luego usas IA para adaptarla a tu estilo.
Para inspirarte, sirven mucho portafolios y galerías de diseño tipo Dribbble o páginas con secciones “Portfolio”. Ahí encuentras layouts llamativos, tipografías y composiciones que ya funcionan visualmente.
Yo hago esto:
- Elijo una landing o sección que me gusta.
- La tomo como referencia (idealmente con un screenshot).
- Pido a IA que genere lo que necesito, manteniendo lo importante (textos, ubicaciones, tipografías).
- Separo la generación por piezas: primero “maqueta el diseño”, luego genero la imagen del elemento (por ejemplo una gorrita), y finalmente creo un video en loop para usarlo como fondo o elemento animado.
Esto es lo que hace que sea “desde cero” en términos prácticos: tú no dominas todo el diseño, pero el flujo lo resuelves con prompts y etapas.
🧱 Herramientas que vas a usar (y opciones equivalentes)
En el ejemplo original se combinan tres piezas:
- Google Antigravity: para convertir una maqueta o instrucciones en una landing animada y lista para usar.
- Un generador de imágenes (en el ejemplo se probó con alternativas como ChatGPT y Nano Banana, y también se usa Gemini para tareas relacionadas).
- Un generador de video (en el ejemplo se usó Veo 3.1 y también se recomienda alternativas como Flow para mejorar la parte de loop).
El punto clave no es que uses exactamente esas herramientas. El punto es la metodología.
Aun así, para dejarte los links que se mencionan en la descripción del recurso:
- Comunidad (Skool) Círculo Builders / Vibe Coding: https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
- PrimeraApp.com (herramienta exclusiva para miembros): (acceso desde la comunidad)
- Hosting (Hostinger, enlace del autor): https://hostinger.com/rodrigo
- Playlist de maratón de videos: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
📸 Paso 1: toma una referencia y súbela como “screenshot guía”
El primer paso es simple: eliges el diseño que te gusta y sacas un screenshot de la sección donde está el layout.
En el ejemplo, el objetivo era replicar una landing animada con un detalle: una gorrita apareciendo y girando en un costado (como si fuera parte del diseño interactivo).
Truco rápido: intenta que el screenshot tenga buena proporción y que no te quede “recortado raro” por barras del navegador, porque eso luego afecta el aspect ratio que los modelos intentan respetar.
🚀 Paso 2: usa Antigravity “solo con Flash” (y con prompts súper específicos)
Ahora viene la parte que más sorprende: convertir la referencia en una landing animada sin ser diseñador.
En el ejemplo se creó un proyecto en Antigravity y se usó el modelo en modo Flash (más rápido y con menos fricción). La idea es que el proceso sea ágil, porque vas a iterar prompts varias veces.
El prompt para que IA extraiga el texto y respete el layout
Este es el corazón del método: pedirle a Antigravity que tome la referencia y genere el texto e incluso tipografías, ubicaciones y estructura, pero que elimine el elemento que no quieres (la gorra) para que quede el fondo negro.
Un prompt base (traducido a español y adaptado al contexto) sería algo como:
Quieres que de la imagen de referencia extraigas todo el texto, las mismas tipografías y la misma ubicación.
No extraigas la gorra.
Deja un fondo negro puro 100% negro sin gradientes.
Debe verse exactamente igual solo que sin la gorra.La clave aquí es que el prompt no es “general”. Es una lista de requisitos:
- qué sí extraer (texto, tipografías, ubicación)
- qué no extraer (la gorra)
- cómo debe verse el fondo (negro puro sin gradientes)
Cuando la IA no cumple: segunda vuelta con ajustes
Si sale algo distinto o no respeta el texto, no entres en pánico. En el ejemplo se hicieron iteraciones:
- Pedir que se acerque más a las fuentes usadas.
- Volver a exigir “mantén el texto” con tono más estricto.
- En caso de que cambie detalles menores, aceptar el resultado o ajustar otra capa.
La regla que uso es: primero consigue que el layout “tenga sentido”. Luego afinamos.
Tip adicional: ayudar a IA con HTML si quieres más control
Si notas que el modelo no está respetando la estructura o toma decisiones raras, puedes darle contexto adicional alimentándolo con código HTML. La idea es: si tú ya tienes parte del código y la IA “se pone creativa”, puedes recortar esa libertad.
No necesitas dominarlo todo. Solo ayuda a que la IA tenga más contexto y reduzcas cambios no deseados.
🖼️ Paso 3: genera la imagen del elemento (la gorrita) con fondo negro
Ya tienes el diseño base sin el elemento principal. Ahora generas la imagen del elemento que va animado.
En el ejemplo se probó con herramientas de generación de imágenes usando el screenshot como referencia. La petición fue casi la misma pero enfocada a generar únicamente la gorra.
Prompt base:
- “Solo mantén la gorra.”
- “Quita todo el texto exterior.”
- “Que quede en el centro con fondo negro.”
- Ojo con el aspect ratio horizontal: a veces los modelos lo hacen más “4:3” que “16:9”.
Una observación importante: a veces la IA agrega un efecto como glow amarillo. Si el estilo que quieres lo permite, perfecto. Si no, generas una segunda versión “sin glow” y guardas ambas para elegir.
🎥 Paso 4: convierte la imagen en video y asegúrate de que sea loopable
Aquí es donde muchas personas fallan. Hacen un video animado que se ve bien, pero no es loopable, entonces el “corte” entre frames se nota. Para una landing moderna, eso mata la sensación de calidad.
En el ejemplo se intentó con un generador de video (Veo 3.1) y luego se decidió que era mejor hacer el loop en una herramienta especializada como Flow.
¿Por qué?
- Porque el video debe moverse como “movimiento continuo”.
- Porque al exportar con la resolución correcta y en formato liviano, el peso baja y la carga sigue siendo rápida.
- Porque algunas herramientas permiten definir inicio y final como fotogramas, lo que mejora la continuidad.
El prompt para animar: que rote en el mismo lugar
La instrucción fue simple y directa:
- “Haz que la gorra rote en el mismo lugar.”
Eso reduce movimientos raros de posicionamiento. La IA a veces “bailotea” si el prompt no controla el comportamiento.
Loop con Flow: inicio y final en los fotogramas
La lógica que se aplicó es:
- Puedes pasar la imagen a Flow.
- Definir “imagen de inicio” y “imagen final” para que sea un loop.
- Generar un video corto que repita el movimiento.
Además, se ajustó la resolución para que al usarlo como fondo en la landing se vea bien y pese poco, manteniendo una carga rápida.
En el ejemplo se mencionó exportar y trabajar pensando en 720p como destino “ligero” para landing.
🧩 Paso 5: usa el video como fondo en Antigravity
Con el asset listo (video mp4 sin audio), lo integras en Antigravity como fondo del layout.
En el ejemplo se eligió:
- Full screen
- Sin audio
- Que sea 16:9 y que se use como fondo
Y aparece un detalle que parece menor pero es crítico: cómo se indica el modo “cobertura” (cover) vs “ajuste”. El autor comenta que “cubrir” puede confundirse: el video no debe “abarcar” de cualquier forma, sino quedar correctamente detrás de los elementos para que no se descuadre.
Si el fondo queda mal: no se asusta nadie (repite el ajuste)
En el caso mostrado, el primer intento salió feo. La solución fue volver a Antigravity y repetir la operación con el otro video o con los parámetros correctos.
La moraleja: el proceso es iterativo. No es una receta mágica de una sola ejecución.
Y si notas que el acento visual (por ejemplo un glow amarillo) se ve plano, tienes opciones.
🟩 Paso 6 (trucos): tapa marcas de agua con un bloque negro
Uno de los problemas típicos al generar imágenes y videos con IA es la marca de agua cuando no usas planes pro o cuando el sistema no elimina ese detalle en el output.
El truco mostrado fue bastante directo:
- Agregar una capa en el layout
- Ubicar un bloque negro exactamente encima de la esquina donde aparece la marca de agua
- Dejar que esa zona no se note, porque el fondo negro “la disimula”
El resultado fue que la marca quedaba tapada con un cuadrito negro, y el usuario no lo percibe como un error visual.
Este tipo de “bypass” no es solo para marcas de agua. También sirve para cubrir defectos de output de IA donde el elemento no queda perfecto, siempre que el fondo sea sólido y puedas integrar una máscara visual.
✅ Mini checklist para que tu landing animada salga bien
Si quieres que tu resultado se parezca al estilo que buscas, aquí tienes un checklist que resume el método.
Antes de generar
- Elige una referencia con composición clara.
- Genera un screenshot limpio (sin recortes raros).
- Define qué elementos deben mantenerse y cuáles deben eliminarse (por ejemplo, “no extraigas la gorra”).
Al generar texto y layout
- Pide explícitamente tipografías, ubicación y texto.
- Exige “fondo negro puro sin gradientes” si ese estilo es parte del diseño.
- Si falla, repite el prompt con ajustes (por ejemplo, “acércate a las fuentes usadas”).
Al generar imagen del elemento
- Pide “solo el elemento” (sin texto exterior).
- Controla el aspect ratio, porque a veces salen 4:3.
- Genera una versión con y sin glow si no estás seguro.
Al generar el video
- Prioriza que sea loopable (movimiento continuo).
- Evita videos con cortes evidentes.
- Exporta en resolución que mantenga buena calidad sin pesar demasiado (por ejemplo, orientado a 720p).
Al integrarlo en Antigravity
- Usa el video como fondo full screen y sin audio.
- Si se “descuadra”, repite con el video correcto o ajusta parámetros.
- Si hay marca de agua, usa un bloque negro para taparla en una esquina sobre fondo sólido.
🧠 La mentalidad correcta: prompts como iteraciones, no como magia
El método más importante no es el orden de herramientas. Es la forma de pensar.
Cuando usas IA, no esperes que el primer intento sea perfecto. Piensa en prompts como “comandos” que ajustas y vuelves a ejecutar.
En el ejemplo se ve claramente: se intenta con ChatGPT o Gemini para imagen, se genera video, se prueba en Antigravity y si el resultado está mal, se retrocede un paso y se reintenta con otro asset o con otro parámetro.
Eso hace que el workflow sea realista y aplicable para cualquier persona. Nadie sale perfecto a la primera, pero sí puedes llegar rápido a un resultado usable si repites el ciclo de:
- Generar con instrucciones claras
- Evaluar el resultado
- Iterar el prompt o el asset
- Integrar en el layout
🎁 ¿Qué puedes hacer después de tener la landing animada?
Una vez que logras que tu landing tenga un fondo animado en loop y un elemento protagonista (como la gorrita rotando), ya tienes un “pack” visual potente para:
- landing de producto
- portafolio moderno
- sitio de waitlist con estética premium
- presentación de app o servicio
Y lo mejor es que puedes escalar el método. Cambias el elemento (en vez de gorrita, un ícono, un personaje, un patrón) y mantienes el flujo general.
Si quieres recursos extra, en la comunidad se comparten herramientas y prompts relacionados con crear apps con IA, vibe coding y más. Puedes partir por aquí:
https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
📌 Recomendaciones finales (para que no te frustres)
- No te obsesiones con exactitud total en tipografías desde el primer intento. Busca primero consistencia de layout y estilo.
- Genera doble versión de assets donde puedas: imagen con y sin glow, video con distinto tipo de movimiento. Luego eliges.
- Prioriza loop en el video. Un loop malo se nota más que cualquier imperfección leve.
- Si aparece marca de agua, taparla es válido cuando el fondo es sólido y la composición lo permite.
Con este flujo, incluso si no eres diseñador, puedes lograr una landing animada que se vea moderna, con elementos que destacan y un fondo dinámico que eleva todo.
Y ahora sí: el siguiente paso es que tomes una referencia que te guste, apliques estos prompts y armes tu versión. La práctica hace que cada iteración sea más rápida y cada prompt más efectivo.
