Case Study
Developing an AI-Powered Enterprise Design System: Double the Speed with Half the Team
How leveraging agentic AI allowed our team to deliver an enterprise design system with half the team at 2X the speed.
Case Study
Developing an AI-Powered Enterprise Design System: Double the Speed with Half the Team
How leveraging agentic AI allowed our team to deliver an enterprise design system with half the team at 2X the speed.
Client
A leading technology provider for financial content distribution, with clients such as Wells Fargo, Merrill Lynch, BlackRock, Edward Jones, and others.
Industry
Financial Services
Services
Agentic AI for Organizational Transformation UX Design System Rapid AI Prototyping
Project Duration
4 months
Client
A leading technology provider for financial content distribution, with clients such as Wells Fargo, Merrill Lynch, BlackRock, Edward Jones, and others.
Industry
Financial Services
Services
Agentic AI for Organizational Transformation UX Design System Rapid AI Prototyping
Project Duration
4 months
Client
A leading technology provider for financial content distribution, with clients such as Wells Fargo, Merrill Lynch, BlackRock, Edward Jones, and others.
Industry
Financial Services
Services
Agentic AI for Organizational Transformation UX Design System Rapid AI Prototyping
Project Duration
4 months
Problem
A leading financial services compliance platform faced significant UX/UI fragmentation following the acquisition of multiple disparate software products. Each system had its own interface patterns, design conventions, and front-end architecture. The organization needed to unify these products under a single brand while building an enterprise design system capable of supporting multiple frameworks, including Bootstrap and custom Angular implementations. Beyond design consistency, the challenge was structural: aligning design, engineering, and product teams around a shared system that could scale across a complex and evolving platform ecosystem.
Approach
Our team at Roko Labs leveraged agentic AI across the full design system development lifecycle, from the initial project discovery to project documentation using tools like Cursor, Claude, Codex, and Atlassian integrations via MCP (Model Context Protocol). Our main approach is treating agentic AI not as a point solution, but as a continuous system supporting discovery, design, prototyping, and documentation. AI workflows processed vast data in real-time, mapping patterns and allowing teams to get a handle on large quantities of information not possible otherwise. Throughout the engagement, outputs were validated with internal stakeholders and key customer accounts to ensure alignment with both technical constraints and go-to-market priorities.
Problem
A leading financial services compliance platform faced significant UX/UI fragmentation following the acquisition of multiple disparate software products. Each system had its own interface patterns, design conventions, and front-end architecture. The organization needed to unify these products under a single brand while building an enterprise design system capable of supporting multiple frameworks, including Bootstrap and custom Angular implementations. Beyond design consistency, the challenge was structural: aligning design, engineering, and product teams around a shared system that could scale across a complex and evolving platform ecosystem.
Approach
Our team at Roko Labs leveraged agentic AI across the full design system development lifecycle, from the initial project discovery to project documentation using tools like Cursor, Claude, Codex, and Atlassian integrations via MCP (Model Context Protocol). Our main approach is treating agentic AI not as a point solution, but as a continuous system supporting discovery, design, prototyping, and documentation. AI workflows processed vast data in real-time, mapping patterns and allowing teams to get a handle on large quantities of information not possible otherwise. Throughout the engagement, outputs were validated with internal stakeholders and key customer accounts to ensure alignment with both technical constraints and go-to-market priorities.
Problem
A leading financial services compliance platform faced significant UX/UI fragmentation following the acquisition of multiple disparate software products. Each system had its own interface patterns, design conventions, and front-end architecture. The organization needed to unify these products under a single brand while building an enterprise design system capable of supporting multiple frameworks, including Bootstrap and custom Angular implementations. Beyond design consistency, the challenge was structural: aligning design, engineering, and product teams around a shared system that could scale across a complex and evolving platform ecosystem.
Approach
Our team at Roko Labs leveraged agentic AI across the full design system development lifecycle, from the initial project discovery to project documentation using tools like Cursor, Claude, Codex, and Atlassian integrations via MCP (Model Context Protocol). Our main approach is treating agentic AI not as a point solution, but as a continuous system supporting discovery, design, prototyping, and documentation. AI workflows processed vast data in real-time, mapping patterns and allowing teams to get a handle on large quantities of information not possible otherwise. Throughout the engagement, outputs were validated with internal stakeholders and key customer accounts to ensure alignment with both technical constraints and go-to-market priorities.
How Did Agentic AI Accelerate the Delivery of an Enterprise Design System?
At the core of the approach was a system of interconnected AI workflows that continuously interacted with project artifacts, documentation, and communication platforms in real time. These workflows were powered by commercially available tools and integrations, including Cursor, Claude Code, Codex, and Atlassian (Jira and Confluence), connected through emerging patterns in context management and MCP (Model Context Protocol) architectures. Rather than operating in isolation, these AI systems maintained awareness of evolving project context, enabling consistent, coordinated outputs across discovery, design, and delivery. The design team relied heavily on prototyping engineering-ready designs that ensured alignment with a complex set of constraints managed via AI. The project was successful via an AI-enabled operating layer that allowed a small team to function with significantly greater speed, alignment, and capacity.
Process: AI Embedded Across the Design System Development Lifecycle
AI was embedded as a central coordination layer across all phases of work, including discovery, design, prototyping, documentation, and engineering requirements definition.
01.
Discovery: Rapid System Understanding
02.
Design: Engineering-Aligned System Development
03.
Prototyping: Code-Grounded Iteration
04.
Documentation: Automated and Structured Outputs
AI accelerated early-stage discovery by processing large volumes of information that would traditionally require weeks of manual effort. The team recorded narrative walkthroughs of existing products and workflows using Microsoft Teams transcription. AI systems converted these recordings into structured documentation, capturing features, workflows, and interface patterns. Using tools like Cursor, Claude Code, and MCP-connected integrations with Jira and Confluence, AI identified overlapping functionality, redundancies, and structural patterns across product lines. This enabled the rapid development of an information architecture baseline, clarifying system relationships and highlighting opportunities for consolidation and improvement.
01.
Discovery: Rapid System Understanding
AI accelerated early-stage discovery by processing large volumes of information that would traditionally require weeks of manual effort. The team recorded narrative walkthroughs of existing products and workflows using Microsoft Teams transcription. AI systems converted these recordings into structured documentation, capturing features, workflows, and interface patterns. Using tools like Cursor, Claude Code, and MCP-connected integrations with Jira and Confluence, AI identified overlapping functionality, redundancies, and structural patterns across product lines. This enabled the rapid development of an information architecture baseline, clarifying system relationships and highlighting opportunities for consolidation and improvement.
02.
Design: Engineering-Aligned System Development
03.
Prototyping: Code-Grounded Iteration
04.
Documentation: Automated and Structured Outputs
Key Outcomes
2–3x Team Leverage. Two designers delivered the output of a four-person team in four months by using AI across discovery, design, and documentation. Engineering-Ready Design. Designs were built within real frameworks (e.g., Bootstrap), not abstract mockups—reducing handoff friction and minimizing rework. Faster Delivery. AI reduced time spent on analysis, iteration, and documentation, shortening timelines without sacrificing quality. Automated Workflows. Documentation, reporting, and backlog creation were largely automated, allowing teams to focus on higher-value work. Context-Aware Knowledge. AI provided real-time access to best practices across accessibility, frameworks, and engineering, maintaining consistency through shared context (MCP-enabled). Stronger Alignment. Clear documentation and shared visibility improved decision-making across design, engineering, and product.
2–3x
Team Output. A team of two designers delivered the equivalent output of a four-person team.
4 Months
Accelerated Delivery Timeline. Designers were able to deliver 2X the work within a four-month period.
~50%
Smaller team than traditional engagements.
Near-Zero
Design-to-Engineering Rework.
Key Outcomes
2–3x Team Leverage. Two designers delivered the output of a four-person team in four months by using AI across discovery, design, and documentation. Engineering-Ready Design. Designs were built within real frameworks (e.g., Bootstrap), not abstract mockups—reducing handoff friction and minimizing rework. Faster Delivery. AI reduced time spent on analysis, iteration, and documentation, shortening timelines without sacrificing quality. Automated Workflows. Documentation, reporting, and backlog creation were largely automated, allowing teams to focus on higher-value work. Context-Aware Knowledge. AI provided real-time access to best practices across accessibility, frameworks, and engineering, maintaining consistency through shared context (MCP-enabled). Stronger Alignment. Clear documentation and shared visibility improved decision-making across design, engineering, and product.
2–3x
Team Output. A team of two designers delivered the equivalent output of a four-person team.
4 Mo.
Accelerated Delivery Timeline. Designers were able to deliver 2X the work within a four-month period.
~50%
Smaller team than traditional engagements.
~ Zero
Design-to-Engineering Rework.
Need a custom agentic enterprise solution? See how we turn ideas into real products.
More Case Studies
Have a similar task or project? Let's talk about it!
Have a similar task or project? Let's talk about it!
Copyright © 2026 Roko Labs Inc.
All rights reserved.
1250 Broadway, 36th Floor, New York, NY, 10001
Copyright © 2026 Roko Labs Inc.
All rights reserved.
1250 Broadway, 36th Floor, New York, NY, 10001
Copyright © 2026 Roko Labs Inc.
All rights reserved.
1250 Broadway, 36th Floor, New York, NY, 10001
Copyright © 2026 Roko Labs Inc.
All rights reserved.
1250 Broadway, 36th Floor, New York, NY, 10001