ChatGPT Codex + Antigravity: por qué los uso juntos para crear webs con IA

Usar el modelo más potente para absolutamente todo parece una buena idea hasta que empiezas a ver cómo tus créditos desaparecen a una velocidad absurda.

La inteligencia artificial puede convertirse en un equipo de trabajo increíblemente eficiente, pero solo si repartes las tareas con criterio. No necesito que el modelo más caro y más capaz del momento haga cada ajuste pequeño, escriba cada línea de implementación o revise cada detalle repetitivo. Necesito que piense donde realmente aporta valor.

Ese es el principio de este flujo de trabajo: usar ChatGPT Codex con GPT-6 Astra para la parte de alto nivel, como dirección creativa, ideación, diseño, definición de assets e instrucciones, y después pasar el proyecto a Google Antigravity con Gemini 3.8 Flash para construir, ajustar e iterar de forma más rápida y económica.

El resultado no es solamente ahorrar tokens. Es trabajar con mucha más claridad, tener mejor continuidad entre herramientas y construir proyectos reales sin tratar a un único modelo como si tuviera que hacerlo todo.

Tabla de contenido

🧠 El problema de usar el modelo frontier para cada tarea

GPT-6 Astra es espectacular para tareas relacionadas con diseño y creación de sitios web. Tiene capacidad para tomar una referencia visual, entender una dirección de arte, proponer una estructura coherente y generar los recursos que necesita una página. Para ese tipo de decisiones, se nota la diferencia.

Pero que un modelo sea excelente no significa que deba utilizarse para todo.

Los modelos frontier, es decir, los más avanzados y capaces, suelen consumir muchos más tokens. Si se usan de forma constante para ejecutar ajustes, responder tareas repetitivas, lanzar subagentes o resolver detalles de implementación, los créditos se van muy rápido. Es fácil acabar subiendo de plan simplemente porque el modelo está haciendo trabajo que un modelo más económico podría resolver perfectamente.

La comparación es bastante simple. Si utilizas una herramienta premium para una tarea sencilla que se repite cien veces, el coste acumulado deja de tener sentido. En cambio, si la utilizas para tomar las decisiones importantes y luego delegas la producción, el rendimiento cambia por completo.

La idea no es abandonar el modelo potente. Todo lo contrario. Se trata de usarlo en el momento adecuado.

  • Modelo frontier: visión, estrategia, diseño, ideación, planificación y decisiones difíciles.
  • Modelo eficiente: construcción, implementación, modificaciones, iteraciones y tareas concretas.
  • Proyecto compartido: el puente que permite que ambos agentes trabajen con el mismo contexto.

Esto aplica tanto si trabajas con ChatGPT Codex como si utilizas Cloud Code u otros agentes. Tampoco tiene mucho sentido usar un modelo como Fable 5.1 en todas las tareas solo porque es muy bueno. La mejor herramienta no es la que se usa siempre, sino la que se usa cuando corresponde.

⚙️ La lógica: pensar con el modelo más capaz y ejecutar con el más eficiente

El flujo se puede resumir en una frase: usa la inteligencia del modelo más potente para diseñar e idear, y la velocidad de un modelo económico para ejecutar.

Este planteamiento es especialmente útil en proyectos web. Una web no es únicamente código. Antes de escribir una línea hay que decidir qué sensación debe transmitir, cómo se organiza la información, qué jerarquía visual tiene cada bloque, qué paleta conviene, qué imágenes hacen falta y qué tipo de interacción encaja con el negocio.

Ese trabajo previo define gran parte de la calidad final. Si esa fase se resuelve bien, la implementación deja de ser una sucesión de decisiones improvisadas y pasa a ser una ejecución ordenada.

Por eso GPT-6 Astra encaja muy bien al principio. Puede ayudar a transformar una idea difusa en una propuesta concreta. Después, Gemini 3.8 Flash en Antigravity recibe esa propuesta con suficiente contexto para convertirla en un sitio funcional.

