Cómo crear mockups web con IA: mi experiencia real preparando la DrupalCamp Spain 2025

La semana pasada estaba preparando mi charla para la DrupalCamp Spain 2025 de Santiago de Compostela cuando se me ocurrió hacer una prueba. Cogí el diseño de la web del evento y me puse a generar variaciones con inteligencia artificial.

En menos de una hora tenía decenas de propuestas diferentes. Y no, no soy diseñador.

Por qué empecé a usar IA para crear mockups

Trabajo con varias agencias de desarrollo web y muchas veces necesito comunicar ideas visuales. Antes era un proceso tedioso: intentar explicar con palabras lo que tenía en mente o hacer bocetos cutres que nadie entendía.

Ahora puedo generar mockups en minutos y la comunicación con los equipos de diseño es mucho más fluida.

La herramienta que uso (aunque no es lo importante)

Para estos ejemplos he usado NanoBanana de Google, pero cada mes aparecen modelos nuevos. Lo relevante no es qué herramienta uses, sino cómo la integres en tu proceso de trabajo.

Primer experimento: diseños completos desde cero

Empecé generando rediseños completos de la web de DrupalCamp. Quería ver qué variedad de estilos podía conseguir partiendo del mismo punto.

Cada diseño tiene una dirección visual diferente, justo lo que buscaba. Generar cada versión me llevó apenas unos minutos. En algunos casos fueron solo segundos porque iba iterando sobre diseños anteriores.

De las decenas de versiones que generé, estas son las que mejor quedaron. No son perfectas, pero cumplen su función: mostrar diferentes caminos visuales posibles.

Segundo experimento: modificar secciones específicas

No siempre necesitas rediseñar toda la web. A veces solo quieres explorar cómo quedaría una sección concreta con otro estilo.

Hice la prueba con la sección de precios como ejemplo:

Le pedí cambios específicos pero también le di libertad para que propusiera versiones según el estilo visual de la web. Los resultados no son perfectos, pero sirven para que cualquiera pueda ver las diferencias y decir "prefiero este estilo" o "mejor probemos con algo más parecido a este otro".

Tercer experimento: editar zonas concretas de una página

El último test fue tomar capturas de pantalla completas y pedir modificaciones solo en ciertas áreas. Esto es especialmente útil cuando quieres mantener la estructura general pero explorar cambios puntuales.

Mi proceso de trabajo con estas herramientas

1. Recopilar referencias

Busco webs de la competencia o referencias que puedan gustar. Hago capturas de pantalla y anoto qué elementos específicos quiero destacar o combinar.

2. Analizar contenidos

Copio los textos de las referencias y uso IA para entender:

• Cómo estructuran la información
• Qué tono usan
• Cómo organizan las secciones

3. Crear el puzzle

Le pido a la IA que combine todas las referencias: "toma la cabecera de esta web, el estilo de botones de esta otra, la estructura de contenido de aquella". Es como armar un puzzle con las mejores piezas de cada sitio.

4. Iterar rápidamente

A partir de ese primer diseño, voy pidiendo variaciones. Cambios de color, de espaciado, de tipografía... En minutos tengo múltiples opciones.

Cómo mejora la comunicación en equipos

Lo más valioso que he descubierto es cómo facilita el trabajo con agencias. Cuando necesito explicar una idea al equipo de diseño, genero un mockup rápido. Ya no hay malentendidos ni pérdidas de tiempo.

El diseñador ve exactamente lo que tengo en mente, me dice qué funcionaría y qué no desde su experiencia, y avanzamos mucho más rápido.

Por qué esto no reemplaza al equipo de diseño

Es importante entender las limitaciones. Durante mis pruebas, la mayoría de diseños generados tenían problemas:

• Errores básicos de usabilidad
• Proporciones extrañas
• Elementos que no tendrían sentido al implementarlos
• Inconsistencias visuales

Un diseñador profesional detecta estos fallos al instante y sabe cómo solucionarlos. La IA es una herramienta para acelerar procesos, no para reemplazar el criterio humano.

Ventajas reales en el día a día

Exploración sin límites: Puedes probar decenas de ideas en el tiempo que antes tardabas en hacer una.

Feedback más concreto: Es más fácil opinar sobre algo visual que sobre una descripción.

Documentación del proceso: Todas las variaciones quedan guardadas, útil para justificar decisiones.

Ahorro de tiempo: Lo que antes llevaba días ahora se hace en una hora.

Lo que nadie te cuenta sobre estas herramientas

No todas las generaciones salen bien. Por cada diseño decente que ves aquí, descarté muchos otros. Es un proceso de prueba y error donde la cantidad lleva a la calidad.

Tampoco esperes resultados listos para producción. Son mockups, aproximaciones visuales. El trabajo fino sigue requiriendo un profesional.

Aplicación práctica en agencias

Si trabajas en una agencia o colaboras con ellas, estas herramientas pueden mejorar varios procesos:

• Reuniones iniciales: Llegar con múltiples propuestas visuales en vez de solo ideas
• Iteraciones con cliente: Mostrar cambios rápidamente sin comprometer horas de diseño
• Brainstorming interno: Explorar direcciones creativas sin inversión de tiempo
• Documentación de propuestas: Incluir mockups en las propuestas comerciales

El dato que más impresiona: tiempo real invertido

Todo lo que ves en este artículo lo generé en menos de una hora. Eso incluye todas las pruebas, los diseños descartados y la selección final.

Sin IA, crear esta cantidad de variaciones sería imposible para alguien sin formación en diseño. E incluso para un diseñador, llevaría muchísimo más tiempo.

Cómo empezar a usar estas herramientas

1. Experimenta primero con proyectos internos: No te lances directamente con clientes
2. Crea una biblioteca de referencias: Guarda webs y elementos que funcionen bien
3. Documenta qué funciona: Anota qué tipo de instrucciones dan mejores resultados
4. Involucra al equipo de diseño: Que vean estas herramientas como aliadas, no como amenazas

Conclusión: el futuro ya está aquí

La IA no va a reemplazar a los diseñadores, pero sí está cambiando cómo trabajamos todos en el sector web. Para los equipos de agencias, estas herramientas pueden significar:

• Procesos de diseño más ágiles
• Mejor comunicación entre departamentos
• Más opciones creativas con menos inversión de tiempo
• Clientes más satisfechos al ver sus ideas materializadas rápidamente

Si vienes a la DrupalCamp Spain 2025 en Santiago, pásate por mi charla sobre automatización y productividad en agencias mediante IA. Mostraré más ejemplos prácticos y compartiré trucos específicos para integrar estas herramientas en el flujo de trabajo diario.

Lo importante no es ser un experto en IA o en diseño. Es empezar a experimentar y encontrar cómo estas herramientas pueden mejorar tu forma de trabajar. El futuro no es que las máquinas nos reemplacen, es que nos ayuden a ser más eficientes y creativos.