Una imagen potente puede ser el punto de partida de una web espectacular. Pero hay una diferencia importante entre tener un diseño bonito y tener una página real: en la página, los textos deben poder editarse, el personaje debe integrarse bien, la composición tiene que funcionar en celular y el resultado debe poder compartirse mediante un enlace.
Mi proceso consiste en resolver esas cosas por etapas. Primero creo una propuesta visual como imagen. Cuando encuentro una dirección que me gusta, le pido a Codex que la convierta en una sección principal con HTML, CSS y JavaScript. Después incorporo movimiento, ajusto detalles y publico el proyecto.
Para este ejemplo parto de dos imágenes de gorilas con ropa deportiva. Una termina en un diseño con sudadera roja y ambiente de gimnasio; la otra conserva una chaqueta naranja y un paisaje de montaña. El objetivo no es construir una tienda completa, sino dos secciones héroe de alta calidad que puedan servir como propuesta para un cliente o como pieza de portafolio.
Lo interesante no es solamente el resultado. Es aprender a conversar con el agente, detectar limitaciones y convertir una prueba que funciona en un proceso que puedas repetir con tus propias imágenes, productos y proyectos.
Tabla de contenido
- 🎨 1. Empieza con referencias que tengan una dirección clara
- 🔁 2. Itera con cambios concretos, no con peticiones vagas
- 🧩 3. Convierte la propuesta en HTML, no en una imagen gigante
- 🪄 4. Separa las capas cuando el diseño realmente lo necesite
- 🟩 5. Prepara la animación sin asumir que el video conservará la transparencia
- 🎬 6. Genera un movimiento corto, sutil y con cámara fija
- ⚙️ 7. Integra el video y conserva una imagen de respaldo
- 🌗 8. Compara variantes sin sobrescribir lo que ya funciona
- ♻️ 9. Repite el proceso y conviértelo en una habilidad reutilizable
- 🔍 10. Revisa el bucle antes de generar otro video
- 📱 11. Comprueba las dos secciones en celular
- 🚀 12. Publica el diseño en Hostinger y consigue un enlace
- 💡 Recursos para adaptar el proceso a tus proyectos
🎨 1. Empieza con referencias que tengan una dirección clara
Antes de pedir código, busco imágenes que me den ganas de construir algo. En este caso encuentro dos referencias con bastante personalidad: un gorila con sudadera negra y otro con chaqueta naranja, ambos con auriculares y una estética deportiva muy marcada.
Me gustan porque ya sugieren una dirección. El personaje tiene presencia, la ropa aporta un contexto y los auriculares ayudan a reforzar esa sensación de energía. No necesito inventar toda la identidad visual desde cero.
Descargo las dos imágenes y compruebo que tengan una calidad suficiente. Parece un paso pequeño, pero importa: vamos a utilizar esas referencias para generar propuestas y después separar elementos. Conviene empezar con archivos que permitan apreciar bien el rostro, la ropa y los contornos.
Luego adjunto ambas imágenes en Codex y pido dos propuestas independientes. Todavía no quiero una página funcional. Quiero explorar cómo podría verse la primera pantalla de la web.
Estas son las condiciones que defino desde el principio:
- Una sección héroe por cada referencia.
- Dos imágenes separadas en formato horizontal 16:9.
- El gorila centrado y con sus rasgos reconocibles.
- Poco texto, relacionado con deporte o ropa deportiva.
- Una composición sencilla, pero con fuerza.
- Tipografía gruesa y protagonista.
La idea es darle al modelo una dirección sin controlar cada decisión. Le digo qué debe conservar y qué sensación busco, pero dejo espacio para que proponga el fondo, la distribución y la relación entre los elementos.
Primero valido el diseño como imagen; después invierto en convertirlo en una web. Así puedo decidir con algo concreto delante, en lugar de ir corrigiendo código mientras todavía no sé qué aspecto quiero.
🔁 2. Itera con cambios concretos, no con peticiones vagas
Las primeras propuestas ya tienen buena pinta. Una utiliza una composición prácticamente en blanco y negro, con un gran titular deportivo detrás del gorila. La otra combina un entorno de montaña con letras naranjas, aunque modifica el color de la chaqueta.
En vez de pedir que haga algo completamente distinto, identifico qué falta. En la primera propuesta quiero un color vivo que rompa la monotonía del blanco y negro. En la segunda quiero recuperar el naranja de la prenda original.
Le pido dos opciones adicionales: una versión con un acento fuerte, como el rojo, y otra que conserve la chaqueta naranja. La nueva propuesta roja funciona muy bien porque introduce un contraste claro con el fondo azul del gimnasio.
Para la versión naranja hago un último ajuste: cambio la tipografía a blanco. El naranja ya está presente en el personaje, así que no necesito repetirlo en el titular. Con las letras blancas, el mensaje se separa mejor del paisaje y la chaqueta mantiene su protagonismo.
También le doy una instrucción importante: para generar esa alternativa, debe partir de las imágenes originales y no de una versión anterior. Quiero que conserve la referencia de base mientras aplica el cambio solicitado.
Esta forma de iterar es mucho más útil que decir solamente que algo no me convence. Cada corrección tiene un objetivo:
- Más impacto: incorporar un color fuerte en una composición demasiado monocromática.
- Más fidelidad: recuperar el color original de la chaqueta.
- Mejor contraste: utilizar letras blancas sobre el entorno oscuro.
- Conservar la referencia: volver a los originales para la nueva generación.
No se trata de generar opciones sin parar. Se trata de encontrar una composición suficientemente buena para avanzar. Cuando llego a las versiones roja y naranja con texto blanco, ya tengo una dirección clara para cada sección.
🧩 3. Convierte la propuesta en HTML, no en una imagen gigante
Ahora viene el cambio importante. La propuesta visual es una imagen, pero yo quiero una sección real. No me sirve colocar toda la composición como un único archivo y darla por terminada.
Le pido a Codex que empiece por la versión roja y reproduzca el diseño en HTML, CSS y JavaScript. Quiero conservar la apariencia, incluida la tipografía, pero con una condición muy clara: cada texto debe ser texto real.
El titular, los textos pequeños y los elementos de la interfaz tienen que poder modificarse. Lo mismo ocurre con el logotipo: debe quedar separado para poder sustituirlo más adelante, no integrado de forma irreversible en el fondo.
Una petición de trabajo puede plantearse así:
Convierte la propuesta roja en una sección web real. Mantén la composición y el estilo tipográfico, pero utiliza textos editables y un logotipo reemplazable. Prepara los recursos necesarios, separando el fondo y recortando el gorila si hace falta.
No le impongo cómo debe resolver cada archivo. Le explico el resultado que necesito y le doy permiso para preparar los recursos visuales. Si necesita generar un fondo limpio o extraer el personaje, puede hacerlo.
El resultado conserva el gorila en primer plano, el gimnasio detrás y el titular grande atravesando la composición. La diferencia es que ahora las palabras pertenecen a la página, no a la imagen.
Aquí compruebo varias cosas: que el aspecto general se parezca a la propuesta, que la tipografía mantenga esa fuerza y que los elementos estén separados. Esta revisión es la que confirma que ya puedo pasar de diseño estático a diseño animado.
Es una distinción que conviene dejar escrita en la petición. Si solamente solicitas que copie una imagen, puede faltar claridad sobre qué partes deben reconstruirse. Yo especifico tanto la apariencia como la posibilidad de editar el contenido.
🪄 4. Separa las capas cuando el diseño realmente lo necesite
En estas secciones quiero un efecto concreto: el texto debe quedar detrás del personaje. El gorila tapa una parte del titular y eso crea profundidad. Además, quiero animarlo sin mover todo el escenario.
Para conseguirlo necesito separar el fondo y el personaje. La composición deja de ser una sola imagen y pasa a tener elementos que pueden colocarse y modificarse de manera independiente.
La lógica visual es sencilla:
- El fondo define el ambiente de la sección.
- El titular se coloca delante del fondo.
- El gorila aparece por encima y oculta parte de las letras.
- Los demás elementos de interfaz mantienen su posición en la composición.
Ahora bien, no siempre hace falta complicarse así. Si no quieres que el texto quede detrás del personaje y tampoco necesitas animarlo por separado, puedes utilizar una imagen completa con el fondo y el gorila juntos.
En esa alternativa, pediría una versión de la imagen sin textos, sin logotipo y sin elementos de interfaz. Después añadiría el contenido real encima desde la página. Es una solución más sencilla y puede ser suficiente, según el diseño.
La separación de recursos responde al efecto que busco. No es un requisito obligatorio para cualquier web creada con IA. En mi caso vale la pena porque quiero profundidad y movimiento independiente; en otro proyecto quizá no aporte nada.
🟩 5. Prepara la animación sin asumir que el video conservará la transparencia
Con la sección estática lista, quiero darle una pequeña animación al gorila. Mi intención es que gire lentamente la cabeza hacia la izquierda y vuelva a la posición original, con un movimiento discreto y sin desplazarse por la pantalla.
Le pido a Codex dos cosas: la imagen del personaje y un prompt para animarla en una herramienta de generación de video. Estoy separando tareas: el agente prepara el material y las instrucciones; el generador de video produce el movimiento.
La imagen recortada tiene fondo transparente. Eso parece perfecto, pero aparece una duda que ya he encontrado antes: algunos generadores reciben un PNG transparente y devuelven un video con fondo negro.
En este personaje sería especialmente incómodo. El pelaje también contiene negro, de modo que eliminar ese fondo después podría complicar la separación entre el sujeto y lo que lo rodea.
Por eso no doy por hecho que todo funcionará. Le explico al agente mi experiencia y le pido que revise si la salida de video permite conservar la transparencia. La comprobación no ofrece una garantía documentada de exportación con canal alfa para la herramienta considerada.
La conclusión práctica no es afirmar que sea imposible en cualquier caso. Es no basar el proceso en una capacidad que no tenemos confirmada.
Decido utilizar una pantalla verde. Como el gorila ya está recortado, basta con colocarlo sobre un fondo verde uniforme. No quiero regenerar el personaje: quiero conservar exactamente el recurso que ya aprobamos y cambiar únicamente lo que hay detrás.
Este paso refleja bastante bien cómo trabajo con la IA. No la trato únicamente como un lugar donde escribir órdenes. Converso con ella, planteo dudas y contrasto limitaciones. A veces un mal resultado no viene de un prompt poco elaborado, sino de pedir algo que la herramienta no resuelve como esperamos.
🎬 6. Genera un movimiento corto, sutil y con cámara fija
Para animar el personaje utilizo Google Flow. Puedes usar la herramienta que prefieras, siempre que te permita trabajar a partir de la imagen y controlar razonablemente el movimiento.
Subo el gorila con fondo verde y empiezo con una resolución de 720p. Para esta prueba quiero evitar un archivo demasiado pesado. También selecciono una sola generación inicialmente, en lugar de producir varias alternativas y consumir más créditos de entrada.
Mi primer intento dura seis segundos. La intención es sencilla: una animación breve que pueda repetirse, no una escena con desplazamientos, cambios de cámara o acciones nuevas.
Al revisar el prompt preparado por el agente, noto que contiene demasiadas instrucciones propias de una imagen estática. Le pido una versión más corta, centrada en animar. No necesito describir de nuevo todo el recurso ni repetir un código de color; necesito explicar qué debe moverse y qué debe mantenerse.
Los puntos que sí considero importantes son:
- Movimientos suaves y limitados.
- El personaje permanece en su lugar.
- Regreso a la pose inicial.
- Apariencia y encuadre consistentes.
- Fondo verde conservado.
- Cámara fija, sin zoom ni rotación.
- Ningún elemento nuevo.
- Una animación pensada para repetirse en bucle.
La cámara fija merece especial atención. Si no lo aclaramos, el generador puede introducir un movimiento de cámara que no queremos. Aquí el fondo de la web ya está definido: necesito que se anime el gorila, no que cambie la perspectiva de toda la escena.
El primer resultado se mueve más de lo que esperaba. No está mal, pero yo buscaba algo más discreto. Soy un poco perfeccionista con estas cosas, así que hago una segunda prueba.
¿Qué cambio? Elimino la petición explícita de mover hombros y torso. Aunque había pedido un movimiento leve, mencionar varias partes del cuerpo empujó la animación hacia una acción más amplia. También reduzco la duración a cuatro segundos.
Anima al gorila con movimientos muy sutiles. Haz que gire lentamente la cabeza hacia la izquierda y regrese a la pose inicial. Conserva su apariencia, el encuadre y el fondo verde. Cámara fija, sin zoom ni elementos nuevos. Crea un bucle.
La segunda versión me gusta más. Puede que no sea absolutamente perfecta, pero ya cumple lo que necesito para esta sección. Si el archivo incluye audio, no me preocupa: ese sonido no forma parte del efecto y se puede retirar.
Descargo el resultado en su tamaño original. No necesito añadir otro cambio de escala antes de integrarlo.
⚙️ 7. Integra el video y conserva una imagen de respaldo
Regreso a Codex, adjunto el video y le pido que quite el fondo verde y coloque la animación en la sección héroe. El agente ya conoce la composición, así que tiene el contexto necesario para sustituir el personaje estático por su versión animada.
No especifico una técnica de implementación que no he comprobado. La instrucción describe el objetivo: eliminar visualmente el verde e integrar al gorila sobre el fondo de nuestra sección, conservando la relación con el titular.
Una vez incorporado, añado otro detalle: quiero una animación ligera de entrada para los textos y elementos cuando carga la sección. Algo pequeño, coherente con el diseño, no una sucesión de efectos que compita con el personaje.
También pido algo que recomiendo siempre en este tipo de pruebas: una imagen estática de respaldo. Si el video no carga, la sección debe mostrar la imagen del gorila en lugar de depender exclusivamente de la animación.
La idea es que el diseño siga teniendo sentido sin movimiento. El video mejora la presencia del personaje, pero no debería ser la única forma de que aparezca el recurso principal.
Así, la versión integrada reúne tres decisiones distintas: un personaje animado, una entrada suave para la interfaz y una alternativa estática. Cada una resuelve una necesidad concreta, sin obligarnos a cambiar la dirección visual que ya habíamos aprobado.
Después recargo la sección para comprobar el conjunto. No basta con que el video se vea bien por separado; debe funcionar dentro de la página, con el fondo, las letras y los elementos de interfaz.
🌗 8. Compara variantes sin sobrescribir lo que ya funciona
La sección roja está lista, pero quiero probar un fondo un poco más oscuro. Me interesa ver si ese ajuste ayuda a que la composición tenga más contraste.
En lugar de pedir una modificación directa sobre el archivo actual, le digo a Codex que lo clone y cree una segunda versión. Pido un archivo nuevo, como index2.html, para mantener intacta la alternativa anterior.
Luego describo con precisión el cambio: añadir una capa oscura suave únicamente sobre el fondo. No debe oscurecer los textos, los botones ni el resto de la interfaz.
Esta aclaración evita que el agente interprete la petición como una reducción general del brillo de toda la sección. Yo quiero ajustar una capa, no alterar todos los elementos.
Comparo ambas versiones y la diferencia es pequeña, pero visible. Una conserva el ambiente más luminoso; la otra hace que el fondo retroceda un poco. Me gusta disponer de las dos para decidir.
Es una costumbre útil al trabajar con agentes: cuando quieras comparar, pide una copia explícitamente. No des por hecho que el sistema guardará una variante independiente. Explicar qué debe conservarse y dónde debe aplicar el cambio facilita mucho el trabajo.
♻️ 9. Repite el proceso y conviértelo en una habilidad reutilizable
Con la primera sección resuelta, paso a la versión naranja. Ya no necesito explicar todos los pasos desde cero: le pido que aplique el mismo proceso a la otra propuesta.
Como sigo dentro de la misma conversación, Codex conserva el contexto. Sabe que debe separar recursos, reconstruir los textos y mantener la posibilidad de integrar una animación. También aplica el ajuste de contraste que acabamos de probar.
Después preparo el gorila naranja sobre fondo verde, lo llevo a Flow y utilizo los criterios que funcionaron en el segundo intento: movimiento muy sutil, duración corta, cámara fija y regreso a la postura original.
La animación sale bien. El personaje se mueve, vuelve y permanece en su sitio. La descargo, la adjunto en Codex y continúo con la integración. El agente ya conoce el propósito del fondo verde porque lo trabajamos antes.
Hay otra forma de aprovechar este aprendizaje: pedir que convierta el proceso en una skill o habilidad reutilizable. Es especialmente interesante si quieres repetirlo en otras conversaciones.
No hace falta crearla antes de saber qué funciona. Primero construyes, corriges y apruebas una secuencia. Después puedes pedir al agente que documente esa secuencia como una habilidad para futuros proyectos.
Lo que conviene conservar no es solamente el prompt inicial. Es el conjunto de decisiones: generar una propuesta, preparar el fondo, recortar el personaje, crear HTML editable, preparar la animación e integrarla con una imagen de respaldo.
Para seguir este recorrido tienes los pasos y prompts adaptados. Úsalos como apoyo y ajusta las referencias y las instrucciones a tu proyecto.
🔍 10. Revisa el bucle antes de generar otro video
Al integrar el gorila naranja detecto un detalle: cerca del final aparece un pequeño salto. Hay un cambio de tono en algunos fotogramas y una repetición de la pose que hace que el cierre no se sienta del todo natural.
Podría pedir otra generación, pero antes pruebo una corrección sobre el archivo que ya tengo. Le explico al agente dónde está el problema y le propongo revisar los últimos fotogramas.
Como el gorila ya ha regresado a su postura inicial, quizá podamos quitar una parte del final sin perder la acción. La petición no consiste en recortar a ciegas, sino en analizar qué fotogramas introducen esa diferencia y ajustar el cierre.
Codex extrae una hoja de contacto con los fotogramas finales. Eso permite comparar la postura y la apariencia de manera más clara.
Después del recorte, el bucle queda mucho más suave. No fue necesario rehacer toda la animación para resolver un problema localizado.
Esta es otra razón para conversar con el agente como con un compañero de trabajo. Decir que algo está raro ayuda poco. Explicar que el cambio aparece al final, que afecta al tono y que hay fotogramas repetidos le da una tarea concreta.
Primero identifica el defecto; después elige la corrección. A veces necesitas una nueva generación. Otras veces basta con editar unos pocos fotogramas.
📱 11. Comprueba las dos secciones en celular
Con las dos versiones terminadas, reviso cómo se presentan en una pantalla estrecha. En escritorio, el titular se extiende a los lados del personaje; en celular, la composición necesita reorganizarse para aprovechar un espacio vertical.
La versión naranja mantiene el titular arriba y al gorila como protagonista. La roja adapta de forma similar el mensaje y la figura, conservando la llamada a la acción en la parte inferior.
Recuerda que estamos construyendo una sola sección. La intención es que esa primera pantalla cubra el espacio disponible y tenga presencia, no simular una página larga que todavía no hemos creado.
En esta revisión me interesa comprobar que el personaje siga bien encuadrado, que el titular se entienda y que los elementos pequeños no desaparezcan dentro de la composición. No doy por terminada la pieza solamente porque se vea espectacular en formato horizontal.
El resultado ya puede servir como una propuesta visual funcional. Un cliente potencial puede abrirlo, y tú puedes enlazarlo desde tu portafolio. Para eso falta el último paso: sacarlo de tu computadora.
🚀 12. Publica el diseño en Hostinger y consigue un enlace
Para publicar estas secciones utilizo Hostinger. Puedes emplear otro alojamiento; lo importante es que permita subir los archivos de tu sitio HTML. El procedimiento será parecido, aunque cambien los nombres de los menús.
Si vas a contratarlo, puedes utilizar mi enlace de descuento de Hostinger. Es el enlace promocional que comparto y también una forma de apoyar mi trabajo.
Dentro del panel creo un sitio y selecciono la opción de web personalizada en PHP o HTML. Nuestro proyecto es un sitio HTML, así que no necesito cambiar el tipo de construcción que ya tenemos.
Después elijo utilizar un dominio temporal. Esto me permite tener una dirección compartible sin tener que conectar primero un dominio propio. Para una propuesta o una pieza de portafolio resulta muy cómodo.
Una vez creado el sitio, entro al administrador de archivos. En el ejemplo aparece un archivo default.php que corresponde a la página inicial del alojamiento. Lo elimino de ese sitio nuevo para sustituirlo por nuestro contenido.
Luego subo los archivos del proyecto. Aquí es importante no enviar solamente el HTML: también deben estar los recursos que utiliza la sección, incluidos el fondo, la imagen de respaldo, el video y los demás archivos generados.
El recorrido queda así:
- Crear un sitio personalizado para HTML.
- Seleccionar un dominio temporal.
- Abrir el administrador de archivos.
- Retirar la página predeterminada del sitio nuevo.
- Subir los archivos y recursos del proyecto.
- Abrir la dirección temporal y comprobar el resultado.
Con eso, el diseño deja de ser una prueba local. Ya tienes una web que puedes compartir mediante un enlace, presentar como propuesta o añadir a tu portafolio.
💡 Recursos para adaptar el proceso a tus proyectos
Si necesitas inspiración para nuevas secciones, en Dínamo Sites reúno prompts y fondos para crear diseños web. Hay muchos prompts gratuitos que puedes copiar sin tener una cuenta, además de recursos con acceso más amplio y fondos exclusivos para mi comunidad.
La idea no es que repitas siempre el mismo gorila. Puedes llevar esta lógica a tus referencias: primero una dirección visual, después una implementación editable y, si el diseño lo necesita, una animación independiente.
Para proyectos de aplicaciones también tienes Primera App, con prompts profesionales para crear tu app. Y si quieres seguir aprendiendo y compartir este tipo de procesos, puedes sumarte a mi comunidad de creación con IA.
Lo más valioso de todo este trabajo es el método. Validar antes de programar, pedir cambios concretos, comprobar las limitaciones, conservar versiones y revisar el resultado tanto en escritorio como en celular.
No necesitas acertar todo en el primer prompt. Necesitas una buena referencia, una intención clara y la disposición de corregir lo que realmente importa. Cuando una secuencia te da un resultado que te gusta, guárdala y repítela. Ahí es donde crear webs con Codex empieza a convertirse en un proceso propio.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
