AI-Driven Product Development System
Fragmented design systems slowed development and made AI outputs unreliable. Built a unified design + engineering foundation, enabling AI-driven workflows to improve speed and consistency.
Context
The organization operated across multiple products and teams, each evolving with separate design systems, frontend implementations, and workflows. As teams scaled independently, inconsistencies increased across both design and engineering systems.
At the same time, AI became a strategic priority to accelerate product development. Without a unified system foundation, AI-generated outputs became inconsistent, difficult to reuse, and hard to validate across products, leading teams to adopt AI workflows in silos.
Role
I led this as the primary driver, partnering closely with engineering to ensure the system worked in real development workflows.
Alongside this, I drove org-level alignment, defined what needed to be standardised, established structure, rules, and governance, and partnered with leadership to position this as a foundational shift.
Problem
Multiple products evolved independently over time, each with its own design systems and frontend patterns. This created:
- duplicated component development
- inconsistent user experiences
- disconnected design and engineering workflows
- slower development and maintenance
As teams explored AI-assisted workflows, these issues became more visible. Without a shared system foundation:
- AI-generated outputs became inconsistent
- design-to-code mapping became unreliable
- components behaved differently across products
- generated interfaces became difficult to reuse and validate
Instead of accelerating workflows, fragmentation amplified inconsistency at scale.
Independent systems. Inconsistent products. Repeated effort.
Strategy and Direction
We reframed the problem. AI is only as effective as the system it operates on. To make AI reliable, we focused on three decisions:
- Build a shared base, not forced standardisation Standardised tokens and core components across products and allowed product-level flexibility for complex patterns. This enabled adoption without blocking teams.
- Connect design directly to code Unified design system across Figma and code and aligned tokens, components, properties and behaviours. Design stopped being a reference. It became the source.
- Enable AI to operate on systems, not screens We structured the system so AI could understand components instead of pixels, reuse patterns instead of recreating them, and generate outputs within defined constraints.
AI moved from generating UI to building within a system.
Execution
Unifying the Design System
We built a unified system layer shared across products, connecting design foundations with frontend implementation. This included:
- shared tokens and variables
- reusable components and patterns
- standardized naming structures
- scalable foundations across products
The goal was to create predictable system behavior that could scale across both teams and AI-assisted workflows.
One system. Shared foundation. Scalable across products.
One component system. Consistent, reusable across products.
Shared components driving consistent brand and experience across products
Building the Code System
We used Claude Code to translate system components into production-ready code, structuring the system so outputs were reliable and reusable in real development workflows.
Engineers played a critical role by bringing in real-world constraints, pushing back on decisions, and helping shape the system so it held up in actual implementation.
- Tokens were mapped 1:1 across design and code
- Component were defined with states, variants, properties, usage and behaviour
- Storybook served as the system of truth for implementation
AI was not generating random code. It was generating system-compliant code.
Components and tokens were mapped 1:1 across design and code
Claude Code translated structured components into production-ready code
System context, rules, and constraints so AI could generate consistent, reusable outputs
Creating an AI Validation Layer
Initial outputs exposed key gaps:
- Visually correct but not functional
- Missing states and variants
- Misaligned with real product constraints
We introduced a validation layer that ensures:
- Visual parity with design
- Full coverage of states and variants
- Functional correctness across use cases
- Compatibility with the codebase
AI outputs became predictable and production-ready.
AI outputs were validated against a 13-point audit system before reaching production
Establishing Governance
As adoption grew, maintaining consistency across teams became critical. We introduced a governance layer to guide system usage and evolution:
- Clear rules for component usage and contribution
- Lightweight documentation and rulebooks
- Regular alignment with teams
- Review mechanisms to maintain system integrity
This ensured consistency as adoption increased.
Clear rules, documentation, and reviews enabling consistent system adoption
Impact
There are early signals that this system is working and strengthening with adoption:
- Shift from duplication to shared systems Teams are reusing components instead of rebuilding across products, reducing duplicate frontend effort (~30–40%).
- Faster, system-driven development Teams are building using predefined structures instead of starting from scratch, with more predictable and faster development workflows.
- AI outputs becoming reusable and reliable Structured components and rules allow AI-generated outputs to scale across teams, moving from isolated outputs to system-level reuse.
- Improved cross-product consistency Shared components are aligning previously fragmented experiences.
- Stronger control over quality and evolution Governance and system rules are shaping how products are built.
This system is in active rollout. Full impact metrics are being tracked as adoption expands.
Key Moment
The shift became real when we generated a production-ready page using Claude Code, built entirely on system components, and pushed it to staging.
- No manual frontend build from scratch
- No deviation from system rules
- Fully aligned with design and code standards
This marked the transition from AI-assisted work to AI-driven building.
AI-generated production page built using system components and pushed directly to staging
Defining the AI Workflow
Before : Design → Handoff → Clarify → Support → Ship
After : Design → Build → Iterate → Ship
We were shifting from handoff to system-driven building. Teams now could:
- Build pages directly using system components
- Generate code using AI within defined constraints
- Iterate on real builds instead of static designs
Design and development started happening in the same layer.
What's Next
- Scaling adoption across all product teams
- Expanding system coverage for complex use cases
- Strengthening AI reliability through better constraints and validation
- Enabling designers to ship production-ready UI independently
Summary
This work is redefining how products are built. By unifying design systems and structuring them for AI, we are:
- Moving from fragmented execution to system-driven development
- Enabling AI to generate reliable, reusable outputs
- Bringing design and development closer to production
This is not just a design system. It is a foundation for AI-driven product development.
More Projects
Enterprise Payments Management System
Scattered payment workflows forced finance teams into manual reconciliation and support dependency.
Restructured into a unified payments system, reducing support tickets by ~25–35% and reconciliation effort by ~30%.
Onboarding Re-Architecture
Complex onboarding flows led to early drop-offs and low activation.
Simplified signup and guided users to first reward, reducing drop-offs by ~70% and increasing conversion by ~12%.