Every year, I throw an immersive murder mystery party for a group of my best friends. And every year it gets more elaborate.

This year, I'm not doing a normal murder mystery. I'm building my own version of Netflix's The Mole as a real interactive game my friends can play from their phones.

Players will take quizzes, throw accusations, survive eliminations, and try to figure out who's secretly working against the group. On my side, I need a host dashboard to manage the rounds, track players, reveal clues, and keep the whole game moving.

In this post, I'm walking through how I took that idea from concept to working product using Figma for design, Claude to help turn that design into code, GitHub and Vercel to get it online, and Supabase to power the game data behind the scenes.

This is not just "AI made me a UI." This is the full loop: design, build, deploy, test, and refine.

What We're Building

Before touching any tools, I define the product.

The app is an interactive murder mystery party game. A host creates a game, players join from their phones, each player gets assigned a role, and throughout the game they receive clues, read objectives, make accusations, and track the story as it unfolds.

Core pieces needed:

• A polished front-end interface

• A game lobby or join screen

• Character profiles

• Role and clue assignment

• A backend database

• Game state management

• A way to deploy and test the whole thing live

I like this example because it forces us to go beyond the usual "generate a dashboard" demo. A dashboard can look impressive, but this has actual product logic: users, states, permissions, data, and a real flow from start to finish. That's where an AI workflow starts to get interesting.

The New AI Product Workflow

Here's the mental model:

Figma → Claude → GitHub → Vercel → Supabase → back to Figma

• Figma is where I shape the experience visually.

• Claude is the workbench where I turn design intent into code, troubleshoot problems, structure the app, and connect the pieces.

• GitHub is the source of truth for the code.

• Vercel is how I get it online quickly.

• Supabase is the backend: database, auth if I need it, and the structured data that makes the game actually work.

The important thing: this is a loop, not a straight line. I can start in Figma, move into code, deploy the app, test the experience, find what feels wrong, then go back to the design or code and keep refining.

AI is not replacing the workflow. It's compressing the distance between each step.

The Stack

You could swap some of these tools out, but I like this stack because it's fast, modern, and realistic. It's the kind of setup you could actually use for a side project, a client prototype, or the first version of a real product.

The question for this build is not "can AI make something pretty?" It's: can AI help me move from an idea to something usable, testable, and online?

Step 1: Designing the Experience in Figma

I start in Figma, not because every pixel has to be perfect, but because I still want to think like a designer. Before generating code, I want to understand the user flow.

For this murder mystery game, I map out the main screens:

• Landing or game invite screen

• Join game screen

• Player dashboard

• Character assignment screen

• Clues screen

• Suspect board

• Accusation flow

• Host controls

This is where Figma is still incredibly useful. I can quickly explore mood, hierarchy, layout, and interaction ideas before committing to building.

For a game like this, the vibe matters. It cannot just feel like a SaaS dashboard with spooky colors. It needs to feel mysterious, cinematic, and fun, but still clear enough that people can use it at a party without getting confused. That balance is design work. AI can help generate options, but I still need to decide what the experience should feel like.

Step 2: Using Claude with the Figma Design

Once I have the core screens in Figma, Claude comes in.

Instead of describing everything from scratch, I use the design as context. Claude helps translate what I've designed into front-end components, layout structure, styling decisions, and interaction logic.

This is the first big unlock: I'm not asking AI to invent the entire product in a vacuum. I'm giving it design direction, which means the output is more likely to match what I actually want.

I can say: here's the join screen, here's the player dashboard, here's the clue card design. Now help me implement this as a real app.

And if the first version is off, I can be specific:

• The spacing is wrong.

• The card hierarchy needs to match the Figma file.

• The mobile layout needs to be tighter.

• The tone should feel more like a premium party game and less like a generic admin panel.

That back-and-forth is where the workflow starts to feel powerful.

Step 3: Building the Front End

Now we move from design into code. Claude helps scaffold the app structure and build the front end.

The front end needs to handle several important states:

• Before the player joins

• After the player enters a game code

• Once the player receives their role

• When clues are revealed

• When the player reviews suspects

• When the player submits an accusation

• When the game ends

Here is where AI helps me move fast, but I do not turn my brain off. I'm still reviewing the structure:

• Are the components organized well?

• Is the state management understandable?

• Is the UI responsive?

• Are we making decisions that will scale beyond the first demo?

This is one of the biggest mistakes people make with AI coding: treating the first working version as the final version. I treat it like a really fast first draft. Claude gets me moving, but I'm still the designer and product thinker shaping the result.

Step 4: Pushing to GitHub

Once the first version is working locally, I put it in a GitHub repo. This is a small step, but it matters.

If you're building real things with AI, you need version control. AI will absolutely make changes that break things. Sometimes it solves the problem. Sometimes it creates three new ones. You need a way to track what changed, roll things back, and keep the project from turning into chaos.

GitHub becomes the source of truth. Claude can help write commit messages, explain diffs, organize changes, and keep the project moving. But I still want the discipline of a real development workflow.

This is part of the difference between "vibe coding" and actually building something you can maintain.

Step 5: Deploying with Vercel

Next, I connect the GitHub repo to Vercel and deploy it.

This is one of my favorite parts of the modern workflow because it gives you a live URL almost immediately. And that changes how you think.

