Potenciando con IA el Design System de itti digital y sus procesos de diseño
Un ecosistema de herramientas con IA y vibe coding que transformó las operaciones de diseño a escala.
+0
Diseñadores impactados
~0%
Reducción en tiempo
+0
Herramientas creadas
01 — Recomendador de componentes
Convertimos la documentación estática en un agente IA que ayuda al diseñador
Siempre me pregunté por qué un diseñador nuevo tiene que leer interminables páginas de documentación estática para entender si un componente le sirve o no.
Construimos un recomendador de componentes: un plugin de Figma que le permite a cualquier diseñador describir el problema que está resolviendo y recibir una recomendación de los componentes que puede usar, sin salir de Figma.
0+
Apertura y usos del plugin por mes
0%
Tiempo ahorrado buscando componentes
0+
Diseñadores usando el plugin en su workflow
02 — Assets
Automatizamos la creación de Assets con inteligencia artificial
Atendíamos los pedidos uno a uno, el proceso funcionaba, pero éramos un cuello de botella.
Con las fotos pasaba algo similar, la búsqueda en bancos de stock consumía tiempo y rara vez representaba exactamente a nuestro usuario.
Construimos dos soluciones complementarias, primero un workflow documentado con varios prompts maestros en JSON completamente estructurados, para generar ilustraciones 3D con Envato, y una interfaz web conectada a Google AI Studio y Nano Banana para generar fotografías.
03 — Cover generator
Creamos plugin para estandarizar miles de archivos en segundos
Migrar 140+ diseñadores a Figma Enterprise implicaba estandarizar miles de archivos. Cada cover requería llamar un componente, completar manualmente hasta 8 inputs, armarlo dentro de un frame y aplicarlo como portada. Multiplicado por miles de archivos, era inviable hacerlo a mano.
Para automatizar este proceso, construí un plugin en Figma, desde cero, donde el diseñador con tan solo completar un formulario tiene su cover lista y aplicada
El resultado era una cover vinculada a un componente maestro, que podía actualizarse evitando tener que rehacer todo el proceso de migración cada vez que se quiera cambiar el diseño
04 — Dashboard de Gobernanza
Conectamos Figma, Slack y datos para no perder el control nunca más
Estandarizar los archivos era solo la mitad del problema. La otra mitad era asegurarse de que no volviera a desorganizarse.
Construimos un dashboard conectado a la API de Figma que da visibilidad en tiempo real sobre cada archivo de la organización, quién lo creó, cómo lo nombró, qué cover aplicó y hace cuánto.
Cuando un archivo lleva más de 15 días mal nombrado, el sistema dispara automáticamente un mensaje por Slack al responsable. Sin intervención manual, sin perseguir a nadie.
“Automatizo las tareas que le consumen tiempo a los diseñadores para devolverles espacio para crear”
Mauro Berteri - 2025/6
Todo el contenido visual presentado en este caso de estudio fue desarrollado en el marco de mi trabajo en itti Digital. Las capturas, interfaces y datos fueron modificados para proteger la confidencialidad de la empresa y sus clientes. Este portfolio refleja mi proceso y metodología, no información propietaria de itti Digital.
Otros proyectos que seguro te van a interesar
Wave Design System — Liberty Latin America
El sistema de diseño que unificó 9 marcas regionales en un solo ecosistema escalable. Tokens semánticos, +150 componentes y documentación viva que redujeron 40% el tiempo de diseño a código.
Rediseño de Liberty Costa Rica — Liberty Latin America
Rediseño completo de interfaces web centrado en conversión. A través de research y data creamos un framework que aumentó el engagement 35% y mejoró la contratación online en 28% en los primeros 6 meses.
Motion Recap App 2025 — uenobank
Sistema narrativo animado que personalizó el recap financiero de cada usuario con Lottie y variables dinámicas. 87% de usuarios completaron la experiencia y generó +12K shares orgánicos en redes sociales.