Esta es la parte 1 de nuestra serie sobre desarrollo de producto con IA, o cómo Bancoli amplía el impacto del diseño de producto con vibe designing y herramientas de IA como Claude y Vercel, mientras el equipo de ingeniería se enfoca por completo en crear aplicaciones backend sólidas y escalables.
¿Un comienzo por casualidad?
No del todo. Todo empezó a fines de julio de 2025, cuando el equipo de diseño probó lanzar una página estática con vibe designing. Querían crear una página dedicada al sistema de diseño de Bancoli con una herramienta de vibe designing. Para eso había que definir bien los tokens de diseño como variables en Figma. Una tarea tediosa, pero que iba a dar frutos en eficiencia y productividad más adelante. Con la visión de largo plazo de Bancoli en mente, dos principios de Bancoli ayudan a entender esta decisión: “Nos enfocamos en resultados de largo plazo” y “Construimos grandes sistemas”.
Pero tuvimos que pausar esa iniciativa de diseño para atender una prioridad más urgente: crear una página de afiliados. Con una condición: ingeniería no podía participar. Fue una restricción a propósito, pensada para despertar el ingenio a partir de la escasez. Al fin y al cabo, “la necesidad es la madre de la invención”, como dijo Platón. Nuestras pruebas previas con vibe designing, pensadas al principio para el sistema de diseño de Bancoli, ya nos habían abierto nuevas puertas y nos dieron la confianza para crear la página de afiliados con este enfoque. Lo que parecía una esperanza apagada volvió a brillar como un faro. No había tiempo que perder.
Requisitos previos
Configuración de Figma
1 / Definir bien los tokens de diseño como variables de diseño en Figma.
- Variables de color: para colores primarios, colores secundarios, colores de texto, colores de fondo, etc.
- Variables de tipografía: para familias tipográficas, tamaños de letra, interlineado y espaciado entre letras. Aunque las variables de tipografía de Figma son más nuevas y menos completas que las de color, igual puedes definirlas dentro de otros tipos de variables o usar plugins para extraerlas.
- Variables de espaciado: para márgenes, rellenos y tamaños de separación.
- Como usamos un marco existente de la página de inicio como referencia de diseño, no hubo que definir muchas variables.
2 / Organizar nuestras variables en colecciones con sentido.
- Por ejemplo, “Colores”, “Tipografía”, “Espaciado”
- Como tenemos puntos de quiebre (escritorio y móvil), usamos la función “Modes” de Figma dentro de nuestras colecciones de variables.
3/ Usar nombres claros.
Esto significa usar nombres consistentes y descriptivos para nuestras variables, para que sea más fácil manejarlas y relacionarlas después.
No usamos el plugin Figma Tokens porque solo necesitábamos unas pocas variables de diseño.
El servidor MCP remoto de Figma
Siguiendo la guía de configuración del MCP de Figma, el equipo de diseño activó el servidor MCP remoto de Figma para conectarse directo a nuestros archivos de Figma. Esto nos ayudó a extraer el contexto de diseño y mantener los componentes de nuestro sistema de diseño alineados con Code Connect. Una vez que Claude Code se conectó al servidor MCP de Figma, ya podíamos usar las variables de diseño de Figma en Claude.
Desarrollo de producto con IA usando Figma, Claude y Vercel
Archivo de referencia de Figma
El equipo de diseño de producto armó nuestro archivo de referencia de Figma siguiendo las buenas prácticas de Figma. La meta era dar el mejor contexto, para que el MCP y Claude pudieran generar código claro, consistente y alineado con tu sistema de diseño. En el modo Dev, usamos un archivo de referencia de Figma con variables y tokens bien nombrados. Esto aseguró que la marca se viera igual en todo el desarrollo, con el manejo del servidor MCP de Figma. No hizo falta diseñar la página para web y para móvil por separado, lo que ahorró muchísimo tiempo.
De un proceso de diseño de 2 días a unas pocas horas
El equipo de diseño pasó el contenido que dio Marketing directo a Claude, con los requisitos de diseño responsivo desde el principio. Haber definido bien las variables de diseño en Figma aseguró que se copiaran los tokens correctos. Al final, Claude generó un archivo JSX.
Instrucción inicial:
Crea una landing page responsiva con los tokens del marco de Figma seleccionado para un ‘programa de afiliados’ con este contenido [contenido pegado]
Iteraciones en v0 con Vercel
Después de importar el archivo JSX de Claude, el equipo de diseño de producto empezó a iterar en v0 con Vercel:
- Cambió las imágenes de muestra por recursos reales de la marca
- Ajustó el tamaño de los botones y otros elementos de la interfaz
- Hizo correcciones de texto y ajustes de contenido
El equipo de marketing de producto hizo una revisión de calidad, y el equipo de diseño de producto pudo iterar rápido con unas pocas instrucciones. Cuando el proyecto estuvo listo para producción, lo copiamos como respaldo en Vercel y lo publicamos.
El último paso fue configurar el dominio. Creamos un worker que maneja las solicitudes HTTP a la URL www.bancoli.com/bancoli-affiliate-program.
De un proceso de diseño de 2 días a un lanzamiento listo para producción en 1 día
Repasemos cómo Claude, Figma y Vercel hicieron posible un lanzamiento en 1 día:
Desarrollo de producto tradicional
A) Versión web y móvil (proceso de diseño) = 2 días
B) Entrega del diseño y desarrollo frontend (proceso de construcción) = 1.5 días
C) Revisión de calidad y correcciones (pruebas) = 0.5 días
Total = 4 días
Desarrollo de producto con IA (Figma, Claude, Vercel)
A) + B) + C) = 1 día
El futuro es el diseño de producto con ayuda de IA
En Bancoli reconocemos que la IA tiene un gran potencial para mejorar varias etapas del ciclo de desarrollo de producto, lo que potencia a todos los roles que participan y les permite ampliar su impacto. Nuestro primer experimento, que combinó Figma, Claude y Vercel, fue clave para ampliar las capacidades del diseño de producto y acelerar mucho nuestra salida al mercado.
Este enfoque nos permitió diseñar e iterar con una rapidez sin igual, y convertir ideas en experiencias concretas y listas para el usuario en una fracción del tiempo de siempre. Además de iterar rápido, el experimento de desarrollo de producto con IA nos dio otra ventaja clave: usar mejor nuestros recursos. Permitió que nuestro equipo de ingeniería siguiera enfocado en problemas más complejos, mientras que el equipo de diseño de producto, ahora con más poder, formó una alianza ágil y poderosa con el de marketing de producto.
