Este post os voy a contar lo que he estado haciendo para intentar estar un poco al día con el tema de la inteligencia artificial y sus avances en el campo del diseño.
Como persona que lleva en esto algunos años, las herramientas con las que he ido creando experiencias de usuario han ido evolucionado: Photoshop, Powerpoint, Axure, UX Pin, Sketch y por último, Figma, donde tenemos todo el sistema de diseño, prototipos y diseños de alta definición.
Lo que quiero decir con esto, es que a mi me da igual con lo que tenga que trabajar. Todo son herramientas que sirven para resolver problemas. La IA para mi solo es una más.
Como seguramente todos, donde vamos leyendo de las maravillas que hace la gente en segundos, las noticias de los puestos de trabajo que van a desaparecer, y demás, he pasado por angustia total de no saber muy bien por donde empezar. De ahi que os quiera contar un poco lo que he estado haciendo yo.
Para ponernos un poco en contexto, y empezar a relajarnos, aquí puedes leer un resumen de una investigación sobre el estado de la IA y el diseño, que hicieron investigadores de Nielsen Norman Group (NN/g), donde estuvieron probando 3 categorías de herramientas de IA:
- Herramientas de diseño asistidas por IA que se centran en la generación de esquemas estáticos o maquetas de diseño.
- Herramientas de codificación asistidas por IA (vibe) que generan prototipos interactivos basados en código.
- Chatbots de IA de uso general capaces de generar prototipos.
La verdad es que al leerlo me quedé tranquila porque sus conclusiones se alineaban con las que había sacado yo de estar probando con la IA en ese momento.
A pesar del enorme hype en el sector, la evaluación realizada con escenarios de diseño reales reveló que estas herramientas pueden seguir instrucciones para alcanzar un objetivo general, pero carecen de la sofisticación necesaria para sopesar las ventajas y desventajas del diseño y producir diseños bien pensados y de alta calidad sin una amplia orientación por parte de los seres humanos.
Pero claro, esto es de octubre de 2025, y aquí todo pasa muy rápido….
Otra lectura que os recomiendo es esta artículo, donde te explica, todo lo que te puede ayudar la IA como Design Lead ya que, como bien dice, la mayor parte de tu trabajo no es diseñar (ese es el de tu equipo), sino haciendo otras cosas donde la IA es tremendamente buena. Como analizando datos, tendencias, creando presentaciones o documentos para convencer al resto de la empresa de lo que tu equipo quiere hacer.
Los jefes de diseño/producto/UX no pasamos el día en Figma. Nos lo pasamos en Slack/Teams, Docs y reuniones.
También eh estado leyendo a Luke Wroblewski, diseñador muy conocido por sus famosos libros «Mobile First» o «Web Form Design«, quien está trabajando para algunas empresas de IA y va comentando dudas, problemas que se van encontrando como por ejemplo este de como sería la interfaz para mostrar el trabajo que una IA hace por ti.
Y por supuesto os recomiendo la newsletter de Carlos Iglesias, Impacto y producto, donde va comentando cosas muy interesantes sobre «Discovery, evidencia y cambio cultural para líderes y PMs».
Algo para ir comenzando, si no sabes mucho de que va, este vídeo de 1h:40m sobre Inteligencia Artificial en 2026 (Conceptos, Herramientas, Claude Code) puede venirte muy bien. Lo enfocan a programadores pero ni caso. Viene muy bien para conocer o afianzar conceptos básicos. Además te enseñan a conectarte gratis a Claude u otras IAs en local.
Al final de todo te cuentan también como usar Google Notebook, donde puedes subir PDFs, páginas web, vídeos de YouTube, audio, documentos, presentaciones y NotebookLM los resumirá y establecerá conexiones entre todos ellos, gracias a Gemini. Pero lo mejor es que puedes pedirle que de ess resumen te haga un podcast para escucharlo mientras corres, un test para validar tus conocimientos sobre el tema, un vídeo, una guía de estudio… Para estudiar lo veo una pasada.
Curso de Claude para Product Managers
Donde de verdad me empecé a emocionar, fue cuando hice este curso de “Free Claude Code Tutorial for Product Managers“ hecho por Carl Vellotti, el cual os recomiendo totalmente. Creo que tiene uno similar para Cursor, pero yo ya tenía instalado Claude y ya estaba haciendo cosas con el por la terminal y con Visual Studio, por lo que seguí con eso.
La diferencia entre Visual y la terminal, es que Visual Studio te permite poder ver la estructura de carpetas de lo que estas haciendo y es muy fácil ir editando los “.md”, los o los html y demás cosas que vas creando.
Muchas personas dicen que los diseñadores le tenemos miedo a este tipo de pantallas, pero creo que exageran. En mi caso me metí en el mundo web haciendo un curso de HTML y CSS, y otro de Servidores Web, y tanto picar HTML/CSS a mano, como trabajar en Dreamweaver me gustaba bastante. Hace mucho que ya no toco código, pero de lo que hubo algo se retuvo je je por lo que Visual Studio es simplemente otra forma de editar el contenido y por supuesto, de hablar con la IA.
El curso es muy fácil de hacer. Desde que comienzas el propio Claude te va diciendo lo que tienes que ir haciendo, escribiéndolo tu. Así te acostumbras a empezar a hablarle, pedirle las cosas y ver todo el potencial que le puedes sacar. Te da casos de uso preparados, basándose en todo el curso, en una empresa ficticia de un producto SAAS, donde tu eres el product manager.
Aqui algunos ejemplos de las actividades:
Nota: La extensión .md corresponde a archivos escritos en Markdown, un lenguaje de marcado muy sencillo que se usa para dar formato a texto sin complicaciones. Por lo visto, es el estándar que está siendo empleado con Claude. De esos archivos puedes pedirle que te saque htmls, docx o ppts ya estructurados.
También te enseña a trabajar con Nano Banana a través del API con Claude, y me lo pasé bastante bien con las imágenes que puedes crear. Lo mejor es que te da una herramienta para que te extraigas el estilo visual de cualquier imagen, lo guardes en una librería y lo uses siempre que quieras.
Ejemplos de alguna de la documentación creada:
Por ejemplo, para documentación para presentaciones la idea es que le pases a Claude unos estilos visuales de lo que necesitas, y ya siempre te creará los documentos en base a ellos.
En resumen, oyes hablar de todo lo que la IA puede hacer por ti. Pues bien, este curso de te da ejemplos con diferentes tareas, lo que te permite hacerte una idea real del verdadero potencial
Incluso llegas a programar un mini-juego interactivo para publicar donde quieras y conseguir leads de posibles clientes (el curso lo proponía de otra forma y yo lo adecué para que me sirviera para nuestro modelo de negocio).
Este curso me sirvió pasar pasar de Chat GPT a Claude, y empezar a personalizar Claude en el mismo directorio donde tengo los proyectos, con documentación propia de la empresa, agentes y skills que sirvan para nuestro negocio, para que me ayude en mi día a día.
Ejemplo real de trabajo con Claude
En www.centraldereservas.com, cuando un cliente hace una reserva se ponen a trabajar varios sistemas distintos los cuales se comunican mediante XML. De vez en cuando, hay alguna reclamación y Calidad necesita mostrar explícitamente lo que el cliente vio en todos o en un paso en concreto. Como puedes imaginar, las personas del departamento de calidad no tienen porque saber leer un XML aparte de que el banco pide una imagen real de lo que vio el cliente en su pantalla, con el dispositivo que sea. Para ello hicimos un desarrollo de una aplicación donde los agentes pueden ver cualquier sesión de compra. Pero hay casos donde al finalizar una reserva la mayorista da error, y el cliente vuelve entre la ficha del alojamiento y el formulario varias veces… siendo algo complejo de saber cual fue la última información que puso en el formulario. Pues con Claude, solo tienes que descargarte los XML del proceso de reserva y preguntarle, «¿qué nacionalidad puso el cliente al finalizar la reserva?», y te hace un esquema perfecto de todos los movimientos e información para que puedas saber la respuesta y generar la imagen definitiva.
Gracias a Claude, estas tareas las puedo resolver yo sin molestar a un programador, ahorrando dinero a la empresa.
Otro consejo, en esta página te puedes descargar skills creadas por otras personas: https://skills.sh/. Pero primero, aprende (con el curso o donde quieras) la diferencia entre skills, agentes y MCPs.
Figma Make, MCP de Figma para Claude y Claude
A la par, me instale el MCP de Figma para Claude y he estado haciendo pruebas con el a la par que con Figma Make.
Vamos a hablar para que sirve cada cosa.
Figma Make, crear cosas con IA
Figma Make es una herramienta dentro de Figma para generar interfaces o apps directamente con prompts.
- Es tipo: “quiero una landing de viajes con buscador y cards de hoteles” → y te la crea
- «En base a este diseño, hazme 6 opciones interactuables en dark mode»
- Genera prototipos funcionales con código a partir de lenguaje natural
- Está orientado a diseño + prototipado rápido
Figma Make = herramienta creativa (prompt → diseño/app)
MCP de Figma (para Claude, Cursor, etc.) → conectar IA con Figma
El MCP (Model Context Protocol) es otra cosa totalmente distinta:
- Es un estándar que conecta herramientas de IA con apps como Figma
- Permite que Claude (u otras IAs) lean tus diseños, componentes, tokens, etc.
- Sirve para que la IA:
- entienda el diseño real
- genere código fiel
- automatice flujos diseño → desarrollo
MCP = “puente” para que la IA trabaje con Figma
El flujo de trabajo que proponen es que a partir de la idea que tengas, en Figma hagas el prompt y refines el diseño, la interacción, y que con el MCP de Claude, generes la estructura lista para integrar, componentes en React / Vue, CSS o Tailwind…
Idea → Figma Make → Refinado → MCP → Código preciso → Iterar
Además si cambias algo en Figma, se actualiza el código ya que Claude lo vuelve a leer vía MCP.
Es como que Figma Make te da velocidad creativa, y MCP + Claude te da precisión y conexión real con el código.
En febrero 2026, Figma lanzó “Claude Code to Figma” junto a Claude Code, una nueva funcionalidad que la venden como un MCP “mejorado” para diseñar alta fidelidad desde código.
Es básicamente el flujo inverso al anterior. En vez de ir de Figma → código, vas de código → Figma. Y quien lo hace es Claude. Le das: HTML, React, una web ya hecha o incluso una URL y Claude reconstruye ese diseño directamente en Figma, con frames estructurados, componentes reutilizables, auto layout, estilos (colores, tipografías…)…
Vi este video de Raul Marín donde muestra que se parece muchísimo al plugin de Figma «HTML to Design» (y tanto porque como muestra es de los mismos) con lo que desde hace tiempo ya podías convertir cualquier web en un archivo de Figma editable. Osea que eso ya existía.
En mi caso, con lo que estoy ahora es haciendo pruebas con Figma Make y Claude directamente, ya sea sobre un diseño que quiero iterar, o pasándole ideas.
Ejemplo real de uso aplicado al diseño
En este caso teníamos un menu en una aplicación interna con varios problemas de usabilidad: no se mostraba el item seleccionado, la visibilidad de la arquitectura de la información era mejorable y la interacción del hover quedaba poco destacada.
Con lo que desde Figma selecciono por ejemplo el menú que quiero mejorar y con Figma Make, hago un prompt donde le explico los problemas o lo que quiero, le comento que siga los colores de la librería, y le pido que me haga sugerencias de diseño.
Desde Claude, le paso una imagen de ese mismo menú, con el mismo prompt. Y por supuesto voy refinando en ambos hasta que me gusta. Cuanto más claro e indicativo es el prompt inicial, más suelen acertar.
De momento me gusta más lo que hace Claude, la verdad.
Estos HTMLs o los paso a Figma para acabar de retocar alguna cosa o directamente, los paso luego al equipo de front para que modifiquen el componente o si es algo nuevo, los integren en nuestro sistema de diseño. Aquí el tema sería el poder hacer yo eso directamente con Claude y que ellos simplemente revisaran la PR.
He de decir, que alguna PR ya he hecho en 2 proyectos distintos, pero la verdad es que creo que aporto más valor en la fase inicial de desarrollo del producto: investigando tendencias, haciendo pruebas con usuarios, analizando pain points… y proponiendo las nuevas funcionalidades.
Más información interesante:
Y aquí te paso otros 2 vídeos interesante sobre lo mismo:
Espero que esto te haya servido un poco a hacerte una idea y comenzar a perder el miedo.