AI Prototyping: First Impressions and Thoughts on v0
The game-changing prototyping flow Figma AI doesn’t (yet) offer
Back again this week, exploring how AI fits into the product design process. Last time, it was AI for brainstorming. This time: prototyping.
Specifically, using AI tools like V0 to turn ideas into real, working code, not just static screens.
There’s a lot of noise about AI prototypes replacing design tools like Figma. I have to admit, AI gets you to something fast and real, helping close some of the gaps in our current workflow.
Getting to something that actually feels real can be cumbersome, especially for interactive flows. Tools like Figma are powerful, and with enough workarounds, you can get there. But it often takes time and effort to build complex interactions. With AI-generated code, you get there faster.
Then there’s the handoff gap. Design specs and dev specs sometimes don't match 1:1, which is why we end up writing long, layered documentation. Prototyping in code means you're working from the same specs and speaking the same language as development.
And I believe there’s more we can unlock with AI prototyping. We’re just starting to scratch the surface.
I didn’t pick V0 for any deep reason. Its clean look caught my eye, I’m familiar with Next.js (the same team behind it), and I plan to test other tools too.
Design Buddy is a free publication supported by readers like you. Subscribe to have my next post delivered directly to your inbox.
Testing v0 in action
Let’s build something quick and simple.
A summary card for a personal finance tracker that gives you an overview of category spending and a signal message if you’ve exceeded your weekly budget.
I use ChatGPT to structure the card and flesh out the details. It needs to give me what I need.
Create a clean summary card for weekly personal spending.
Card elements:
Title: "This Week’s Spending"
Main amount: "$1250.00"
Trend indicator: "12% higher than last week "
Category breakdown: Include Groceries, Transport, and Eating Out, show with simple icons or horizontal % bars.
Signal message: "Above your target by $150 – mostly in Eating Out"
Set width to 4 columns (out of 12)
v0 offers different models to use.
Here are the results
‘Large’ looks better. It’s aiming for hierarchy. But for speed and credit efficiency, I chose to stick with ‘medium’. It gets close enough to the look of ‘large’ without the extra cost.
Regardless of the model, the first result might still feel off. Too plain, too busy, or just not quite right. That’s expected. Prompt again with what you want to change. I listed what I wanted to change and described it in plain, natural language.
Design Mode gives you more control
Click to tweak something directly, or prompt just the part you want to change.
Design Mode gives you more control. Click to tweak something directly, or prompt just the part you want to change.
But even with that flexibility, Design Mode still feels limited, especially compared to editing mockups in a design tool, like Figma.
One workaround to bring the precision of your mockup: Add design from Figma
Start with a Figma mockup and bring it into V0. With structure and styling already set, you’ll need fewer credits to iterate.
It’s pretty accurate if you ignore the font. The dropdown works too, it’s clickable and shows real options.
The real game-changer flow in prototyping
Here’s the game-changer: staying in V0 and wiring it up to your own design system repo. Once that’s done, you’re not just prompting, you’re prompting with context. Your component library, tokens, and style guide become the design language the AI speaks fluently.
For this test, I kept it simple and pulled from V0’s community systems. Same prompt as before, no extra notes on styling, and boom: it styled itself, pulling straight from the design system.
With the same prompt as before, here’s the result without any additional instructions about styling. It automatically follows the styling from its design system.
I also tried being deliberately vague. Prompts like “simplified version” still returned usable, styled results.
Then I pushed it further: no prompt, just a sketch. Literal scribbles turned into real UI. Wild. Imagine snapping a photo of a whiteboard after a meeting and getting a working screen in return.
When your UI stays in sync with your system, idea-to-iteration gets tight. That’s where Figma AI’s ‘First Draft’ falls short. It can’t generate UI based on your own system.
A few takeaways from testing V0:
It’s dead simple. If you’ve touched ChatGPT or Gemini, you’ll feel right at home. I wrote this whole thing without opening a single tutorial.
High fidelity, fast. AI prototyping feels like skipping straight to act two. I really think this is going to become a standard part of the toolkit.
But speed is only useful if you know where you’re headed. Otherwise, you’re just moving fast in the wrong direction.
Clarity matters. Explaining your intent to AI sharpens your thinking—and makes it easier to share with others.
It clears headspace. Less time nudging pixels, more time shaping ideas.
Design tools still win on freedom and depth in exploration.
Prototyping is still about bringing ideas to life, fast enough for feedback. Choose your tools accordingly. You don’t use a sledgehammer to drive a nail.
Speed + system = scale. Plug in your design system, and the whole loop tightens. More ideas, more variants, more testing, faster.
If you’ve tried V0 and have thoughts or suggestions, I’d love to hear them—drop a note in the comments.
Until next time,
Thomas
Thanks for reading Design Buddy. If you enjoyed it, tap the ❤️ or share it with a friend, teammate, or fellow designer.