A local prototype is useful, but a deployed prototype is something you can test on your phone, send to a friend, run during an actual game night, or share with a client.

For this murder mystery app, that matters. I want to know what it feels like when someone joins from a phone. I want to see if the layout works in the room, in the moment, with real people trying to play.

Vercel turns the project from "something on my machine" into "something people can actually use." That feedback loop is huge.

Step 6: Building the Backend with Supabase

Now we need the backend. This is where the demo gets more real.

A murder mystery game needs structured data. We need to know:

• What games exist

• Who the players are

• Which character each player has

• What clues have been revealed

• What phase the game is in

• Which accusations have been made

So we set up Supabase. Claude helps think through the schema. We define tables for games, players, characters, clues, and game events.

The key here: AI is not just writing UI anymore. It's helping reason through the data model. That's a much more valuable use case.

When you're building an actual product, the interface is only one layer. The real experience depends on the structure underneath it. If the database is messy, the product is messy. So this is where we slow down just enough to make good decisions.

Step 7: Connecting the App to Real Data

Once Supabase is set up, we connect it back to the app.

Now the game starts to feel real. Instead of hardcoded placeholder content, we can pull actual characters from the database. We can assign players to roles. We can reveal clues based on the game phase. We can save accusations.

This is the moment the project crosses the line from prototype to functional app.

And it's also where AI can be both extremely helpful and extremely dangerous.

Helpful because Claude can wire up the API calls, troubleshoot errors, explain Supabase policies, and help structure the logic.

Dangerous because it might make assumptions about security, permissions, or data flow that you do not actually want.

The pattern holds: AI accelerates the work, but you still have to own the decisions. Especially when there's data involved.

The Full Loop: Testing and Iterating

Now we test the full loop.

Can I create a game? Can a player join? Do they get the right character? Can clues unlock correctly? Does the UI make sense on mobile? Does the deployed version work the same way as the local version?

This is where the workflow becomes iterative:

• Find a confusing screen? Go back to Figma.

• Find broken logic? Go back to Claude.

• Find a database issue? Adjust Supabase.

• Deploy a fix? Push through GitHub and Vercel.

Design, build, deploy, test, refine.

The AI is present across the whole thing, not as one magic button, but as a collaborator at each stage.

The Honest Part Nobody Tells You

This workflow is powerful, but it is not effortless.

You will still hit errors. Your first database schema might be wrong. Your environment variables might break. Your Supabase policies might block what you're trying to do. Your deployment might fail. Claude might confidently make a change that creates a new bug.

That's normal.

The difference is that now, instead of being stuck for three hours, you have a tool that can help explain the error, propose a fix, and keep you moving.

The skill is not avoiding problems. The skill is learning how to work through problems faster. That's what AI is changing.

Why Figma Still Matters

One thing worth calling out, especially for designers: Figma still matters.

Even in an AI coding workflow, design tools are not irrelevant.

Figma is where you can think visually, explore the experience, create the system, and make judgment calls before everything becomes code. The difference is that Figma is no longer the final stop before handoff. It becomes part of a larger loop.

Design can influence code more directly. Code can inform design more quickly. And the distance between idea, prototype, and working product gets much shorter.

That's a much more exciting future for designers than just "AI generates screens."

Why This All Matters

The old workflow had a lot of friction. You'd design something. Then you'd explain it. Then someone would build it. Then you'd review it. Then things would get lost in translation. Then you'd go back and forth for days or weeks.

The new workflow compresses that.

A designer can now move much closer to the working product. You can test ideas earlier. You can understand technical tradeoffs sooner. You can prototype with real data. You can deploy something people can actually use.

And that changes the kind of designer you can become.

The most valuable designers are not going to be the ones who only make static screens. They're going to be the ones who can shape systems, understand workflows, communicate with AI, evaluate output, and guide a product from idea to reality.

That's the shift.

Honest Limits

This is not going to replace a senior engineer. It will not magically architect a perfect production app. It will not always make the right database decisions. It will sometimes break your code.

But for prototypes, experiments, internal tools, early product ideas, and learning how software actually comes together, this workflow is incredible.

The point is not that AI does everything for you. The point is that AI helps you stay in motion across parts of the process that used to be locked behind separate roles, handoffs, or technical blockers.

Where This Fits in Your Workflow

For me, this is the new prototyping stack.

If I have an idea for a product, a game, an app, a client concept, or a new feature, I don't want to stop at a Figma mockup anymore. I want to see it working. I want to test the flow. I want to understand the data. I want to deploy it. I want to learn from the real thing.

That's what this workflow gives you:

• Figma shapes the experience.

• Claude builds and reasons through the system.

• GitHub keeps the code manageable.

• Vercel gets it online.

• Supabase gives it a real backend.

Together, they turn the design process into a product-building process.

Not "AI made a design." AI helped take an idea all the way from concept to working product.

3 Things to Remember

1. The future of AI design is not just generating screens. It's building complete workflows.

2. Designers who understand product logic, data, and deployment are going to have a massive advantage.

3. The magic is not any single tool. It's the loop between them.

Figma, Claude, GitHub, Vercel, Supabase. Idea to design, design to code, code to product, product back to iteration.

That's the workflow every modern designer should be paying attention to.

Want to go deeper on AI-assisted design and development workflows? I cover the full stack inside Design Champs. Subscribe for more real-world AI workflows.