Prompts de diseño: cómo pedirle a la IA que diseñe contigo

Durante años, los diseñadores web hemos trabajado con herramientas que nos ayudan a visualizar, organizar y validar ideas: Figma, Penpot, InVision, Sketch… 

Con la llegada de la inteligencia artificial, el proceso ha dado un salto: podemos delegar las tareas de construcción para centrarnos en la conceptualización. 

Diseñar con IA consiste en dirigir una conversación estructurada en la que la IA propone y nosotros tomamos decisiones.

La IA nos acompaña durante todo el proceso, desde la ideación hasta la implementación, y nos ayuda a formular, iterar y validar nuestras ideas.

Esta guía está pensada para diseñadores WordPress que quieren integrar la inteligencia artificial en su flujo de trabajo. 

1. Qué significa «diseñar con IA» en la práctica
2. Cómo integrar las herramientas de IA en el flujo de trabajo con WordPress
3. Anatomía de un buen prompt
4. Lenguaje de diseño que la IA entiende mejor
5. Cómo resolver los problemas que puedes tener cuando diseñas con IA
6. La IA propone y tú decides

Qué significa «diseñar con IA» en la práctica

Para los diseñadores que trabajamos con WordPress, diseñar con IA implica tres cosas:

1. Aprender a verbalizar decisiones de diseño. Aprender a expresar decisiones visuales y estructurales con palabras precisas.
2. Adoptar una mentalidad iterativa. Conversar con la IA no para obtener una única respuesta, sino para mejorar progresivamente el resultado.
3. Mantener el criterio profesional. La IA propone alternativas, pero decidir lo que mejor cumple los objetivos sigue siendo nuestro trabajo.

Gracias a la IA, podemos probar más, descartar más rápido y llegar más lejos.

Cómo integrar las herramientas de IA en el flujo de trabajo con WordPress

La IA nos acompaña durante todo el proceso, pero su rol cambia según la fase: al principio piensa y planifica, después explora y prototipa y al final implementa y refina.

1. Descubrimiento e ideación

El proceso de descubrimiento e ideación en UX consiste en investigar, comprender y definir las necesidades del usuario y los objetivos del negocio para generar ideas y enfoques que nos orienten para diseñar la solución.

En esta fase, un LLM (Large Language Model) nos ayuda a estructurar el pensamiento antes de ponernos a diseñar nada.

Lo primero es analizar al usuario y sus necesidades. Con IA podemos crear perfiles más matizados, identificar motivaciones y simular escenarios de uso. La conversación iterativa con el modelo nos ayuda a profundizar sin caer en suposiciones superficiales.

Después necesitamos definir los objetivos del negocio y del proyecto. Aquí la IA nos ayuda a reformular el briefing, detectar contradicciones, sintetizar expectativas y convertir requisitos difusos en objetivos operativos.

También debemos mapear el contenido y la estructura inicial del sitio. Un LLM puede proponer arquitecturas de información coherentes, sugerir secciones, reorganizar contenido existente y validar si la jerarquía tiene sentido para el usuario final.

Por último, toca revisar la competencia y el contexto del mercado. Con IA podemos analizar decenas de referencias en minutos, detectar patrones comunes, identificar oportunidades de diferenciación y entender dónde podemos aportar más valor.

Consejo: No tengas prisa en esta fase: una hora bien invertida aquí te ahorra días de correcciones después.

¿Qué herramientas IA usar en la fase de descubrimiento?

Según mi propia experiencia, el orden de mejor a peor sería:

• ChatGPT para estructurar contenidos, redactar briefings detallados y generar user personas con matices realistas. Porque tiene muy buena comprensión contextual, capacidad narrativa y adapta muy bien el tono profesional. Es ideal para conversaciones iterativas y resultados accionables.
• Claude (Anthropic) es muy buena en coherencia, empatía y análisis de tono. Es muy útil para generar documentación clara, escenarios de usuario y análisis cualitativos. 
• Perplexity es muy buena opción para investigar a la competencia y las tendencias, porque tiene búsqueda en tiempo real. No la recomiendo para redactar.
• Gemini (Google) puede ser potente en análisis de datos si se integra con el ecosistema de Google, pero es peor en redacción estratégica o conceptualización. Es útil si trabajas con Analytics, Sheets o Search Console, pero no destaca en la creación de user personas ni en arquitectura de contenido.