Este sistema no está reservado para algo gigantesco como una animación 3D compleja en Blender o un videojuego. De hecho, funciona especialmente bien en proyectos cotidianos: una landing page, una web para un negocio local, una propuesta para un cliente o el prototipo de una aplicación.

La clave está en entender que no todas las partes de un proyecto tienen el mismo coste ni requieren el mismo nivel de razonamiento.

Qué conviene resolver en ChatGPT Codex

  • Interpretar una referencia visual o una idea inicial.
  • Definir el concepto creativo y el tono de marca.
  • Crear una propuesta de estructura para la página.
  • Establecer la dirección visual, paleta, tipografías y composición.
  • Generar assets e imágenes para utilizar en el diseño.
  • Preparar instrucciones detalladas para el agente que continuará el proyecto.

Qué conviene delegar a Antigravity

  • Leer la estructura del proyecto y localizar los recursos disponibles.
  • Construir la web a partir de las instrucciones.
  • Aplicar estilos, componentes y comportamiento responsive.
  • Realizar variantes visuales y ajustes puntuales.
  • Resolver cambios de implementación sin gastar el presupuesto del modelo frontier.

Al repartir así el trabajo, los dos modelos funcionan como un equipo. Uno actúa como director creativo y estratega. El otro se encarga de convertir el plan en una entrega real.

🦷 Un caso real: la web de una clínica dental infantil

Para aterrizar este flujo, trabajé con una propuesta para una clínica dental infantil. El objetivo era crear una web que se sintiera cercana, alegre y pensada para niños, pero sin caer en una estética excesiva, caótica o con ese aspecto genérico que a veces tienen las páginas hechas con inteligencia artificial.

El punto de partida fue una referencia muy clara: un personaje de diente amistoso. Desde ahí, en Codex, pedí una propuesta completa para la página.

En aproximadamente un minuto y cuarenta y nueve segundos apareció una primera dirección visual: una página con tonos suaves, un diente mascota, mensajes pensados para transmitir confianza y una composición limpia. La idea no era hacer una web cinematográfica llena de animaciones enormes. Era una web para un negocio real, y un negocio real no necesita necesariamente un espectáculo visual para funcionar bien.

Una clínica dental para niños necesita otra cosa: sensación de seguridad, cercanía, claridad y una identidad que facilite que las familias se sientan cómodas desde el primer contacto.

La propuesta incluía mensajes como “Pequeñas sonrisas, grandes aventuras” y secciones organizadas para explicar la experiencia de la clínica. La mascota dental ayudaba a construir un sistema visual consistente sin convertir cada rincón de la página en una decoración innecesaria.

Eso es importante. Un buen diseño no se mide por la cantidad de efectos que tiene. Se mide por si cada elemento cumple una función y si la experiencia encaja con el objetivo del proyecto.

🎨 Generar assets listos para una web

Una de las partes más potentes de trabajar con ChatGPT Codex para diseño es la generación de assets. En este caso no se trató solo de producir una imagen principal del personaje, sino de crear un conjunto de recursos que mantuvieran coherencia entre sí.

Aparecieron distintas versiones del diente: saludando, sonriendo, sosteniendo un corazón, descansando sobre una nube y acompañado por un cepillo dental. También se generó una imagen del interior de la clínica, con una estética luminosa y amable.

Este tipo de recursos puede marcar una diferencia enorme en una web. Antes, para llegar a este punto, había que buscar imágenes de stock, hacer ilustraciones manuales o entrar a Photoshop para limpiar fondos y preparar cada archivo. Ahora, si el modelo entiende bien la dirección creativa, los assets pueden salir preparados desde el inicio.

En este proyecto fue especialmente útil contar con imágenes de fondo transparente. Tener un personaje ya recortado permite colocarlo sobre secciones de color, tarjetas, bloques de llamada a la acción o composiciones responsive sin invertir tiempo adicional en edición.

Los fondos transparentes no son un detalle menor. En diseño web facilitan mucho el trabajo porque convierten la imagen en un elemento flexible dentro de la interfaz. Se puede escalar, reubicar o combinar con otros recursos sin tener que luchar con un rectángulo de fondo que no encaja.

