AI · Vibe Coding Design Facilitator & Developer

AI-Powered
Live
Prototyping

Stakeholders struggle to give useful feedback on written requirements. I found that if you build something in front of them, the conversation changes completely. I started opening Replit in the meeting and building working UI from the brief in real time using Claude and Cursor.

3
AI tools used per session (Claude, Replit, Cursor)
~20
Minutes from brief to interactive prototype
~8
Minutes to first working layout on screen
1
Meeting from brief to aligned prototype
The Problem

Abstract requirements produce abstract feedback

When stakeholders review written requirements or wireframes, they often cannot picture what they are actually approving. They say it looks good in the meeting and come back two weeks later with significant changes after seeing the real thing for the first time.

The traditional solution is to build a prototype first, then bring it back for review. That adds a week to every cycle and still results in rounds of revision because the prototype was built based on assumptions rather than a live conversation.

I wanted to collapse that loop. If the prototype gets built during the meeting itself, stakeholders give feedback on something real while the context is still fresh.

Process

Building in the room

1
Understand the Brief

Before the session, I read whatever requirements exist and prepare a rough mental model of the UI. The goal is to understand the core interaction so I can build the right skeleton quickly when the session starts.

2
Live Build with Claude and Replit

I open Replit in the meeting, paste the requirements into Claude or Cursor, and start building. Within a few minutes there is a working HTML/CSS/JS prototype on screen. Stakeholders watch it take shape and start reacting immediately.

3
Real-Time Iteration

When a stakeholder says "can we move that button?", I change it while they watch. The prototype becomes a shared artifact that the whole room is shaping together rather than something that gets handed back later with written notes.

4
Async Follow-Up

After the session, I share the Replit link so stakeholders can continue reviewing at their own pace. I then take the aligned prototype and translate it into a proper Figma file for the developer handoff phase.

Live Demo

Watch a session replay

A condensed recreation of what stakeholders see in a live session, built from a fictional brief. Press play and watch the prototype assemble the way it does in the room — including a mid-session change requested by a stakeholder.

The brief

"We need a dashboard where lab managers can see pending orders, flag overdue ones, and check volume trends for the week."

  1. 0:00 Brief pasted into Claude
  2. 2:30 Layout scaffold appears
  3. 8:00 First working dashboard
  4. 14:00 "Can the trend be green?" — changed live
  5. 18:00 Room aligned, link shared
Lab Orders
128
Pending
9
Overdue
+12%
Weekly volume
✓ Prototype shared with the room

Recreated with fictional content — real sessions run on actual stakeholder requirements.

Technical Stack

Tools used in session

Prototyping and AI
Replit Claude Cursor HTML/CSS/JS Figma Make
Design and Handoff
Figma Figma Code Connect
Example — live-built dashboard card from a stakeholder session
/* Built live in ~8 minutes from a verbal brief */ .dashboard-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; } .card-metric { font-size: 2rem; font-weight: 800; color: #0F172A; line-height: 1; } .card-trend { color: #10B981; /* stakeholder asked for green in real time */ font-size: 0.875rem; font-weight: 600; }
Outcome & Impact

Alignment happens in the room

Results
Brief to prototype in under 20 minutes

What used to take days of async back-and-forth happens in a single meeting. Stakeholders leave with something they have already validated.

🎯
Fewer revision cycles

Because feedback is grounded in a real prototype rather than imagination, the "I didn't picture it like that" problem mostly goes away.

🤝
More engaged stakeholders

Watching a UI take shape in real time keeps the room engaged. People who usually disengage during design reviews start contributing specific, actionable feedback.

📚
Upskilled the UX team

I run Learning Lab sessions where I teach other Labcorp designers how to use Claude Code, Cursor, and Replit in their own workflows. The technique is spreading across the team.

← Back to all work Next project Enterprise Component Library →