Muchos diseñadores terminamos usando 2 o 3 de estas herramientas en paralelo, según la tarea. No se trata de elegir una, sino de usar la mejor para cada momento. Eso sí, el factor precio es importante: todas tienen un coste mensual que puede pesar si tienes un presupuesto ajustado.

2. Prototipado rápido

Cuando el proyecto tiene múltiples stakeholders o necesitas validar interacciones específicas, puedes usar herramientas de vibe coding como Figma Make y/o Lovable para generar prototipos funcionales.

No son herramientas secuenciales ni excluyentes: elige la que mejor encaje con tu forma de trabajar.

En esta fase pruebas diferentes versiones, haces tests con usuarios, investigas diferentes opciones y, finalmente, muestras al cliente un prototipo funcional del sitio web. 

Puedes crear prototipos de sitios web completos o únicamente de páginas, secciones o bloques concretos.

De esta manera, puedes validar la navegación, las interacciones y la jerarquía visual antes de invertir tiempo en implementar y desarrollar con WordPress. 

Con estas herramientas puedes iterar rápidamente: puedes pedir ajustes, generar distintas variaciones y refinar detalles hasta que todo esté aprobado. 

El prototipo funcional reduce las revisiones posteriores porque elimina ambigüedades.

3. Asistencia a la creación de contenido

Puedes usar los LLMs para crear directamente los textos e imágenes del sitio web. 

Herramientas como ChatGPT, Claude o el Creador de webs con IA generan contenido optimizado para cada sección: desde textos para el hero y descripciones de servicios hasta páginas «Sobre nosotros» completas y con el tono adecuado. 

Para imágenes, con ChatGPT (que tiene DALL-E integrado) o Midjourney puedes generar piezas visuales personalizadas. 

Esto es especialmente útil en fases tempranas o con presupuestos ajustados, aunque siempre es recomendable revisar y personalizar el contenido generado para mantener la autenticidad de la marca y evitar ese tono genérico que delata el uso de IA sin criterio editorial.

4. Ajustes y validación final

Durante la fase de prototipado, puedes refinar los detalles visuales combinando tus prototipos con la inteligencia conversacional de un LLM. 

Mientras ajustas la paleta de colores, la tipografía o los espaciados en Figma Make o Lovable para que sean coherentes con la marca, puedes consultar al LLM para validar las decisiones de UX, auditar flujos de usuario o solicitar feedback sobre accesibilidad.

Una vez que has realizado los ajustes oportunos, solicita la validación final del prototipo a personas reales antes de pasar a la implementación final con WordPress.

5. Implementación en WordPress

1) Desarrollar el tema a partir del código generado en el prototipo

Si has creado prototipos, puedes usar directamente el código HTML y CSS generado por Figma Make o Lovable como base para desarrollar tu tema de WordPress con código.

También puedes usar WordPress como Headless: montas WordPress como gestor de contenidos y conectas el frontend creado con IA con la API REST o con GraphQL.

Si tienes los conocimientos necesarios, también puedes usar Claude Code o Cursor para que te ayude a escribir el código, no solo del tema sino también para desarrollar funcionalidades a medida.

2) Implementar la web a partir de la referencia visual e inspeccionar el código del prototipo

Si prefieres una estrategia no-code (o low-code), los prototipos te sirven como referencia visual y estructural. En este caso, no usas directamente el código generado, sino que lo usas para guiar tu implementación con el editor de bloques o tu constructor visual favorito (Divi, Elementor, Bricks, etc.). 