También permiten mantener una identidad visual estable. En lugar de usar ilustraciones distintas y desconectadas en cada sección, tienes una biblioteca de personajes y elementos que pertenecen al mismo universo gráfico.

La calidad viene de la intención, no solo de la generación

Generar imágenes por IA no significa llenar la página de recursos. La clave fue utilizar las imágenes como piezas de comunicación:

  • El personaje principal reforzaba el tono infantil y cercano de la portada.
  • Los iconos e ilustraciones ayudaban a explicar los beneficios de la clínica.
  • La imagen del espacio físico transmitía una experiencia agradable y cuidada.
  • Los personajes secundarios mantenían la atención sin competir con el contenido principal.

La inteligencia artificial acelera la creación, pero sigue siendo necesario tener criterio. La herramienta puede generar veinte versiones de un diente, pero la decisión de cuál funciona mejor para la marca sigue siendo parte del diseño.

📁 El handoff: cómo pasar el proyecto de Codex a Antigravity

La parte que convierte dos herramientas separadas en un auténtico flujo de trabajo es el handoff, es decir, el traspaso de contexto entre un agente y otro.

Después de terminar la dirección creativa y los assets en ChatGPT Codex, el siguiente paso fue pedirle una instrucción clara para continuar el proyecto con otro agente. En vez de empezar desde cero en Antigravity, se entrega un prompt que recoge las decisiones tomadas: el objetivo, la estética, los recursos disponibles, la estructura esperada y las prioridades de implementación.

El proyecto se mantenía en la misma carpeta. Esto es fundamental.

Al abrir esa carpeta desde Antigravity, el agente pudo analizar el proyecto, identificar los assets, entender qué era cada elemento y reconocer sus dimensiones. Con el prompt de handoff pegado en el nuevo entorno, Antigravity tenía tanto los archivos como las instrucciones para continuar.

Este método reduce muchísimo la fricción. No necesitas volver a explicar cada imagen, describir cada componente o reconstruir la lógica creativa en otra conversación. El agente que implementa entra en un proyecto donde ya existe una base.

Una alternativa muy útil es pedirle al primer agente que escriba un documento dentro de la carpeta del proyecto. Ese documento puede funcionar como una guía de producción y contener:

  • La visión general de la web.
  • El público al que se dirige.
  • La estructura de secciones.
  • Las reglas visuales principales.
  • La lista de recursos y dónde deben utilizarse.
  • Las indicaciones de responsive.
  • Los detalles que no deben cambiarse durante la implementación.

Cuando el siguiente agente abre el proyecto, puede leer ese archivo como parte del contexto. Esto convierte una carpeta compartida en una especie de espacio de colaboración entre inteligencias artificiales.

Qué debe tener un buen prompt de continuidad

Un handoff útil no tiene que ser interminable, pero sí debe eliminar ambigüedades. No basta con pedir “crea una web infantil para una clínica dental”. Esa frase puede generar resultados muy distintos cada vez.

Conviene dejar claro lo siguiente:

  • Objetivo del sitio: presentar una clínica dental infantil y transmitir confianza.
  • Estilo: minimalista, limpio, luminoso, con paleta suave y tono amable.
  • Recursos: usar los assets generados en la carpeta, especialmente el personaje de diente y las imágenes del espacio.
  • Prioridad: evitar una estética de plantilla genérica o una web excesivamente cargada.
  • Adaptación: preservar la esencia visual en escritorio y móvil.

Cuanto mejor sea la definición inicial, menos rondas de corrección necesitará el agente de implementación. Y menos rondas significa menos tiempo, menos tokens y más consistencia.

🏗️ Construir una primera versión funcional en Antigravity

Con el contexto preparado, Antigravity pudo construir la primera versión de la página. Lo interesante es que entendió perfectamente la función de los recursos y consiguió armar una web completa desde la primera revisión.

La portada combina un titular grande, un llamado a la acción y el diente principal con su cepillo. El contenido no compite con el personaje. Hay espacio, una jerarquía clara y suficiente aire visual para que el mensaje se entienda rápido.

