Este no es un artículo sobre “la IA puede hacer webs”. Eso ya lo hemos oído demasiadas veces.

Este es el proceso real que seguí para rediseñar mi propia web: qué hice primero, qué herramienta usé en cada fase, qué salió rápido, qué hubo que ajustar y dónde está el punto en el que la demo bonita se encuentra con la realidad de WordPress.

El resultado está en esta web enriquetorres.pro.

El punto de partida era mret.es, una web que durante un tiempo me sirvió como cuaderno de bitácora para experimentos, radio, blog, pruebas de IA y reflexiones de negocio.

Funcionaba.

Pero ya no representaba bien lo que hago ahora.

Y esa es la clave de todo el experimento.

No empecé abriendo Google Stitch.

Empecé intentando aclarar qué tenía que decir mi nueva web.

Porque ahí está la diferencia entre hacer una maqueta vistosa y construir una página que realmente te represente.

Cómo rediseñar una web con IA sin saber programar: de Google Stitch a WordPress

El punto de partida: una web que funcionaba, pero ya no encajaba

Mi web anterior tenía sentido en una etapa anterior.

Era más experimental. Más “voy probando cosas y las documento”. Más Mr. ET en modo laboratorio.

Pero mi posicionamiento había cambiado.

Ahora quería que la web explicara mejor tres cosas:

• A quién ayudo
• Qué problema resuelvo
• Cómo trabajo con negocio, procesos e inteligencia artificial

No quería una web “más moderna” sin más.

Eso es una trampa bastante habitual.

Mucha gente se plantea rediseñar su web porque “se ha quedado antigua”. Pero cuando rascas un poco, el problema no es visual.

El problema es estratégico.

La web no explica bien lo que haces, no deja claro para quién eres, no orienta al visitante hacia ninguna acción y no refleja la evolución real del negocio.

Y si eso no está claro, puedes meterle IA, diseño premium, animaciones y fuegos artificiales.

Seguirá fallando.

Solo que fallará con mejor tipografía.

El error habitual: empezar por la herramienta

El error más normal cuando alguien quiere hacer un rediseño web con IA es abrir directamente una herramienta visual.

Google Stitch, Lovable, v0, Framer, Relume, lo que toque esa semana.

Es comprensible.

Ves una demo, te vienes arriba y piensas:

“Voy a meter mi web y que me la deje espectacular.”

Y sí, puede salir algo espectacular.

Pero hay una pregunta previa:

¿espectacular para qué?

Porque una web no tiene que ser solo bonita.

Tiene que hacer un trabajo:

• posicionarte
• explicar tu propuesta
• filtrar al cliente adecuado
• generar confianza
• llevar a una acción concreta

Si no sabes qué trabajo tiene que hacer tu web, la IA tampoco lo sabe.

Te va a devolver una carcasa.

Puede ser bonita.

Puede parecer profesional.

Puede tener degradados, tarjetas, botones y una sección hero muy aparente.

Pero si no conecta con tu negocio, será una maqueta bonita más.

El proceso real: primero estrategia, luego diseño

El orden que seguí fue este:

1. Aclarar estrategia con ChatGPT
2. Generar propuesta visual con Google Stitch
3. Interpretar y ajustar código con Google AI Studio / ChatGPT
4. Llevarlo a WordPress
5. Revisar, adaptar y limpiar

Ese orden importa.

Porque si empiezas por el diseño, todo lo demás se convierte en remiendo.

Y esto vale para una web, para una landing, para una app o para cualquier proceso con IA.

Primero claridad.

Luego sistema.

Luego herramienta.

No al revés.

Paso 1: usar ChatGPT para ordenar la estrategia

La primera herramienta que usé fue ChatGPT.

No para que me diseñara la web.

Para que me ayudara a ordenar el pensamiento.

Le pasé contexto sobre:

• mi web anterior
• mi posicionamiento actual
• el tipo de cliente al que quiero llegar
• mi enfoque de consultoría
• la importancia de negocio, procesos e IA
• la necesidad de que la web no pareciera una colección de experimentos sueltos

La petición no fue:

“Hazme una web bonita.”

Fue más bien:

“Necesito rediseñar mi web para que represente mejor mi marca personal como consultor de IA aplicada a procesos de negocio. Ayúdame a definir arquitectura, mensaje principal, secciones y enfoque para después llevarlo a una herramienta visual como Google Stitch.”

Ahí ChatGPT me ayudó a sacar varias cosas útiles:

• una propuesta de mensaje principal
• estructura de secciones
• tono general
• jerarquía de contenidos
• llamada a la acción
• y un prompt más trabajado para usar después en Stitch

Esto es importante.

Muchas veces usamos ChatGPT para que nos dé el resultado final.

Aquí lo usé como arquitecto previo.

No para publicar directamente.

