Evolve or become irrelevant, so here I go with step two of my AI-driven project.

In the previous article I used an AI service called ChatPRD to create a Product Requirements Document (PRD). The PRD is for my new AI-driven web app for musicians called TrackTagging.com. As we saw, ChatPRD did a fabulous job taking my brain dump and creating a detailed PRD with clear goals, technical considerations, use cases, user experience recommendations, and metrics.

Step two is to use the PRD to build a working prototype. This is where Vercel’s v0 comes into play and where I start creating the actual app.

Jumping Out of the Gate with a Working Prototype

I’m building TrackTagging.com to enable musicians to upload a song, have the AI service “listen” to it, then provide a detailed description of the music along with keywords and metadata. The use case is for musicians who want their tracks to be found by producers creating videos, online presentations, or physical installments.

To test how well-trained v0 is I only wanted to give it two things: my PRD and guidance on what music taxonomies to use. When I gave v0 my PRD, it reviewed it and “recited” back its understanding of the project. It was spot on! 

With my thumbs-up, v0 then built a prototype right then and there based on the specs. Incredible. Within a minute, I had a working prototype for uploading music, watching the AI “progress” through the analysis, and viewing the description and metadata. Not only did v0 create its own mock data for the various metadata fields it needed to populate, it also came up with a color scheme and design that was modern and appealing.

Getting the UX Right

My plan is to use this prototype to inform the final stage, which is to build the actual app using Cursor, another AI service. Therefore, I wanted the UI and UX of the prototype to be as close to final as I can get. As such, many of my follow-on requests to v0 were to tweak the different fields and the messaging.

For example, I want musicians to have as little friction as possible when going through the entire track-tagging process. This means the workflow for editing the metadata should be meticulously fine-tuned, which includes how each field becomes “in focus” or out.

Also, musicians should only enter seven keywords at most — any more and they end up spamming the search engines. v0 gave me an elegant solution, which you can see at the bottom of the Review screen. And finally, the keywords should be drawn from known taxonomies in the music world. Therefore, v0 had to research the ones I referred to, find the actual taxonomies, and use only those words.

Prepping for Coding

Once v0 and I fine-tuned the whole flow, it was time to export the files so Cursor can build the actual, production-ready app. v0 gave me several options but I chose the simple step of using its Download feature. I ended up with a nicely organized directory on my local machine with all of the necessary files. Spoiler alert: Cursor had no trouble picking up these files and getting to work.

v0 could not have been easier to work with and I’m sure providing it with a robust PRD made a big difference. But it created a well “thought-out” working prototype within a minute, which I was very excited to extend into an app. For Product Managers who want to get their vision into a tangible form, I absolutely recommend using the power duo of ChatPRD + v0.

Read how it all ends when I build the app using Cursor, the AI-coding service.