Después aparecen secciones que ayudan a explicar por qué la experiencia es diferente. La web organiza los beneficios bajo mensajes sencillos: simpatía, explicaciones claras y un entorno pensado para los niños. Más abajo, una sección muestra el espacio de la clínica y una llamada a la acción invita a programar una visita.

La estructura es deliberadamente práctica. Para un negocio de este tipo, una página debe responder a preguntas esenciales:

  • ¿Qué tipo de clínica es?
  • ¿Por qué puedo confiar en ella?
  • ¿Cómo será la experiencia para mi hijo o hija?
  • ¿Qué servicios o etapas atienden?
  • ¿Cómo doy el siguiente paso?

Una página bonita que no responde a esas preguntas no está cumpliendo su trabajo. En este caso, el diseño y la estructura se apoyan mutuamente.

✨ Minimalismo antes que espectáculo

Es fácil caer en la trampa de pensar que una web creada con IA tiene que estar llena de animaciones, transiciones enormes, fondos 3D y efectos que gritan “mira lo que puede hacer la tecnología”. Pero eso no siempre está alineado con el cliente.

Las webs cinematográficas, muy animadas o altamente experimentales pueden ser excelentes para campañas concretas, lanzamientos de producto o experiencias de marca donde el impacto visual es el objetivo principal. Sin embargo, no todo negocio necesita eso.

En una clínica dental infantil, una propuesta minimalista y limpia puede tener mucho más sentido. Ayuda a que la información sea fácil de encontrar, evita distraer del mensaje de confianza y mantiene el sitio ligero visualmente.

La web final no se siente como una página artificial porque hay intención en las decisiones. La paleta se mantiene coherente. El personaje aparece en puntos estratégicos. Las secciones están ordenadas. Los elementos se reutilizan con propósito.

Ese es el tipo de resultado que quiero buscar cuando uso IA: no algo que simplemente muestre capacidad técnica, sino algo que tenga sentido para un caso real.

📱 Hacer que la propuesta funcione en móvil

Una web no está terminada cuando se ve bien en escritorio. El responsive no es un ajuste de última hora, porque el formato vertical obliga a tomar decisiones de jerarquía y orden.

En la versión móvil de esta clínica dental, la esencia visual se conserva, pero los elementos se reorganizan para el formato vertical. El titular mantiene protagonismo, el personaje sigue siendo reconocible y las tarjetas de contenido se presentan de forma ordenada.

Hubo que hacer algunos ajustes, como es normal. El objetivo del responsive no es encoger la versión de escritorio. Es adaptar la experiencia para que el contenido conserve claridad en una pantalla más estrecha.

En un proyecto como este, revisaría especialmente:

  • Que los textos sigan siendo legibles y no queden demasiado comprimidos.
  • Que los botones de llamada a la acción sean fáciles de localizar.
  • Que el personaje o imagen principal no desplace la información importante.
  • Que las tarjetas tengan un orden lógico y respiren suficiente.
  • Que el cierre de la página mantenga una llamada a la acción visible.

La primera versión ya puede salir muy bien cuando el contexto está bien planteado, pero el ajuste final siempre importa. Es ahí donde se refinan detalles de espaciado, orden y equilibrio.

💸 Cómo evitar que los créditos se quemen demasiado rápido

La eficiencia con IA no consiste en elegir siempre la configuración más alta. Consiste en decidir cuándo merece la pena pagar por más capacidad de razonamiento.

Un error habitual es dejar todo en modo ultra porque parece que así el resultado será automáticamente mejor. Pero si la tarea no es realmente compleja, ese gasto no suele estar justificado. Lanzar subagentes y mantener configuraciones máximas puede consumir una cuota de tokens a toda velocidad.

Para tareas de dirección creativa, planificación y decisiones visuales importantes, GPT-6 Astra puede aportar muchísimo. Para resolver el trabajo continuo de producción, la prioridad cambia: rapidez, coste y capacidad de iterar.