Para pensar mejor antes de construir.

Paso 2: llevar la idea a Google Stitch

Una vez tenía el enfoque trabajado, pasé a Google Stitch.

Stitch sirve para generar propuestas visuales de interfaces: webs, aplicaciones, pantallas, layouts. Lo interesante es que transforma una instrucción en una maqueta visual bastante rápida.

Le pasé:

• el prompt trabajado con ChatGPT
• la referencia de mi web anterior
• ideas de estilo
• referencias visuales de otras webs
• y el objetivo de reposicionar la marca hacia consultoría de procesos e IA

El resultado fue rápido.

Muy rápido.

En pocos minutos puedes ver varias direcciones visuales.

Y eso antes era mucho más lento.

Antes, para explorar tres líneas de diseño necesitabas preparar briefing, esperar propuesta, revisar, pedir cambios, volver a revisar.

Ahora puedes probar varios caminos en un rato.

Eso tiene muchísimo valor.

Pero con una condición:

tienes que saber evaluar lo que te devuelve.

Porque Stitch no sabe si tu propuesta de valor está bien.

No sabe si ese hero vende.

No sabe si el orden de secciones ayuda al usuario.

No sabe si el mensaje conecta con el cliente correcto.

Te da diseño.

No criterio.

Lo que funcionó muy bien con Stitch

Lo mejor de Stitch fue la velocidad de exploración.

Para una primera fase visual es muy potente.

Puedes pedir:

• más sobriedad
• más aire
• otro estilo de tarjetas
• una estética más premium
• versión para móvil
• más claridad en los bloques
• una estructura de home más ordenada

Y te responde rápido.

Eso permite algo muy útil: ver antes de decidir.

No estás imaginando la web en abstracto. La estás viendo.

Y eso ayuda mucho a tomar decisiones.

También sirve para desbloquear conversaciones. Si trabajas con un cliente, enseñarle una propuesta visual temprana puede ayudarle a entender mucho mejor hacia dónde va el proyecto.

Pero ojo: que se vea bien no significa que esté listo.

Ahí empieza la siguiente parte.

La demo bonita no es una web publicada

Este punto conviene repetirlo.

Una maqueta visual no es una web en producción.

Una cosa es que Stitch te genere una propuesta de diseño.

Otra cosa es que eso:

• cargue bien
• sea responsive
• esté optimizado
• funcione dentro de WordPress
• mantenga coherencia visual
• no rompa estilos
• tenga buen SEO básico
• y se pueda editar después sin volverte loco

Aquí es donde muchas demos de IA hacen trampa sin querer.

Te enseñan lo bonito.

Pero no el aterrizaje.

Y el aterrizaje es donde aparece la trinchera.

Paso 3: interpretar el código con AI Studio o ChatGPT

Después del diseño visual, tocaba mirar qué había debajo.

Aquí entran herramientas como Google AI Studio, ChatGPT o incluso Claude.

La función en esta fase no es “crear la idea”, sino ayudar a interpretar y ajustar el código.

Dicho fácil:

Stitch te da una propuesta visual.
Pero para llevarla a una web real necesitas entender la estructura.
Y ahí una IA puede ayudarte a traducir esa maqueta en HTML, CSS o bloques reutilizables.

Yo usé este tipo de herramientas para:

• entender qué estructura había detrás
• separar bloques
• revisar estilos
• adaptar secciones
• pedir cambios concretos
• y preparar el material para llevarlo a WordPress

Ejemplos de instrucciones útiles:

Analiza este bloque HTML y CSS y explícame qué parte corresponde al hero principal, qué parte corresponde a las tarjetas y qué estilos globales está usando.

Convierte este bloque en una estructura más sencilla para poder insertarlo en WordPress sin romper el diseño responsive.

Reescribe este CSS eliminando estilos duplicados y dejando variables claras para colores, espaciados y tipografía.

Adapta este bloque para que pueda insertarlo como HTML personalizado dentro de WordPress manteniendo diseño responsive.

Aquí fue donde el proceso dejó de ser “magia visual” y empezó a ser trabajo real.

Lo que no te cuentan en los tutoriales

Lo que no te cuentan en muchas demos es esto:

el código que sale de una herramienta visual puede funcionar bien en su propio entorno, pero no siempre entra limpio en WordPress.

A veces:

• trae estilos demasiado acoplados
• usa clases poco claras
• repite CSS
• rompe márgenes
• no encaja con tu plantilla
• entra en conflicto con Elementor, Gutenberg o el tema activo
• se ve bien en escritorio y regular en móvil
• o te deja un bloque bonito pero difícil de editar después

Esto no significa que no sirva.

Significa que hay que saber en qué fase estás.

Stitch ayuda a diseñar.
AI Studio o ChatGPT ayudan a interpretar.
WordPress exige adaptar.

