TEchnical knowledge for PMs

AI knowledge for pms

AI for Rapid Prototyping for Product Managers and Founders

Whatever the hype, using AI for rapid prototyping is real. And not only for simple tasks (like creating a webpage), but also for vibe-coding realistic prototypes and entire applications.

Generative AI in product prototyping

As 90% of us, you are a “regular” Product Manager (or AI Product Manager) working in the company and responsible for some UX (for example, the search page, the entire onboarding funnel, the iOS application, etc.). As part of your work, you come up with new features. You outline them in text documents (for example, PRDs), presentations, or simply explain them in words (which is not ideal), or homemade diagrams (which is better), or Figma (even better, but most often requires a designer).

Now imagine that you are a PM in the music service Spotify, and you have an idea: add the feature "Concerts of this band nearby." The feature is understandable and clearly targets the pain of users: instead of subscribing to hundreds of incomprehensible mailings, in your music app, they immediately see that: "Your favorite singer performs in the neighboring city on May 15." Cool, huh?

It's one thing to explain it all in words, and another thing is... showing what it's gonna look like. Fortunately, with modern AI prototyping tools, it will take ten minutes and will require zero lines of code from the PM. Magic? No, it's science.

First, we need to clone Spotify's UX. For this:

  • Make a screenshot of any Spotify screen (for the test, you can use mine below, or take your own, or google “spotify UI image”)
  • Sign up for Replit (below, I will explain why this particular service). The free rate is suitable for the first prompts.
  • In the first window, attach a screenshot and tell the system the following:
*If the free version of Replitt refuses to accept screenshots, then just replace the first line with “Make the exact UI copy of Spotify”. With widely known products, this will work!
  • Make an exact copy of the UI from this screenshot.
  • Copy the colors, fonts, and the location of the elements and captions exactly.
  • Don't create any backend, do only UI.
You can see the copy in the picture above. Not bad for 5 minutes, huh?

Of course, the prototype does not play music and does not look perfect, but it will definitely allow me to show my idea. Actually, let's add it. Here is the prompt that will do this:
  • Add a small green button "Concerts nearby" on the second card in the "Recently played" section.
  • On click, a pop-up window should open. It will have three fields: date, city, venue (fill them with random data), and the “Book tickets” button (which does not lead anywhere).
  • Don't do any backend, just UI.
The picture above is a feature in action, and here you can touch it. Of course, the prototype can be honed, but it will definitely allow me to tell the director / team / colleagues: “This is our main player, and this is the feature that I want to add. Click here, what do you think?”

I want to warn you right away that any AI prototyping tool can make mistakes and create a red button, instead of your green, or a transparent pop-up that will not be visible. You just need to know what to expect from AI prototyping services and how to fix it with simple prompts. By the way, everything is as with a real team, only instead of waiting for a sprint (when the designer will have some free time), you wait for AI to write your code, and that's only a couple of minutes.

AI Prototyping Tools: why Replit?

You’ve probably heard about different tools: Loveable, Bolt, v0, Cursor... Why did I choose Replit for this practice?

The long answer is in the comparison table below, but here is the main reason. Replit is not merely a frontend AI prototyping tool; it can generate a full-stack application with a "brain" on the service and even "remember" the data with real databases. With some work, other tools can do it too, but why should we suffer if we can use everything directly out of the box? AI prototyping tools are actively developing, and perhaps, soon, the whole table will be green, or maybe some of the AI tools listed there will simply disappear. We will monitor the progress!
Сравнение нейросетей для программирования и AI прототипирования

Entrepreneurs prototyping MVPs without coding

The remaining 10% of the PMs are already creating something: they are either working on a side project or developing an MVP for their startup. Previously, in order to take the first steps, you needed a technical co-founder or developer, but now it’s quite possible to do it yourself. And this is not a hype, it is science!

First, you can create an "empty shell" of UI by explaining to AI what you want, then add a backend and database, external integrations (here is an article about API), and so on. Then you will click "To production!", and voila – your MVP is open to everyone online and is ready to serve at least the first 100-1000 users.

After that, you will need to hire a developer to clean or rewrite the AI code, and that's fine; first, get those 1000 users, and then worry about the future.

AI for rapid full-stack prototyping

I recently once again caught myself thinking: It’s so annoying to track group costs, especially when they are unequal (for example, A paid not for everyone, but only for B and C but not for D). Wouldn’t it be great if I had my own SplitWise app to manage who owes whom, and how much? And then the following happened:

  • I took a piece of paper and sketched the UI I wanted (not Figma or Canva in 5 minutes, just a pen). It was crooked, but it was enough to explain to the neural network what composition I wanted.
  • After 3 minutes of waiting, I already had a fine UI, and 10 minutes later, I made it beautiful.
  • After 30 minutes, I added a database so the app could store transactions.
  • Another 20 went to the algorithm of counting functionality, who owes how much (I explained to AI what I wanted to see, tested, and caught bugs).
  • The next day, I woke up with the idea of adding OpenAI analysis of the cost distribution by categories (e.g. food, transport, etc.). Another 20 minutes, and it is on the page.
  • Then I adapted UI to mobile screens and added a swipe gesture to delete the records, JUST BECAUSE IT'S COOL :)
  • Then I deployed it, and you can see the result here. It doesn’t have authentication, so you don’t need to log in, and you can play with it right away, but if I add registration, thousands of users will suddenly be able to use it because everyone will have their own cost lists.
Tomorrow I might have new ideas. Perhaps I should add unequal divisions (for example, Bob ate twice as much, so he will pay twice as much for dinner). Or what about using OpenAI to analyze the images of checks, so that instead of typing the fields manually, I could load the photo, and the name, price, and date would simply be retrieved from it? What would you add?
How to master it: AI Prototyping Course
The distance between the idea and its implementation has never been so short, thanks to the neural networks that write code and even help to create full-fledged applications.

The good news is that if you want to repeat the same as I've done above, you don’t have to be tech-y or a former developer. But I also don’t want to embellish – you can’t just read one article and become an AI Product Manager: it’s like learning one sentence in a foreign language without understanding its basic structure – there is little benefit. You will be able to take one or two steps, but on the third step, the application will become more complex and AI will drown into its own bugs.

If you want to learn a structural approach, then come to the "Full-stack AI-prototyping for Product Managers and founders" course. There, we build three cases, add 10+ features, and do it all from the very basics to introducing technology to pro-prompts and complex integrations.

I hope it was useful, and let's build things 🤖