Becoming truly agentic in an AI-powered product team

Context

The company moved fast to AI-assisted development. Product Managers prototyped ideas with AI, but their prototypes didn't look like our products. As designers we had to explore faster while keeping our design system and brand consistent.

Challenges

• Prototyping

  Product Managers had their own repository and skills to prototype features. Their prototypes didn't use our components.

• Design system

  The old design system wiki wasn't maintained anymore, so its tokens didn't match the code. Web and mobile each carried their own legacy.

• Design ↔ Code

  Code was never connected to design. Figma was only a visual reference, and fast agentic development created even more drift.

Objectives

1. 1Give Product Managers the context and skills to prototype with our latest components and design rules.
2. 2Create a new design wiki as the source of truth between development and design, and use it to remove the legacy.
3. 3Connect code, Figma and the design system, so the design team explores faster and decides with real product data.

My role

I owned the planning of the project, the product design repository and its skills, and adding the mobile app to the design wiki. I worked with developers, Product Managers, stakeholders and another Product Designer.

Outcome

• Product Managers prototype from the product design repository, and their prototypes now almost exactly match our code and design.
• We spend 30% less time tidying up Figma files and running checks, because the MCPs do it for us.
• We explore twice as fast with Figma's own agents, Southleft's Figma MCP and our own skills.
• A new design wiki, and a new roadmap initiative to remove the legacy.

What we built

• A product design repository

  Prototype skills PMs can call, connected to the design wiki and Figma.

• A new design wiki

  Every component from Figma and code, with a gaps report that tracks the drift.

• Prototypes back in Figma

  An MCP connection that rebuilds prototypes in Figma with our real components.

• Usage data agents can read

  PostHog events from the mobile app, connected to the agents.

The deep dive, with how each challenge was tackled, the visuals and the reflections, is behind the password below.