Son tres cosas distintas.

Si las confundes, te frustras.

Paso 4: llevarlo a WordPress

Mi web está montada en WordPress.

Y ahí tocaba el paso menos vistoso, pero más importante: llevar la propuesta visual a una página real.

Aquí hay varias formas de hacerlo:

• bloques HTML personalizados
• Elementor
• Gutenberg
• CSS adicional
• tema hijo
• plantillas reutilizables
• o una mezcla controlada de varias cosas

Mi enfoque fue práctico.

No intenté trasladar el código tal cual como si fuera copiar y pegar una maqueta entera.

Fui por bloques.

Primero estructura.

Después estilos.

Luego ajustes.

Y después revisión visual.

Esto es importante porque, cuando intentas meter todo de golpe, WordPress puede convertirse en una verbena.

Te funciona una sección, se rompe otra.

Arreglas móvil, se descuadra escritorio.

Tocas el botón, cambia el margen del hero.

La fiesta.

Por eso lo más sensato fue trabajar modularmente.

El principio modular: una sección cada vez

La forma más segura de llevar un diseño generado con IA a WordPress es pensar por módulos.

Por ejemplo:

• hero
• bloque de propuesta de valor
• tarjetas de servicios
• sección de método
• CTA
• footer

Cada módulo se prueba por separado.

Se ajusta por separado.

Y se valida antes de pasar al siguiente.

Esto tiene menos glamour, pero funciona mejor.

Porque puedes detectar dónde está el fallo.

Si metes toda la home de golpe y algo se descuadra, no sabes si el problema está en el CSS global, en un contenedor, en una clase repetida, en el responsive o en el tema.

Si trabajas por módulos, el error se localiza antes.

Y cuando estás usando IA para construir, localizar errores rápido vale muchísimo.

Qué funcionó bien

Lo que mejor funcionó fue esto:

1. Usar ChatGPT antes de Stitch

Si hubiera entrado directamente a Stitch, seguramente habría sacado algo bonito, pero más genérico.

El trabajo previo de estrategia hizo que la propuesta visual tuviera más sentido.

2. Usar Stitch para explorar rápido

En vez de quedarme bloqueado pensando “qué diseño quiero”, pude ver opciones.

Eso acelera muchísimo.

3. Usar AI Studio o ChatGPT como intérprete

No hace falta entender todo el código para poder trabajar con él.

Pero sí necesitas una herramienta que te ayude a traducir, limpiar y adaptar.

4. Llevarlo a WordPress por bloques

Esto fue clave.

Copiar y pegar sin pensar es la receta perfecta para el desastre.

Trabajar por secciones permite controlar mejor el resultado.

Qué no funcionó tan bien

También hubo partes menos bonitas.

1. El código no siempre viene limpio

Esto es normal.

Pero hay que saberlo.

Una cosa es generar una demo visual.

Otra, construir algo mantenible.

2. Algunas decisiones visuales eran aparentes, pero no útiles

La IA tiende a generar cosas bonitas.

Pero bonito no siempre es claro.

Hubo que revisar jerarquías, textos, tamaños, contraste y orden de secciones.

3. WordPress tiene sus propias reglas

No todo lo que funciona en una maqueta entra bien en WordPress.

El tema activo, los estilos globales, los plugins y los constructores visuales influyen.

4. El responsive exige revisión

Que algo se vea bien en escritorio no significa que se vea bien en móvil.

Y en una web real, el móvil no es un detalle.

Es media película.

El marco de seguridad y control que usaría

Aunque aquí no estamos hablando de datos sensibles como en un agente que entra en carpetas, también conviene trabajar con control.

Yo pondría estas reglas:

1. No tocar la web en producción a lo loco

Primero pruebas.

Luego publicas.

Si puedes usar entorno de pruebas, mejor.

2. Guardar versiones

Antes de meter un bloque nuevo, guarda copia.

Antes de cambiar CSS global, guarda copia.

Antes de tocar estructura, guarda copia.

Esto ahorra disgustos.

3. No depender de un único prompt

Si una instrucción rompe algo, vuelve atrás.

No intentes arreglar cinco fallos encima del fallo inicial.

4. Revisar móvil siempre

Cada bloque que entra debe revisarse en escritorio y móvil.

No al final.

En cada paso.

5. Mantener criterio humano

La IA propone.

Tú decides.

Especialmente en:

• mensaje
• jerarquía
• llamadas a la acción
• estructura comercial
• experiencia del usuario

Para qué tipo de proyectos sirve este flujo

Lo veo muy útil para:

• webs de marca personal
• consultores
• profesionales independientes
• páginas de servicio
• landing pages
• rediseños de webs antiguas
• prototipos visuales
• primeras versiones de una idea
• validación rápida de propuesta

Especialmente cuando ya existe algo y quieres mejorarlo.

