About
Over several years, I evolved Mobal’s UI from a lightweight component setup into a scalable, AI-ready design system. The vision was clear: build a foundation that enables Claude, Devin, and future AI agents to contribute meaningfully — without sacrificing coherence, governance, or speed.
context
Mobal began as a services-led agency focused on listing management for local businesses. The early UI was intentionally simple — built in Vue.js with a lightweight component structure designed for speed and experimentation. Over time, the product evolved into a comprehensive online marketing platform serving businesses of all sizes, demanding far greater architectural maturity than its initial foundation.
To support this shift, I scaled the product design system, formalized component logic, and strengthened design–engineering alignment while preparing the foundation for AI-assisted workflows. By structuring components, patterns, and tokens for greater autonomy, we enabled faster execution with tools like Claude and Devin — building a scalable, AI-ready system that could sustain long-term velocity without fragmentation.
Problem
Early velocity created hidden structural debt . Our original Vue.js-based component library enabled fast shipping, but as new branded explorations emerged, patterns began to diverge. Without structure, speed was quietly turning into fragmentation.
The product started with a simple component library built on Vue.js to move quickly. After I joined, my primary goal was to scale the product — and that required elevating the design to align more strongly with the brand while ensuring a seamless customer experience. As new product surfaces and branded explorations evolved, new components were introduced organically. However, without a unifying system, components varied in behavior, styling, and logic. Frontend decisions were made in isolation, UI logic was duplicated or overridden, and engineering time was increasingly spent on avoidable rework. Operating in competitive Nordic markets while running a lean team post-restructure, we needed to test new bets fast — but inconsistency was slowing us down.
This wasn’t a visual polish issue; it was a structural scaling risk. Without intervention, UI complexity would outpace product growth. As the Founding Product Designer, I took ownership of the UI system strategy — formalizing components, aligning design and engineering workflows, introducing governance, and preparing the foundation for AI-assisted execution to restore velocity with structure.
Building the system foundation
I began by auditing the entire product surface with John, a developer and design-system enthusiast on the team. Together, we cataloged components across products, identified duplicates and brittle one-offs, and mapped inconsistencies in behavior — not just visuals. This gave us a concrete view of what we were actually maintaining. It exposed where complexity had become accidental and where speed had silently introduced structural risk.
Design System Audit & Alignment
In 2023 During the platform redesign, I expanded this into a structured, cross-functional audit involving the Head of Product, Tech Lead, and developers. In FigJam, we mapped every existing component, usage pattern, and deviation across the system.
From the outset, my intent was clear: we weren’t just redesigning screens — we were building the foundation of a scalable, future-ready design system.
Over four weeks of continuous collaboration, we identified systemic gaps, clarified priorities, translated patterns into coded components, and surfaced discrepancies early. This created shared ownership across design and engineering, reducing drift before it compounded.
Rebuilding the Foundation
Rather than layering polish on top of chaos, I rebuilt the foundation. I defined a core, extensible component set, removed overly specific and redundant components, and designed everything around variables, predictable states, and explicit behaviors. The system was intentionally lean, optimized to absorb new requirements without forcing rewrites.
Importantly, it wasn’t built just for the screens we had. It was designed for the products we hadn’t shipped yet and for AI-assisted workflows that required structured, machine-readable patterns to operate effectively.
This shift moved us from reactive UI production to intentional system design — restoring velocity with clarity, alignment, and long-term scalability up until now in 2026.
Into action : System Maturity & Acceleration
Following the initial system audit and foundation rebuild, we invested deeply in operationalizing the design system. Throughout 2024 and 2025, components were continuously refined, production-hardened, and pushed into Storybook through close collaboration with engineering. This was sustained system work — not a one-time setup.
As component coverage expanded and patterns stabilized, execution speed increased significantly. New features moved from idea to shipping faster because teams no longer rebuilt UI logic from scratch. The system reduced friction, improved coherence across releases, and minimized avoidable rework. Storybook evolved into more than documentation — it became a shared source of truth and an execution engine for scalable delivery.
Components were developed and documented in Storybook, and every new component went through early design–engineering discussion, explicit agreement on states and interactions, and clear intent before implementation.
To increase speed without sacrificing quality, I integrated AI directly into the workflow. Using Figma MCP Server, I validated structure, variables, and states before handoff. With Devin, I mapped design variables to code logic and reduced configuration back-and-forth. With Cursor, I accelerated iteration on component-related code, helping debug, refactor, and align implementations faster.
This shifted component readiness left in the process. Designers delivered execution-ready components, while engineers focused primarily on validation and system integrity.
Previously, two engineers were actively building and reworking components. Today, one engineer mainly reviews and approves pull requests. AI didn’t replace judgment—it amplified it.
Check the snaps below for a quick glance on the system on Figma
Color system
01 // ARCHIVE
Typography
02 // ARCHIVE
Layour Grid System
03 // ARCHIVE
Feature wise ready to use layouts
04 // ARCHIVE
Components list based on Atomic system structure
05 // ARCHIVE
AI-Assisted Execution
A structured foundation that turned UI from friction into infrastructure. :)
The product now delivers consistent UI behavior across all surfaces, with faster feature development and fewer regressions. UI work is predictable, and dependency on engineering for basic component setup has reduced significantly.
Every component is implemented and documented in Storybook. With this structure in place, we use Claude and Devin to validate, generate, and publish components with far less back-and-forth.
The system is now structured enough for AI to operate within guardrails — not guesswork.
Impact & Closing Thoughts
We’ve seen org level impact as we set to grow faster. Product can test new bets without rebuilding foundations. What was once a hidden source of drag is now infrastructure that enables experimentation and scale.
By treating the design system as a core product pillar rather than a support initiative, we demonstrated tangible returns: reduced engineering effort, shorter delivery cycles, and coherent execution across features. It is now seen as a long-term accelerator.
The foundation is intentionally evolving. We are extending leverage through Devin and exploring AI agents for operational system work, while enabling prompt-driven interface creation directly from Claude using our structured tokens and components.
I am glad our strategic approach to solve system for stabilization is now an AI-ready product engine built for sustained velocity.