Diseñar en la era AI al estilo Shortcut
Hoy no traigo la ya clásica conversación “diseñar no es solo dibujar cuadritos” (evolución de la cansada UX no es UI) fomentada por la creciente idea de que las nuevas herramientas potenciadas con AI vienen a suplir diseñadores.
Vengo a traer un poco de la experiencia que hemos tenido en Shortcut experimentando constantemente con herramientas nuevas. Nuestra naturaleza está en experimentar, fuimos de los primeros en probar Figma hace 10 años y seguiremos siendo de los primeros en experimentar con estas nuevas herramientas.
Diario sale una herramienta nueva, diario nos preguntamos si servirá agregarla a nuestro stack de herramientas, diario vamos y probamos la nueva para descartarla de ser posible, pero también para entender por donde está yendo la exploración más allá del canvas infinito (por un lado) o de la conversación con un chat (por el otro).
Hasta ahora hemos encontrado un punto medio en ambas, un punto que nos da mucha tranquilidad, porque busca mediar ambos mundos: el humano y el artificial.
Ese punto medio lo hemos encontrado en las conexiones: archivos de contexto (design.md), conectores como MCP o CLI, uso de Skills, entre otros.
Para nosotros no es importante que una IA genere interfaz por nosotros. Si no que nos ayude a optimizar, aclarar y potenciar el proceso, luego a mejorar la implementación. Si la IA tiene posibilidad de conectarse con nuestros canvas, donde potencialmente está la mayor parte de nuestro trabajo, entonces lo tomamos.
El proceso entonces ya no solo es colaboración humana, sino también con la máquina.
MCP como enlace con la máquina
En estos meses nos la hemos pasado probando varios softwares de diseño con acceso vía MCP:
- ✅ Figma (MCP oficial y 3ros)
- ✅ Framer (de tercero, no oficial)
- ✅ Pencil
- ✅ Stitch (Google)
- ✅ Paper
Simplificado, un MCP es una forma (existen otras como CLI o API) en cómo los agentes AI pueden comunicarse con algo en particular, en este caso, software de diseño.
Cada una de estas apps tienen la misma intención al integrar MCP como funcionalidad: conectar su canvas “infinito” con código usando agentes AI de por medio.
Algo que descubrí es que la diferencia principal que cada app tiene radica en su propuesta de valor que, por la naturaleza de las herramientas, es apenas ligeramente diferente una de la otra.
Figma, la herramienta más usada en la era pre-AI como software bastante maduro, lo que ofrece es un “add-on” que permite comunicar mejor todos los archivos que ya tenemos ahí con agentes que puedan sacarle provecho. Esta es su gran ventaja, pues prácticamente no tenemos que migrar a otras plataformas para aprovechar lo que ya diseñamos en ella.
Tristemente me encontré también con la versión de este Figma con una conexión “en beta” con limitada funcionalidad, a la espera de que le den un “upgrade” que debamos pagar.
La aparente ventaja que el resto de la lista tiene sobre Figma es que vemos software pensado con AI en mente, algo así como “nativos del AI”.
A Pencil le gusta mucho hablar de su “swarm mode” donde múltiples agentes atacan el mismo problema desde perspectivas distintas. El acercamiento a la productividad parece su fuerte, quizá un poco en exploración, pero más allá de eso la herramienta está limitada por el modelo mismo que se use (en este caso Claude). Hay algunas reglas adheridas al agente para mejorar su enfoque al UI, pero una funcionalidad así solo es útil en ciertos momentos del proceso de diseño de interfaces.
Paper en cambio, habla de su capacidad “nativa” de comprender las interfaces, pues el canvas infinito no construye vectores con su propia abstracción (como Figma), sino que literalmente construye HTML y CSS nativo, haciendo mucho más sencilla la construcción en código, además de permitirles integrar funcionalidades como Shaders directamente en la aplicación. De todas las opciones, Paper parece que la que más futuro prometedor tiene, me llamó la atención su aura de Figma 2018.
Nuestra siguiente opción, Stitch (de Google) trae consigo una serie de nuevas herramientas (como design.md) que abren un abanico de posibilidades para explorar diferentes alternativas visuales, también trae algunas deficiencias intencionales de la herramienta. Creo que de todas es la que provoca la conversación más interesante: ¿Qué es lo que realmente buscamos en una herramienta que se supone que potencie nuestras capacidades como diseñadores de interfaz?
La gran desventaja que tiene Stitch sobre el resto es que, como ya dijimos anteriormente, estas herramientas están limitadas por el modelo que los alimenta (algo así como el motor detrás).
Si bien, soy muy fan de la forma en como Gemini 3.1 diseña interfaces, también soy consciente de las capacidades tiene, que en este caso aunque la multimodalidad le da valioso poder de entendimiento visual, también se queda corto en lo que Claude (e incluso GPT) sí logran hacer.
La conversación sobre los modelos es una cuestión que cambia semanalmente. Lo último que se supo es que Google por fin se lo está tomando en serio, entonces veremos.
Otras propuestas
La intención de conectar nuestros modelos y reglas a nuestros canvas infinitos, es diferente a la propuesta de valor que Claude Design, Lovable, v0 y demás ponen en la mesa.
Estas otras herramientas están destinadas a usar código y el constrain de un website o app para entablar la comunicación a nivel diseño y funcionalidad.
Ahora sí que el modelo mental detrás es el de que la forma sigue a la función.
¿Es el código el nuevo canvas de los diseñadores de interfaz? Creo que eso quedará pendiente para otra publicación.