Rapid Prototyping with Vercel v0: Building an AI Image Comparison Quiz
At Time Under Tension, we're always on the lookout for tools that can help us bring ideas to life quickly. Recently, we decided to give Vercel v0 a try to see how it handles rapid prototyping. Our goal was to create a simple interactive quiz where users try to distinguish between AI-generated images and real photos—a fun way to test the realism of the latest image generation models.
Setting Up the Project
We began by providing Vercel v0 with the following prompt:
"Build an interactive quiz where the user must try to pick the AI-generated image versus a real photo of a person. The user will be given 5 examples to work through. Clicking on an image will indicate the user’s selection with a green checkmark. The user can change their mind by clicking on the other image. Once satisfied, the user can click 'Next' to move on to the next question."
To give a clearer idea of what we wanted, we also included a quick wireframe sketch of the user interface.
Initial Results
Within seconds, Vercel v0 generated a list of what it had created and provided an interactive preview of the app.
After a quick test, we noticed the app was functional but lacked a scoring system and a completion screen. To enhance the user experience, we provided additional feedback:
Add a scoring system: Keep track of the user's correct and incorrect answers.
Completion screen: Display the final score and include a "Restart" button for users who want to try again.
Incorporating Real Images
With the core functionality in place, we sourced a collection of image URLs—some AI-generated and some real photos. We asked Vercel v0 to incorporate these images into the quiz, enhancing the realism and challenge of the game.
Exploring the Code
One of the features we appreciated was the ability to toggle and view the code behind the app. This transparency allows developers to understand what's happening under the hood, make custom adjustments, or even integrate the code into other projects.
In our case, we decided to publish the app directly from Vercel v0, streamlining the deployment process.
The Final App
After these iterations, we had a fully functional quiz app that met our initial requirements.
Conclusion
Our experience with Vercel v0 was quite positive. While we noticed some variability in the results—the first iteration seemed to perform better than subsequent ones—the tool proved to be a valuable asset for rapid prototyping. It's impressive how quickly you can go from an idea to a working app with just a few prompts and tweaks.
We're looking forward to pushing Vercel v0 further with more complex use cases in the future. If you're interested in experimenting with it yourself, you can try Vercel v0 for free at v0.dev/chat.
Update
After sharing the quiz with our team, we received some feedback. They suggested that the quiz should show which answers were incorrect, include a share button for social media, and offer an option to sign up for the Time Under Tension newsletter. With just a couple more prompts in Vercel v0, we were able to implement these features seamlessly.
However, we encountered a limitation: the Vercel instance disables external linking, which affected the functionality of the share button and newsletter sign-up. To overcome this, we ran a simple npx command in our terminal to set up the project locally. This allowed us to deploy the app to our own hosting provider, enabling all features—including external links—to work as intended.
