Every designer today is experimenting with AI workflows. You see people talk about “prompt → riff → refine” loops. But the truth is: no one has a perfect workflow yet. Most tools are either great at blasting out ideas (0→1) - your AI tools or polishing details (1→n) - Figma, but clumsy in between.
Recently I cam across Tom Johnson’s tweet on X that got me excited:
For Tom, the loop is “Make → Canvas → Make.”
For me its more of a ChatGPT → v0 → ChatGPT loop to get things close to what I want, and then go to Figma to refine it to high fidelity.
The idea is the same, but my stack leans heavier on GPT for structure and v0 for riffs.
📖 Read next:
- Context > Prompt: A designer’s system for an AI copilotThe “ChatGPT → v0 → ChatGPT” loop is akin to making the wireframes, albeit this is faster, you can see how your flows work right in front of you, get your edge cases and error states sorted and keep it in the mid-fidelity.
Let me elaborate:
High-Level Flow
User flows + IA in ChatGPT → bring them to life in FigJam
UI layout (text based) in ChatGPT
Use v0 to bring these layouts to life
Keep “riffing” and forking in v0
Debug with ChatGPT
Back to v0
Export to Figma using the “HTML to Design” (Figma) plugin
Step-by-Step walkthrough - the guts of the workflow
1. Flows & IA in GPT
Instead of starting in Figma, I start in GPT. I get it to spell out user flows, edge cases, error states, and all the awkward stuff like empty/loading states.
GPT is great at exhaustiveness. It doesn’t forget to ask: “What happens if the user cancels halfway?” or “What if the server fails?” (If it doesn’t I can ask for it). It helps me catch those details upfront.
For me, this is like having the entire “canvas” already in my head before I even start drawing.
2. Loose UI Layout in GPT
Once I know the flows, I’ll ask GPT to sketch a UI structure in plain text. Top to bottom, section by section: layout details, content blocks, patterns, components wherever necessary.
I’m not asking GPT to make it pretty. Think of it as my blueprint. It keeps me from staring at a blank page in v0 (which is half the battle) and start from scratch.
3 and 4. Bring them to life and keep forking in v0
This is where the riffing happens. I paste the layout into v0 and let it generate a first pass. Then I start forking:
Trying different layouts.
Shuffling components.
Seeing variations side by side.
The magic of v0 is speed. I can throw around 3–4 versions in minutes.
5. Problem-Solving (Debug) with GPT
When I get stuck (which happens a lot), I don’t fight v0. Instead, I snapshot the code or layout, paste it into GPT, and say: “Here’s the problem. Fix it.”
GPT becomes my debugging partner. It gives me solutions, tweaks the code, gives me great prompts to fix the problem in v0, and helps unblock me. Meanwhile, v0 stays my riffing playground.
6. Back and Forth (GPT ↔ v0)
This is the core loop.
Fork in v0.
Hit a problem.
Debug in GPT.
Feed it back into v0.
Refine, fork again.
7. Export HTML → Figma
Once I have something semi-stable, I use HTML-to-Figma (or similar plugins) to bring the designs into Figma. This step is where I bridge from AI riffing → designer craft.
High-Fidelity in Figma
Finally, polish mode. Now it’s pure Figma:
Setting up tokens.
Fine-tuning typography, spacing, grids.
Refining components for reuse.
At this point, v0 has done its job. It helped me avoid the blank canvas problem. Figma is where I bring the final design home.
Trade-offs and mitigation
Forks in v0
In step 4, where I keep forking in v0, I can get stuck in a vicious loop where things keep breaking, and instead of exploring ideas, I am firefighting errors.
My fix → when this happens, I don’t force v0 to handle the whole flow. I generate screens one-off, so each page works in isolation. Later, I stitch them together if needed.
v0 costs money
Riffing in v0 with prompts costs money. Every broken fork = more tokens burned. The trick is to lean on GPT as your debugging partner. Be precise with prompts, fix issues cleanly, and only loop back into v0 once you know what you’re testing.
Closing thoughts
Now, half the time it feels like duct-taping three tools together. But honestly, that’s also the point: designing is not a straight line. For me, “ChatGPT + v0 loop” and back to Figma for high fidelity is enough to keep ideas flowing, avoid the blank canvas freeze, and get to high fidelity faster than I ever could before. Until the tools catch up, this messy loop is how I ship.