Revisas visualmente el prototipo creado y en tu WordPress implementas los bloques, copias los estilos específicos inspeccionando el código y haces los ajustes necesarios.

3) Crear la web directamente con el creador de webs con IA

Para proyectos más directos, en los que la validación no requiere prototipos elaborados, puedes crear la web directamente con el Creador de webs con IA.

Para redactar el prompt, usa las conclusiones que hayas sacado con el LLM en la fase de descubrimiento. 

El Creador de webs con IA genera contenido optimizado, sugiere mejoras de diseño y ajusta detalles CSS sin necesidad de conocimientos técnicos. Es especialmente útil para blogs, portfolios o sitios web corporativos simples (esa «web sencillita» que nos piden algunos clientes).

Encuentra tu propio flujo de trabajo

Como has visto, la IA no elimina tu criterio profesional, sino que lo amplifica. Estas herramientas eliminan el trabajo repetitivo para que te concentres en resolver problemas reales: entender al cliente, diseñar experiencias coherentes y entregar valor.

Te puedes ahorrar mucho tiempo, pero más importante que la velocidad es la capacidad de explorar más opciones y tomar mejores decisiones. Un diseñador que antes podía mostrar dos propuestas ahora puede explorar cinco. Un desarrollador o implementador que invertía días en ajustes visuales ahora se puede dedicar a las funcionalidades más complejas.

Consejo: Experimenta con estas herramientas y encuentra tu propio flujo: no existe una receta única.

Anatomía de un buen prompt

El primer paso para diseñar con IA es aprender cómo escribir prompts eficientes. 

Un prompt no es una orden: es un contexto. Tenemos que darle a la IA el contexto que necesita para interpretar correctamente nuestras intenciones. 

Te voy a poner un ejemplo de prompt que no sería eficiente: 

«Diseña una landing page moderna y profesional para un SaaS de gestión de proyectos».

Es un prompt muy poco eficiente porque ¿qué significa «moderna»? Puede significar minimalista, futurista, corporativa, experimental… ¿Y «profesional»? Es muy ambiguo también. 

Lo que la IA no entiende se lo inventa. Ten en cuenta que la IA llena los vacíos con sus propios sesgos estadísticos, no con tu visión. Por eso es muy difícil que con un prompt tan genérico la IA cree algo que coincida con lo que necesitas.

Tenemos que crear un prompt que tenga una buena estructura, que sea específico y que esté escrito en lenguaje de diseño.

Un prompt efectivo para diseño web contiene siempre estos elementos, en este orden:

1. Contexto del proyecto
2. Usuario objetivo
3. Tono visual
4. Estructura y jerarquía
5. Estilo visual específico
6. Referencias y restricciones
7. Criterios de éxito

¿No te suena de algo este listado? ¿No es lo que le solemos pedir a nuestros clientes para que nos den el briefing del proyecto?

Vamos a verlos uno a uno.

1. Contexto del proyecto: qué vamos a hacer

Qué incluir: 

• Tipo de sitio (landing page, e-commerce, portfolio, web corporativa, SaaS)
• Industria o sector
• Objetivo principal (conversión, información, branding, comunidad)

Ejemplo:

Landing page para SaaS de gestión de proyectos dirigida a equipos remotos de startups tecnológicas. El objetivo es captar emails para trial gratuito.

2. Usuario objetivo: para quién lo hacemos

La IA ajustará la complejidad del lenguaje, la densidad de información y el estilo visual según el usuario que vaya a usar la web.

Qué incluir:

• Perfil demográfico básico
• Nivel de conocimiento técnico
• Necesidades o puntos de dolor principales

Ejemplo:

Usuario: Project managers de 28-45 años, frustrados con herramientas complejas, que buscan simplicidad y colaboración asíncrona.

3. Tono visual: cómo debe percibirlo el usuario, qué sensación queremos transmitir

Qué incluir:

• 2-3 adjetivos específicos (evitar adjetivos demasiado genéricos como «moderno» o «profesional». Puede ser minimalista, técnico, editorial, cálido, institucional, experimental…)
• Referencias emocionales claras
• Atmósfera deseada

