Edouard Maire, Head of Product de Bancoli, cuenta cómo el vibe designing con Firebase Studio ayudó a Bancoli a lanzar su plataforma de marketing de afiliados en solo 3 semanas, con muy pocos recursos.
Esta es la parte 2 de nuestra serie sobre desarrollo de producto con IA, o cómo Bancoli amplía el impacto del diseño de producto mientras el equipo de ingeniería se enfoca por completo en crear aplicaciones backend sólidas y escalables. Lee nuestra primera entrada, Vibe designing: cómo Figma, Claude y Vercel hicieron posible lanzar una página de afiliados en 1 día.
En Bancoli, siempre buscamos llevar más lejos lo que se puede hacer con IA para potenciar a todos los equipos y ampliar su impacto. Desde que nuestro CEO, Romeo, marcó el rumbo hace 2 años sobre crecer con IA, siempre buscamos formas de ser más productivos. Convertir las promesas de la IA en avances reales se volvió algo natural para la mayoría de nosotros.
Acelerar nuestro ciclo de aprendizaje es clave para crecer. Parte de la visión de producto de Bancoli es impulsar ese ciclo de aprendizaje con pocos recursos, a través de la innovación y de iteraciones de producto más rápidas. A principios de agosto, empezamos a explorar la idea de crear nuestra propia plataforma de marketing de afiliados. La meta era gastar menos en lo que parecía un proyecto sencillo que podíamos hacer en casa. Esto podía presentar una disyuntiva de siempre: crecer con soluciones externas y enfocarnos en nuestro producto principal, o hacerlo en casa y perder impulso en el producto.
Pero si el tiempo de salida al mercado no es inversamente proporcional a los recursos, ¿deberíamos seguir dependiendo de nuestro socio de marketing de afiliados? ¿Cómo puede ayudarnos la IA a lograr velocidad, escalabilidad y un diseño perfecto al píxel sin perder agilidad ni enfoque? ¿Nuestra respuesta? Explorar a fondo algunas de las herramientas de vibe designing más populares y aprovechar el poder de la IA para lanzar nuestra propia plataforma de marketing de afiliados.
La forma tradicional: una brecha dolorosa entre diseño de producto e ingeniería
Hoy, nuestro proceso de desarrollo frontend incluye una entrega del diseño de producto a ingeniería. Esto suele causar:
- Retrasos en las iteraciones. Cada ajuste de diseño significa ir y venir, lo que hace más lenta la salida al mercado.
- Desvíos del diseño. Lo que se ve muy bien en Figma a veces pierde fidelidad en el código real, lo que obliga a hacer pruebas rigurosas basadas en comportamiento. Pero ¿y si hubiera una forma de evitar ese desvío desde el principio?
- Desgaste de recursos. Se gastan horas valiosas de ingeniería en traducir ideas visuales a código funcional.
Llega Firebase Studio: un cambio total
El camino empezó probando herramientas que prometían un lanzamiento rápido. Después de probar varias (Convex, Vercel, etc.), hacer vibe designing con Firebase Studio fue facilísimo. Tiene mejores capacidades de vibe designing, depuración fácil e integración nativa con Firestore para crear una aplicación web completa.
Fase 1: diseñar el frontend con vibe designing
En lugar de armar diseños en Figma e importarlos, Firebase Studio permite crear diseños limpios, intuitivos y perfectos al píxel. Después de darle una instrucción inicial con las bases, Firebase Studio convirtió esa instrucción en un Blueprint. Sugirió pautas de interfaz y un conjunto de tecnologías. Después de ajustar las pautas de interfaz, pasó la magia. Firebase Studio empezó a crear el prototipo con datos de prueba. Piensa en gráficas de rendimiento, generadores de enlaces de referido y tablas de comisiones. No era solo arrastrar y soltar. Era una ayuda inteligente que entendía el contexto y sugería buenas prácticas.
Sugerencias de componentes con IA. Según lo que yo le pedía, la IA ofrecía componentes listos y responsivos, lo que redujo muchísimo el tiempo de construcción inicial.
Colaboración en tiempo real. Las dos apps (Affiliate Portal y Affiliate Admin) tienen sus propios proyectos. Así, yo puedo trabajar en el frontend mientras el equipo de ingeniería trabaja en el backend.
Sáltate el producto mínimo viable, y pasa directo a un producto mínimo encantador. Como iterar en el frontend es inmediato, la disyuntiva entre velocidad y calidad se reduce muchísimo. Crear un producto encantador no se siente como una inversión por adelantado. Y aun así, no renuncias a la velocidad. Además, las plataformas de marketing de afiliados existen desde hace mucho tiempo. Por eso, acelerar el aprendizaje no es tan crítico como cuando creas un tipo nuevo de app para clientes.
Fase 2: cerrar la brecha con código generado por IA
Aquí es donde el vibe designing con Firebase Studio me sorprendió. Mientras yo afinaba la experiencia y la interfaz sobre la marcha, la IA de la plataforma generaba en segundo plano componentes de interfaz limpios y listos para producción.
Código generado automáticamente. Con un solo clic, puedes exportar código frontend bien estructurado y fácil de mantener, sin necesidad de diseños previos en Figma.
Menos tiempo de desarrollo. Ingeniería dejó de escribir código de interfaz repetitivo para concentrarse en la lógica de negocio compleja y las integraciones, y usó Claude para reestructurar y refactorizar el código que generó Gemini.
Separación de responsabilidades. Como es una app para clientes con datos sensibles, el código frontend vive en un proyecto de Firebase, mientras que el código backend lo controla el equipo de ingeniería y está guardado en un repositorio dedicado de Bitbucket, por razones de seguridad y rendimiento.
Fase 3: unir todo al conectar el frontend con el backend
Con el frontend generado por IA ya afinado en Firebase Studio, ingeniería pasó a integrarlo con el backend propio de Bancoli en Node.js Express. En esta fase usamos Claude para refactorizar el código y generar los archivos LLM_DEVELOPMENT_GUIDE.md y LLM_QUICK_REFERENCE.md. Claude nos ayudó a asegurar una conexión segura y eficiente y a impedir que Firebase Studio cambiara código backend sensible.
El backend del proyecto de afiliados es una aplicación Node.js Express con rutas, servicios y esquemas de base de datos (MongoDB) propios. Los proyectos Affiliate Admin y Affiliate Portal viven en Firebase. No exponen claves de API ni información sensible de los usuarios.
La ventaja de Bancoli: lo que ganamos
Desarrollo frontend más rápido. El tiempo de salida al mercado bajó muchísimo. Las iteraciones del producto se hacen directo desde Firebase Studio, lo que permite pruebas eficientes basadas en comportamiento, y luego se envían a un entorno de pruebas alojado.
Diseño delegado. Firebase Studio hizo la parte pesada del diseño y nos dio una interfaz sólida y lista para usar que nos dejó priorizar la velocidad y la funcionalidad. El resultado funciona muy bien para una copia de algo que ya existe.
Ingenieros con más poder. Nuestro equipo de ingeniería pudo dedicar más tiempo a la innovación y a resolver problemas complejos.
Al final, para cualquier caso listo para IA (por ejemplo, una plataforma de marketing de afiliados), no usar una herramienta que ahorra tiempo como Firebase Studio crea un costo de oportunidad importante que tu empresa ya no puede ignorar.
Por qué Firebase Studio nos encantó
Ventana de contexto flexible. Pude escribir instrucciones durante horas sin preocuparme por un límite de tokens con el plan Standard. Gemini podía “perderse en el medio”, pero era muy fácil resolverlo. Consejo: el comando /clear te da control sobre la ventana de contexto.
WYPIWYB. Lo que pides es lo que construyes (What you prompt is what you build). Lo que construyes es el diseño y el código funcional. No hay entrega de diseño, así que no hay brecha entre diseño y código donde las decisiones se pierden en la traducción.
Lógica real. Gemini se encarga de crear código de interfaz funcional. También puede usar Firestore para crear la lógica del backend, que fue lo que hice al principio. Después de conectar el proyecto de Firebase a nuestro backend, pude probar flujos completos y verificar los resultados tanto en la app como en MongoDB.
Desarrollo basado en comportamiento, fácil. Puedo hacer cambios en el frontend con vibe designing y probarlos de inmediato, como un ingeniero que prueba en su entorno local. Cuando quiero integrar mis cambios, creo una rama nueva desde la terminal de Firebase Studio y agrego mis cambios. Al final, un ingeniero revisa la rama en Bitbucket antes de integrarla a la rama develop. ¡Listo!
Lo que aprendimos en el camino
Las copias son una gran oportunidad para el vibe designing. Crear productos que imitan soluciones que ya existen y funcionan (las “copias”) es una oportunidad ideal para el vibe designing. Este enfoque reduce mucho la disyuntiva de siempre entre velocidad y calidad, sobre todo cuando la solución que buscas no es muy sofisticada, y permite recuperar rápido la inversión inicial.
Controla el backend si quieres crear una app para clientes. Si estás creando una app para clientes que necesita recoger información sensible (por ejemplo, el correo), muchas veces lo mejor es dejar el control del backend a tu equipo de ingeniería, por razones clave de seguridad y rendimiento. Si te enfocas en una aplicación interna, muchas veces puedes ir a toda velocidad con soluciones como Firestore para desarrollar rápido. Sea cual sea el tipo de app, siempre incluye a tu equipo de ingeniería para que aclare y resuelva los detalles del backend.
Escribe la instrucción inicial con apoyo de un ingeniero de backend si necesitas controlar el backend. El código inicial que generó Gemini no era modular. Si hubiera incluido a un ingeniero desde el principio, es decir, desde la primera instrucción, habríamos tenido más control sobre la arquitectura que queríamos desde el inicio y habríamos guiado a Gemini.
Innovación antes que previsibilidad. Si es tu primer proyecto que llega a producción con vibe designing, acepta que vas a aprender en el camino. Cumplir una fecha estimada no es el criterio de éxito. Mientras el proyecto esté ligado a las metas de tu empresa, tienes la oportunidad de sentar un buen precedente y crear confianza e impulso alrededor de la IA. Muchos hablan de la IA y su potencial, pero ¿de verdad han creado algo concreto con ella? Sé el cambio que quieres ver en la forma en que tu empresa innova. Arriésgate, o te vas a estancar. ¡Empieza a crear e iterar!
Evita que Firebase cambie código que no debe tocar. Claude nos ayudó a generar dos archivos específicos (mira arriba) para incluir en el proyecto de Firebase y limitar el alcance del vibe designing. Por ejemplo, desde la terminal de Firebase Studio, los cambios no se pueden enviar directo a la rama develop. Hay que crear una rama aparte.
El futuro es el vibe designing
A mediados de septiembre, lanzamos la primera versión de nuestra plataforma de afiliados, que combina un portal de afiliados con un panel de administración, para que los afiliados se registren, compartan su enlace de seguimiento y vean su rendimiento. Gracias al diseño de producto con ayuda de IA, nos tomó solo 3 semanas pasar de la idea a producción, y 4 semanas si contamos la configuración y el aprendizaje.
A medida que seguimos llevando más lejos la IA, decidimos dar un paso más con el vibe designing. Herramientas como Firebase Studio, junto con otras plataformas de “vibe designing”, se volvieron una necesidad estratégica en nuestra caja de herramientas. Nos permiten 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. Este cambio de paradigma, al final, libera a nuestros ingenieros para enfocar su experiencia en crear aplicaciones backend sólidas y escalables, en lugar de hacer ajustes de frontend píxel por píxel.
Como John Bauch, Head of Design de Parcha, explica con pasión en su convincente artículo ‘Vibe Designing: How Cursor Revolutionized Our Product Design Process‘, el futuro sin duda ‘pertenece a los que construyen’. La IA no está aquí para reemplazar la creatividad humana, sino para potenciarla y acelerarla de fondo, y llevar a los diseñadores de producto más allá de las maquetas fijas, hacia la creación directa.
Como dijo Bauch, esto no es solo un aumento de productividad. Es un ‘cambio fundamental en lo que significa diseñar’, que nos lleva de ilustrar software a construir software, de aproximar la experiencia del usuario a crearla. Bancoli no solo se está adaptando a esta nueva normalidad. Estamos adoptando de lleno esta evolución en el diseño de producto, con ganas de demostrar que la distancia entre la visión y la realidad de verdad está desapareciendo para quienes están listos para ‘dejar de mover píxeles y empezar a construir’. De hecho, la distancia entre la intención y la acción nunca había sido tan corta.
