Una web premium no nace necesariamente de un documento de estrategia de cincuenta páginas, un equipo enorme ni una colección interminable de recursos. En este proyecto partí con una carpeta vacía, una única imagen publicitaria como referencia y una intención bastante clara: crear la presencia digital de una marca de vinos chilenos que llega al mercado brasileño.
La idea era probar hasta dónde podía llegar Codex usando GPT 5.6 Sol. No quería una página genérica con tres tarjetas, textos de relleno y fotografías que parecen tomadas de proyectos distintos. Quería una marca con dirección visual, una historia, una colección de vinos, interacción, una animación elegante y contenido en portugués de Brasil.
El resultado fue Altura, una propuesta de viñedo chileno con una estética oscura, cinematográfica y editorial. Después convertí la imagen principal en video con Genspark y Veo 3.1, integré el resultado mediante Cloudinary, publiqué la web en Hostinger, añadí un selector de idiomas y preparé el correo de entrega para el cliente.
Tabla de contenidos
- 🍷 El punto de partida: una imagen, una intención y una carpeta vacía
- 🧠 Un prompt corto, pero con suficiente dirección
- 🏔️ La identidad de marca: por qué Altura funcionó
- 🌄 Las tres secciones que convirtieron una web en una historia
- 🎨 La consistencia visual no depende de usar fotos genéricas
- 🎬 Cómo animar una cabecera sin destruir la composición
- ✨ Generar el video con Genspark y Veo 3.1
- ☁️ Integrar y optimizar el video con Cloudinary
- 📱 Publicar la primera versión y añadir dos idiomas
- ✉️ Entregar una primera versión que invite a dar feedback
- 🛠️ El flujo completo para crear una web animada premium con IA
- 🚀 Qué demuestra este proceso
🍷 El punto de partida: una imagen, una intención y una carpeta vacía
La referencia inicial tenía varios elementos muy potentes: una botella de vino tinto, un barril oscuro, vino moviéndose alrededor de la escena, una iluminación dramática y la cordillera al fondo. Era una imagen vertical pensada como pieza publicitaria, no como diseño web.
Ese detalle es importante. Copiar una imagen vertical y estirarla como fondo de una cabecera suele producir resultados pobres. La composición pierde intención, el contenido se vuelve difícil de leer y la web termina pareciendo una campaña pegada dentro de un navegador.
La tarea real era conservar la esencia de la referencia, pero reinterpretarla en horizontal. La botella debía seguir siendo el foco principal. El barril debía aportar un fondo oscuro para que el texto blanco pudiera leerse. El vino debía insinuar energía y profundidad. Y la cordillera tenía que conectar de inmediato con el origen chileno de la marca.
Antes de empezar, preparé una carpeta vacía y la abrí en Codex. En lugar de comenzar escribiendo código manualmente, inicié una conversación nueva con GPT 5.6 Sol y utilicé un skill reutilizable para crear webs premium.
Este tipo de skill reúne instrucciones de dirección de arte, composición, jerarquía visual, tipografía, interacción y estructura. Su función es evitar que el modelo caiga en los patrones típicos de una página producida por inteligencia artificial: bloques repetidos, gradientes sin intención, tarjetas por todas partes y textos que podrían pertenecer a cualquier empresa.
Una de las ideas más útiles de este flujo es que no hace falta repetir las mismas instrucciones extensas en cada proyecto. Si ya tienes una forma de trabajar que te da buenos resultados, puedes pedirle a Codex que la organice como un skill personalizado y reutilizable.
Los pasos y el prompt base utilizados para este proceso están disponibles en esta guía de prompts y pasos.
🧠 Un prompt corto, pero con suficiente dirección
El prompt inicial fue deliberadamente simple. La instrucción pedía crear una web para un viñedo de Chile, escribir todo el copy en portugués de Brasil, usar la imagen adjunta como referencia para la sección principal sin hacerla demasiado alta, construir todo en un solo archivo y agregar tres secciones nuevas con libertad creativa.
También se especificó el contexto comercial: se trataba de una marca de vinos chilenos que estaba entrando a Brasil.
No indiqué el nombre de la marca. No definí las tres secciones. No escribí los títulos, la estructura ni el contenido de cada bloque. Esa libertad era parte de la prueba. Quería comprobar si el modelo podía entender la intención visual y desarrollar una historia coherente a partir de muy poca información.
Dar libertad no significa dejar todo al azar. El prompt ya contenía las restricciones importantes:
- Origen y mercado: vino chileno para Brasil.
- Idioma: portugués brasileño.
- Referencia visual: botella, barril, cordillera, vino y una atmósfera cinematográfica.
- Formato: una cabecera horizontal, no una adaptación literal de una imagen vertical.
- Alcance: una landing completa con tres secciones adicionales.
- Implementación: un proyecto funcional, no solamente ideas o fragmentos de código.
El valor de esta forma de trabajar está en que Codex no se limita a responder con una sugerencia. Trabaja dentro del proyecto: revisa la carpeta, prepara archivos, construye la interfaz, genera recursos, aplica cambios y mantiene la continuidad entre cada iteración.
🏔️ La identidad de marca: por qué Altura funcionó
Uno de los primeros aciertos fue el nombre que apareció para la marca: Altura. Es un nombre simple, elegante y directamente conectado con Chile, los Andes y el imaginario de un vino producido en altura.
Ese nombre ayudó a unificar todo lo que vino después. La marca no necesitaba explicarse demasiado. La cordillera, la botella oscura, la tipografía refinada, el contraste entre negro, vino tinto y tonos claros ya empezaban a contar una historia consistente.
Codex no tomó la referencia y la replicó de manera literal. Conservó el barril circular, la botella y el movimiento del vino, pero reorganizó los elementos para que la página tuviera sentido como experiencia horizontal.
El resultado de la cabecera fue una composición clara:
- Texto principal y llamadas a la acción a la izquierda.
- Botella de Altura a la derecha.
- Barril oscuro detrás del texto para asegurar contraste y legibilidad.
- Cordillera visible detrás de la botella para reforzar el origen.
- Vino en movimiento como elemento visual que enmarca la composición.
La cabecera además respetó una restricción importante: no ser excesivamente alta. Una sección principal enorme puede verse espectacular en una captura, pero suele retrasar el acceso al contenido útil. Aquí se mantuvo una proporción más equilibrada, con impacto visual sin convertir la página en un póster vertical.
🌄 Las tres secciones que convirtieron una web en una historia
Una landing premium no debería ser una suma de secciones desconectadas. Tiene que llevar a la persona desde una primera impresión hasta una comprensión clara de la propuesta. En Altura, las tres secciones adicionales hicieron precisamente eso: origen, colección y conexión cultural.
El origen: Valle del Maipo y cordillera
Después de la cabecera oscura, la web cambia hacia un fondo claro. Aparece una fotografía amplia de viñedos con la cordillera de los Andes al fondo y un bloque editorial de texto sobre el lugar de origen.
El cambio de fondo es útil porque crea respiración visual. Después de una entrada intensa, oscura y cinematográfica, la sección del viñedo abre espacio, luz y paisaje. Además, evita una solución demasiado común: llenar la página con cajas de características tipo “calidad”, “tradición” y “sabor” sin contar nada concreto.
En vez de enumerar atributos vacíos, esta sección conecta el producto con el territorio. La cordillera deja de ser solamente un fondo bonito y se convierte en parte de la identidad del vino.
La colección: tres vinos, una composición editorial
La siguiente sección presenta tres variedades: Cabernet Sauvignon, Carménère y Sauvignon Blanc. Lo interesante es que no se resolvió como la típica cuadrícula de tres tarjetas idénticas.
Las botellas ocupan una parte importante de la composición y el contenido se actualiza al seleccionar cada variedad. Cambian el nombre, el año y la descripción del vino. Esa interacción hace que la colección se sienta como una experiencia de producto y no como una ficha estática.
Este tipo de detalle importa. Una interacción pequeña, bien integrada, puede aportar mucho más valor que añadir animaciones decorativas por todas partes. En este caso, la prioridad siguió siendo la jerarquía editorial, las botellas y la legibilidad.
Del Chile para la mesa brasileña
La última sección resolvió muy bien el contexto de negocio. Si la marca está llegando a Brasil, no basta con hablar del origen chileno. También hay que construir un puente con la mesa brasileña.
La propuesta conectó cada variedad con platos conocidos:
- Cabernet Sauvignon con costela.
- Carménère con moqueca.
- Sauvignon Blanc con peixe na brasa.
El título, en portugués, plantea la idea de llevar Chile a la mesa brasileña. Es una decisión simple, pero estratégica. La marca conserva su origen sin aparecer como algo distante o ajeno al nuevo mercado.
En conjunto, las cuatro secciones cuentan una historia lógica:
- Una primera impresión potente y aspiracional.
- El origen geográfico del producto.
- La colección de vinos y sus diferencias.
- La relación de la marca con el mercado brasileño.
🎨 La consistencia visual no depende de usar fotos genéricas
Uno de los problemas más frecuentes en proyectos rápidos es que cada sección termina con una imagen de un banco distinto. La primera fotografía tiene una luz fría, la segunda es cálida, la tercera parece editorial y la cuarta parece una imagen corporativa. Aunque el código esté bien hecho, la marca se siente fragmentada.
En este caso, Codex generó recursos específicos para cada parte: una imagen para la cabecera, una para el Valle del Maipo, otra para la colección de botellas y una última para la mesa brasileña.
Eso permitió mantener una identidad común entre imágenes, colores, tipografía y copy. Cada elemento parecía pertenecer a Altura. Y ese punto es clave: una web premium no se define solo por tener fondos oscuros o una tipografía elegante. Se define por la coherencia entre todas sus decisiones.
Si quieres profundizar en esta forma de construir experiencias visuales con IA, puedes encontrar más ejemplos en la playlist sobre webs animadas premium con IA.
🎬 Cómo animar una cabecera sin destruir la composición
La versión estática ya funcionaba, pero había una mejora evidente: hacer que el vino tuviera movimiento. La dificultad era animar la escena sin perder aquello que hacía legible y elegante la cabecera.
No quería una botella deformándose, una cámara haciendo zooms agresivos ni elementos cruzando el texto. La botella debía permanecer estable. La etiqueta tenía que seguir siendo legible. El barril debía continuar oscuro detrás de la tipografía blanca. El movimiento tenía que darle vida a la escena, no convertirla en una animación exagerada.
Para eso, volví a Codex y le pedí que preparara las instrucciones para animar la imagen. El prompt final incluía una dirección muy concreta:
- Movimiento cinematográfico lento hacia la botella Altura.
- Vino fluyendo suavemente alrededor, con salpicaduras realistas.
- Niebla de los Andes desplazándose de manera sutil.
- Botella y etiqueta totalmente estables y legibles.
- Estética premium, oscura y elegante.
- Formato 16:9.
- Duración de seis a ocho segundos.
- Sin texto nuevo, deformaciones ni movimientos bruscos.
- Regreso suave a la posición inicial para crear un loop continuo.
La instrucción de volver al punto inicial es especialmente importante. En una cabecera que se reproduce automáticamente, un corte abrupto al reiniciar puede romper por completo la sensación de calidad. Un loop bien planteado permite que el movimiento se repita sin llamar la atención sobre el reinicio.
✨ Generar el video con Genspark y Veo 3.1
Con las instrucciones listas, llevé la imagen de la cabecera a la herramienta de video de Genspark y seleccioné el modelo Veo 3.1. Allí subí la imagen, pegué el prompt de animación y generé el resultado.
La clave estaba en la sutileza. El vino se mueve alrededor de la botella, el entorno gana vida y la atmósfera se vuelve más cinematográfica. Pero la botella sigue siendo el centro de atención, el texto mantiene contraste y la etiqueta Altura no cambia ni incorpora palabras extrañas.
Esta es una buena forma de usar video generado por IA en una web: no como un truco visual aislado, sino como una capa de movimiento que protege la composición original. Cuando la animación compite con el mensaje, pierde valor. Cuando la acompaña, eleva todo el diseño.
☁️ Integrar y optimizar el video con Cloudinary
Después de descargar el video generado, lo subí a Cloudinary para obtener una URL directa al archivo MP4. Luego bastó con volver a Codex y darle una instrucción muy simple: reemplazar la imagen principal por el video alojado en Cloudinary.
Codex actualizó la cabecera para que el video comenzara automáticamente, se reprodujera sin sonido y volviera a empezar de manera continua. La imagen anterior quedó configurada como imagen de carga, lo que ayuda a mantener la identidad visual mientras el video todavía no está listo.
Para el primer resultado utilicé la URL entregada por Cloudinary sin transformaciones adicionales. Sin embargo, en un proyecto real siempre conviene revisar el peso del video. Una cabecera muy pesada puede arruinar la experiencia, especialmente en conexiones móviles.
Cloudinary permite optimizar el recurso directamente desde la URL. Una configuración equilibrada entre calidad y peso es:
q_auto:good,f_auto,c_limit,w_1600Estos parámetros solicitan calidad automática, formato adecuado según el navegador y un límite de ancho de 1600 píxeles. Puedes revisar un ejemplo de URL optimizada de Cloudinary y consultar la documentación oficial sobre optimización de video para adaptar la entrega a cada proyecto.
La lección aquí es sencilla: el video puede mejorar muchísimo una web premium, pero debe estar pensado para la web. Calidad visual y rendimiento no son objetivos opuestos. Hay que diseñar para ambos.
📱 Publicar la primera versión y añadir dos idiomas
Con la web terminada, el siguiente paso fue publicarla para tener un enlace que pudiera compartirse con el cliente. Para eso utilicé Hostinger: subí los archivos del proyecto, esperé a que terminara la publicación y comprobé que la página funcionara correctamente fuera de la vista local.
Si necesitas publicar un proyecto similar, puedes acceder a Hostinger con el descuento aplicado.
Pero todavía faltaba un requerimiento: el contenido debía estar disponible en español además de portugués. En lugar de indicar cada texto que debía modificarse, envié una instrucción directa a Codex: agregar un selector de idioma e incluir español.
Codex revisó toda la página y añadió las opciones PT y ES en la cabecera. También tradujo navegación, títulos, llamadas a la acción, descripciones de los vinos y textos de las diferentes secciones.
Esto es especialmente útil cuando la estructura ya está consolidada. No hay que rehacer el diseño ni traducir manualmente cada bloque desde cero. La misma herramienta puede aplicar el cambio dentro del proyecto, mantener la interfaz y actualizar las distintas versiones de contenido.
✉️ Entregar una primera versión que invite a dar feedback
Publicar no significa que el proyecto esté cerrado. Significa que ya existe una primera versión funcional y concreta sobre la cual conversar.
Para preparar la presentación, le pasé a Codex el enlace publicado en Hostinger y le pedí que redactara un correo para el cliente indicando que era la versión 1. Después le pedí que buscara el contexto previo del cliente en el correo para personalizar mejor el mensaje y mantener un estilo semi informal.
El correo final planteaba la web como una base inicial para revisar la presentación de la marca. Explicaba la estructura principal, mencionaba que el contenido estaba disponible en portugués y español, e invitaba a enviar comentarios sobre:
- La estructura general de la página.
- El estilo visual y la dirección creativa.
- Las imágenes seleccionadas o generadas.
- Los textos y el tono de marca.
- La forma de presentar la colección de vinos.
Ese enfoque es mucho mejor que presentar un proyecto como si fuera definitivo. Una primera versión debe abrir una conversación útil. Tiene que ser suficientemente sólida para comunicar una visión, pero suficientemente flexible para evolucionar con el feedback.
🛠️ El flujo completo para crear una web animada premium con IA
Este proyecto resume una forma de trabajo muy concreta. No se trata de pedirle a una IA una página y aceptar el primer resultado. Se trata de combinar herramientas especializadas, asignando a cada una una función clara.
- Codex con GPT 5.6 Sol: dirección visual, identidad de marca, copy, estructura, recursos, interacción e implementación.
- Genspark con Veo 3.1: transformación de la imagen estática en una animación cinematográfica.
- Cloudinary: alojamiento directo y optimización del video para la web.
- Hostinger: publicación del proyecto para compartir una versión funcional.
- Codex nuevamente: selector de idiomas, traducciones y preparación del correo de entrega.
El punto no es usar muchas herramientas porque sí. El punto es que cada una resuelva aquello para lo que resulta más útil. Codex se encarga del proyecto, el diseño y la implementación. Genspark crea el movimiento. Cloudinary entrega el archivo de forma eficiente. Hostinger publica la web. Y Codex vuelve a conectar todo dentro de un flujo de trabajo coherente.
🚀 Qué demuestra este proceso
Partir con una sola imagen de referencia no limita necesariamente un proyecto. Con una buena dirección, una intención clara y herramientas bien combinadas, esa imagen puede convertirse en una identidad completa.
En este caso, GPT 5.6 Sol pudo entender una referencia visual, inventar el nombre Altura, desarrollar el copy en portugués brasileño, construir una cabecera premium, crear secciones con sentido comercial, añadir interacción, preparar una versión móvil y después integrar un video generado para elevar la experiencia.
La diferencia principal entre trabajar directamente en Codex y solamente conversar con un modelo es la ejecución. No se trata de recibir ideas sueltas, snippets de código o una lista de recomendaciones. Se trata de trabajar dentro del proyecto, iterar sobre archivos reales y avanzar desde una carpeta vacía hasta una primera versión publicada.
Para seguir aprendiendo y compartir procesos similares de creación de aplicaciones y webs con IA, puedes unirte a la comunidad Círculo Builders.
Y si quieres que trabajemos en una web, una marca o un proyecto concreto, puedes contarme tu caso.
Una imagen, un prompt breve y un flujo bien diseñado pueden ser suficientes para crear una primera versión que se sienta pensada, coherente y lista para iniciar una conversación real con un cliente.
