Flevoo · AI
The Product Designer's role in an AI workflow
The project
An MVP to test a method, not a finished product
The scope is deliberately that of an MVP: validating a complete product vision and a design-to-code workflow, without aiming for production-grade design system polish. This trade-off frames all the methodological decisions described below.
The challenge for me is methodological: testing what the Product Designer role becomes when AI handles execution across all phases — from product framing to application code — and where my added value shifts.
The workflow, phase by phase
From product framing to code, each phase builds on the previous one
Product framing (AI-driven)
In dialogue with AI, I structured the complete product architecture: two personas, 32 screens across 9 user journeys, a gamification system and a community trust scoring model. My role: asking the questions, making trade-offs, structuring business rules. AI proposes and accelerates, but every product decision remains mine.
Visual identity (AI-driven)
Three design pillars, complete palette in dark and light mode, typographic system, mascot with six contextual expressions, outlined rounded iconography, casual tone of voice. This formalized identity served as the foundation for the screens generated next.
Figma mockups (Figma MCP + manual finishing)
Screen generation from the two previous foundations. The MCP produced screens respecting the defined visual grid. Since Figma component creation wasn't covered by the MCP version used, I produced them manually to finalize this phase.
React Native app (Claude Code)
Application generation via Claude Code with dedicated instruction files and agents, connected to a self-hosted Supabase infrastructure on VPS, aligned on NativeWind to streamline the Figma → code liaison.
What works
Concrete workflow results
End-to-end consistency
Each phase builds on formalized previous phases. Everything stays aligned from framing to code.
Execution speed
A few hours of direction instead of several days of manual production.
Smooth design → code liaison
Figma, NativeWind and React Native speak the same language.
Role shift
Less manual production, more critique, direction and product trade-offs.
Observed limits
What the workflow doesn't cover yet
The items below are not MVP defects. They are identified MCP workflow limits that would need to be addressed if the project moves to production.
Variables and tokens
AI proposed a variable list sufficient for the MVP but incomplete for a production system. Minimal brief at MVP stage + MCP fine-editing limits.
Layer naming
AI structured screens well with Auto Layouts and Groups, but didn't rename elements. Visually readable, hard to maintain for collaboration.
Variable application
AI doesn't consistently use existing variables when generating screens. It favors explicit values, weakening consistency.
Design → code iteration
The workflow works design → code but not yet as a bidirectional loop. To explore with future MCP evolutions.
What I take away
Two convictions confirmed by this experimentation
The quality of the upstream brief conditions everything AI produces downstream. Framing personas, journeys, business rules and visual identity in a structured and precise way before launching generation is the most profitable investment in the workflow. AI executes, accelerates, completes, proposes — but it doesn't think through the problem for the designer.
The Product Designer shifts from initial production to direction and judgment. I design fewer screens by hand, I spend more time structuring rules, making trade-offs, critiquing proposals, directing AI. This shift, experimented here on Flevoo, enriches my practice of AI as a Product Designer.
Flevoo
Access the essentials without opening the app