From ‘vibe coding’ to rigorous design: our journey with AI

Written by Gary Broadbent, Head of Product Design, Streaming, and Claudio Russo, Lead Product Manager, Metros

At Nine, we’re not just reporting the news; we’re building the future of digital experience. When powerful generative AI tools first emerged, the excitement was electric. Like many tech teams, we dove straight in. Everyone was experimenting—designers generating wild concepts, engineers spinning up boilerplate code in seconds.

We called it “vibe coding.” It was fast, fun, and chaotic.

But we quickly hit a wall. What happens when the “vibe” isn’t enough? How do you turn a cool party trick into a reliable, scalable process that delivers high-quality, maintainable products?

Our engineers and designers felt the friction. The code was inconsistent. The designs were visually exciting but disconnected from our core Design System, resulting in extensive rework. Teams were working faster, but not together. We weren’t collaborating; we were just automating our own silos.

We knew we needed to evolve. This article is the story of our journey from ad-hoc experimentation to a structured “AI-Accelerated Discovery and Design” lifecycle—a journey that required a new kind of rigour.

The journey: building a “job description” for AI

The core problem was clear: our AI tools were powerful collaborators but lacked a job description. We were asking AI to be a creative partner, a production assistant, and a junior developer all at once, and we were surprised when the results were messy.

Our team’s challenge was to define AI’s role. We needed to harness its speed without sacrificing the quality, brand integrity, and strategic alignment that Nine is built on.

Our discovery: The 3-phase lifecycle

Instead of a free-for-all, we developed a structured 3-phase process. This framework became our “rigour,” the guardrails that allow us to move fast safely.

PhaseOur goal & AI’s “job”How we applied rigour (your role at Nine)
I. Ideation & ExplorationAI as Creative Partner: Use AI (like Figma Make) to expand thinking, challenge assumptions, and rapidly generate diverse concepts.You are the strategic prompter. Your role is to frame open-ended problems and define success criteria before the AI starts, reducing the time from a vague idea to a testable concept.
II. Design & Concept DevelopmentAI as Alignment Accelerator: Rapidly convert raw ideas into our ecosystem.You are the guardian of the brand. This phase has a critical guardrail: every component must map to our core Design System. Using tools like Figma Code Connect, you ensure AI output is system-aligned from the start.
III. Implementation & SpecificationAI as Governed Automator: Automate code generation, documentation, and unit testing.You are the architect. AI doesn’t commit code; you do. Your role is to define the “Constitution” (our standards and templates), enforce spec-driven development, and conduct critical code reviews before merging.

The outcome: from chaos to collaboration

This new process was transformative. The “magic” of AI was still there, but now it was focused.

The prototype, once a source of friction, became a “collaboration enabler.” Because designs in Phase 2 now referenced our actual Design System components, what a Product Manager or Designer prototyped suddenly became 90% “real.”

This single change dissolved the bottleneck between design and development. Teams felt aligned, not chaotic. The conversation shifted from “This looks nice, but we can’t build it” to “This is great. It’s already using our components. Let’s get it into production.”

The payoff: how our work changed

This journey fundamentally changed our day-to-day. By applying rigour, we didn’t limit innovation—we amplified our talent.

  • For Product Designers: AI automates the tedious work of asset conversion and basic layout. This frees our designers to focus on high-value craftsmanship: complex interaction design, brand execution, and user experience strategy. You spend less time on production and more time on creative problem-solving.
  • For Engineers & Product Managers: Engineers stopped debugging messy, non-compliant AI code. They now dedicate their time to higher-level system architecture and technical vision, reviewing spec-driven code instead of writing boilerplate. PMs can rapidly iterate on ideas, creating functional prototypes themselves, knowing they are already unblocked and aligned with engineering.

We proved that a human-led, AI-supported approach could dramatically shrink the time from concept to working prototype. This isn’t just a business win; it’s a profound improvement in how our teams feel and work together.

The future: become an architect, not a tool user

Our 3-Phase Lifecycle isn’t a static document; it’s a dynamic framework we are constantly iterating on. We are actively driving the integration of Figma Code Connect to create a single source of truth between our code components and our design library.

This journey taught us that success with AI isn’t about who is fastest at “vibe coding.” It’s about the curiosity to experiment, the resilience to find a better way, and the analytical thinking to build a rigorous process around it. At Nine, we’re not offering you the chance to just use AI. We’re offering you the chance to be a strategic architect, defining how it’s used.

If you are a thought leader ready to challenge the status quo, an innovator excited to democratise development, or a collaborator eager to build shared, high-value outcomes, you belong here.

Read our Content