Crear una web WordPress profesional ya no tiene por qué significar instalar un constructor visual, pelearte con veinte plugins o pasar días copiando y pegando bloques. Se puede trabajar de una forma mucho más directa: generas un diseño con inteligencia artificial, lo conviertes en HTML y después usas un agente conectado por SSH para transformarlo en un tema nativo de WordPress.
La gracia de este flujo es que el resultado no queda como una maqueta bonita pero rígida. Queda como una web real, publicada en tu hosting, con sus páginas, su portafolio, sus categorías y su contenido editable desde el panel de WordPress. Sin Elementor.
En este caso vamos a combinar tres piezas:
- Hostinger, para instalar WordPress y disponer de acceso SSH.
- Google Stitch, para crear y refinar el diseño visual con IA.
- Antigravity, para conectarse al servidor, interpretar los archivos HTML y construir el tema WordPress.
El flujo completo es muy útil para freelancers, agencias, profesionales del marketing y empresas que necesitan una web con identidad propia, pero quieren que siga siendo simple de gestionar después.
Tabla de contenido
- 🚀 El objetivo: una web bonita, rápida y realmente administrable
- 🧩 Antes de empezar: recursos que necesitas
- 🖥️ Instala WordPress limpio en Hostinger
- 🔐 Crea una clave SSH para que Antigravity pueda entrar al servidor
- 🎨 Diseña primero en HTML con Google Stitch
- 📦 Exporta las páginas HTML al proyecto de Antigravity
- 🤖 Convierte el diseño en un tema nativo de WordPress
- 🛠️ Revisa, corrige y no te asustes si la primera carga falla
- 🗂️ Haz que el portafolio se gestione desde WordPress
- 📁 Así se ve una página de archivo de proyectos bien resuelta
- ✅ Recomendaciones para trabajar bien con agentes de IA
- 🌐 Recursos para seguir creando con IA
- 🔥 El cambio importante: WordPress ya no tiene que ser lento de construir
🚀 El objetivo: una web bonita, rápida y realmente administrable
La idea no es simplemente generar una landing. La meta es construir una web WordPress con una estructura que tenga sentido a largo plazo.
Para este ejemplo se crea un portafolio de marketing con una página de inicio y una página de proyectos. La portada muestra una propuesta potente, proyectos destacados, métricas y llamadas a la acción. La página de proyectos funciona como un archivo o catálogo visual donde se pueden filtrar los casos por categoría.
Lo importante es lo que ocurre detrás. Cada proyecto no queda escrito a mano dentro de una página estática. El agente crea un tipo de contenido personalizado para proyectos, con campos y categorías que se gestionan desde el escritorio de WordPress.
Eso permite hacer cosas como estas sin tocar código:
- Crear un proyecto nuevo desde el panel.
- Editar título, descripción e imagen.
- Asignar categorías como estrategia de contenidos, lanzamiento, growth hacking o renovación de marca.
- Actualizar textos y ver los cambios reflejados en el portafolio.
- Añadir futuros proyectos sin reconstruir la página completa.
Es justo la diferencia entre una web generada y una web preparada para usarse de verdad.
🧩 Antes de empezar: recursos que necesitas
Necesitas una instalación limpia de WordPress en un hosting con acceso SSH, un proyecto de Antigravity y una cuenta para usar Stitch. No hace falta partir con un dominio definitivo. De hecho, para el proceso inicial puedes trabajar perfectamente con el dominio temporal que entrega el hosting.
Para montar la instalación de WordPress puedes usar Hostinger con este enlace de descuento. Además de servir para publicar el sitio, el acceso SSH es clave porque permite que el agente entre al servidor, revise la estructura de WordPress, cree archivos y deje el tema instalado directamente donde corresponde.
También conviene tener a mano el skill para conectar y trabajar con WordPress mediante Antigravity. Un skill funciona como una base de instrucciones: explica al agente cómo abordar la conexión, cómo detectar la instalación y qué reglas seguir al trabajar con los archivos del sitio.
Antes de conceder acceso a un agente, hay una recomendación importante: trabaja en una instalación nueva o de pruebas. No le des acceso sin restricciones a una web de producción que ya tiene contenido, clientes o ventas activas. Primero valida el flujo, revisa el código y confirma que todo se comporta como esperas.
🖥️ Instala WordPress limpio en Hostinger
El primer paso es muy simple. En el panel de Hostinger, añade un nuevo sitio web e instala WordPress directamente. Aunque un agente podría asumir algunas partes de esta configuración, instalar WordPress desde el panel te ahorra pasos y deja claro desde el inicio que estás trabajando sobre una instalación limpia.
Selecciona la opción de crear el sitio desde cero y espera a que termine la instalación. Al finalizar tendrás:
- Una instalación de WordPress funcional.
- Un dominio temporal para comprobar el sitio.
- Acceso al panel de WordPress.
- Las credenciales de servidor necesarias para conectarte por SSH.
Al principio el sitio se verá vacío, con el contenido y tema predeterminados de WordPress. Perfecto. Ese es el punto de partida ideal para que el tema personalizado no tenga que convivir con configuraciones viejas, constructores o estilos que ensucien el resultado.
Localiza los datos de SSH
Dentro del sitio creado en Hostinger, entra en las opciones avanzadas y busca Acceso SSH. Ahí aparecen los datos que el agente necesita para conectarse:
- Dirección IP.
- Puerto SSH.
- Nombre de usuario.
- Contraseña o mecanismo de autenticación.
- Comando de conexión SSH.
No publiques estas credenciales, no las pegues en documentos públicos y no las compartas fuera de un entorno seguro. Son el acceso al servidor.
También copia el dominio temporal. Aunque no sea la URL final, ayuda a que el agente pueda reconocer qué sitio está modificando y comprobar los resultados después de cada cambio.
🔐 Crea una clave SSH para que Antigravity pueda entrar al servidor
En lugar de depender únicamente de una contraseña, puedes utilizar una clave SSH. Desde el apartado de SSH en Hostinger hay una opción para agregar una clave pública.
El flujo es bastante directo:
- En Antigravity, pídele al agente que genere una clave pública SSH para agregarla al hosting.
- Copia la clave pública que entrega.
- En Hostinger, selecciona agregar clave SSH.
- Pega la clave y ponle un nombre reconocible, por ejemplo, antigravity-pruebas.
- Guarda el registro.
Después, pega en el proyecto de Antigravity los datos de acceso SSH, el dominio temporal y las instrucciones del skill. No hace falta que el mensaje quede perfectamente bonito. Lo importante es que incluya los datos necesarios y que el agente entienda que debe usar esa instalación de WordPress para el proyecto.
Una buena primera tarea es pedirle que compruebe la conexión y liste brevemente los archivos de la instalación. Si puede identificar la versión de WordPress, el tema activo y los plugins mínimos instalados, ya tienes la confirmación de que el acceso funciona.
Este chequeo inicial es importantísimo. Antes de pedirle que modifique temas, cree tipos de contenido o publique archivos, asegúrate de que está entrando en la carpeta correcta.
🎨 Diseña primero en HTML con Google Stitch
Ahora viene una de las partes más entretenidas. Antes de convertir cualquier cosa a WordPress, conviene diseñar primero una versión en HTML. Esto hace que el proceso sea mucho más simple porque separas dos problemas distintos:
- Primero: definir la estética, la arquitectura visual y las secciones.
- Después: convertir esa propuesta en una estructura nativa de WordPress.
Stitch funciona muy bien para esta etapa. Puedes entrar en stitch.withgoogle.com, seleccionar el formato web y pedir una primera propuesta. Para el ejemplo, el encargo consiste en crear la página de inicio de un portafolio de freelancer que pudiera adaptarse también a una empresa.
Un punto clave: no te conformes con el primer resultado. Los primeros diseños de IA suelen ser bastante genéricos. Azul, tarjetas limpias, tipografía correcta, todo ordenado, pero sin personalidad. Si el resultado está aburrido, dilo.
La IA no se ofende. Puedes pedirle que pruebe una paleta más atractiva, que aumente el contraste, que use acentos más vivos o que agregue secciones con más intención comercial.
Cómo pedir un diseño que no parezca una plantilla genérica
En vez de pedir solamente “un portafolio moderno”, agrega dirección creativa y estructura de negocio. Por ejemplo:
- Indica el tipo de profesional o negocio.
- Define el tono visual: minimalista, editorial, brutalista, tecnológico, elegante o vibrante.
- Pide una paleta de cuatro colores con contraste real.
- Solicita secciones concretas: servicios, testimonios, proyectos, métricas, proceso, preguntas frecuentes y contacto.
- Explica qué debería hacer el usuario al llegar a la página: agendar una llamada, pedir presupuesto, conocer casos de éxito o escribir por WhatsApp.
En este caso, el diseño empezó muy genérico y se fue corrigiendo en conversación. Se eliminó una paleta que no funcionaba, se probaron estilos más expresivos y se llevó el concepto hacia una especie de brutalismo más futurista. No hace falta amar el brutalismo para aprovechar la lección: hay que iterar hasta que la web tenga una identidad.
También se añadieron dos secciones antes del pie de página y una sección de proyectos destacados. Después se pidió una página adicional para mostrar todos los proyectos del portafolio. Ese segundo pedido es clave porque ya estás diseñando una estructura de sitio, no solamente una portada.
El diseño ideal para este flujo
Al terminar, deberías tener al menos dos pantallas o páginas:
- Inicio: propuesta de valor, servicios, proyectos destacados, métricas y llamadas a la acción.
- Proyectos: archivo visual de casos, tarjetas, categorías y enlaces a fichas individuales.
Stitch puede generar assets adicionales y más variantes de diseño. No tienes obligación de usar todo. Quédate con los archivos que realmente representen las páginas que vas a convertir a WordPress.
📦 Exporta las páginas HTML al proyecto de Antigravity
Cuando el diseño esté listo, exporta las páginas seleccionadas en formato ZIP y guárdalas dentro de la carpeta del proyecto de Antigravity. Si el archivo incluye elementos que no vas a ocupar, como una versión de diseño adicional, puedes eliminarlo y quedarte solo con los HTML necesarios.
El objetivo es que el agente encuentre claramente algo como esto:
- Una página HTML para el inicio.
- Una página HTML para el archivo de proyectos.
- Los recursos visuales asociados, si se exportaron junto al diseño.
Ahora puedes darle una instrucción muy concreta: revisa los archivos HTML del proyecto y úsalos como base para crear un tema nativo de WordPress. Indícale que, por ahora, se enfoque en la portada y el archivo de proyectos. Más adelante puedes pedir plantillas para artículos, páginas legales, páginas de servicio o cualquier otra sección.
🤖 Convierte el diseño en un tema nativo de WordPress
Esta es la parte donde el agente realmente cambia las reglas del juego. En vez de reconstruir cada sección manualmente dentro de WordPress, el agente puede preparar la estructura del tema y dejarla instalada en el servidor.
Un plan razonable para esta conversión debería contemplar:
- Conversión del HTML a plantillas de WordPress.
- Cabecera y pie de página reutilizables.
- Plantilla para la página de inicio.
- Plantilla para el archivo de proyectos.
- Plantilla individual para cada proyecto.
- Archivo de funciones del tema.
- Registro de un tipo de contenido personalizado para proyectos.
- Categorías o taxonomías para ordenar el portafolio.
- Campos para datos relevantes, como cliente, resultados, métricas o enlaces.
Ese último bloque es lo más interesante. No estás pidiendo solamente una conversión visual. Estás pidiendo que los elementos repetibles de la web se conviertan en datos gestionables desde WordPress.
Una instrucción útil puede ser algo así:
“Revisa los archivos HTML de inicio y proyectos que dejé en la carpeta. Úsalos como base para crear un tema nativo de WordPress e instálalo en la web conectada por SSH. Crea un tipo de contenido personalizado para proyectos, categorías administrables y campos que permitan editar cliente, resultados, métricas e imágenes desde WordPress. Mantén el diseño visual de los HTML y deja la portada y el archivo de proyectos funcionales.”
Luego, cuando el agente proponga un plan, revísalo antes de continuar. Es una buena práctica. Confirma que las plantillas que planea crear tienen sentido y que no va a modificar algo fuera del alcance del proyecto.
🛠️ Revisa, corrige y no te asustes si la primera carga falla
En proyectos reales, la primera versión no siempre sale perfecta. Puede aparecer una página rota, una hoja de estilos que no cargó, un problema de caché, una sesión del navegador que muestra una versión antigua o una plantilla que necesita un ajuste menor.
Si algo se ve mal, no hace falta entrar en pánico ni rehacerlo todo. Prueba primero el sitio en una ventana de incógnito para descartar caché. Después pídele al agente que revise el problema visual, identifique su causa y aplique una corrección.
En este flujo, una página inicialmente se veía mal, pero después de una revisión se corrigió y terminó manteniendo el diseño esperado. La enseñanza es sencilla: la IA acelera mucho el trabajo, pero no elimina el control de calidad.
Revisa especialmente:
- Que el tema activo sea el tema generado.
- Que la portada cargue sin errores.
- Que las imágenes y recursos tengan rutas correctas.
- Que la página de proyectos enlace a los casos individuales.
- Que los filtros o categorías respondan correctamente.
- Que la versión móvil no quede abandonada.
- Que los textos estén en el idioma correcto.
En este caso, tras comprobar que las páginas ya estaban funcionando, se pidió también traducir todos los textos al español. Este tipo de ajuste es perfecto para hacer después de tener la estructura visual estable.
🗂️ Haz que el portafolio se gestione desde WordPress
Una vez instalado el tema, entra al escritorio de WordPress. Ahí debería aparecer un nuevo menú o sección para gestionar los proyectos. Eso significa que el agente creó el tipo de contenido personalizado correctamente.
Desde ese menú puedes abrir cualquiera de los casos del portafolio y editarlo. Puedes cambiar un título, modificar un texto, añadir una imagen o actualizar la información del proyecto. Al guardar y refrescar la web, el cambio debería aparecer automáticamente en la tarjeta correspondiente.
Ese es el momento en el que el proyecto deja de ser una demostración visual y se vuelve una herramienta administrable.
Las categorías también se gestionan desde WordPress. Por ejemplo, puedes organizar los trabajos como:
- Renovación de marca.
- Growth hacking.
- Estrategia de contenidos.
- Lanzamientos GTM.
- Marketing de productos.
Cuando la taxonomía está bien conectada con el tema, esas categorías sirven tanto para ordenar el contenido desde el escritorio como para crear filtros o etiquetas visibles en la página de proyectos.
📁 Así se ve una página de archivo de proyectos bien resuelta
La página de archivo no tiene por qué ser una lista aburrida. Puede ser una parte central de la propuesta de valor de una agencia o freelancer. En este ejemplo, el archivo utiliza una estética oscura, tipografía muy grande, contraste alto y acentos verdes para dar una sensación más editorial y más agresiva.
Cada tarjeta permite presentar un caso de manera visual, con imágenes, categoría y elementos de identidad propios. La web también incorpora una navegación que permite pasar de la página de inicio al archivo completo del portafolio.
Esto es especialmente potente para negocios donde el trabajo previo vende más que un texto genérico: marketing, diseño, desarrollo, arquitectura, fotografía, producción audiovisual, branding o consultoría.
En lugar de decir “hacemos grandes proyectos”, muestras los proyectos. Y como están conectados a WordPress, puedes seguir ampliando la biblioteca con el tiempo.
✅ Recomendaciones para trabajar bien con agentes de IA
Hay una tentación de pedirlo todo de una vez. “Hazme una web completa con todo.” A veces funciona, pero normalmente es mejor ir por etapas. Este flujo tiene buenos resultados porque cada parte tiene una responsabilidad clara.
1. Separa diseño y desarrollo
Primero resuelve el diseño en Stitch. Cuando te guste, exporta el HTML. Solo después pasa a WordPress. Si intentas definir diseño, textos, estructura, campos y lógica a la vez, las correcciones se vuelven mucho más caóticas.
2. Da tareas concretas
No pidas “mejora la web”. Pide cosas específicas: agrega una sección de tres proyectos, crea una página de archivo, reduce el tamaño de letra del pie de página, cambia la paleta, traduce los textos o crea una taxonomía para categorías.
3. Revisa el plan antes de ejecutar
Cuando el agente muestre que va a crear una plantilla, registrar un tipo de contenido o tocar los archivos del tema, revisa el plan. Esa pausa de un minuto puede evitar que una tarea se desvíe.
4. Prueba cambios pequeños
Después de crear el tema, prueba un cambio sencillo en un proyecto. Modifica una frase, guarda y confirma que se refleja en la web. Es la forma más rápida de verificar que la administración de contenidos está funcionando.
5. Conserva una instalación de pruebas
Para experimentar con agentes conectados por SSH, una instalación limpia es tu mejor amiga. Puedes probar estilos, estructuras y tipos de contenido sin afectar una web que ya está en operación.
🌐 Recursos para seguir creando con IA
Si quieres acelerar la parte de ideación y estructura de productos digitales, puedes encontrar prompts profesionales para crear tu app en Primera App. Para construir páginas con una aproximación más visual, también tienes Dynamo Sites.
Y si quieres aprender y compartir procesos de creación de apps y sitios con inteligencia artificial, puedes unirte a la comunidad de Vibe Coding. Si prefieres trabajar un proyecto de forma directa y personalizada, puedes enviar los detalles de tu proyecto.
🔥 El cambio importante: WordPress ya no tiene que ser lento de construir
La gran ventaja de este método no es que una inteligencia artificial haga magia sin supervisión. La ventaja es que puedes pasar de una idea a una web funcional mucho más rápido, sin renunciar a una estructura seria.
Stitch te ayuda a encontrar una dirección visual. Antigravity puede encargarse de convertir ese diseño en un tema nativo y conectarlo con el servidor. WordPress se mantiene como el lugar donde administras el contenido día a día. Hostinger aporta el entorno donde todo queda instalado y publicado.
El resultado es una web con diseño propio, sin Elementor, con contenido editable y con espacio para crecer. Y eso abre una posibilidad enorme: en vez de partir cada proyecto desde una plantilla genérica, puedes construir experiencias mucho más personalizadas sin convertir el desarrollo en una pesadilla.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
