Bancoli’s Head of Product, Edouard Maire, shares how vibe designing with Firebase Studio helped Bancoli expedite the time to market of its Affiliate Marketing platform in just 3 weeks, with very limited resources.
This is part 2 of our series, AI-driven product development, or how Bancoli is scaling the impact of Product Design while focusing Engineering expertise entirely on building robust, scalable backend applications. Check out our first blog post, Vibe Designing: How Figma, Claude, and Vercel Enabled a 1-day Affiliate Page Launch.
At Bancoli, we continually push the boundaries of what’s possible with AI to augment all teams and scale their impact. Since our CEO, Romeo, set the tone 2 years ago about scaling through AI, we are always on the lookout for productivity gains. Turning AI promises into real gains has become second nature for most of us.
Accelerating our learning cycle is crucial to driving growth. Part of Bancoli’s product vision is to frugally boost Bancoli’s learning cycle through innovation and faster product iterations. In early August, we began exploring the possibility of building our own Affiliate Marketing platform. The goal was to reduce spending on what seemed like a straightforward project that could be built in-house. This could have presented a traditional trade-off: scaling through other external solutions and focusing on our core product versus building it in-house and losing product momentum.
However, if time-to-market isn’t inversely proportional to resources, should we still rely on our Affiliate Marketing partner? How can AI help us achieve speed, scalability, and pixel-perfect design without sacrificing agility and focus? Our answer? A deep dive into some of the most popular vibe designing tools, leveraging the power of AI to launch our own Affiliate Marketing platform.
The Traditional Way: A Painful Chasm Between Product Design and Engineering
Currently, our frontend development process involves a handoff from Product Design to Engineering. This usually leads to:
- Iteration Delays. Every design tweak means a back-and-forth, slowing down time to market.
- Design Drift. What looks great in Figma sometimes loses its fidelity in coded reality, necessitating rigorous behavior-driven testing. But what if there was a way to prevent that drift from the start?
- Resource Drain. Valuable engineering hours get spent translating visual concepts into functional code.
Enter Firebase Studio: A Game-Changer
The journey began with exploring tools that promised a fast launch. After trying out multiple tools (Convex, Vercel, etc.), vibe designing with Firebase Studio was a breeze. It has enhanced vibe-designing capability, easy debugging, and native integration with Firestore to build a full-stack web application.
Phase 1: Designing the Frontend Through Vibe-Designing
Instead of crafting layouts in Figma and importing them, Firebase Studio enables the creation of clean, intuitive, and pixel-perfect designs. After providing an initial prompt setting the foundations, Firebase Studio turned that initial prompt into a Blueprint. It suggested UI guidelines and a tech stack. After tweaking the UI guidelines, the magic happened. Firebase Studio started building the prototype using mock data – think performance graphs, referral link generators, and commission tables. This wasn’t just drag-and-drop; it was intelligent assistance that understood context and suggested best practices.
AI-Powered Component Suggestions. Based on my input, the AI would offer pre-built, responsive components, drastically reducing initial build time.
Real-time Collaboration. The two apps (Affiliate Portal and Affiliate Admin) have their own projects. So, I can work on the frontend while the Engineering team works on the backend.
Skip Minimum Viable Product, Jump to a Minimum Lovable Product. Since iterating on the frontend is immediate, the trade-off between speed and quality drastically shrinks. Crafting a lovable product doesn’t feel like an upfront investment. Yet, you are not giving up on speed. Plus, Affiliate Marketing Platforms have been around for a long time. Therefore, accelerating learning velocity is not as critical as it is with pioneering a new kind of customer-facing app.
Phase 2: Bridging the Gap – AI-Driven Code Generation
This is where vibe-designing with Firebase Studio surprised me. As I refined the UX/UI on the fly, the platform’s AI generated clean, production-ready UI components in the background.
Automated Code Output. With a single click, you can export well-structured, maintainable frontend code without requiring initial Figma layouts.
Reduced Development Time. Engineering shifted its focus from writing boilerplate UI code to concentrating on complex business logic and integrations, and used Claude to restructure and refactor the code generated by Gemini.
Separation of Concerns. As a customer-facing app with sensitive data, the frontend code resides in a Firebase project, while the backend code is controlled by the Engineering team and stored in a dedicated Bitbucket repository for security and performance reasons.
Phase 3: Connecting the dots – Linking the frontend and the backend
With the AI-generated frontend refined in Firebase Studio, Engineering pivoted to integrating it with Bancoli’s custom Node.js Express backend. This phase involved leveraging Claude to refactor the code and generate specific LLM_DEVELOPMENT_GUIDE.md and LLM_QUICK_REFERENCE.md files. Claude helped us ensure a secure and efficient connection while restricting Firebase Studio from modifying sensitive backend code.
The Affiliate project’s backend is a Node.js Express application with dedicated routes, services, and database schemas (MongoDB). The Affiliate Admin and Affiliate portal projects live in Firebase. They don’t expose API keys or sensitive user info.
The Bancoli Advantage: What We Gained
Faster Frontend Development. The time to market was dramatically cut. Product iterations are directly done from Firebase Studio, enabling efficient behavior-driven testing, and then pushed to a hosted staging environment.
Delegated Design. Firebase Studio took on the heavy lifting of design, providing a robust and ready-to-use interface that allowed us to prioritize speed and functionality. The outcome works great for a copycat.
Empowered Engineers. Our engineering team was able to dedicate more time to innovation and complex problem-solving.
Ultimately, for any AI-ready use case (e.g., Affiliate marketing platform), choosing not to leverage a time-saving tool like Firebase Studio creates a significant opportunity cost that your business can no longer afford to ignore.
Why Firebase Studio Was Delightful
Flexible context window. I could prompt for hours without being concerned by a token threshold using the Standard plan. Gemini could be “lost in the middle,” but it was very easy to overcome. Tip: The commando /clear gives you control over the context window.
WYPIWYB. What you prompt is what you build. What you build is the design and functional code. No design handoff, therefore no design-to-code gap where decisions get lost in translation.
Real logic. Gemini takes care of building functional UI code. It can also utilize Firestore to build the backend logic, which I initially did. After linking the Firebase project to our backend, I could test end-to-end workflows and verify the results in both the app and MongoDB.
Easy behavior-driven development. I can make frontend changes through vibe designing and test right away, like an engineer testing in their local environment. Once I want to merge my changes, I create a new branch from the Firebase Studio terminal and add my changes. Finally, an engineer reviews the branch in Bitbucket before merging it into the develop branch. Voilà!
Learnings Throughout the Journey
Copycats are a great opportunity for vibe designing. Building products that emulate existing, successful solutions (‘copycats’) presents a prime opportunity for vibe designing. This approach significantly mitigates the traditional speed-vs-quality trade-off, especially when the target solution isn’t highly sophisticated and allows for rapid amortization of the initial investment.
Own the backend if you want to build a customer-facing app. If you’re building a customer-facing app that needs to collect sensitive information (e.g., email), it’s often best to leave backend control to your engineering team for critical security and performance reasons. If your focus is on an internal application, you can often go full steam with solutions like Firestore for rapid development. Regardless of the app type, always involve your engineering team to illuminate and address the underlying backend nuances.
Craft the initial prompt with the support of a backend engineer if you need to own the backend. The initial code generated by Gemini was not modular. If I had involved an engineer from the very beginning, AKA first prompt, we would have had better control over the architecture we wanted from the start and guided Gemini.
Innovation over Predictability. If it’s your first project going into production using vibe-designing, accept that you will make learnings along the way. Adhering to an ETA is not a success criterion. As long as the project is tied to your company’s goals, you have the opportunity to set a successful precedent and build confidence and momentum around AI. Many talk about AI and its potential, but have they actually built anything tangible using it? Be the change you want to see in your company’s approach to innovation. Take a risk, or perish stagnating. Start making and iterating!
Prevent Firebase from altering code that it should not modify. Claude helped us generate two specific files (see above) to include in the Firebase project to restrict the perimeter of vibe designing. For example, from the Firebase Studio terminal, changes cannot be directly pushed to the develop branch. A separate branch must be created.
The Future is Vibe Designing
In mid-September, we launched the first version of our Affiliate platform, which combines an Affiliate portal with an Admin panel, allowing affiliates to sign up, share their tracking link, and track their performance. Thanks to AI-assisted product design, it took us only 3 weeks from concept to production, and 4 weeks including setup/learning costs.
As we continue to push AI boundaries, we decided to take vibe designing a step further. Tools like Firebase Studio, alongside other “vibe-designing” platforms, have become a strategic imperative in our toolkit. They enable us to design and iterate with unparalleled speed, transforming concepts into tangible, user-ready experiences in a fraction of the traditional time. This paradigm shift ultimately frees our engineers to focus their expertise on building robust, scalable backend applications, rather than pixel-pushing frontend adjustments.
As John Bauch, Parcha’s Head of Design, passionately argues in his compelling post, ‘Vibe Designing: How Cursor Revolutionized Our Product Design Process,’ the future unequivocally ‘belongs to builders.’ AI isn’t here to replace human creativity, but to fundamentally augment and accelerate it, pushing product designers beyond static mockups into the realm of direct creation.
As Bauch emphasized, this isn’t merely a productivity boost; it’s a ‘fundamental shift in what design means,’ moving us from illustrating software to building software, from approximating user experience to creating it. Bancoli is not just adapting to this new default; we are actively embracing this evolution in product design, eager to prove that the gap between vision and reality is indeed disappearing for those ready to ‘stop pushing pixels and start building.’ Indeed, the distance from intention to action has never been so thin.