Incluso dentro del uso de Astra, no siempre hace falta utilizar la configuración más exigente. La recomendación práctica es reservar los modos más altos para problemas que realmente lo necesiten. En tareas comunes de diseño y planificación web, un ajuste bajo puede rendir de forma excelente y hacer que los créditos duren bastante más.

La estrategia puede organizarse así:

  1. Empieza con una referencia clara. Puede ser una imagen, un estilo, una idea de marca o un objetivo de negocio.
  2. Usa el modelo más capaz para establecer la dirección. Define diseño, assets, estructura e instrucciones.
  3. Guarda todo en un proyecto ordenado. Archivos, imágenes, recursos y documento de contexto.
  4. Entrega el proyecto al agente de implementación. Trabaja sobre la misma carpeta para no perder contexto.
  5. Haz las iteraciones normales con el modelo eficiente. Ajustes de componentes, responsive, variantes y correcciones.
  6. Vuelve al modelo frontier solo cuando haga falta una decisión de alto nivel. Por ejemplo, un cambio de dirección, una nueva identidad o una solución creativa compleja.

Este sistema hace que los créditos duren más y, al mismo tiempo, evita perder calidad en el punto donde la calidad realmente se decide.

🔄 Un equipo de IA, no una única herramienta

La forma más útil de pensar en ChatGPT Codex y Antigravity no es como una competencia entre plataformas. Son piezas de un mismo equipo.

ChatGPT Codex con GPT-6 Astra puede funcionar como la parte más estratégica y creativa. Toma una referencia, entiende el problema, plantea una dirección y prepara los recursos. Antigravity con Gemini 3.8 Flash puede asumir la continuidad técnica y práctica, transformar esa dirección en una web y permitir iteraciones sin castigar tanto el presupuesto.

La carpeta compartida y el handoff son los elementos que unen ambas partes. Sin ellos, cada herramienta empieza de cero. Con ellos, el proyecto conserva memoria.

Esto también cambia la forma de trabajar. En lugar de hacer prompts aislados para obtener pantallas sueltas, puedes construir un proceso: primero estrategia, luego sistema visual, después assets, implementación, responsive y refinamiento.

El resultado es mucho más parecido a una producción organizada que a una sucesión de experimentos.

🛠️ Recursos para llevar este flujo a tus proyectos

Si quieres publicar el resultado de tus proyectos web, puedes utilizar el descuento de Hostinger para el hosting.

Para crear webs con una base visual potente y acelerar tus propuestas, puedes explorar Dínamo Sites. Si tu foco está en construir aplicaciones y necesitas una colección de instrucciones más estructuradas, tienes prompts profesionales para crear tu app.

También puedes unirte a la comunidad de vibe coding y creación de apps con IA para seguir profundizando en este tipo de flujos. Y si quieres que trabajemos directamente en una idea o producto, puedes enviar una solicitud para tu proyecto.

🚀 La idea final: usa cada modelo para lo que hace mejor

No necesitas una infraestructura gigantesca para trabajar mejor con inteligencia artificial. Necesitas una forma de repartir las tareas.

Deja que el modelo más inteligente se encargue de pensar: diseñar, planificar, encontrar la dirección y dar forma a una propuesta sólida. Deja que el modelo más rápido y económico se encargue de construir, ajustar y avanzar.

Ese pequeño cambio evita desperdiciar tokens, mejora la continuidad del proyecto y te permite obtener mucho más valor por el mismo presupuesto.

En una web como la de la clínica dental infantil, el proceso parte de una referencia sencilla, genera una identidad completa, produce assets utilizables, crea instrucciones para otro agente y termina en una página responsive y coherente. No hace falta convertir cada proyecto en una superproducción. Hace falta usar bien las herramientas.

Piensa con potencia. Ejecuta con eficiencia. Y guarda el contexto para que tu equipo de IA pueda trabajar de verdad como un equipo.

Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.

Hazte más capaz con IA

Ideas, herramientas y aprendizajes prácticos para crear, automatizar y detectar nuevas oportunidades.

Al suscribirte, aceptas recibir mis emails. Puedes darte de baja cuando quieras.