Going from Zero to V0 Hero: How AI Built My Mario-Inspired website

For the last few weeks, I've been playing around with V0 from Vercel (creating Next.js websites using prompts), experimenting with several small use-cases—like a simple workshop exercises app and a landing page for a conference featuring a simple quiz. Honestly, it worked surprisingly well! I managed to complete around 80-90% of the work with V0, just needing some minor adjustments using Cursor IDE.

Note: this is not a sponsored post by Vercel :)

First Impressions & Early Experiments

I've always believed writing code is a commodity —at least for basic tasks, not for complex enterprise architectures. Ideally, you'd just write pseudo-code or explain step-by-step what needs to happen, and it should just magically appear. When ChatGPT first came out, it was a game-changer—suddenly, I could ask it to create a component or fix some styles, and it would actually deliver. Later, feeding it screenshots of UI designs could generate about 60% accurate code, but there was still significant manual tweaking required.

Diving Deeper with V0

What truly impressed me about V0 was how accurately it recreated designs from images. For instance, I gave it just a single prompt—"Recreate the provided design as close as possible"—and it nailed about 95% of it. This was mind-blowing. Something that previously took me several days was suddenly achievable within just 1-2 hours.

To push V0's limits, I challenged it to recreate an entire mobile app for a client demo, integrating it with Optimizely Feature Experimentation and simulating device interactions within the browser. I provided about 10 screenshots along with step-by-step instructions. Initially, the results were not that great —I learned quickly that providing just 2-3 images at a time yielded far more accurate results. It took about 18 prompts to go from zero to hero, but I was particularly impressed by how seamlessly V0 integrated Optimizely's react SDK just from a link to the documentation and some user attributes I provided. It managed to recreate not just the design but functionality as well, so one could actually interact with it.

However, I also encountered limitations—complexity became an issue. Towards the later stages, new components or updates occasionally would re-write and mix-up existing functionality, to me that looked as if the app reached some limits, maybe because I had too much content in there.

Testing Creative Boundaries

This experience made me wonder—what would be challenging for V0? I assumed complex animations or games might pose difficulties due to a lot of moving components and coordination within Next.js.

So, naturally, I decided to finally build something I'd always wanted but never completed—my own personal website. To make it fun, I provided my Linkedin profile and asked V0 to build an interactive site featuring a character inspired by Super Mario to navigate different sections. The desktop version came together surprisingly fast, taking just 4-5 iterations. However, the mobile version proved trickier—I struggled with prompts to ensure everything worked smoothly for the character navigation.

To complete the functionality and debug some minor issues I moved to local development using other AI tools like Trae.ai as an IDE and Claude 3.7, which turned out to be impressively effective. They quickly found and fixed specific files or components.

One particularly fun surprise: V0 completely built the Mario-like character using only HTML elements and Tailwind classes. Initially, I thought it would ask me for a sprite or SVG, but instead, it delivered something like this:

{/* Character Head */}
<div className="absolute top-0 left-1 w-8 h-4 bg-red-600 rounded-t-full"></div>

{/* Character Face */}
<div className="absolute top-2 left-2 w-6 h-4 bg-[#ffccaa] rounded"></div>

{/* Character Eyes */}
<div className="absolute top-3 left-3 w-1 h-1 bg-black rounded-full"></div>
<div className="absolute top-3 left-6 w-1 h-1 bg-black rounded-full"></div>

{/* Character Mustache */}
<div className="absolute top-4 left-2.5 w-5 h-1 bg-black rounded"></div>

{/* Character Body */}
<div className="absolute top-6 left-1 w-8 h-4 bg-red-600"></div>

Final Thoughts

Being able to conceptualize, build, and deploy an interactive, AI-driven website within hours—and completely free—is a huge shift for web development. It democratizes technology, making it accessible not only to developers but to anyone willing to experiment and innovate.

I will definitely try expanding on that in the coming weeks and see what else I could add in there.

Thanks for reading my blog!

Exciting times!

Hristo