Tienes un punto de partida.

Tienes referencias.

Tienes contenido.

La IA puede ayudarte a reorganizar y visualizar más rápido.

Para qué no lo usaría sin ayuda

No lo usaría alegremente para:

• ecommerce complejo
• webs con mucha lógica interna
• plataformas con usuarios
• integraciones críticas
• sistemas con base de datos sensible
• proyectos donde el SEO técnico sea absolutamente decisivo desde el primer día
• negocios que dependen al 100% de la web para facturar y no pueden permitirse fallos

Ahí puede ayudar, sí.

Pero no lo plantearía como “me lo hago yo en una tarde y listo”.

Una cosa es bajar la barrera.

Otra es negar la complejidad.

Herramientas usadas

Herramienta	Para qué la usé	Observación
ChatGPT	Estrategia, estructura, mensajes y prompt para Stitch	La parte más importante antes del diseño
Google Stitch	Propuesta visual de la web	Muy útil para explorar rápido
Google AI Studio	Interpretar y ajustar código	Puente entre maqueta y código más entendible
WordPress	Publicación final	Donde llega la realidad
CSS / HTML personalizado	Ajustes finales	Necesarios para no depender solo de la maqueta

Qué aprendí del experimento

La conclusión principal es sencilla:

El rediseño web con IA no empieza en la IA. Empieza en el negocio.

Si sabes qué quieres comunicar, la IA acelera.

Si no lo sabes, maquilla.

Y esto es aplicable a casi cualquier herramienta.

La tecnología ha bajado mucho la barrera de entrada. Puedes visualizar, prototipar, ajustar y publicar más rápido que hace un año.

Pero la barrera de criterio sigue ahí.

De hecho, diría que ahora pesa más.

Porque antes podías escudarte en que no sabías diseñar o programar.

Ahora, si la herramienta te permite construir, la pregunta cambia:

¿sabes dirigirla?

Qué haría yo si quisiera probarlo esta semana

Si tienes una web que ya no representa bien tu negocio, haría esto:

1. Escribe qué ha cambiado en tu negocio

No empieces por diseño.

Responde:

• qué haces ahora
• a quién ayudas
• qué servicio quieres vender
• qué problema resuelves
• qué acción quieres que haga el visitante

2. Pide a ChatGPT una arquitectura de página

No le pidas “una web bonita”.

Pídele:

• estructura
• secciones
• mensaje principal
• tono
• CTA
• jerarquía de contenidos

3. Convierte eso en prompt para Stitch

Pídele a ChatGPT:

Convierte esta estrategia en un prompt claro para generar una propuesta visual de web en Google Stitch.

4. Genera tres propuestas visuales

No te cases con la primera.

Compara.

Mira qué comunica mejor.

5. Elige una sola sección para llevar a WordPress

No intentes trasladarlo todo.

Empieza por el hero o por un bloque clave.

6. Revisa escritorio y móvil

Si no se ve bien en móvil, no está terminado.

7. Decide si merece la pena seguir

Si la prueba te da claridad, continúa.

Si solo te ha dado una imagen bonita sin utilidad, corta.

Sin dramas.

Mi conclusión

Este experimento me confirmó algo que ya intuía:

la IA permite avanzar muchísimo más rápido en diseño web, pero no elimina la necesidad de pensar.

De hecho, la aumenta.

Porque ahora puedes construir antes.

Y cuando puedes construir antes, también puedes equivocarte antes.

Por eso el orden importa:

primero estrategia,
luego diseño,
después código,
y por último publicación real.

En ese orden.

Si lo haces así, herramientas como ChatGPT, Google Stitch, AI Studio y WordPress pueden ayudarte a rediseñar una web con bastante más velocidad y control.

Si lo haces al revés, acabas con una maqueta bonita, un código difícil de mover y una web que no termina de decir nada.

Y eso no es transformación digital.

Eso es decoración con wifi.

Si quieres entender el contexto en el que conté este proceso en radio, lo tienes recogido en la sección de Onda Cero Albacete.

👉 Leer la intervención en Radio Onda Cero sobre rediseño web con IA y NotebookLM

Y si tienes una web que ya no representa bien tu negocio, o no sabes qué proceso deberías mejorar primero, ahí es donde tiene sentido empezar con una Radiografía de Negocio.

👉 Solicita tu Radiografía de Negocio

Siguiente paso

¿Te ves reflejado en esto?

No necesitas más teoría. Necesitas claridad sobre tu negocio.

Haz tu Radiografía de Negocio →

Sigue por aquí

🧭 El Método Cómo trabajo contigo para ordenar y automatizar tu negocio. 🎙 Radio ET Ideas habladas en directo. IA y negocios sin hype. 🧪 Laboratorio IA Pruebas reales con herramientas. Lo que funciona y lo que no.