![[Joan Alonso Design] Diseño gráfico y Web](https://joanalonsodesign.es/wp-content/uploads/2023/01/Logo-JoanAlonsoDesign-1.png){kind=logo}
El prototipado web está cambiando de una forma bastante concreta: la inteligencia artificial ya no se limita a sugerir colores, textos o imágenes, sino que puede participar en la construcción de pantallas, flujos e interacciones. En 2026, herramientas como Figma Make permiten describir una página o una aplicación con lenguaje natural y obtener un prototipo funcional que después puede editarse y probarse. Adobe, por su parte, está incorporando agentes y flujos generativos a sus aplicaciones creativas.
Eso no significa que el diseñador haya dejado de hacer falta. Significa que una parte del trabajo previo puede acelerarse y que el valor del diseño se desplaza hacia decisiones que una generación automática no resuelve por sí sola: entender el problema, ordenar la información, definir un sistema visual, comprobar la accesibilidad, validar el comportamiento y decidir qué merece llegar al producto final.
El cambio importante, por tanto, no es «la IA diseña webs». Es que la distancia entre una idea y un prototipo que se puede tocar se ha reducido mucho. Este enfoque continúa la evolución de lo que ya permite el diseño de páginas web con inteligencia artificial, pero con una diferencia importante: ahora el foco está en prototipos interactivos y no únicamente en generar propuestas visuales.
Del boceto al prototipo interactivo en menos pasos
Durante años, un proyecto web pasaba por varias etapas bastante reconocibles: briefing, arquitectura de contenidos, wireframes, diseño visual, prototipo, revisión y desarrollo. Cada fase tenía sus herramientas y sus archivos. La IA está empezando a comprimir algunas de esas etapas, sobre todo las relacionadas con la exploración inicial.
Figma describe actualmente su agente como una herramienta capaz de generar direcciones de diseño, crear diagramas, editar imágenes y trabajar sobre archivos existentes. Su producto Figma Make puede convertir una descripción en un prototipo con estructura, lógica e interacciones. La propia documentación de Figma advierte, al mismo tiempo, que las salidas de sus herramientas de IA pueden ser erróneas o engañosas y deben tratarse como una referencia, no como sustituto del criterio profesional.
Esto cambia la economía del primer borrador. Antes podía resultar razonable dedicar bastante tiempo a preparar una única propuesta. Ahora tiene más sentido explorar varias alternativas, descartar rápidamente las que no funcionan y dedicar más atención a la que responde mejor al problema.
La diferencia es importante porque un prototipo sirve precisamente para aprender. No necesita ser perfecto para ser útil. Necesita permitir que alguien compruebe si una navegación se entiende, si una jerarquía funciona o si una tarea resulta demasiado complicada.
En ese contexto, la IA es especialmente interesante como herramienta de exploración. Su ventaja no está necesariamente en acertar a la primera, sino en reducir el coste de producir y modificar primeras versiones.
Qué puede generar realmente la IA en un proyecto web
Conviene separar la generación visual de la generación de comportamiento. Una imagen atractiva de una página no demuestra que exista una buena experiencia de usuario. Un prototipo que responde a clics aporta más información porque permite comprobar relaciones entre pantallas y acciones.
Arquitecturas y primeras direcciones
Una descripción relativamente precisa puede servir para explorar una landing page, un proceso de registro, un panel de administración o un flujo de compra. El diseñador puede pedir varias direcciones y compararlas antes de invertir tiempo en refinarlas. Figma explica que sus herramientas pueden trabajar tanto desde una descripción como desde diseños ya existentes, lo que permite combinar generación y edición.
Esta capacidad resulta útil cuando todavía no existe una solución visual cerrada. También puede ayudar a explicar una propuesta a un cliente: es más fácil discutir sobre una interacción visible que sobre una descripción abstracta de cómo debería funcionar.
Interacciones y estados
El salto más interesante está en los estados. Un formulario no es únicamente una caja con campos: tiene estados vacíos, errores, confirmaciones, carga, validaciones y, en ocasiones, pasos intermedios. Una tienda tampoco es solo una página de producto; tiene búsqueda, filtros, carrito, checkout y respuestas ante diferentes situaciones.
Un prototipo generado con IA puede ayudar a poner esos estados sobre la mesa antes del desarrollo. No garantiza que estén bien resueltos, pero hace visibles problemas que un mockup estático puede esconder.
Contenido de prueba
La generación de texto puede servir para crear contenidos provisionales con distintas longitudes. Esto es útil para comprobar si una tarjeta admite títulos largos, si un botón necesita más espacio o si un bloque de información rompe la composición cuando el texto crece.
Para un diseñador web, este detalle es más importante de lo que parece. Diseñar con contenido ficticio demasiado uniforme puede producir interfaces que funcionan en la maqueta y fallan cuando reciben contenido real.
El verdadero salto: diseñar con contexto
La generación aislada de pantallas tiene un problema conocido: puede producir algo visualmente convincente sin respetar las reglas del proyecto. Una interfaz profesional necesita tipografías, espaciados, colores, componentes, estados y patrones coherentes.
Por eso el contexto se está convirtiendo en una parte central del diseño asistido por IA. Figma señala que sus herramientas pueden trabajar con archivos y sistemas existentes, mientras que su servidor MCP permite conectar herramientas externas para que agentes de IA puedan leer, referenciar y actuar sobre diseños.
La consecuencia práctica es que el diseñador puede pasar de pedir «hazme una web moderna» a trabajar con instrucciones mucho más concretas: utiliza este sistema de diseño, respeta estos componentes, mantén esta jerarquía y genera una variante para este caso de uso.
La diferencia entre ambos enfoques es enorme. El primero produce una propuesta genérica. El segundo utiliza la IA dentro de un marco definido por el proyecto.
El sistema de diseño gana importancia
Paradójicamente, cuanto más fácil resulta generar interfaces, más importante se vuelve disponer de reglas claras. Un sistema de diseño bien documentado permite comprobar si una propuesta automática pertenece realmente al lenguaje visual del producto.
Esto afecta a elementos aparentemente pequeños: tamaños de encabezados, radios, espaciados, botones, campos, estados de error, iconografía y comportamiento responsive. Si cada pantalla generada inventa sus propias reglas, el resultado puede parecer profesional por separado y desordenado cuando se contempla como conjunto.
La IA puede multiplicar variantes. El sistema de diseño proporciona el criterio para decidir cuáles son válidas.
Prototipar no es resolver la experiencia de usuario
Uno de los riesgos de esta nueva etapa es confundir velocidad de producción con calidad de diseño. Una IA puede generar una pantalla coherente en segundos y, aun así, plantear una navegación poco comprensible.
La experiencia de usuario empieza antes de elegir colores o componentes. Hay que saber qué quiere conseguir la persona, qué información necesita, qué obstáculos encuentra y qué acción debe resultar evidente. Ningún prompt sustituye automáticamente esa investigación.
Un ejemplo sencillo sería una web de servicios profesionales. La IA puede generar una portada con una imagen destacada, una frase principal y un botón de contacto. Pero todavía quedan preguntas esenciales: ¿el visitante entiende qué servicio se ofrece?, ¿encuentra pruebas de experiencia?, ¿sabe qué ocurrirá después de pulsar el botón?, ¿puede comparar servicios?, ¿la información está organizada según sus necesidades?
La generación puede acelerar la respuesta visual a esas preguntas, pero no decide correctamente las preguntas por nosotros.
La accesibilidad debe entrar en el prototipo, no al final
La accesibilidad es otro buen ejemplo de por qué un prototipo generado automáticamente necesita revisión. Las WCAG 2.2 del W3C establecen criterios comprobables para hacer accesibles los contenidos web y contemplan necesidades relacionadas con visión, audición, movilidad, habla y aspectos cognitivos, entre otras.
Una interfaz generada por IA puede tener contrastes insuficientes, jerarquías de encabezados incorrectas, controles ambiguos, estados que no se comunican bien o interacciones difíciles de utilizar con teclado. Que una pantalla «se vea bien» no demuestra que sea accesible.
Por eso conviene incorporar comprobaciones desde la fase de prototipo: contraste, tamaño y claridad de los controles, foco visible, orden lógico, textos comprensibles, etiquetas de formularios y comportamiento con diferentes tamaños de pantalla.
Las WCAG 2.2 del W3C son una referencia técnica especialmente útil para este proceso. No convierten automáticamente un diseño en accesible, pero proporcionan criterios que permiten comprobarlo de forma sistemática.
Qué riesgos aparecen cuando el prototipo lo genera una IA
El primer riesgo es la falsa sensación de acabado. En sistemas generativos también conviene tener presentes las alucinaciones de la inteligencia artificial, aunque el problema aquí no sea necesariamente que invente un dato, sino que produzca una solución aparentemente coherente que no responde bien al contexto.
El segundo es la inconsistencia. Si cada petición genera una solución independiente, los componentes pueden cambiar de tamaño, tono o comportamiento sin que exista una razón de diseño.
El tercero afecta a los datos y al contenido. Si se utilizan documentos internos, información de clientes o materiales confidenciales como contexto, hay que conocer qué herramienta los procesa, qué permisos tiene y qué condiciones de uso aplica.
El cuarto es la trazabilidad. Cuando una propuesta pasa rápidamente de una instrucción a un resultado, puede ser difícil recordar por qué se tomó una decisión concreta. En proyectos pequeños esto quizá importe poco; en proyectos colaborativos o con requisitos regulatorios puede ser relevante.
NIST propone un marco de gestión de riesgos de IA que insiste en considerar la confianza y los riesgos a lo largo del ciclo de vida. Su perfil específico para IA generativa identifica riesgos y prácticas de gestión aplicables a organizaciones que utilizan estos sistemas. No es una metodología exclusiva para diseñadores, pero ofrece una referencia útil para introducir controles en flujos de trabajo con IA.
El perfil de IA generativa de NIST fue publicado en 2024 y actualizado en abril de 2026.
Un flujo de trabajo práctico para un diseñador web
La forma más sensata de incorporar IA no consiste en entregar el proyecto entero a una herramienta. Resulta más útil asignarle tareas concretas y conservar puntos de revisión humana.
1. Definir el problema antes de generar
Primero hay que fijar objetivo, público, contenido disponible, restricciones técnicas y acción principal. Cuanto más claro sea el problema, menos probable será que la IA rellene los huecos con decisiones arbitrarias.
2. Generar varias hipótesis
En lugar de buscar una pantalla perfecta, conviene crear dos o tres direcciones suficientemente diferentes. Una puede priorizar contenido, otra conversión y otra navegación. El objetivo es comparar soluciones, no coleccionar diseños bonitos.
3. Llevar las mejores ideas al sistema visual
Una vez elegida una dirección, toca aplicar tipografías, colores, componentes, espaciados y patrones reales. Aquí el diseñador recupera una función central: convertir una exploración en un sistema coherente.
4. Probar tareas, no solo pantallas
El prototipo debería servir para recorrer acciones concretas. Por ejemplo: encontrar un servicio, solicitar presupuesto, completar un formulario o localizar una información. Si una persona no entiende el recorrido, una pantalla atractiva no lo soluciona.
5. Revisar accesibilidad, responsive y contenido
Hay que probar tamaños de pantalla, textos largos, errores de formulario, navegación con teclado y contraste. También conviene sustituir cuanto antes el contenido ficticio por contenido representativo.
6. Pasar a desarrollo solo cuando la propuesta esté suficientemente validada
La velocidad de la IA hace tentador saltarse la revisión. Precisamente por eso conviene establecer un punto claro de aprobación. El prototipo puede acelerar el trabajo, pero no debería eliminar las decisiones que reducen errores posteriores.
También está cambiando el trabajo con imágenes y piezas gráficas
El mismo cambio aparece fuera del prototipado de interfaces. Adobe ha ampliado Firefly durante 2026 para integrar generación, edición y automatización dentro de flujos creativos. Entre las novedades se incluyen agentes capaces de trabajar mediante instrucciones conversacionales y workflows que conectan entradas, procesos y resultados.
En la práctica, esto permite pensar en una cadena de producción en lugar de una sucesión de herramientas aisladas. Una fotografía puede convertirse en varias adaptaciones, una composición puede prepararse para diferentes formatos y determinadas tareas repetitivas pueden automatizarse.
Adobe explica que sus workflows pueden combinar entradas de texto, imagen y vídeo con operaciones de generación, edición y transformación. Eso puede resultar especialmente útil cuando un proyecto necesita muchas variaciones manteniendo una lógica visual común.
La documentación de Adobe Firefly sobre workflows creativos muestra precisamente este enfoque de nodos y procesos encadenados.
Qué debería seguir haciendo una persona
En proyectos donde la IA puede actuar sobre archivos, herramientas y procesos también conviene entender qué diferencia a los agentes de inteligencia artificial de una automatización convencional. Cuanto más automática sea la producción, más importante resulta distinguir entre producir y diseñar.
Producir significa generar una salida. Diseñar implica decidir qué salida tiene sentido, para quién, en qué contexto y con qué consecuencias.
En un proyecto web, las decisiones que conviene mantener bajo revisión humana incluyen la arquitectura de información, la estrategia de contenidos, la identidad visual, la jerarquía, la accesibilidad, los estados críticos, las restricciones técnicas y la validación con usuarios o clientes.
La IA puede proponer una solución que nadie había considerado. También puede repetir patrones muy habituales porque son los que mejor encajan con sus referencias. Por eso explorar con ella puede ser útil, pero aceptar automáticamente la primera propuesta puede empobrecer el resultado.
¿Qué cambia realmente para el diseñador web en 2026?
El cambio más visible es la reducción del tiempo necesario para convertir una idea en algo que se puede discutir. Eso permite enseñar antes, probar antes y corregir antes.
El segundo cambio es que el diseñador necesita entender mejor el comportamiento del producto. Ya no basta con controlar composición, tipografía o color. Cuando las herramientas generan prototipos funcionales y código, resulta útil comprender estados, datos, componentes, responsive, accesibilidad y límites técnicos.
El tercer cambio es metodológico. El diseño puede convertirse en un proceso más iterativo: plantear, generar, probar, medir, corregir y volver a generar. La IA encaja especialmente bien en ese ciclo porque reduce el coste de cada iteración.
Esto no significa que todas las webs deban diseñarse con IA. En algunos proyectos, el método tradicional seguirá siendo más apropiado. La herramienta debe responder al problema, no al revés.
Una nueva regla práctica: generar rápido, decidir despacio
La mejor forma de aprovechar el prototipado web con inteligencia artificial quizá pueda resumirse en una regla sencilla: generar rápido, decidir despacio.
Generar rápido permite explorar más opciones y descubrir antes los problemas. Decidir despacio significa revisar las propuestas con criterios de negocio, experiencia de usuario, accesibilidad, identidad y viabilidad técnica.
La propia evolución de Figma y Adobe apunta hacia herramientas que no se limitan a crear una imagen aislada, sino que participan en cadenas de trabajo más completas. Figma está llevando sus agentes hacia el diseño, el prototipado y la conexión con código; Adobe está haciendo algo parecido en el terreno de la producción creativa.
El escenario futuro es todavía una estimación, no un hecho cerrado: es razonable esperar que estas herramientas integren más contexto y puedan participar en más fases del proyecto. Lo que sí podemos observar ya en 2026 es que la frontera entre diseño, prototipado y producción se está haciendo más permeable.
Conclusión
El prototipado web con inteligencia artificial ya es suficientemente capaz como para cambiar la forma de explorar un proyecto. Puede generar estructuras, variantes, interacciones y primeras experiencias funcionales en mucho menos tiempo que antes.
Su límite aparece cuando confundimos esa velocidad con criterio. Una web no funciona porque una IA haya producido muchas pantallas. Funciona cuando la información está bien organizada, las tareas son comprensibles, el sistema visual mantiene coherencia, la interfaz es accesible y la solución responde al problema real.
Para un diseñador, la oportunidad está en utilizar la IA como acelerador de exploración y producción, sin renunciar a la dirección del proyecto. En ese modelo, la máquina genera posibilidades y la persona decide cuáles merecen convertirse en diseño.
Si un proyecto web necesita combinar estrategia, diseño visual, WordPress y una implementación cuidada, la IA puede formar parte del proceso sin sustituir la revisión y las decisiones de diseño que hacen que una web sea realmente útil.
Preguntas frecuentes sobre prototipado web con IA
¿La IA puede crear un prototipo web funcional?
Sí. Herramientas actuales como Figma Make pueden generar prototipos con estructura, lógica e interacciones a partir de instrucciones en lenguaje natural. Eso no significa que el resultado esté listo para producción: necesita revisión visual, funcional, técnica y de accesibilidad.
¿La IA sustituye al diseñador UX/UI?
No automáticamente. Puede acelerar tareas de exploración, generación y edición, pero decisiones como arquitectura de información, jerarquía, accesibilidad, objetivos de negocio y validación siguen requiriendo criterio y revisión.
¿Es mejor generar una sola propuesta o varias?
Para las primeras fases suele ser más útil generar varias hipótesis y compararlas. La finalidad del prototipo es aprender qué funciona, no demostrar que la primera idea era correcta.
¿Hay que revisar la accesibilidad de un prototipo generado con IA?
Sí. La generación automática no garantiza conformidad con WCAG. El contraste, el foco, los formularios, la navegación por teclado, los textos y otros aspectos deben comprobarse explícitamente.
¿Qué ocurre con la privacidad de los archivos usados como contexto?
Depende de la herramienta, del plan y de sus condiciones. Antes de introducir información de clientes, documentos internos o materiales confidenciales conviene revisar qué datos se procesan, qué permisos existen y cómo se gestionan.
