La promesa de GPT-6.1 Sol me llamó la atención por una razón muy concreta: OpenAI lo presenta como un modelo con inteligencia cercana a Astra por una quinta parte de su precio. Eso suena bien sobre el papel, pero a mí lo que me interesa es otra cosa. Quería saber qué pasa cuando lo pones a trabajar en una web de verdad, con referencias visuales, animaciones, imágenes y esos pequeños ajustes que separan una idea llamativa de un resultado que realmente te gusta.
Pasé la tarde probándolo con Codex. Hice una landing para mi comunidad, trabajé en dos secciones principales protagonizadas por gorilas y fui conversando con el modelo mientras corregía detalles. Mi impresión inicial es muy buena. No porque haya resuelto todo con una instrucción mágica, sino porque entendió bastante bien hacia dónde quería llevar cada diseño y se mantuvo sorprendentemente cerca de esa intención durante las iteraciones.
Hay una diferencia importante entre generar una imagen bonita de una página y construir una página con sus elementos separados. En estas pruebas vi las dos cosas, y justamente ese paso de referencia visual a sección construida fue lo que más me interesó.
Tabla de contenido
- 🧪 La pregunta no era si podía hacer algo bonito
- 🎨 De una sola imagen de mi avatar a una landing completa
- 🦍 Las secciones de gorilas: donde empezó la prueba de verdad
- 🧩 Lo que aprendí al separar la composición en recursos
- 💬 Conversar con el modelo fue parte del trabajo
- 💰 El precio cambia la conversación sobre qué modelo usar
- 🛠️ Qué haría si tuviera que repetir este proceso
- 🚀 Mi impresión final de GPT-6.1 Sol para crear webs
🧪 La pregunta no era si podía hacer algo bonito
Cuando aparece un modelo nuevo, es fácil quedarse en la primera demostración impresionante. Le das una instrucción, produce una pantalla vistosa y parece que el trabajo está hecho. Pero al crear webs, la prueba empieza después: cuando quieres cambiar el fondo sin rehacer el personaje, poner el texto detrás de una figura, conservar un diseño de referencia o transformar una composición en elementos HTML.
Por eso no quise limitarme a pedir una landing y sacar una conclusión inmediata. Trabajé con varias versiones, comparé resultados y seguí ajustando lo que no me convencía. En algunos momentos le expliqué al modelo no solo qué quería cambiar, sino por qué. Mi sensación es que ese contexto ayudó mucho. En lugar de corregir una pantalla a ciegas, podía responder a una visión más clara del resultado.
Las pruebas giraron alrededor de dos proyectos visuales:
- Una web para Círculo Builders: partí de mi avatar y llegué a una landing con distintas secciones, cambios de mensaje y partes animadas.
- Dos secciones hero con gorilas: usé imágenes de referencia para llegar a composiciones donde el personaje, el fondo y el texto funcionan como elementos diferenciados.
Los dos proyectos me sirvieron para observar capacidades distintas. La landing mostró lo que el modelo podía proponer con una dirección relativamente abierta. Las secciones de gorilas exigieron más fidelidad visual y más trabajo para convertir referencias en una composición web.
🎨 De una sola imagen de mi avatar a una landing completa
Una de las primeras cosas que probé fue darle al modelo mi avatar como punto de partida. Me interesaba ver si podía aprovechar un recurso visual existente y convertirlo en una propuesta coherente para la web de mi comunidad. No le pasé una biblioteca enorme de materiales. La base era simplemente una imagen.
El resultado evolucionó en distintas versiones. Una de ellas se convirtió en una landing completa: una cabecera azul con el avatar, mensajes que van cambiando y elementos visuales que se mueven alrededor del personaje. Después aparecen otras secciones con un tratamiento diferente, pero que mantienen la sensación de pertenecer al mismo sitio.
En la cabecera, el modelo jugó con el personaje en lugar de dejarlo como un retrato estático. Hay una idea visual alrededor de sus manos y de los objetos que aparecen junto a él. Eso le da energía a una sección que, de otro modo, podría haber sido solo un título, un botón y una imagen a la derecha.
También me gustó que la página no dependiera de una única pantalla inicial. Más abajo aparece una sección que pregunta qué quieres construir y presenta distintas posibilidades mediante opciones seleccionables. Cambian tanto el contenido como el recurso visual que acompaña a cada opción. Es un buen ejemplo de por qué prefiero evaluar una landing como un conjunto: una cabecera fuerte importa, pero también importa qué ocurre después.
La página incluye además una sección visual con un paisaje imaginario y un cierre de color muy intenso. No todas las partes tienen el mismo estilo exacto, pero sí hay una intención de crear ritmo. Hay bloques azules, zonas claras, imágenes más ambientales y un cierre que destaca de inmediato. En una landing, ese contraste puede ayudar a que cada sección tenga su propio momento sin perder por completo la continuidad.
Esta prueba fue relativamente sencilla de plantear. Le pedí una idea, un prototipo para la web de mi comunidad, y el modelo se arriesgó. Me gustó el resultado. Aun así, terminé más contento con las secciones de gorilas, porque ahí pude ver mejor cómo respondía cuando la dirección visual era específica y había que trabajar más para respetarla.
🦍 Las secciones de gorilas: donde empezó la prueba de verdad
Las otras dos piezas partieron de imágenes de referencia. Una muestra a un gorila con sudadera roja y auriculares frente a un ambiente de gimnasio, con las palabras «Fuerza salvaje» a los lados. La otra lleva al personaje a un entorno de montaña, con chaqueta naranja y el mensaje «Sin límites» detrás.
Las dos tienen presencia. Son secciones hero grandes, pensadas para captar la atención nada más entrar. Pero el punto interesante no es únicamente que se vean bien. En particular, quería que la composición no se quedara atrapada dentro de una sola imagen. Si todo, incluido el título, está fusionado en un archivo, tienes menos margen para ajustar la sección después.
En la sección del gorila naranja, el texto se encuentra detrás del personaje. Ese efecto de profundidad es central en el diseño: el gorila ocupa el primer plano, mientras el título se extiende a ambos lados. No es simplemente una imagen con letras impresas. El título forma parte de la estructura HTML de la sección.
Esto cambia mi manera de valorar el resultado. Una imagen generada puede servir para explorar una dirección artística y comprobar si una idea tiene fuerza. Pero cuando el texto se convierte en un elemento de la web, ya puedes pensar en esa pieza como parte de una interfaz construida, no solo como una maqueta visual.
La versión roja trabaja con un contraste distinto. El personaje ocupa el centro y el fondo tiene una atmósfera de gimnasio iluminado en azul. Las palabras grandes a ambos lados hacen que la composición se sienta potente incluso antes de fijarse en los detalles pequeños. Entre las dos secciones hay una relación clara, pero no son copias con otro color. Cada una aprovecha su escenario y su vestuario para crear una personalidad propia.
Me gustaron mucho las dos. Y precisamente porque me gustaron, vale la pena aclarar algo: no salieron así de un único prompt. Hubo referencias, conversación, decisiones sobre los recursos visuales y ajustes de detalles que no me convencían. El resultado final se entiende mejor como un proceso de diseño asistido que como una generación instantánea.
🧩 Lo que aprendí al separar la composición en recursos
Al empezar, tenía imágenes de referencia que mostraban cómo quería que se sintieran las secciones. Una referencia así es muy útil para comunicar composición, colores y ambiente. También tiene una limitación evidente: dentro de ella todo está unido. Personaje, fondo y tipografía parecen una sola cosa.
En este caso, el trabajo consistió en tomar esa dirección visual y dividirla en recursos. El modelo fue organizando las piezas necesarias para reproducir el diseño como sección web. Esa separación fue decisiva en el resultado. Permitió mantener el texto como parte del HTML y tratar el personaje como un elemento que podía colocarse delante del título.
Con el gorila de la sudadera roja hubo un momento especialmente interesante. Necesitábamos usar un fondo distinto, así que hablamos sobre cómo preparar el personaje para poder recortarlo. El modelo sugirió generar el video del gorila sobre un fondo verde. Después se retiró ese fondo para integrar al personaje en la composición final.
Ese paso explica por qué la composición quedó más convincente. No se trataba de colocar una escena completa encima de otra y esperar que encajara. Había un recurso preparado para separar al personaje de su fondo y combinarlo con otro entorno. Primero se estableció la apariencia del gorila en una imagen; luego se trabajó para conservarla al integrarlo en la sección.
Es una distinción sencilla, pero muy importante al crear webs con IA:
- La referencia visual comunica cómo debería verse el resultado.
- Los recursos separados permiten construir esa apariencia con más control.
- El HTML da estructura a elementos como títulos y otros contenidos de la página.
- La iteración ayuda a acercar lo construido a la intención de la referencia.
No hace falta convertir cada detalle en una discusión técnica para apreciar el cambio. Si tienes que modificar el título y este forma parte de una imagen, la modificación puede implicar rehacer todo ese recurso. Si el título está separado, puedes trabajar sobre él sin tratar la composición completa como un bloque indivisible. Esa es la diferencia que buscaba comprobar.
También explica por qué enseñar únicamente el resultado final podría dar una impresión equivocada. Viendo las dos secciones terminadas, sería fácil pensar que bastó con describirlas en una frase. En realidad, el avance vino de ir resolviendo problemas concretos: cómo conservar al personaje, cómo cambiar el fondo, cómo reproducir la composición y cómo lograr que el texto funcionara dentro de la web.
💬 Conversar con el modelo fue parte del trabajo
Una de las cosas que más me sorprendió de GPT-6.1 Sol fue lo bien que siguió las instrucciones durante la tarde de pruebas. No me refiero solo a que ejecutara órdenes aisladas. Sentí que respondía mejor cuando le compartía el criterio detrás de mis decisiones.
Si algo no me gustaba, intentaba explicarle qué estaba intentando conseguir. Esa conversación le daba más contexto para la siguiente propuesta. En vez de limitarme a pedir «cambia esto», podía decirle por qué cierto detalle no encajaba con la visión general de la sección. La diferencia se nota especialmente en trabajos visuales, donde dos soluciones pueden cumplir la misma instrucción literal y, sin embargo, transmitir cosas completamente distintas.
Hay una lección práctica aquí para cualquiera que esté creando una web con Codex: no esperes que el primer resultado sea necesariamente el definitivo. Usa ese resultado para precisar tu criterio. Identifica qué quieres conservar y qué quieres cambiar. Luego comunica ambas cosas. Si una imagen captura bien al personaje, pero no te sirve su fondo, esa distinción es más útil que descartar toda la propuesta.
En mis pruebas, este modo de trabajar me permitió avanzar desde referencias visuales hacia secciones que me convencieron bastante. El modelo no sustituyó mis decisiones. Me ayudó a ejecutarlas, a proponer caminos y a mantener la conversación mientras afinábamos el resultado.
💰 El precio cambia la conversación sobre qué modelo usar
La calidad visual fue lo que me impresionó primero, pero el precio es lo que puede hacer que siga utilizando GPT-6.1 Sol. OpenAI lo presenta como un modelo de inteligencia cercana a Astra por una quinta parte del precio. También anuncia un descuento del 95 % para las lecturas de caché y señala que está disponible en los planes de pago y en la API.
Esas son cifras de la presentación del modelo, no una medición de lo que costó cada una de mis secciones. No hice aquí una comparación detallada de consumo entre modelos. Mi conclusión es más práctica y, por ahora, provisional: si consigo resultados que me gustan usando un modelo anunciado como bastante más económico, tengo una buena razón para seguir probándolo.
Para mí eso importa especialmente al preparar tutoriales. No quiero pensar solo en si un modelo puede darme un resultado espectacular una vez. Quiero saber si tiene sentido usarlo de manera habitual, repetir pruebas, corregir páginas y enseñar procesos sin que cada iteración resulte demasiado costosa.
Por eso llegué a pensar que quizá ya no necesite recurrir tanto a Astra. Después de esta tarde, GPT-6.1 Sol me parece un candidato muy fuerte para convertirse en mi modelo principal en muchos de esos trabajos. No estoy afirmando que ambos modelos sean idénticos ni que esta prueba resuelva todas las situaciones posibles. Estoy diciendo que, para estas webs y esta forma de trabajar, la relación entre resultado y precio anunciado me dejó muy buena impresión.
También mantendría cierta prudencia con el consumo. Cuando se trabaja en varias versiones y se hacen muchas correcciones, el uso se acumula. Ser más económico no significa que convenga pedir cambios sin rumbo. Tener clara la dirección visual y aprovechar cada iteración sigue siendo importante.
🛠️ Qué haría si tuviera que repetir este proceso
Después de estas pruebas, hay una forma de trabajar que me parece especialmente útil para crear una landing o una sección hero con IA. No es una receta para obtener siempre la misma estética. Es un modo de ordenar las decisiones para que el modelo tenga algo más preciso con lo que trabajar.
1. Empezaría con una referencia que marque la intención
En las secciones de gorilas, las imágenes de referencia fueron el punto de partida. Dejaban claro el personaje, la atmósfera, el contraste y la posición general del texto. No resolvían por sí solas cómo construir la web, pero sí daban un objetivo visual al que acercarse.
Cuando no tenía una referencia tan cerrada, como ocurrió con el prototipo para la comunidad, dejé más espacio para que el modelo propusiera. Las dos maneras pueden funcionar. La diferencia está en qué esperas obtener: una exploración creativa o una reproducción más fiel de una dirección que ya elegiste.
2. Separaría lo que debe poder cambiar después
Antes de dar por buena una pantalla, me preguntaría cuáles de sus partes necesito controlar. En el ejemplo del gorila, el título detrás del personaje era demasiado importante como para tratarlo únicamente como letras dentro de una imagen. Conservarlo como elemento HTML hizo que la sección tuviera más sentido como web.
Lo mismo ocurre con los fondos y los personajes. Si voy a usar un entorno diferente, conviene pensar cómo aislar al protagonista. La solución del fondo verde surgió precisamente de esa necesidad. No fue un adorno del proceso, sino una decisión para llegar a la composición deseada.
3. Revisaría el resultado como página, no como imagen
Una captura bonita puede ocultar preguntas importantes. ¿La landing tiene más secciones? ¿El mensaje se sostiene al bajar por la página? ¿Hay alguna interacción o cambio de contenido que aporte algo? En la web de la comunidad, me interesó tanto la cabecera animada como la sección con distintas opciones para construir.
Eso no quiere decir que cada landing necesite los mismos elementos. Quiere decir que una web completa tiene que funcionar más allá del primer impacto. En esta prueba, pasar de una versión inicial a una landing más desarrollada permitió evaluar mucho mejor lo que el modelo estaba aportando.
4. Daría feedback sobre la intención, no solo sobre el error
Cuando un detalle no me convence, puedo pedir que lo cambien. Pero si además explico por qué no me convence, la siguiente propuesta tiene más posibilidades de acercarse a lo que quiero. Esa fue una de las mejores sensaciones que me dejó GPT-6.1 Sol: pude conversar sobre mi visión y obtener respuestas que parecían tomarla en cuenta.
Para mí, ese es el corazón del trabajo creativo con estos modelos. La IA genera, propone y ayuda a construir; yo sigo decidiendo qué dirección vale la pena perseguir. Cuanto mejor comunico esa dirección, más útil se vuelve la herramienta.
🚀 Mi impresión final de GPT-6.1 Sol para crear webs
Terminé la tarde bastante sorprendido. La landing de Círculo Builders mostró iniciativa visual a partir de un recurso mínimo, mi avatar. Las dos secciones de gorilas mostraron algo que valoro todavía más: capacidad para trabajar desde referencias, dividir la composición en recursos e ir acercándose al resultado mediante conversación e iteraciones.
La parte que más me convenció no fue una animación aislada ni una imagen espectacular. Fue ver que el modelo podía seguir el hilo del proyecto. Entendió por qué quería separar al personaje del fondo, mantuvo el diseño como objetivo y ayudó a convertir composiciones visuales en secciones construidas con HTML.
Si estás explorando el vibe coding para tus propios proyectos, puedes encontrar más ideas y procesos en la comunidad Círculo Builders. Para llevar una web a Internet, también tienes mi enlace de Hostinger. Y si buscas otros recursos relacionados con la creación de proyectos, puedes conocer Dínamo Sites para crear webs y Primera App para trabajar con prompts de aplicaciones.
Mi conclusión, por ahora, es sencilla: GPT-6.1 Sol merece una prueba seria si creas webs con Codex. Yo voy a seguir usándolo, especialmente para proyectos y tutoriales donde el costo de iterar importa. Astra sigue siendo una referencia con la que compararlo, pero después de los resultados de esta tarde ya no tengo tan claro que necesite acudir a él para todo.
Y me quedo con la parte más importante de la experiencia: las secciones que más me gustaron no aparecieron por casualidad. Nacieron de una idea visual, de recursos bien separados y de seguir ajustando hasta que el resultado se pareciera a lo que tenía en mente.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
