Una web para un negocio no termina cuando conseguimos una portada bonita. También tiene que mostrar bien lo que ofrece la empresa, funcionar en celulares y permitir que el cliente actualice su contenido sin depender de nosotros para cambiar una frase o una foto.
Para resolver esas dos partes, voy a combinar Antigravity para construir un diseño a medida y WordPress para administrar el contenido. Primero preparo una versión en HTML, la publico para revisar el resultado y después la convierto en un sitio administrable.
El ejemplo es Ladera Arquitectura, un estudio ficticio con proyectos, galerías y maquetas interactivas. El mismo recorrido sirve para crear la web de su negocio o trabajar con un cliente. Lo importante no es acertar todo con una sola petición, sino avanzar, probar y corregir lo que haga falta.
Tabla de contenido
- 🛠️ Preparar Antigravity y elegir el modelo para cada tarea
- 🎨 Partir de una base de diseño con Dínamo Sites
- 🏗️ Completar la web sin aceptar la primera versión como definitiva
- 🏠 Añadir galerías y una maqueta 3D con un propósito claro
- 📱 Revisar en celulares: contenido, controles y mensajes honestos
- 🚀 Publicar la primera versión en Hostinger
- 🔄 Convertir el diseño en un tema propio de WordPress
- 🗂️ Administrar proyectos con un plugin propio
- ✨ Pulir el diseño y conectar la exploración con una consulta
- ✏️ Dejar la portada editable sin desarmar la composición
- 📨 Conectar el formulario y distinguir guardado de envío
- ✅ Comprobación final y recursos para crear su propia versión
🛠️ Preparar Antigravity y elegir el modelo para cada tarea
El primer paso es descargar Antigravity para Mac, Windows o Linux, instalarlo y abrir una carpeta donde vamos a guardar la web. En mi caso, esa carpeta se llama Ladera.
Para este proyecto trabajo con Gemini 4 Argon y Gemini 3.8 Flash. En la configuración que utilizo, Argon requiere Google AI Pro de pago o Ultra, pero pueden seguir el proceso con Flash o con el modelo que tengan disponible. Conviene revisar las opciones y el panel de uso de su cuenta antes de empezar.
No uso el modelo más potente para todo. En mi plan, Argon tiene una cuota semanal propia, así que prefiero reservarlo para las partes donde quiero una revisión más completa: pulir el diseño, preparar imágenes coherentes o trabajar una interacción más elaborada.
Flash me sirve para buena parte de la estructura y la administración. Si la dirección visual ya está definida, muchas tareas no necesitan volver a resolver todo el diseño.
También podemos elegir niveles de esfuerzo dentro del mismo modelo:
- Low: lo utilizo cuando la tarea está bien delimitada o ya entrego una base muy concreta.
- Medium: me sirve para completar secciones y resolver ajustes con algo más de trabajo.
- High: lo reservo para revisiones amplias o elementos más complejos.
Estos niveles indican cuánto esfuerzo dedicar al razonamiento. No son modelos distintos ni una garantía de que cualquier petición vaya a salir mejor por elegir High. Acá también importa qué estamos pidiendo y cuánto contexto le damos.
🎨 Partir de una base de diseño con Dínamo Sites
Para la portada uso Dínamo Sites, mi biblioteca de secciones web con diseños, prompts y recursos. Elijo una sección llamada Surco y copio su prompt a Antigravity.
La ventaja es que ese bloque ya incluye indicaciones de tipografía, composición y fondo. No tengo que describir desde cero toda la apariencia. Solo agrego el contexto del negocio y pido adaptar la sección principal a Ladera Arquitectura.
La petición inicial puede ser corta porque la base ya hace buena parte del trabajo: crear la sección de portada siguiendo esas instrucciones y ajustar los textos a un estudio de arquitectura.
Empiezo con Argon en Low. El resultado conserva el paisaje cálido y el movimiento del agua, incorpora el nombre del estudio y añade navegación y botones. El título tiene buena lectura sobre la imagen y el fondo sigue teniendo presencia.
Me interesa comprobar eso antes de continuar. Una portada puede tener una imagen muy buena, pero si el texto compite con ella o los botones se pierden, todavía no tenemos una base sólida. En este caso, la composición funciona y ya marca el estilo que vamos a seguir.
🏗️ Completar la web sin aceptar la primera versión como definitiva
Con la portada resuelta, cambio a Flash en Medium para añadir las secciones de proyectos, estudio y contacto. La instrucción es mantener el lenguaje visual que ya tenemos, no inventar una web diferente en cada bloque.
La primera propuesta completa trae la estructura que necesito y algunas animaciones suaves, pero aparecen dos problemas. El fondo oscuro se extiende por casi toda la página y los proyectos están representados con dibujos.
El tono oscuro funciona bien en la portada por el atardecer. Al bajar, en cambio, hace que el sitio se sienta pesado. Y para este estudio prefiero fotografías donde se entiendan los espacios, los materiales y la relación con el entorno.
Primero pido cambiar los dibujos por fotos de arquitectura y permitir abrir cada proyecto con más imágenes y una explicación breve. Eso mejora la presentación, pero deja al descubierto otro detalle: las fotos de una misma galería parecen corresponder a casas diferentes.
Cambia el edificio, cambian los materiales y cambia el paisaje. No basta con que cada imagen sea atractiva por separado; el conjunto tiene que tener sentido.
Como Ladera es un estudio de ejemplo, puedo generar imágenes. Para un cliente real usaría las fotografías de sus obras. No se trata de presentar una casa inventada como si fuera un proyecto construido por la empresa.
Una revisión de conjunto con instrucciones concretas
Vuelvo a Argon, esta vez en High, y reúno los ajustes relacionados:
- Conservar la portada que ya funciona.
- Usar fondos claros y cálidos en el resto del sitio.
- Reducir tarjetas y textos innecesarios.
- Generar vistas coherentes de cada edificio.
- Pulir transiciones y adaptación a dispositivos móviles.
- No inventar datos reales de contacto para la empresa ficticia.
En esta tarea, el agente principal abre tres subagentes en paralelo para preparar las imágenes y después integra los resultados. La generación demora más que un cambio de texto, así que hay que darle tiempo.
El resultado tiene más aire y mantiene la relación con los materiales de la portada. Aparecen Casa Tapial, Pabellón de Piedra y Casa entre Quebradas, con una continuidad visual mucho mejor dentro de cada proyecto.
Igual no me quedo con todas las imágenes solo porque ya están generadas. Elijo dos casas y dos vistas por proyecto: una exterior y una interior. Para esta web, cuatro imágenes bien seleccionadas explican mejor la propuesta que una galería larguísima.
Acortar también es diseñar. Quiero que alguien entienda qué tipo de casas hace el estudio y encuentre fácilmente cómo consultar, sin tener que recorrer bloques que repiten la misma idea.
🏠 Añadir galerías y una maqueta 3D con un propósito claro
La siguiente interacción es una maqueta 3D construida con Three.js. Me gusta poder girar la casa y cambiar la luz, pero no quiero agregarla únicamente como un efecto llamativo.
La idea es que esa exploración después se conecte con una consulta: si a alguien le interesa una casa, debería poder preguntar por un proyecto similar sin perder el contexto.
Le pido al agente dejar solo Casa Tapial y Casa entre Quebradas, mantener sus dos imágenes y añadir el visor sin recargar la página. También insisto en reducir los textos y eliminar frases o etiquetas de relleno.
En la nueva versión podemos arrastrar para girar la casa, abrir la galería y pasar del exterior al interior. Debajo, la presentación del estudio queda más concreta, sin tantas tarjetas sueltas.
Acá hay dos comprobaciones distintas. Por un lado, la interacción debe responder. Por otro, tiene que integrarse en el recorrido de la web: dejar espacio a las imágenes, no interrumpir la lectura y permitir continuar hacia el contacto.
Además, estas maquetas son modelos conceptuales. Cambiar la luz sirve para explorar su apariencia, pero no estamos haciendo un cálculo solar ni presentando una herramienta técnica de análisis arquitectónico.
📱 Revisar en celulares: contenido, controles y mensajes honestos
Abro la vista de teléfono del navegador y recorro el sitio completo. No reviso solo si las columnas se apilan. Pruebo el menú, las galerías, la maqueta y el formulario.
La portada se adapta y el título sigue siendo legible. Al elegir proyectos, el menú se cierra para dejar libre el contenido. Las dos obras aparecen una debajo de la otra y sus galerías se pueden abrir.
El problema está en el visor: la cámara queda demasiado cerca y corta las esquinas de la base. Pido ajustar el encuadre para mostrar el modelo completo y mantener controles cómodos. Después del cambio, los controles de luz quedan debajo, separados del espacio donde arrastramos la casa.
En el contacto encuentro algo más importante. El formulario todavía no está conectado a un sistema de envío, pero muestra una confirmación como si hubiera mandado un correo.
Eso hay que corregirlo antes de compartir la demo. Le pido indicar claramente que es una demostración y que no envía mensajes. Una interfaz no debería confirmar una acción que todavía no realiza.
Para esta revisión uso Argon en Medium. Recargo, cambio entre las dos casas, muevo la luz y pruebo el formulario con datos de ejemplo. Ahora la maqueta entra completa y el aviso explica el estado real del contacto.
La versión móvil no se da por resuelta porque la portada se vea bien. Los errores suelen aparecer al abrir algo, arrastrar, cambiar de proyecto o intentar enviar información.
🚀 Publicar la primera versión en Hostinger
Antes de conectar la administración, preparo los archivos en un ZIP y los subo a Hostinger como un sitio PHP y HTML. Uso un dominio temporal dentro del plan que ya tengo.
Si necesitan alojamiento, pueden usar mi enlace de descuento de Hostinger, que incluye mi código. Además de acceder a la oferta disponible, apoyan mi trabajo.
Publicar esta primera versión permite compartir un enlace y pedir al cliente que la pruebe desde su computador o celular. Pero antes de enviarlo hago otra revisión sobre la dirección pública.
Ahí descubro que la maqueta todavía se recorta por abajo al girarla en escritorio. Pido ajustar el encuadre sin modificar el diseño y preparar de nuevo el paquete de archivos.
El primer arreglo evita los recortes, pero aleja demasiado la cámara. La casa queda pequeña y sobra espacio vacío. Así que hago una segunda petición: aprovechar mejor el visor, mantener el modelo completo y colocar los controles en una franja inferior también en escritorio.
Esta vez giro e inclino ambas casas en varios ángulos y repito la prueba en la vista móvil. Como las imágenes no cambiaron, actualizo únicamente el archivo de inicio desde el administrador de archivos de Hostinger.
Ese es el punto de esta etapa: tener una demo pública revisada antes de construir el panel de administración. Una vez aprobado el diseño, seguimos con la edición de contenidos.
🔄 Convertir el diseño en un tema propio de WordPress
Para pasar a WordPress vuelvo a Flash en Medium y pido convertir la web en un tema propio, conservando el diseño y las interacciones.
Conviene entender qué estamos cambiando. La parte pública sigue teniendo HTML, estilos e interacciones, pero ahora sumamos una estructura de administración:
- El tema organiza la presentación y muestra el contenido.
- La base de datos guarda los textos y los datos.
- La biblioteca de medios permite gestionar las imágenes.
Así podemos actualizar una descripción desde el panel sin reconstruir toda la página. Eso sí, instalar WordPress no vuelve editables automáticamente todos los textos de nuestra web. Hay que conectar los campos del panel con los lugares donde se muestran.
Conectar Hostinger con Antigravity mediante MCP
No quiero descargar un ZIP e instalarlo manualmente cada vez que hacemos un ajuste. Para trabajar desde el agente utilizo la conexión MCP de Hostinger, que es distinta de su extensión para el entorno de desarrollo.
En Hostinger, la configuración aparece en Herramientas de Desarrollo, API y Conecta tus herramientas. Dentro de Editores elijo Antigravity y abro la configuración manual. Ahí están el comando para agregar el servidor MCP y las instrucciones para autorizar la cuenta.
Podemos pensar en MCP como un puente: pedimos una acción en Antigravity, el agente utiliza las herramientas conectadas a nuestra cuenta y Hostinger ejecuta esa acción. Si recién hicieron la conexión, pueden pedir que liste sus sitios para comprobarla.
Mi primera instrucción es revisar el dominio sin cambiar nada. El agente confirma que contiene la web HTML. Después le pido crear otra instalación de WordPress en un dominio temporal de mi plan Business, conservar el sitio actual y publicar allí el tema Ladera.
También indico que guarde los accesos de forma privada, sin mostrar contraseñas. Al abrir la nueva dirección, reviso que sigan la portada con su fondo en movimiento, las galerías y las maquetas. Hasta ahí trasladamos el diseño; todavía falta conectar la administración.
🗂️ Administrar proyectos con un plugin propio
El siguiente pedido es gestionar los proyectos desde WordPress, con fotos y una página individual para cada casa. Para eso solicito un plugin propio y mantengo el tema encargado de la presentación.
Esta separación tiene sentido: el tema muestra los proyectos y el plugin permite administrarlos. Los datos quedan en la base de datos de WordPress. Si más adelante cambiamos de tema, podemos conservar esa gestión con el plugin activo, aunque habrá que adaptar la apariencia al nuevo diseño.
En el panel aparece Proyectos. Cada casa tiene sus datos, descripción corta e imágenes. Abro Casa Tapial, modifico el texto de su tarjeta y guardo para comprobar que el cambio se refleje en la web.
La ficha individual también aporta una utilidad concreta. Si alguien pregunta por un estilo de vivienda, el estudio puede compartir el enlace de esa casa con sus fotos y explicación, en lugar de pedirle que la busque dentro de toda la portada.
Comprobar la caché antes de pedir otro rediseño
Al abrir una ficha aparecen dos detalles: se repite la portada completa y, durante una revisión, la galería se muestra sin los estilos esperados. Recargo sin caché y los estilos aparecen.
La caché guarda archivos para cargar más rápido, pero durante el desarrollo puede mostrar una versión anterior. Antes de pedir al agente que rehaga una sección, conviene comprobar si el navegador está usando archivos antiguos.
Después solicito quitar la portada repetida y ajustar cómo se actualizan los archivos. La ficha queda centrada en la casa, sus datos y su galería.
Probar también un proyecto sin maqueta
Creo Casa Patio como proyecto de prueba, cargo sus datos y selecciono una foto desde la biblioteca de medios. Lo publico, abro su página y después lo retiro.
Esta prueba comprueba algo importante: una obra nueva debe funcionar solo con fotografías y datos. No debería heredar automáticamente la maqueta de otra casa.
Subir fotos tampoco genera un modelo 3D. Para una casa nueva hay que prepararlo por separado y conectarlo. Las dos maquetas que ya tenemos forman parte de este ejemplo, no de una conversión automática de imágenes.
✨ Pulir el diseño y conectar la exploración con una consulta
Con la administración encaminada, regreso a Argon en High para mejorar las maquetas y la sección del estudio. Pido más detalle, materiales y luz, además de una explicación breve para entender cada casa.
Debajo del visor aparece información que cambia al seleccionar otro proyecto y un botón para consultar por una vivienda similar. Al pulsarlo, la página lleva al formulario y deja escrito qué casa nos interesa.
Eso retoma el propósito de la interacción: pasar de explorar una propuesta a iniciar una conversación con el estudio. La persona no tiene que volver a escribir el nombre del proyecto ni explicar desde cero cuál estaba revisando.
La sección del estudio también mejora con una imagen grande, textos más cortos al lado y tres puntos ordenados. Se entiende mejor lo que ofrece la empresa sin romper el estilo del sitio.
Las maquetas, sin embargo, quedan demasiado blancas y algo pequeñas. Hago otra pasada con Argon en Medium para dar más contraste, distinguir materiales y sombras y aumentar su presencia dentro del visor.
Mantengo lo que ya quedó bien, como la sección del estudio, y vuelvo a probar el giro, la luz, el cambio de casa, el enlace a la ficha y la galería interior. En celulares compruebo que el modelo, los controles y la información no se superpongan.
✏️ Dejar la portada editable sin desarmar la composición
Ahora falta que el cliente pueda cambiar los textos principales, los botones y la imagen del estudio desde WordPress.
Primero intento pedir esa edición junto con la conexión del formulario usando Flash en Medium. La tarea se queda varios minutos sin avanzar. Cancelo, separo el trabajo y vuelvo a intentarlo en Low, pidiendo solamente hacer editables los contenidos de la portada.
Con esa petición más acotada sí avanza. En el panel aparece Portada, con los campos conectados a la web. Cambio el subtítulo por una frase más directa sobre una arquitectura adaptada a la forma de vivir del cliente, selecciono la imagen del estudio y guardo.
Después recargo el sitio para verificar que el contenido cambió y la composición se mantiene.
Acá conviene dejar claro el alcance de la entrega. El cliente puede editar los campos que conectamos: descripciones, imágenes y textos. Para reorganizar secciones o añadir una interacción nueva, seguimos trabajando en el tema.
Un panel de contenido no necesita convertirse en una herramienta para rediseñar toda la web. En este caso busco que las actualizaciones habituales sean sencillas y no alteren la presentación.
📨 Conectar el formulario y distinguir guardado de envío
Para el formulario pido enviar las consultas al correo de administración de WordPress, añadir protección contra spam, comprobar el funcionamiento y publicar los cambios.
Después de otro intento que no avanza, vuelvo a Flash en Low con una petición concreta. Pruebo el recorrido desde la maqueta: el mensaje ya incluye el proyecto que me interesa. Intento enviarlo sin nombre y aparece el aviso de que falta ese dato.
Completo los campos y recibo una confirmación. Pero todavía no doy el trabajo por terminado. Reviso la bandeja y el correo no llega, aunque el servidor aceptó el envío sin mostrar un error.
Un aviso verde no demuestra que el mensaje llegó a su destino. Esa diferencia es importante en una web para un negocio, donde una consulta puede ser una oportunidad de trabajo.
Guardar las consultas dentro de WordPress
Para no depender únicamente del correo, pido registrar también las consultas en el panel. Envío otra prueba y entro a la nueva sección Consultas.
Ahí puedo abrir el mensaje y comprobar la fecha, el nombre, el correo para responder y el texto completo. Esta vez sí verificamos dónde quedó guardada la información.
Son dos resultados distintos y hay que revisarlos por separado:
- Registro en WordPress: funciona y permite leer la consulta desde la administración.
- Notificación por correo: queda pendiente de configurar el envío y comprobar la recepción.
Para utilizarlo con un negocio real, resolvería la segunda parte con correo autenticado, por ejemplo mediante SMTP. Eso permite enviar utilizando una cuenta o servicio configurado para la web. Después hay que hacer otra consulta y confirmar que la notificación llegue a la bandeja.
Mientras tanto, los mensajes ya se pueden revisar en WordPress. El guardado está comprobado; el correo todavía no debe presentarse como resuelto.
✅ Comprobación final y recursos para crear su propia versión
Antes de cerrar, vuelvo a crear Casa Patio sin maqueta. Compruebo que se abre con su foto y sus datos, sin mostrar el modelo de otra vivienda. La retiro y reviso nuevamente la portada, el estudio y el formulario en celulares.
La comprobación final recorre tanto la parte pública como la administración:
- Los proyectos se pueden editar y tienen fichas individuales.
- Las galerías muestran las imágenes correspondientes.
- Las maquetas funcionan en escritorio y en la vista móvil.
- Los proyectos sin modelo se presentan correctamente.
- Los textos y las imágenes conectados al panel se actualizan.
- Las consultas quedan registradas en WordPress.
- La notificación por correo sigue identificada como pendiente.
Partimos de una sección de diseño, construimos una versión en HTML y terminamos con un sitio WordPress administrable. Argon ayudó a pulir imágenes, diseño y maquetas; Flash resolvió buena parte de la estructura y la gestión de contenidos.
Si quieren repetir el proceso, tienen los prompts utilizados, ordenados por etapas. Para revisar el proyecto y sus recursos, también pueden sumarse a mi comunidad de creación con IA. Y si además están trabajando en una aplicación, en Primera App encontrarán prompts profesionales orientados a ese tipo de proyecto.
Me gusta el resultado, pero lo más útil del recorrido no es una petición específica. Es la forma de trabajar: dar una buena base, conservar lo que funciona, dividir las tareas cuando se atascan y comprobar cada función después de publicarla.
Crear una web con IA no consiste solo en generar páginas. Consiste en dejar un sitio que el negocio pueda usar, administrar y entender, con sus funciones comprobadas y sus pendientes claros.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