Ejemplo:

El tono debe ser amable pero sofisticado, como Notion o Linear. Transmite sensación de eficiencia sin frialdad corporativa.

4. Estructura y jerarquía

Qué incluir:

• Secciones principales en orden
• Jerarquía de contenido
• Elementos interactivos clave

Ejemplo:

Estructura:

1. Hero: headline + subheadline + CTA primario + imagen producto

2. Sección beneficios: 3 columnas con icono + título + descripción breve

3. Social proof: logos de clientes en fila horizontal

4. Pricing: 3 planes en tarjetas, plan medio destacado

5. FAQ: acordeón con 6-8 preguntas

6. CTA final: fondo de color, formulario simple

5. Estilo visual específico

Qué incluir:

• Tipografía: familia (indica tipos de letra que combinen), peso, escala modular
• Paleta de color (nombres específicos, no «azul»)
• Espaciado y densidad
• Estilo de imágenes

Ejemplo:

Tipografía: Source Serif 4 para los títulos y Source Sans 3 para cuerpo de texto. Peso 700 para títulos, 600 para subtítulos, 400 para texto de párrafos, 500 para botones y texto funcional. Escala Minor Second con tamaño base 16px. 

Paleta: Azul índigo (#3B4BF9) como primario, gris neutro (#F8F9FA para fondos), gris oscuro (#303030) para texto. Uso mínimo de color, máximo contraste.

Espaciado: Generoso (80px entre secciones en desktop), sistema de 8px.

Imágenes: Screenshots de producto con sombra sutil, sin fotos de stock.

6. Referencias y restricciones

Qué incluir:

• Sitios o diseños de referencia
• Qué limitaciones o restricciones técnicas existen
• Plataforma de implementación o tecnología que se utilizará

Ejemplo:

Referencias visuales: Linear.app (limpieza), Stripe.com (jerarquía).

Restricciones: Debe adaptarse a un tema de bloques de WordPress y ser editable por el cliente sin conocimientos técnicos.

Sin código. Máximo 2 fuentes cargadas. Optimizado para mobile-first.

7. Criterios de éxito

Qué incluir:

• Qué debe lograr el diseño
• Métricas o comportamientos esperados
• Qué debe evitar

Ejemplo:

Éxito: Usuario entiende la propuesta en 5 segundos, encuentra el CTA inmediatamente, percibe el producto sólido y confiable pero accesible.

Evitar: Sobrecarga de información, jerga técnica, sliders/carruseles, popups agresivos.

En la práctica, este tipo de prompts funcionan mucho mejor que las peticiones genéricas, porque ofrecen dirección y matices, igual que un briefing bien redactado.

Cuando la IA recibe esta información completa, puede proponer una estructura coherente: títulos, jerarquía, distribución del contenido e incluso buenas ideas de microcopy.

Consejo: Usa Claude o ChatGPT para que te ayuden a crear tus prompts.

Lenguaje de diseño que la IA entiende mejor

Ya vimos en el artículo sobre cómo pedir feedback de diseño web que cuanto más concreto sea el feedback, mejor será la siguiente iteración. Esto que funciona con los humanos, también funciona con la IA.

Términos efectivos para layout

Usa esto:

• Grid de 12 columnas con gutter de 24px
• Patrón en zigzag para contenido textual e imágenes
• Sección contained (max-width 1200px)
• Above the fold: [elemento]
• Sticky header con altura de 72px
• Sidebar de 280px en desktop, colapsable en mobile

Evita esto:

• «Que se vea ordenado»
• «Diseño limpio»
• «Bien organizado»

Términos efectivos para tipografía

Usa esto:

• Escala tipográfica: H1 (48px), H2 (36px), H3 (24px), body (16px)
• Line-height: 1.5 para cuerpo, 1.2 para títulos
• Contrast ratio: mínimo 4.5:1 (WCAG AA)
• Weight: Light (300), Regular (400), Semibold (600), Bold (700)
• Tracking: -0.02em para títulos, normal para cuerpo

Evita esto:

• «Letra grande para títulos»
• «Texto legible»
• «Tipografía elegante»

Términos efectivos para color

Usa esto:

• Código hex: #3B4BF9, RGB: rgb(59, 75, 249), HSL: hsl(232, 94%, 60%)
• Paleta: primario, secundario, acento, neutral-100 a neutral-900
• Alpha/opacidad: rgba(0,0,0,0.08) para sombras
• Degradado: linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Evita esto:

• «Azul bonito»
• «Colores que combinen»
• «Tonos alegres»

Términos efectivos para espaciado

Usa esto:

• Sistema de 8px: elementos espaciados en múltiplos (8, 16, 24, 32, 40, 48, 64, 80)
• Padding: interno de contenedores
• Margin: separación entre elementos
• Gap: separación en grid/flexbox
• Ritmo vertical: 24px entre párrafos, 48px entre secciones

Evita esto:

• «Con espaciado generoso entre elementos»
• «Que respire»
• «No muy apretado»

Términos efectivos para interacción

Usa esto:

• Hover state: cambio de color, transform: scale(1.05), box-shadow
• Focus state: outline visible para accesibilidad
• Active state: transform: scale(0.98)
• Transition: 200ms ease-in-out
• Área táctil mínima: 44×44px

Evita esto:

• «Que se vea que es clickeable»
• «Con efectos bonitos»
• «Interactivo»

Cómo resolver los problemas que puedes tener cuando diseñas con IA

La IA a veces no funciona como esperamos: interpreta mal nuestras indicaciones, genera resultados incoherentes o crea diseños difíciles de aplicar en entornos reales.

Vamos a ver las situaciones más frecuentes y cómo podemos gestionarlas.

1. La IA no entiende lo que le pedimos

Problema:
Le damos un prompt aparentemente claro, pero el resultado no se parece en nada a lo que imaginábamos.

Por qué ocurre:
Los modelos no entienden la intención implícita ni los matices culturales o de estilo. Si decimos «moderno», puede interpretarlo como «minimalista», «corporativo» o «futurista», según el contexto de sus datos de entrenamiento.

Cómo resolverlo:

• Usa lenguaje de diseño específico: habla de jerarquía, ritmo, contraste o estructura, no de adjetivos abstractos.
• Aporta capturas y referencias concretas: «Usa el minimalismo de Apple.com/iphone (hero con producto centrado, mucho espacio blanco) pero aplica una paleta de colores saturados, similar a Stripe.com (degradados sutiles, color como énfasis estratégico)» orienta mejor que decir «limpio y moderno».
• Divide la conversación: primero la estructura, luego los detalles.

Ejemplo de prompt mal construido:

Diseña una web moderna para una cafetería.

Este prompt falla porque obtendrás el cliché: fondo color café, fotos de granos de café, tipografía script cursiva.

Una buena corrección sería:

Página de inicio para una cafetería de especialidad en ciudad universitaria.

Usuario: estudiantes de 20-25 años que buscan un espacio de trabajo con wifi.

Tono: acogedor pero productivo, como un estudio WeWork pero con café.

Destacar: menú de bebidas, horarios y reserva de mesas con tomas de corriente.

Objetivo: aumentar las reservas y comunicar que es un lugar ideal para estudiar y trabajar.

2. Los resultados son inconsistentes entre iteraciones

Problema:
Pedimos un cambio y la IA hace el cambio que hemos pedido pero además cambia otros aspectos que no habíamos mencionado.

Por qué ocurre:
Cada nueva instrucción se interpreta como un nuevo contexto. Si no recordamos lo anterior, la IA lo olvida.

Cómo resolverlo:

• Recuerda manualmente el contexto: «Mantén la tipografía anterior y la estructura, pero cambia el color del botón.»
• Guarda versiones estables: usa capturas o exporta el diseño antes de hacer cambios.
• Resume el prompt anterior antes de seguir: «Hasta ahora tenemos un diseño editorial con estructura de tres columnas; ahora quiero que el footer sea más simple.»

3. El tono del texto no encaja con la marca

Problema:
La IA genera textos demasiado genéricos, con expresiones comerciales o clichés («Lleva tu negocio al siguiente nivel»).

Por qué ocurre:
Los modelos de lenguaje tienden a usar frases comunes si no se les proporciona contexto sobre el tono o la personalidad de la marca.

Cómo resolverlo:

• Añade siempre indicaciones de tono de voz: «Usa un tono claro y cercano, sin tecnicismos ni frases hechas.»
• Pide variantes de estilo: «Dame tres versiones: una formal, una más conversacional y otra con humor sutil.»
• Reescribe con tu voz: considera las respuestas de la IA como borradores para afinar, no como texto final.

Consejo: guarda una descripción del tono de marca de tus proyectos WordPress y reutilízala en los prompts como si fuera parte del briefing.

4. La IA «alucina» con información falsa o incoherente

Problema:
Al usar la IA para redactar textos o generar bloques de WordPress, puede inventar datos, URLs o funcionalidades inexistentes.

Por qué ocurre:
La IA completa patrones estadísticos, no consulta fuentes reales a menos que se le indique.

Cómo resolverlo:

• Verifica siempre lo que genera la IA, especialmente en contenido o código.
• Si trabajas con herramientas de desarrollo, usa entornos controlados (por ejemplo, el Creador de sitios web con IA o copilotos integrados).
• Usa prompts de verificación: «Comprueba que todos los datos y enlaces sean reales antes de mostrarlos.»

5. La IA se repite u ofrece soluciones previsibles

Problema:
Después de varios proyectos diferentes, todas las propuestas se parecen entre sí: tienen el mismo estilo y la misma composición.

Por qué ocurre:
Los modelos tienden a lo más probable: sin nuevas referencias o matices, repiten patrones comunes.

Cómo resolverlo:

Aquí es donde tú te puedes lucir como diseñador y puedes marcar la diferencia:

• Introduce nuevas referencias visuales o conceptuales: «Inspírate en revistas de viajes», «Aplica una estética de ilustración japonesa.»
• Cambia la forma del prompt: en lugar de «hazlo diferente», plantea un contraste («haz la versión más arriesgada posible dentro del mismo layout, prueba combinaciones de color poco habituales, tipografías con más personalidad y composiciones menos simétricas.»).
• Itera entre varias herramientas: genera ideas con Lovable y refina en Figma Make, o viceversa.

6. Dificultad para mantener la coherencia entre la IA y el equipo humano

Problema:
Cuando varios diseñadores usan IA dentro del mismo proyecto, cada uno genera resultados con su propio estilo de prompt, lo que rompe la coherencia visual.

Por qué ocurre:
Falta de un marco compartido para describir el diseño y sus decisiones.

Cómo resolverlo:

• Crear una guía de prompts del equipo, igual que un manual de estilo.
• Definir convenciones: cómo se nombran las secciones, qué tono se usa en las instrucciones, cómo se describen los colores o tamaños.
• Revisar las propuestas en grupo y documentar los prompts que mejor funcionan.

Ejemplo:

«Usamos el término “hero con claim principal” en lugar de “portada”. Así, todos los prompts mantienen consistencia.»

7. Problemas de tiempo y dependencia

Problema:
La IA promete ahorrar tiempo, pero puede generar el efecto contrario: más iteraciones, más decisiones y más validaciones.

Por qué ocurre:
Cuanto más abierto sea el prompt, más revisiones necesitaremos. Y cuanto más confiemos en la IA para tareas básicas, más dependientes nos volvemos de su rendimiento.

Cómo resolverlo:

• Define de antemano el alcance de uso: en qué fases del proceso vas a usar la IA y con qué objetivo.
• Reserva espacio para el análisis manual y la validación visual.
• Integra IA solo donde aporte valor real, no por automatizar todo.
  

8. Cuando la IA desaparece del flujo: el problema de las iteraciones en producción

Problema:

Uno de los retos más grandes al diseñar con inteligencia artificial llega después de la fase creativa: cuando el diseño ya está implementado en un entorno de desarrollo o producción.

Durante la fase de ideación y prototipado, la IA actúa como una compañera constante. Podemos conversar con ella, probar variaciones, ajustar el tono visual o pedir mejoras específicas. Pero una vez la web está montada en WordPress, esa conversación se interrumpe.

A partir de ese momento, el diseñador vuelve a depender del flujo tradicional: revisar el diseño en el entorno real, detectar los ajustes y pedir cambios manuales al desarrollador o editarlos directamente en el editor de bloques.

Este corte de flujo nos va a afectar cuando queramos hacer modificaciones en la web en producción, lo cual es muy común, por ejemplo, en estos casos:

• Cuando hacemos mejoras en base a los datos de navegación e interacción de los usuarios.
• Cuando se detectan problemas de legibilidad o rendimiento en producción.
• O cuando hay que adaptar el diseño a nuevos contenidos o idiomas.

En todos estos casos, ya no tenemos la IA con la que trabajamos al principio y cualquier cambio implica rehacer o editar manualmente.

Por qué ocurre:

Las herramientas de vibe coding actuales (como Figma Make o Lovable) funcionan dentro de entornos de generación, no de edición continua. Por tanto, una vez exportamos el resultado y lo convertimos a WordPress, ya no tenemos acceso a la IA para retomar el proceso y seguir iterando.

Cómo resolverlo:

1. Documenta el proceso. Guarda prompts, resultados y versiones para poder replicar el método en futuros proyectos.
   Mantén los prompts, decisiones y justificaciones en un documento compartido (Notion, Google Docs o incluso dentro del editor de WordPress en una página privada).
   Así podrás reconstruir la conversación si necesitas volver a iterar con la IA más adelante.
2. Usar la IA también en desarrollo. Aunque el entorno de producción no tenga IA integrada, podemos volver a usar herramientas como ChatGPT o Cursor para generar fragmentos de código, patrones o estilos CSS ajustados.
   El truco está en describir el estado actual del sitio como nuevo contexto. Centraliza el sistema de diseño (tokens, estilos, componentes) en un archivo separado, para poder pedir a la IA que los respete cuando hagas modificaciones.
3. Combinar la IA y el editor visual. WordPress.com sí tiene IA integrada dentro del propio editor, en el Creador de sitios web con IA, no solo está disponible al crear el sitio sino también una vez publicado.
   Desde el editor, con la web ya creada, podemos seguir usando la IA para añadir o modificar bloques, crear páginas nuevas o generar variantes de secciones y páginas completas sin salir del entorno de edición.

La IA propone y tú decides

Diseñar con IA no es más fácil: es más rápido, más iterativo y más exigente. Nos obliga a pensar mejor, a comunicar con precisión y a mantener un criterio sólido.

Los problemas que aparecen en este proceso no son fallos de la herramienta, sino oportunidades para afinar nuestro método y fortalecer el papel del diseñador en la era de la inteligencia artificial.

La IA acelera el proceso porque multiplica nuestra capacidad de explorar, pero la coherencia y la calidad dependen de nuestras decisiones, ya que la IA no puede reemplazar el sentido de proporción, el ritmo visual o la intuición que desarrollamos con la experiencia.

Nuestro papel es mantener el proyecto alineado con la estrategia de negocio, las necesidades del usuario y la identidad visual de la marca.

Y recuerda siempre la importancia de validar con personas. Aunque la IA aporte ideas útiles, la evaluación final siempre debe incluir feedback con usuarios reales.

Este webinar de Academia WordPress te ayudará a comprender mucho mejor todo lo que hemos visto en este artículo.