This is part 1 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.
A serendipitous beginning?
Not quite. It all started at the end of July 2025, when the Design team experimented with launching a static page through vibe-designing. They wanted to create a dedicated page for Bancoli’s Design System using a vibe-designing tool. This approach required properly defining design tokens as variables within Figma. A tedious task, but one destined to pay dividends in efficiency and productivity down the line. With Bancoli’s long-term vision in mind, two Bancoli principles come to mind to shed light on this decision: “Our focus is on long-term results” and “We build great systems.”
Yet, we had to pause that Design initiative to address a more short-term priority: creating an Affiliate page. With one constraint: engineering cannot get involved. It was a deliberate constraint, a forcing function designed to spark ingenuity from scarcity. After all, ‘necessity is the mother of invention, ‘ as Plato said. Our earlier explorations into vibe-designing, initially aimed at Bancoli’s Design System, had already opened up new doors and given us the confidence to build the Affiliate page through vibe-designing. What had seemed a dampened hope now flickered as a beacon. There was no time to lose.
Pre-requesites
Figma Setup
1 / Defining design tokens properly as Design Variables within Figma.
- Color Variables – For primary colors, secondary colors, text colors, background colors, etc.
- Typography Variables – For font families, font sizes, line heights, and letter spacing. While Figma’s direct typography variables are newer and less comprehensive than color, you can still define these within other variable types or use plugins to extract them.
- Spacing Variables – For margins, paddings, and gap sizes.
- Since we used an existing Home page frame as a design reference, there were not many variables to set.
Since we used an existing Home page frame as a design reference, there were not many variables to set.
2 / Organizing our variables into meaningful collections.
- E.g., “Colors,” “Typography,” “Spacing”
- Since we have breakpoints (desktop/mobile), we utilize Figma’s “Modes” feature within our variable collections.
3/ Ensuring clear naming conventions.
This means using consistent and descriptive naming for our variables to make them easier to manage and map later.
We didn’t use the Figma Tokens Plugin because only a few design variables were needed.
Figma’s remote MCP Server
Figma’s MCP setup guide is easy to understand for a Design team to handle.
The Design team enabled Figma’s remote MCP server to connect directly to our Figma files. This helped us extract design context and keep our design system components consistent with Code Connect. Once Claude Code was connected to Figma’s MCP server, we were ready to effectively invoke design variables from Figma in Claude.
AI-driven Product Development using Figma, Claude, and Vercel
Reference Figma File
Product Design structured our Figma file reference following Figma’s best practices. The goal was to provide the best context, so the MCP and Claude could generate code that’s clear, consistent, and aligned with your design system. While using Dev mode, we utilized a Figma reference file that contained correctly named variables and tokens. This ensured brand consistency throughout the build, managed through the Figma MCP server. No need to design the landing page for both web and mobile, which saved a huge amount of time.
From a 2-day design process to a few hours build process
We passed the raw content provided by Marketing directly into Claude, specifying responsive design requirements from the outset. Correctly setting design variables in Figma previously ensured the right tokens were copied. Finally, Claude generates a JSX file.
Create a responsive landing page using the tokens from the selected Figma frame for an ‘affiliate program’ using this content [pasted content]
Iterating in Vercel
After importing the Claude JSX file, Product Design began iterating in Vercel:
- Replaced placeholder images with actual branding assets
- Adjusted button sizes and other UI elements
- Made text corrections and content adjustments
Product Marketing conducted a QA review, and Product Design was able to iterate swiftly through a few prompts. Once the project was production-ready, we copied it for backup within Vercel and published.
Final step, the domain setup. We created a worker that manages HTTP requests to the www.bancoli.com/bancoli-affiliate-program URL.
From 2-Day Design Process to 1-day Production-ready Launch Process
Let’s recap how Claude, Figma, and Vercel enabled a 1-day launch process:
Traditional product development
A) Web and mobile version (design process) = 2 days
B) Design handoff + frontend development (build process) = 1.5 day
C) QA + fixes (testing) = 0.5 day
Total = 4 days
AI-driven product development (Figma, Claude, Vercel)
A) + B) + C) = 1 day
The Future is AI-Assisted Product Design
At Bancoli, we acknowledge that AI has significant potential to optimize various stages of the product development lifecycle, thereby augmenting all roles involved and enabling them to scale their impact. Our initial experiment, combining Figma, Claude, and Vercel, proved instrumental in amplifying Product Design’s capabilities and significantly expediting our time-to-market.
The approach enabled us to design and iterate with unparalleled speed, transforming concepts into tangible, user-ready experiences in a fraction of the traditional time. Beyond this swift iteration, the AI-driven product development experiment offered another crucial advantage: optimizing resource allocation. It ensured our Engineering team could remain focused on more complex problems, while Product Design, now supercharged, forged an agile, powerful partnership with Product Marketing.