Una web que se siente premium no empieza con código. Empieza con una dirección visual clara. En este caso, la idea fue crear una web conceptual para una aerolínea de lujo: cálida, minimalista, cinematográfica y con una sensación de viaje desde el primer segundo.
El objetivo no era hacer una página llena de componentes porque sí. Era construir una experiencia coherente, con una ventana de avión frente a un amanecer, interiores cuidados, destinos aspiracionales, animaciones sutiles y una navegación que guiara naturalmente de una sección a otra.
Para llegar ahí usé Codex dentro de ChatGPT, el modelo GPT-6 Astra, generación de imágenes y video con IA, iteraciones muy concretas y una publicación final en hosting. Lo importante no es que copies una aerolínea conceptual. Lo importante es el método: puedes aplicarlo a una landing de una marca, un portafolio, una propuesta para cliente, una app o cualquier proyecto visual que necesite destacar.
Tabla de contenido
- ✈️ La idea primero: referencias, no una página en blanco
- 🎨 Construir un sistema visual antes de construir secciones
- 🌤️ Animar imágenes sin convertir la web en un espectáculo caótico
- 🧩 Integrar los videos con Codex y controlar el scroll
- 📝 Corregir una web con anotaciones, no con prompts eternos
- 📱 Revisar escritorio y móvil desde el principio
- 🚀 Publicar una web HTML en Hostinger
- 💡 Qué hace que una web creada con IA se sienta profesional
- 🔗 Recursos para repetir este proceso
✈️ La idea primero: referencias, no una página en blanco
Cuando quieres crear una web increíble con IA, la peor forma de empezar es escribir algo como: “Hazme una web moderna y bonita”. Eso no significa nada. Puede devolverte algo funcional, sí, pero no una dirección artística.
Yo partí de dos referencias encontradas en Pinterest. La imagen principal era una ventana de avión con un amanecer entre nubes. No la tomé como algo que hubiera que copiar literalmente, sino como una guía para definir el mundo visual completo:
- Una aerolínea de lujo con tonos café, arena, dorado y rosa suave.
- Interiores de avión con maderas oscuras, cuero y luz cálida.
- Tipografía editorial, refinada y con personalidad.
- Mucho espacio en blanco para que la experiencia respire.
- Fotografía y movimiento cinematográfico, pero sin exceso de efectos.
Con esas referencias le pedí a Codex una propuesta para la sección hero. Desde el principio hice correcciones específicas: usar una tipografía más moderna en el encabezado y en el logotipo, quitar detalles que no aportaban, hacer la ventana más grande y centrarla mejor.
Ese es un punto importante. La IA no necesita que le expliques toda la web al milímetro desde el primer prompt. Necesita una dirección clara y correcciones buenas. Primero consigues una propuesta que tenga el tono correcto. Después, haces que el resto del proyecto conserve esa misma lógica.
La propuesta inicial ya tenía cosas muy interesantes: un hero con la ventana como protagonista, un titular elegante, un pequeño formulario de búsqueda de vuelo y una paleta coherente. Eso era suficiente para comenzar. No necesitaba estar perfecto todavía.
🎨 Construir un sistema visual antes de construir secciones
Una landing premium no se sostiene con una sola imagen bonita. Necesita un sistema visual. Por eso, después del hero, generé recursos que no tuvieran texto ni elementos de interfaz. Solo assets limpios que pudieran utilizarse dentro de la web.
Entre ellos aparecieron una cabina de avión privada, un pasillo elegante, una costa italiana al atardecer, un entorno japonés y destinos tropicales. La intención era que todo pareciera pertenecer a la misma marca ficticia.
Esto cambia mucho el resultado. Si cada imagen tiene una estética distinta, la web se siente como un collage. En cambio, cuando defines desde el principio luz, materiales, composición, color y nivel de lujo, Codex puede extender esa dirección por todas las secciones.
La estructura que fue tomando la web quedó bastante clara:
- Hero principal: ventana de avión, nubes en movimiento y llamada a la acción.
- Formulario de vuelo: origen, destino y fecha para que la web se sienta accionable.
- Experiencia de cabina: una sección editorial con imagen y texto sobre comodidad.
- Recorrido inmersivo: un viaje por el pasillo del avión hasta la cabina y las nubes.
- Destinos: Costa Amalfitana, Kioto y Maldivas.
- Sección final: fondo de nubes, mensaje de cierre y footer.
Fíjate en que no se trata de meter muchas secciones. Se trata de que cada una cumpla una función: presentar, convencer, transportar, mostrar posibilidades y cerrar.
Si quieres acelerar este tipo de flujo para páginas y propuestas visuales, puedes probar Dínamo Sites. También dejé disponibles prompts profesionales para crear una app, que sirven especialmente cuando necesitas pasar de una idea vaga a una especificación mucho más clara.
🌤️ Animar imágenes sin convertir la web en un espectáculo caótico
Un error muy común cuando generamos video con IA es pedir demasiado. Queremos cámara, humo, transición, reflejos, velocidad, cambios de escena, partículas y música épica. Luego el modelo inventa cosas raras, corta donde no debe o añade efectos que no tenían ningún sentido.
Para el hero quería algo muy sencillo: una cámara completamente fija y un movimiento apenas perceptible en las nubes. Nada más. La ventana tenía que mantenerse como una composición estable y elegante.
Usé una imagen de referencia, configuré el video a 1080p, ocho segundos y sin audio. El primer resultado fue justamente lo que buscaba: las nubes se movían con suavidad y la cámara se mantenía quieta. Ese tipo de animación funciona muy bien como fondo en loop porque añade vida sin distraer.
La lección es muy simple: cuando el movimiento es una decoración, pide menos movimiento. En una landing de lujo, la sutileza vale más que un efecto complicado.
Un prompt de animación debe proteger lo que no quieres cambiar
Para el recorrido por el avión, la idea era distinta. Aquí sí quería movimiento: empezar detrás del avión, avanzar por el pasillo, llegar a la cabina y continuar hacia las nubes. El problema fue que la primera generación hizo una transición extraña al atravesar el parabrisas. Apareció una especie de efecto brillante o de estrella que no estaba pedido.
Eso sucede muchísimo. La IA interpreta una parte ambigua y trata de “mejorarla” con una transición espectacular. Pero en este caso no hacía falta. Solo quería atravesar hacia las nubes como si el cristal no existiera.
La solución no fue añadir un prompt más largo y más rebuscado. Fue hacer lo contrario: simplificarlo. La instrucción quedó más directa, con restricciones claras:
- Movimiento continuo hacia adelante.
- Ritmo más dinámico.
- Recorrido desde la cabina hasta las nubes.
- Sin cortes, fundidos ni transiciones.
- Sin romper el cristal ni introducir efectos extra.
- Nubes con una ligera tonalidad rosada.
El resultado no quedó absolutamente perfecto, pero sí quedó mucho más cerca de la intención. Y aquí hay otra lección importante: no te quedes eternamente persiguiendo una perfección que no cambia el resultado final. Haz una o dos iteraciones buenas, elige la mejor versión y continúa construyendo.
🧩 Integrar los videos con Codex y controlar el scroll
Una vez generados los recursos, el siguiente paso fue pasarlos a la carpeta del proyecto y pedirle a Codex que los integrara. Para el hero, la instrucción fue clara: colocar el video en el directorio correcto, usarlo en loop y hacer que cubriera la sección completa.
La primera integración tenía un efecto de zoom al hacer scroll. No era lo que quería. La imagen ya tenía movimiento por el video, así que añadir zoom por scroll recargaba la experiencia. Pedí eliminarlo para que el hero se mantuviera visualmente estático.
Esto es muy importante al diseñar con movimiento: no todos los efectos deben activarse a la vez. Si el video se mueve, el contenedor no siempre tiene que moverse. Si el texto aparece animado, tal vez el fondo debe permanecer tranquilo. La sensación premium aparece cuando cada elemento tiene espacio.
Para la sección del recorrido, el video se convirtió en una secuencia visual controlada por el scroll. La página pasa por el pasillo, se acerca a la cabina y termina en las nubes. No es una animación colocada al azar. Se usa como una narrativa visual dentro de la landing.
La parte técnica puede variar según el proyecto, pero la intención debe mantenerse: el scroll no debería ser solo desplazamiento. Puede ser una herramienta para revelar una historia.
Las transiciones también son diseño
Cuando el recorrido terminaba y aparecía la sección de destinos, el corte era demasiado duro. Pasar directamente de nubes rosadas a una sección blanca se sentía brusco. Así que pedí una sección intermedia espaciosa, minimalista y clara, con un overlay o desenfoque que conectara ambas partes.
También pedí que apareciera información animada a los lados durante el trayecto del avión. Eso ayuda a reforzar la sensación de recorrido sin llenar la pantalla de elementos.
Una buena transición no necesita llamar la atención sobre sí misma. Solo debe evitar que el cambio se sienta como un error. Si una persona nota el corte, probablemente hace falta suavizarlo.
📝 Corregir una web con anotaciones, no con prompts eternos
Una de las cosas más cómodas de este flujo es poder anotar directamente sobre la interfaz. En vez de describir largamente dónde está un problema, puedes señalarlo y escribir una instrucción corta.
Por ejemplo:
- “Este texto debe ser blanco y tener una sombra suave”.
- “Aumenta un poco el tamaño de estas tipografías”.
- “Añade más sombra para mejorar la lectura”.
- “Crea más espacio entre esta sección y la siguiente”.
Estas correcciones parecen pequeñas, pero son exactamente las que separan una primera versión de una web que se siente terminada. Después de revisar la página, hubo tres ajustes principales: aumentar un poco el tamaño general de los títulos, mejorar el contraste de algunos textos y añadir sombra donde las imágenes dificultaban la legibilidad.
Hay una regla que no conviene olvidar: un texto nunca debe verse bonito a costa de ser difícil de leer. Si un titular está sobre una imagen clara, tiene que tener suficiente contraste, una sombra ligera, una capa oscura o una posición distinta. La estética no debe pelearse con la claridad.
📱 Revisar escritorio y móvil desde el principio
Codex no solo hizo las pruebas en escritorio. También se revisó la versión móvil. Eso es fundamental, porque una web cinematográfica en pantalla grande puede romperse rápidamente en un teléfono si no se controla.
En móvil, el hero necesitaba conservar la ventana completa, incluyendo el marco. Para conseguirlo, pedí alejar un poco el encuadre y ajustar la composición. También aumenté otra vez el tamaño del texto del hero y añadí una sombra sutil para mantener la legibilidad.
El resultado mostró algo importante: no hace falta que móvil sea una copia exacta del escritorio. Tiene que conservar la intención. La imagen puede reencuadrarse, los bloques pueden apilarse y las proporciones pueden cambiar. Lo esencial es que siga sintiéndose como la misma marca.
Antes de publicar, revisa al menos estas cosas:
- Que el titular principal se lea sin esfuerzo.
- Que los botones tengan un tamaño cómodo.
- Que las imágenes no corten el elemento más importante.
- Que los videos no rompan la proporción de la pantalla.
- Que el scroll no genere saltos extraños.
- Que el formulario o la llamada a la acción aparezcan rápido.
🚀 Publicar una web HTML en Hostinger
Una vez lista la web, publicarla fue bastante directo. En este caso usé Hostinger, que es el hosting que utilizo y recomiendo. Puedes acceder con este enlace de Hostinger con descuento.
El proceso sirve de forma similar con otros proveedores, especialmente si ya tienes una web estática en HTML, CSS, JavaScript, imágenes y videos.
Pasos para subir una web estática
- Crea un sitio nuevo dentro del panel de hosting.
- Selecciona una opción para sitio PHP o HTML personalizado.
- Usa un dominio temporal si quieres compartir una propuesta rápidamente antes de conectar un dominio propio.
- Abre el administrador de archivos.
- Elimina el archivo predeterminado, como default.php, si está ocupando la página inicial.
- Sube el contenido completo de la carpeta del proyecto.
- Recarga el dominio temporal y revisa que los recursos carguen correctamente.
Un dominio temporal es especialmente útil si haces propuestas para clientes. Puedes enviar un enlace funcional en lugar de un diseño estático. Eso cambia por completo cómo se percibe el trabajo. Una cosa es enseñar una captura. Otra es presentar una experiencia navegable con videos, animaciones y diseño responsive.
Después de subir los archivos, revisé la versión de escritorio y una resolución móvil grande. La web seguía funcionando con rapidez, mantenía su composición y los textos tenían buen contraste.
💡 Qué hace que una web creada con IA se sienta profesional
La IA acelera la creación, pero el resultado no se vuelve bueno automáticamente. Lo que realmente da calidad es la dirección que tomas y las decisiones que corriges durante el proceso.
Estas son las ideas que más peso tuvieron en esta web:
- Empieza con referencias visuales: no con una petición genérica.
- Define un lenguaje visual: paleta, tipografía, materiales, luz y composición.
- Genera assets sin interfaz: después intégralos donde tengan sentido.
- Usa el movimiento con intención: un loop discreto puede ser mejor que una animación exagerada.
- Simplifica los prompts si algo sale raro: muchas instrucciones pueden distraer al modelo.
- Corrige por zonas: una anotación específica suele ser mejor que reescribir toda la web.
- Cuida las transiciones: son las que convierten secciones separadas en una experiencia continua.
- Prioriza contraste y lectura: el texto debe funcionar encima de cualquier fondo.
- Prueba en móvil: no como detalle final, sino como parte del diseño.
- Publica pronto: una web real te permite detectar lo que una previsualización no muestra.
🔗 Recursos para repetir este proceso
Si quieres recrear una experiencia similar, puedes consultar la guía de prompts utilizados. Ahí tienes una base para generar imágenes, definir movimiento y estructurar una web conceptual con IA.
Para profundizar en creación de apps y proyectos con IA, también puedes unirte a la comunidad de vibe coding. Y si quieres que trabajemos directamente en una idea, puedes enviar una solicitud para tu proyecto.
Al final, crear webs increíbles con Codex y ChatGPT no va de pedir una página y aceptar la primera respuesta. Va de construir una visión, iterar con criterio, simplificar cuando haga falta y cuidar los detalles que hacen que una web se sienta viva.
Con una idea clara, buenos recursos visuales, animación medida y una publicación rápida, puedes pasar de una referencia a una web que realmente llame la atención.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.