How I Brought AI Agents
into Billion and Krabo Design
At Grothex I brought AI into flow design, layout assembly, graphics and design handoff. A voice note could turn into a full user flow, built on my concepts, System G and the UX pattern documentation. In onboarding and wallet creation this process helped cover more scenarios and edge states for engineering.
From a voice note to a full user flow in Figma
2 products on one shared library with Variables modes
Fuller coverage of scenarios and states for engineering
Role
Lead Product Designer
Period
March — September 2026
Platforms
iOS, Android, Web
Key Achievements
- Prepared the context AI works from – Built the concepts, the shared System G and the UX pattern documentation. The rules live in the agent's files; Variables modes separate the Billion and Krabo look.
- Built AI into design and assembly – Given a task and context, the agent proposes a user path, describes the flow and assembles it in Figma. I judge the solution, correct it and drive the next iterations.
- Widened scenario coverage – In onboarding and wallet creation we worked through more branches and edge states. Engineers got connected user flows with behaviour variants, ready to hand over.
- Graphics for two products – Series of 3D icons and illustrations built to set rules: materials, light, composition and image processing.
- Change prep for engineering – A design system version comparison and a migration plan with exact names, links and priorities.
- Review of layouts and implementation – Visual review after assembly, a check against the build, and triage of findings before the next version ships.
From a Voice Note to Engineering Handoff
Why did you start rebuilding your work around AI?
I joined Grothex in March 2026. I started with Billion, a self-custodial crypto wallet with Visa card integration. In July, Krabo was added, a payments app with several services.
I combine product work and design: I choose solutions, set priorities, build the concepts and the design system. To iterate faster, I brought agents in as early as the user path work, and then into screen assembly, graphics and documentation.
For that I invested time in the foundation of the process: concepts, components, and the UX pattern documentation I wrote. I fixed those rules in the agent's files and in specs. That is how the Agentic First working model appeared: I set the goal and the context, the agent proposes and assembles the flow, I review and correct the result.
"The concept sets the direction, the design system provides the components and the rules. On that foundation, AI can assemble whole flows."
How did a voice note turn into a user flow in Figma?
I often brought AI in as early as the flow design itself. The input could be a voice note with the task and the context: the agent proposed a user path and described the steps. Where it helped, we looked through MCP at how competitors solved a similar problem.
The agent's foundation was the UX pattern documentation. I wrote the rules for applying components and described the core patterns: how to confirm a deletion, how to save and cancel changes, how to give feedback on an action. Those rules also went into the agent's files and specs. So System G defined both what the interface is made of and how its elements should behave in a flow.
For example, in onboarding and wallet creation I talked the task through, and the agent worked out the flow and assembled it through Figma MCP and the Plugin API. I reviewed the result, refined the logic and made corrections. In the end the design showed more user scenarios, alternative branches and edge states, prepared for handoff to engineers.
How did you apply this approach across two products at once?
When Krabo appeared, I adapted System G for two brands. The components and the documented UX patterns stayed shared, and I moved the styling differences into Variables modes: Billion and Krabo. The agent could rely on that foundation when designing and assembling flows for both products.
Billion is dark and restrained. For Krabo I created a light, warm concept with gold accents: an almost white background, white cards, warm greys and beige tones. I fixed those decisions in the variable values.
Working on Krabo, you can use the same library and switch the brand mode. I set the context and check the solutions for the specific product; the agent applies the shared patterns and assembles the interface in the right styling.
What did engineering get out of it?
For onboarding and wallet creation, engineers received a fuller set of connected user flows: with transitions, alternative branches and edge states. We worked through the behaviour variants in design and organised the flows so they were easy to hand over.
AI also helped prepare the technical changes. After System G moved to two brands, the frontend stayed on the previous version. I had the agent compare the Figma versions by variable and component identifiers. The comparison recorded changes in 98 of 192 component variants.
From that comparison I prepared a migration plan: "before → after" tables, exact names, node links and priorities. It can be attached to a Claude Code session and used as the brief for updating the frontend.
In both the flows and the documentation, I aimed to capture enough specifics for the next step: which behaviour to implement, which states to account for, and what to update in the system.
"To move between versions, an engineer needs an exact list of changes: what to replace, where, and in what order."
How did you turn AI image generation into a working process?
The products need icons, splash art and illustrations in one style. I packaged the generation into AI skills, reusable instructions with visual anchors and rules for materials, light, angle and composition. They set the foundation for every new series.
For one series, for instance, I fixed light satin materials, gold, a low three-quarter angle and soft studio light. The agent generates new images by those rules, and I pick the variants and correct the direction.
After generation the images go through processing: background removal and edge cleanup. That step was needed because of colour halos that became visible once the graphics were placed in the interface.
That is how the Billion 3D icon series and the Krabo splash art were made. For location illustrations I set up a separate rule set on the same pattern.
How do you keep quality under control when working with AI?
Experience with wallets and fintech, especially at Zerion, helped me judge the AI's proposals quickly. I walked the user path, checked the logic, the copy and the states, spotted gaps and corrected the flow. That let me work with whole user flows and move to the next iteration fast.
Adoption meant refining the instructions themselves. Assembling in Figma ran into problems with fonts and with sizing in Auto Layout. I recorded those limits in the skills and added verification rules for the next runs.
I use AI review to find gaps. Reviewing the Billion landing page, for example, the agent found that the main button did not lead to an action. Findings like that help decide what to check first.
As the scenario coverage grows, I check the new branches too: whether they agree with the main path, whether they are clear to the user, and whether they follow the system's UX patterns. The agent's proposals go through that review before moving on.
"Every iteration has to end in a decision: keep the variant, refine it, or drop it."
What do you consider the main result of this approach?
The concepts and System G became the foundation for two products. On that base we got whole user flows assembled through AI, each with its own brand styling.
The product decision, its description and the layout review sit in one working cycle. I can change the flow and hand the agent the next assembly from components that are already prepared.
For a new product, the library and the process itself are reused. The concept, the flows and the Variables values are worked out separately.
Both products are still in development. After launch, the decisions have to be tested against real usage and the iterations continued with feedback from users.
One Screen in Two Products
On one and the same screen you can see how switching the Variables mode changes the styling from Billion to Krabo. The components and the structure stay shared. That is how one library serves as the foundation for assembling flows in both products through AI.
Result: More Scenarios Worked Through
In onboarding and wallet creation I saw a concrete result from adopting AI: we covered more user flows, behaviour variants and edge states than I used to work through by hand at Zerion. Engineers received a fuller set of connected scenarios, prepared for handoff.
Behind that stood a prepared foundation: my concepts, the shared System G, the UX pattern documentation and its inclusion in the agents' context. AI took part from user path work through to layout assembly and engineering materials; I set the direction and corrected the decisions. Billion and Krabo are still in development and preparing to launch.
