How He Built This Full App Using ONLY 3 prompts | Colin Matthews

People are building real apps now, and making millions of dollars in revenue just by basically vibe coding.

Yeah, it's really not that hard, to be honest. You can do like 90% easily, and you need to solve 10% yourself. So if I was working at Substack as a PM and I wanted to pitch this idea, you can either write up a super long PRD or you could do this in 10 minutes.

They're going to be a lot of vibe coders out there. Any tips you can just give them to kind of just get going?

There's two main problems, I think. One is being technical enough to solve the 5 or 10% of problems when the agent says like, "Oh yeah, I can fix that for you," and then it messes it up, and then it messes it up, and it messes it up again.

That can really eat your money and your time. And then the second set of problems is really like trying to build something where you can distribute the product reasonably well. So often I see people think that coding is the main hurdle.

You still have to have a good business model, you still have to distribute the product, and all the other things that come with it. So for example, um.

Colin, great to have you here. Welcome to the podcast.

Yeah, super excited to be here.

So today we are going to be prototyping the latest vibe coding tools. What are we going to be learning in today's session?

Yeah, we're going to go over a couple of things, some kind of main use cases. So we'll talk about how to build full-stack applications, because that's kind of a new trend. Lots more people are wanting to build their own apps.

We'll integrate with an LLM, and then we'll look more at like kind of core product workflows. We'll look at converting Figma designs to code, kind of going backwards from something you've prototyped back into Figma, and yeah, kind of just do the whole gamut.

Awesome. Excited to check it out, but we'd love to begin by hearing the vibe coding space is still so new. In the last six, eight months, it's kind of like new tools popping up every five minutes. How have you been finding it?

Yeah, it's actually kind of funny. So Bolt came out in October of last year. So Bolt was one of the first tools in the space. So it's literally like 12 months of this space, but obviously it's changed a ton in that time.

So there's still like kind of like the major players,right? So I'd say like Lovable, Bolt, Replit, probably V0, who kind of dominate in terms of market share or retention. And then there's lots of other smaller players now who are building towards like some specific domain or use case,right?

So like vibe coding for mobile apps, or vibe coding with integrations built in. That's kind of like what Base44 is doing. And so I think we're kind of moving from like this general era of vibe coding is super cool into these kind of niches now where we'll see lots of different tools that are better for different use cases.

What's been your favorite tool so far?

Yeah, it depends honestly on the use case. So for like just kind of general use, I really like Bolt. The reason I like Bolt is because it's pretty flexible, so it can run different programming languages or frameworks, and also it's pretty easy to use.

And then if I'm building full-stack apps, I typically use Replit for that, and they give you like a lot of hosting and security stuff built in. So yeah, just depends though.

Yeah, it also feels that their products, services are evolving,right? It kind of feels like now everyone's seeing the, you know, the vibe coding, the actual like code. That's kind of old now. What happens next?

Yeah, for sure. Actually, kind of funny. So when they started, it was just a single request over to like OpenAI,right? So it'd be like your prompt, some system prompt, and then OpenAI would generate the code. Now pretty much all of them are agents,right?

So they're running multiple steps with your request. They can run for like Replit claims, you know, I think it's like, I don't know, at least a couple hours with one request, which is kind of absurd. So that's one main change.

Like I think every tool at this point has pretty much moved into the space of being an agent rather than just like generating code. And then, yeah, I think coming up, like a lot of it's actually going to be about full-stack development and abstracting away some of the complexity of doing that.

So things like managing your Stripe, or managing your API keys, or setting up like your email integrations. And the more that the tool can do that for you, I think, you know, the more people will be happy with the result that they're getting.

I agree. And it also feels like it's a race to the bottom in terms of pricing. I was trying like Bolt out last week, and what you get out of your credits is so much more than Lovable.

Yeah. Yeah, yeah, for sure. It is interesting. Like I feel like they're kind of going in different directions. So on a counter example, I think Replit's pretty expensive at this point because it can run for so long. I'm running a courseright now and people are using it, and they're using their $25 credit in like one day.

Very easily, like building something simple,right? Whereas, and we'll talk about this a little bit when we get into it, but like there's other tools like Claude Code and Codex that actually just use your existing subscription. So you don't have to pay anything additional to generate code.

It uses your ChatGPT subscription or your Claude subscription. And so if you're a little bit savvy, you can use some of these tools for like hosting, getting your stuff on the internet, and you can use the kind of more engineering-centric tools for the code generation and kind of get the best of both worlds, and both in terms of cost and in terms of quality.

Yeah, I mean, I think it's fair to say the biggest opportunity this has provided all of us, we can now build products within days. You don't need a massive team. Even if you can't code, like I'm not a coder, you can now build okay products in, you know, a couple days.

I think that's huge.

Yeah, yeah, for sure. I agree. I think it is really interesting though, because again, like I'm, so I'm currently running a course called Vibe Code Production Grade Side Projects. And part of that, I actually half the content is kind of like more product-focused or go-to-market-focused.

It's not technical. Because so often I see people like, they think that coding is the main hurdle. And then now that you can, you'reright, you can get code, it's like, cool, I can build what I want. And they find out that like, you know, go-to-market or distribution is also a very big hurdle that you have to figure out,right?

And so, yeah, I think there's going to be more and more people who realize that like coding, although it was a barrier for a lot of people, you still have to like have a good business model, you still have to distribute the product and all the other things that come with it.

It doesn't necessarily just solve itself because you have code, but anyway.

Exactly. Cool. Well, excited to jump into it. And for anyone who wants to join Colin's calls, we'll add them to the links in the description, so go and check them out. But let's jump on to today's session. So we are going to be building a Virtual Fitting Room.

Yeah, that'sright. So I've already spun these up just to save us a little bit of time, but we can walk through the different tools as well as the prompts. Actually, one really quick thing, if it's cool, before I hop into that, I had this little slide that I wanted to share briefly, because I think this is helpful for people to kind of understand.

I just want to talk briefly about this slide. So when we talk about these tools like, you know, Replit, Lovable, Bolt, there's two main parts. There's code generation, and then there's hosting,right? So for a lot of the tools, they do both,right?

They both generate the code for us, and then they host the website for us. So they host our servers, they host our databases, and they basically host, you know, everything we need to run that application. Some of them like Replit do it themselves, and then other tools like Lovable and Bolt, they actually kind of pass this over to Supabase on the backend.

So even now today, like Lovable and Bolt literally just released new updates to their backend services, but it's just a rebranding of Supabase into their platforms. They're still using Supabase on the backend. Kind of contrasting to that, you'll hear about other tools like Codex, Claude Code, Cursor, Devin.

These ones only do code gen; they don't do the hosting side,right? So that's kind of like the big dichotomy between the two. A lot of people are excited about these top ones because it solves both the infrastructure problem as well as the code gen problem.

But as I kind of mentioned earlier, you could use like a Replit for hosting or for infrastructure, and like a Claude Code or a Codex for your code generation. So you can kind of mix and match if you want to.

But yeah, I just want to make sure that's clear because we're going to go through a couple different tools, and they don't necessarily all do the same things conceptually. So yeah, let's hop into our full-stack apps. So here we have Lovable, Replit, and Bolt.

Those are kind of the three main ones. And what I'll do is I'll just walk through them, and then we can kind of chat a little bit about which one was best, and kind of maybe pick the tool that we like the most.

So first one first, I set up Lovable here. I did do like the whole full-stack thing. So I have authentication set up, and then, you know, a database and all that good stuff. As mentioned, Lovable just recently made some changes.

So all your kind of infrastructure is hosted inside of Lovable now. So you can see like my database, users, storage, and all that good stuff. But we'll go ahead and give this a try. So I'll sign up for an account.

I'll just throw in my email here.

And then we land on the page, and we can go ahead and get started. So basically all we do here is we upload a photo, and I have a picture of myself from when I had hair ready to go.

And then we can pick a different style of image that I want. So, you know, I'll say formal wear and generate some formal clothes for us here. And this is using the Gemini 2.5 Flash model, also, you know, the Nano Banana model.

And yeah, we have this like little slider here, and there we go. There's our formal wear version of me. This, by the way, took me basically this one large prompt. This is a prompt that I kind of set up in terms of a PRD.

So it goes through the user stories, the requirements, the data model, like kind of all the requirements that you might have. And then from there, most of it was honestly just approving actions. And eventually I did have to give it some better instructions on how to generate the image.

One thing that you'll notice is that sometimes these models like Lovable, Replit, and Bolt, they kind of get the integrations mixed up. So you have to give them like really explicit instructions on how to integrate with another service.

And so that's what this prompt here was, was me giving it sample code on like how it should be integrating, and I got this from the documentation. So that's one like small trick, and we'll talk more about this later on, but like I actually do think being technical and knowing how to debug is becoming an even more valuable skill.

Because you can do like 90% easily, and you need to solve 10% yourself. Knowing how to do that is pretty important.

And for Lovableright now,right, you can't actually change the code yet.

Yeah, so you can do like a GitHub sync and then modify it elsewhere through GitHub, but yeah, basically it's a little bit more cumbersome to modify the code. And I think that's like an intentional decision, to be honest, that they're trying to position themselves as actually less of a technical solution and more of like a product for anyone, and especially people who don't know how to code.

Yeah. Or they're going to increase their prices or have another subscription if you want to edit the code.

Yeah, yeah, exactly. But yeah, so that's the Lovable one. You kind of saw the end to end there. I'll hop over into Replit. So Replit, kind of similar. The UI is a little bit different. Like it tried to build, you know, something like a homepage here, but anyway, very, very similar idea.

So we'll go ahead and upload our file here, throw this in, and then we can pick. Maybe I'll try casual this time. The thing is, the underlying model for all of these is the same model. So like theoretically, we shouldn't have vastly different results, but let's give this a try.

So we'll generate here, and yeah, hopefully this one works. And same thing. So Replit, exact same prompt as the other one. You will notice like pretty big differences in style, given this exact same prompt, which is interesting in and of itself.

And then, yeah, we have our result here. So here's my formal wear, and it kind of like copied my monochrome or grayscale, but added some color on the bottom, which is interesting. But yeah, so there's our second one.

Yeah, it kind of feels Replit has a better UI. It's just a bit more friendly, a bit more welcoming. Versus Lovable, it just seemed like a bit old school.

Yeah, I also think that like the Lovable one, honestly, doesn't even really feel like a website to me. It's almost like, it's almost like a slideshow of functionality. It's just like, here's the thing. Like here's slide one, here's slide two.

Yeah, Replit definitely feels a little bit more like an actual website. It's still a little bit off. Like, you know, this is a weird header. There's no like image or anything like that, but yeah, it feels a little bit better.

Cool.

Pretty realistic as well.

Yeah, I mean, that's just goes to show you how good the models are nowadays. But yeah, so we have our last one here with Bolt. So this is, we're logging already with Bolt here, and maybe we'll do, we'll just do the same thing, business professional.

This one does come with some additional features. So it has like favorites in a gallery, and we'll kind of walk through that in one second here. So it implemented a little bit more. But again, I'm using the new Bolt infrastructure stuff.

So I'll show you that in one second here, but here's our image. One interesting thing, by the way, I found it a little bit disconcerting when I saw it. This is basically the color of my hair and my beard, but this is a black.

So I was like, well, that's kind of interesting that it inferred the correct colors somehow. I don't really know how that works, but anyway, my eyes are not blue, but otherwise, you know. But yeah, so this one stores our prior pictures.

So you can see I did one with winter wear. It's quite the outfit. And then we have our favorites as well. So this one feels probably the most like a real app to me.

This is great.

So any thoughts on, out of the three, you know, Lovable, Replit, Bolt, opinions on which one's best?

I mean, my personal favorite would probably be Replit. It's just easy, easy to navigate, good UI. Lovable, kind of like, it kind of feels like a 2000, 2010 kind of like Windows. And with Bolt, yeah, it feels okay.

Replit would probably be my preference.

Yeah. Yeah, I think I agree. Also, I mean, one thing to kind of say as an aside here is Replit also tracks your kind of expenses or how much money you're spending as you go,right? So if we open this up, like the initial request to set this up cost $1.70.

And then if we scroll down a little bit further, we can see that the additional one, this one was 17 minutes of work, cost $4.00. So $5.00 to generate this website. I do think that's more expensive than the other ones on average.

The Replit agent takes a lot more steps to do the same work, is what I'll say. So, you know, you might end up with like a better quality product at the end, but it's a little bit slower.

I quite like the transparency there. If you're getting to know what it costs in real time, it's quite nice.

Yeah, yeah, I agree. Also, I mean, as mentioned, like part of that includes like the hosting cost. So if I was to deploy this on the web and have users and all that stuff, that's all built into the monthly subscription of $25.

Obviously, if you exceed the cost of 25 bucks, then you're going to go past that. But again, this is where like debugging or being able to prompt correctly is important, because you can imagine like if I put in a prompt here, I spent $4.00 and then it wasn't what I wanted, and I roll it back, now I've just wasted $4.00,right?

Which is actually like, what is that? I don't know, 15%, 20% of my $25.00 for the year, for the month. So yeah, you do have to be a little bit like strategic about your decision making so you don't end up wasting a ton of money.

How have you got, have you got better and better over the year, well, over the months, I guess, with becoming a better debugger? You know, a lot of our audience also won't have that much skill set in actually coding, or at least vibe coding.

How can you become better at debugging?

Yeah, I think there's two main points. So one is actually understanding a little bit about what's going on behind the scenes when you build these systems. So like, you know, classic example of this is that in this application here, we have a client.

So that's the UI that you see. We have a server that's running, and then we have a database that stores data. And let's say I like wanted to walk through why the Gemini model's not working. So why can't I generate the image?

That would be a request that goes from my client to my server, and then over to Gemini's server comes back, and then comes back to my client. So there's basically these, you know, couple of hops in between. And if I was having a problem, I'd basically debug each of those steps.

So I'd look at like, is my client sending the correct request to my server? Is my server communicating with Gemini correctly? Is Gemini returning the response? And then can I actually render the response in the client? So understanding the architecture a little bit, and it's not super complex, but some understanding is helpful.

And then the second thing is actually knowing how to access logs and use logs. So you'll see like inside the console here, that I can see the request going back and forth from my server. And then I can also look at the logs for my client.

So like what are the requests going back and forth there? And this is usually where you're going to get the most information on like something going wrong, is you'll see that there's errors in the logs. And being able to like look at the logs, kind of understand a little bit about what's going on, even just like ask the agent to explain it to you, as you see there, is probably the other kind of main thing is just getting comfortable with that idea.

Yeah, kind of a side note to the debugging. One of the frustrations I have is if you're in one of these and you ask it to build it, but it's not really what you wanted it to build, but it was pretty accurate, you think.

Right now there's like no way to get a refund or like undo the credits. It kind of feels like surely that's got to be a next step for them.

Yeah, it's interesting. I feel like from an economics perspective, they're probably already super low margin, to be honest, because the models are expensive themselves. And so I think that's where like, if I had to kind of hypothesize here, where some of the venture funding comes in,right?

Like Lovable raised, I think, $200 million. Part of that is probably because the margin on the tokens is not that high, and they need to continue to compete in a very competitive market. So they need to keep building new features, and I don't know if they could fund it through profit.

So yeah, I agree with you from like a customer standpoint, it's not the best behavior. It's almost like people make it like akin to gambling,right? Like you put it through a token in the slot machine, and you hope you get the result you want.

It's certainly not like that. Like you can get better results if you, again, have some understanding about what's happening. But yeah, maybe one day it'll be a bit better, but I don't think anytime soon, to be honest.

Yeah, it might just be timing as well. As these models get better, then hopefully the accuracy will just keep getting better,right?

Yeah. One other thing I'll just mention, and Replit actually recently bought a YC company to help with this, but kind of all of them are heading in this direction, is trying to build like more deterministic elements to the LLMs.

So they just bought this YC company to add more connectors. And basically the connectors or integrations allow you to connect to all these different products. Rather than having the LLM generate the code to connect to that API, they already have it like pre-packaged,right?

And so these are the types of things that like allow the product experience to feel better, because like I don't need to figure out how to connect to like Asana or Box or Confluence. It's already here, and it's just going to work out of the box for me.

And so a lot of these companies are going the same direction of like canning as much as they can into the product or like pre-building it so that you get a reliable experience.

Awesome. Cool. Why don't we jump onto the second prompt?

Yeah, sure. So I'll head over into Figma Designs here, and we'll walk through. Well, first I have the design here. So I didn't create this, by the way, because I'm not a designer. So it would take me a long time to make something that's decent.

But this is the design that we're going to try to replicate. And there's kind of two points that I want to talk about. So one is the quality of the visual design, and then the second one is the quality of the code.

Because both things are actually pretty critical. The visual design for obvious reasons, but the code is important because if we want to continue to modify that prototype or that thing that we built, the code has to be in a decent place, basically, in order for us to be able to make those modifications.

And so you'll see like some tools are very good at visual design and very bad at code quality, and then vice versa. And so it's a bit of a trade-offright now between which one you care about more. But yeah, just try to keep this image in your mind.

I can always flip back if it's helpful, but we'll head over to the first one. So the first one here is Magic Patterns. Magic Patterns is a smaller company in the space, but they do have a Figma import.

And like overall, it's kind of theright direction. Obviously, the left nav, like the logo is incorrect. The left nav is a little bit off in terms of the icons and the positioning. And like these images did not get imported.

But like I feel like it's close-ish. It is like somewhat responsive or scrollable. And you can see that like I can kind of click around in here, and some of these things are theoretically functional. They don't do anythingright now, but at least I can type into them.

Same for like the filter button. So like they have kind of some states, but really nothing going on here. And again, this was just the direct Figma import. I did not prompt it anything past this. So yeah, not great, but not awful.

It's kind of like somewhere in between. But again, as I mentioned, code quality-wise, this is pretty decent. So if we look, I won't spend too much time here, but we basically see that we have this one entry file called app.tsx that's running out our different components.

So we have like a sidebar, we have a header, and then we have the roles content. So these different components. And generally what we want to see is this type of structure where we have like things broken down into their little kind of sections,right?

Like we have a button component, a header component. It's almost like we're using Legos and then building the page out of those Legos. That's a really good pattern. What we don't want to see is like one massive file that's thousands of lines long, because it's very difficult for an LLM to kind of modify or change that.

So we'll move on to the next one here. So we'll look over at Bolt. So I would say Bolt did probably a better job overall, to be honest. Some of the padding is off on the left-hand side here, but this looks closer to the design.

And again, if we look at the code here, what we'll see is something that looks a little bit odd, to be honest. So they use an external tool with their Figma imports. They didn't actually build their Figma import logic themselves.

It's a third party. And so it kind of mimics the actual sections of the Figma design,right? So we have like this card header section, roles, search and filter, sidebar and tabs, which all align to like different parts of the Figma design.

But anyway, it's a little bit different in terms of like how the code is structured. Not exactly what I would expect, but nothing super egregious here. And yeah, I would say the visual fidelity is like maybe somewhere in the middle.

And then maybe just for fun, I'll flip over to Replit afterwards, but we'll do Figma Make as the next one here, because Figma Make, I think, is by far and away the best tool for visual fidelity. Like I'll just compare again, back over to the design, and then Figma Make.

It's almost one to one. It's extremely close. But what's really interesting about this is I can't scroll, and I can't interact with really anything. Like nowhere I can't click. This text is hard-coded in here. It's not part of the, it's not like prefilled text, as you'd expect.

That's quite random.

Yeah, even the buttons don't have hover effects,right? You see like I can't, there's no cursor change to like the button click cursor that I would expect to see. So although the visual fidelity is amazing, once we look underneath at the code, yeah, this one here.

So this is basically the entire thing. So as I mentioned, it's one file, and if we just scroll really quick, it is 2200 lines long for this one, which is kind of absurd for this size of import, because if we look back at some of the other ones, like these files, this is 83 lines.

This is maybe going to be 150. So like in total, this is less than 2000 lines of code for this one here. But this, so it's probably about double or triple the lines of code. Again, all in one file.

And then the other thing that's kind of not great about this is that the way the code is structured is it's basically a bunch of like functions that just import one another. So we like have a function called button, and then controls, and then browser toolbar, and help circle, and help icon, and badge, and all this stuff.

So this code is like not very usable for not only like you as a person who might care about the code, but also honestly for another LLM. Like if you try to take this and do something with it, make it into a full stack application or whatever you want it to do, this code doesn't really help us do that.

It's not really manageable. So again, as I mentioned, like a really big difference in terms of visual fidelity, but actually like a very strong kind of downgrade in terms of code quality. And these are the two things that we're trying to balance when we think about code generation from Figma.

Yeah. When we kind of summarize it, I mean, both probably just seems the easiest to navigate,right?

Yep. Yeah, I think so. The only last one I'll touch on is the Replit one here. Again, very similar to Bolt, to be honest. So, you know, I wouldn't say they're really strongly different. So between Replit and Bolt, you can kind of pick the one that you like.

But very similar, like we actually have the correct hover effect,right, on the button. So it kind of looks like we could click it. I can type into the box, which is good. Let's see, I can type in here, which is good.

So like these ones feel a bit more functional than the Figma Make one.

Yeah, very similar.

Yeah. I guess between the set, you have a preference, like Replit or Bolt. Maybe those are the two contenders.

Yeah, maybe equal.

Yeah, yeah, I agree. Which is really interesting, because I actually use, I think they use the same company for their imports. As I mentioned, it's a third party company, so it kind of makes sense that they'd be pretty similar.

Yeah, the UI is very similar as well. So yeah, equal each.

Yeah. Actually, in fact, it's so similar. Like you see like the roles is kind of pinned up against this left nav. It did the exact same thing in both of them. Like it's almost identical. And again, I think it's the same underlying import process.

Yeah.

Yeah.

But yeah, so on the Figma side, I'll just kind of chime in on like general trends here. So there certainly are a lot of companies that are trying to like get from Figma to production faster. This is where like in a normal business, you get some gains in terms of productivity, because it takes a fair amount of work to first even build your Figma designs, and then second, get them into your code.

And so there's kind of two main ways that this happens. One is by creating components in your Figma designs and then trying to convert those components into code. So let's say like you're updating your design system, you're adding a new button into the design system, and you want that button to be in the actual application.

There are now tools like Figma MCP that can help you try to convert that button into real code. So that's like one pattern. And then the other pattern is much more rare, but is becoming slightly more common, which is like designers and PMs actually making changes in production.

So Todoist is a company that did this. Shopify is doing this. I think maybe a couple others. I can't really recall any others off the top of my head, but there's a very small list of companies. But like kind of like these small changes, like I want the button to be a slightly different color, you might actually have a designer change that in production rather than an engineer, which is kind of cool.

Do you have any favorite tools you personally use outside of all of these that product designers, product operators can take a look at?

Yeah, so for changing like real code in production, typically that's going to be something like a cursor or a cloud code, and you're going to connect that to your actual repository using GitHub. So like the technical barrier is a bit higher than these tools.

These are all web-based, and you don't need to do any local setup. So personally,right now, like I'm actually using Codex from OpenAI the most, which is with their GPT-5 Codex model. So that's the model that I like the most.

And again, you can use that inside a cursor if you wanted to, or just directly from OpenAI with Codex.

Yeah. And we touched upon that earlier, Magic Patterns. They're quite a new startup. They just raised a bunch of cash, like I think maybe a few months ago. It's pretty recent anyway. Have you spent much time with them, or what do you think of the product?

Yeah, yeah, I actually know the co-founders pretty well. I talked to them a fair amount, like earlier this year in January, when they were a lot smaller than they are now. I think they're like four or five times bigger than they were in January.

So yeah, I mean, I think the product is really interesting. One of the core things that they built into the product is the idea of components. So basically, separate from a design, you can actually define individual buttons and tables and stuff, and then you can bring those into your designs automatically.

And so this is the main differentiator that they have as compared to everyone else is building out these design systems that can be shared and then use them again and again. So you don't have to try to like fight to get the visual fidelity that you want.

You can just keep using the same components over and over again.

Yeah, I think what they've done just in the last 12 months, amazing. So they're definitely a platform to watch.

Yeah, yeah, for sure.

Cool. Should we jump into the third prompt?

Yeah, let's do it. So the last one I have here is actually importing in a live website. And I decided to do my Substack for this just for fun. Again, this is kind of a newer pattern. Some of the audience may not have seen this before, but basically what you can do is use various different Chrome extensions to try to pull your real website into an AI prototyping tool or coding tool, and then from there, continue to make changes or iterations on it.

And so what I did here is kind of just wanted to explore the idea of like what if my Substack had an AI chat built into it. And so that's kind of the idea we'll be playing with. And so this is obviously the Substack here.

This is what the website looks like. And then again, we have Bolt, we have Magic Patterns, and then we have a new one, like very new as of last week, called Alloy, that is trying to kind of win in this particular space, which is reproducing existing websites.

So I'll start with the Bolt one. This is what I got in Bolt. In order to do this, by the way, I'll walk you through the exact steps. There is a Chrome extension called HTML to React. So it's this one here.

And I basically just click this button, and then I can select different UI elements out of the page. And it copies all of the code from the website. And that code becomes my prompt. So I basically just take this code, head over into Bolt, and you can see my initial prompt, if I scroll up, is literally just all the code that was extracted.

And yeah, we get this design here. So the nice part about this is it takes in like all the fonts, the existing assets in terms of images, the styling, all that good stuff. So it's a very fast way to reproduce an existing website.

And then from there, I just asked it to add in the little AI chat, and you can see in the bottomright-hand corner, this is kind of what it interpreted that as. And so I can ask it questions like this.

So what is MCP? I can say, what is AI prototyping? And perhaps it will have an answer for us. Yeah, there you go. It answers the question. So this is kind of the imagination of having this little chat bot on top of my Substack content.

This is great. And it's very realistic as well.

Yeah. Yeah, it's really not that hard, to be honest, to match the visual fidelity of an existing product if you just know some of the tricks or some of the patterns. Yeah, it doesn't even take that long either.

Like you said, it was one prompt to get to this, and then a second prompt to get to this. So if I was working at Substack as a PM and I wanted to pitch this idea, you can either write up a super long PRD and shop it around, or you could do this in 10 minutes and then show it to someone and be like, "Hey, what do you think?

You should give this a try." Very, very different ways of working that we now have accessible to us. Yeah, I'll go through the tools as well. So we have Magic Patterns as well. The Magic Patterns import, so they have their own Chrome extension.

For this website, it didn't work as well. It just kind of depends on the website, to be honest. So you can see like our navigation is a little bit skewed on theright-hand side. We still have the same assets, which is good.

But honestly, like this would probably take me a fair amount of time to clean up. And that's not really what you want to be spending your time on. So generally speaking, with the Chrome extension stuff, like you should give it a try, try different tools, see what one works best.

And a lot of times it actually depends on like the individual website, how well it's going to perform. But again, same idea,right down here, we have our little chat window, and I can ask the same question. What is AI prototyping?

And yeah, so there you go, we get an answer back. And then the final one out of the set is, as I mentioned, this one called Alloy. So Alloy is really trying to, like I said, win on this idea of prototyping on top of your existing website.

So they have their own Chrome extension as well. This is what it looks like when it's reproduced, which is quite literally the exact same thing. Like if I flip back and forth,right, there's almost no visual difference between the two.

It even has like my number of unread messages in Substack here. And then again, I prompted to just add a little AI chat to interact with the newsletter content. And we can see in the bottomright-hand corner, same thing.

So yeah, hopefully this kind of illustrates, I mean, in a short period of time, like not only the breadth of like the different use cases,right? Like we looked at full stack apps, we looked at importing Figma designs. Yeah, obviously we looked at like importing existing websites, but also the speed.

I think like there really isn't a reason or excuse not to do this in certain situations. Like if you want to test a new product idea, obviously this is an extremely fast way to do that. So yeah, curious what you think.

Yeah, I've used Alloy a few times, and I've used a couple of these like cloning websites, but they don't really work that well. You know, where you type in the domain, it just kind of wants to replicate it.

But Alloy, I think, is great. Super easy and super affordable as well.

Yeah, for sure. The main problem with Alloyright now is just the time. It takes like, I think, 5 to 10 minutes to import a page. And then also, they don't have the ability to string multiple pages together. So it's kind of like the main limitationright now is just you get one static page, which is useful for something like this, but for like 99% of things you might want to test, you probably want to string multiple pages together.

And so we're kind of still in this like in-between stage with some of this stuff,right? It's not mature yet. And so like, you know, honestly, six months from now, eight months from now, a lot of the problems we're talking about today will probably be solved.

Exactly. I mean, yeah, of course, the space is just changing,right? So quickly. So we talked about quite a few products and loved to find out how, I mean, there are hundreds of other tools out there,right, which are quite similar to the ones we've kind of talked about.

Is there a reason why you just like select, okay, I'll just go with this tool? Is there recommendations? Do you like trying out new products or?

Yeah, I try out, I won't say all of them, because at some point it was all of them, but now there's just way too many, to be honest. Like there's a new one every week. I probably do five every week, to be honest.

So I do my best to try them all out. Really, what I look for is a combination of like what is the promise that they have, and then like what do I actually understand that they're going to be doing behind the scenes.

So a good example of this is a lot of companies now are saying like, we will handle something complicated for you. So like we will handle your Stripe integration for you. That's like part of the value prop. But I actually understand how the Stripe integration works,right?

So I'm like, okay, like how exactly like step by step would that happen? And I go through their process of like handling the Stripe integration, and I can see like, oh, okay, it's doing this thing. And is that actually different than what Replica can already do or what Bolt can already do?

And oftentimes it's not. So a lot of these products are the exact same underlying product. It is literally a code generation model and an environment to render the code in. And then they're trying to find an edge somewhere in the market on like what they can market on and make like one part of that experience slightly better.

But underlying, like it's always the same thing. And so yeah, I do a lot of testing and a lot of like trying to see if their marketing claims actually match to what they're actually able to produce.

Is the hardest. There are so many of these tools cropping up. There's one new tool called Flute.com. I'm not sure you've tried it yet.

No, I haven't.

They're a YC company. They saw their free offer months ago. Similar to Replica, seems lovable. 20,000 users already.

Nice. Yeah, yeah. One interesting thing, I think there's also a habit amongst users to like switch between tools as a way of solving the problem rather than actually learning how the code works or how like the system works.

Because you have to remember that, again, like underlying all of this is the same AI model. Like if you put a prompt into Bolt or a prompt into Lovable, maybe not quite true of today, but for the most part, it was just going to Claude Sonnet,right?

And then the only difference was the system prompt that they had,right? And so if like Lovable is not working for you, you're like, oh man, Lovable sucks. I'm going to go try Bolt instead. And you try Bolt and it works.

That's more likely just like a consequence of the fact that LLMs are somewhat random. And it will happen to work for you in Bolt, and it happened to not work for you in Lovable. And not necessarily that the tool itself is like vastly different.

And again, this is something that people kind of struggle to understand is like that LLMs are non-deterministic and you can't rely on it to always do the same thing like correctly, even given the same request.

You actually gave me a talking point. Is it, are we going to see multiple users just switching from platform to platform every few months?

100%. Yeah. I think every time there's, and that's why marketing is so critical, because every time there's some announcement from someone or like they say, hey, you know, like Bolt just announced their integration with Claude Code,right? So if we go to a new chat here, they actually have it branded as

the Claude agent, and they also have an integration with Codex coming soon. These are the types of things that like, I think personally, drive users because it's like, oh, I've heard Claude Code is really good, but I don't know how to set it up because I'm not technical enough.

Now Bolt is using Claude Code or Bolt is using Codex,right? Versus Lovable just has their own agent and like maybe that's not as good. So like, because for the vast majority of users, they don't have the time or energy to test everything and really understand how it all works.

And so it becomes these sound bites of like Claude Code is the best tool you hear from like your technical friend. And then Bolt announces, hey, we're actually using Claude Code in the product. And they have it branded properly.

And so maybe you're like, oh, Bolt is theright tool for me. So I think it's going to be a lot of these types of things.

Who is going to win in this space? If you could pick one platform, who's going to win?

Yeah, that's a great question. I honestly don't think that there'll end up being one winner. I think Lovable has done a fantastic job of like their kind of like B2C marketing, so just mass consumer. I do question the retention and the value prop for those consumers, like how many people are shipping things that they end up getting customers for themselves on Lovable.

I think it's more uncommon. It happens, but like maybe 1% of people who are using Lovable, I would guess, maybe are actually shipping something that people use. I think Replica has done a better job of like kind of a more technical enterprise focus.

Like for example, they're in like the Azure marketplace with Microsoft, and you can just like add Replica to your existing Azure subscription as an enterprise. You don't need to contract with Replica separately. And so like I think Replica is taking some steps to position themselves to win within enterprises.

And then I think like Bolt is kind of an in-between spot, to be honest. Same for V0. I think like if you really like design stuff, V0 is trying to push themselves in that direction in terms of like control.

But yeah, anyway, to answer your question directly, I don't, yeah, I don't think there'll be one winner.

Maybe there's going to be a winner kind of in each category. There's going to be one for the consumer, one for developers, one for design. But as we know, we're only 12 months in, give or take, in this Vibe Coding space,right?

So it's like still super early.

Right. One of the really cool things about it is that like, as I mentioned, all of the intelligence comes from the LLM,right? Which is a call to OpenAI or Anthropic. And so that's why you see so many startups building these products.

It's because literally all you need to do is stitch together an environment that can render it. And they call it the LLM. And I actually built one of these myself from scratch, just for fun. Just to like go through the motions of like how does this work.

That was built on like specifically around component generation. But obviously mine wasn't like production ready. It was just kind of for fun. But it's really not that complicated to like put the basics together. And so that puts a lot of pressure on all of the incumbents,right?

Because if someone can like build it in two months, why would they use whatever tool or like how are you going to increase your prices,right?

Exactly. I think one thing that's been pretty amazing to see, and I know this is like one of the trends we're going to talk about, and that's people are building real apps now. People are physically like making millions of dollars in revenue just by basically vibe coding.

Yeah, yeah, for sure. I think that's becoming more and more common. I would say like at the beginning of the year, it was kind of a pipe dream. Like you really had a lot of agency and like really pushed through the hard parts,right?

To get that to happen. Now like it's kind of easier. Again, like all the hosting is handled for you. Your authentication is handled for you. Stripe actually just announced this week that they have an integration that like from inside of Replica, it will create a Stripe account for you and like set it up.

So like, yeah, already today, I think the tooling is in an amazing place that if you want to build like a side project, you absolutely can. I think even like six months or a year from now, that will be more true.

And so if this is something that's interesting to you, it's probably worth practicing. Because I guess this is one other thing, and I have this from personal experience. You usually don't get itright the first time. Like usually it takes you multiple iterations to understand how to ship a product.

And so even if you try once just to learn and then take that experience and try again and again and again, eventually you'll get somethingright.

Exactly. From a trends point of view, with all of these products, what do you think is missing for the actual vibe coders, vibe builders? You have the integrations, you have the Stripe integrations. Is it more of the marketing play now?

Kind of, you know, what comes next? What's missing from the vibe?

Yeah, if I'm thinking about like the person who wants to build their side project,right? There's two main problems. I think one is being technical enough to like, as I said, kind of solve the 5 or 10% of problems when the agent says like, "Oh yeah, I can fix that for you."

And then it messes it up, and then it messes it up, and it messes it up again. Because that can really like eat your money and your time,right? So that's one set. And then the second set of problems is really like trying to build something where you can distribute the product reasonably well.

And I'll give you an example. I talk about this a lot, but like three or four years ago, I built a Wix integration that used GPT-3 to generate product descriptions. So this was before ChatGPT actually came out. I had like early access to GPT-3, and I wanted to build a product with it.

And so I thought it'd be fun to try to figure out something, but I didn't have any distribution. Like I was just a random person on the internet. And so I found this problem of like, okay, I think people who have e-commerce stores find it annoying to write product descriptions.

Because like a lot of them are just doing dropshipping anyway. They don't really care that much about the product. And so I built a little Wix extension, hooked it up to GPT-3, and I got like 7 or 8,000 users simply from like the Wix store.

I did no marketing. And then I actually sold that app to someone else. So it was like my first acquisition. And I did that whole thing in three months for like idea execution and then sold the product. And that's a good example of like you could 100% do that now easier than when I did it three years ago.

But the distribution part was the actually the thing that was important, not the code,right? The fact that I put it inside the Wix store was actually the thing that allowed me to go through that journey rather than the idea of product description generation, which isn't that novel, to be honest.

Yeah, that's pretty cool. Wow, in three months.

Yep. Yeah, yeah, yeah. I built a few SaaS. I mean, honestly, I probably built like six or seven SaaS products over the years. I've had one that went like past six figures in revenue. One acquisition for that one, and then the vast majority of them, zero dollars, zero revenue.

And zero users. And I can tell you from experience, it's just distribution,right? Like once you get over the hurdle of figuring out how to ship stuff, then it becomes about like how do you get people to care about it?

And so, yeah, that becomes the more important thing eventually.

Yeah, super cool. We've covered a lot in today's episode. And, you know, before we maybe finish, there are going to be a lot of vibe coders out there and builders who want to build products. They're not quite sure where to begin.

They're not quite sure how to find customers. Any tips you can just give them to kind of just get going?

Yeah. So actually, I teach this in the course as well, but basically I like to flip from like a customer-first approach, which is what most people like to do, especially in product management. If you come from a product background, that's kind of how you're trained, is like, who's the customer?

What problems do they have? What can I solve for them? To a distribution-first approach. So like, what is the distribution channel that I can win in? And then who are the customers that are on that channel? So for example, in Substack, product management content is really popular,right?

On YouTube, it is not. So like, if I'm looking at a channel and I want to create content on that channel, and like let's just say I'm in the product space, I can decide that Substack is a better channel for me.

And then I go figure out what types of Substacks exist in this product space. Like, where can I fill a kind of a niche here or like fill in a gap? And then I start making content on that topic.

Versus like just making the thing I want to make. Or even making things that my customers want. Because how are they going to find it? Even if I make theright solution,right? So yeah, really thinking about the distribution channel first.

What kind of customers are aligned to that channel? And then filling in a problem in that space. And then everything else kind of still follows from that. Like, you still need to understand the customer really well, build a product that they want, and all that regular stuff.

But yeah, distribution channel first, because the vast majority of people building side projects don't have a marketing budget. They don't have the time to figure out marketing. So they just need like one channel that performs well.

So go and find your distribution channel.

Yep. Yeah, exactly.

Yeah. And if you haven't got a distribution channel, I mean, I talked to a couple of YC companies earlier this week. Tons of them have found thousands of users just through Reddit. They actually, they went into their competitor's Reddit and just replied to all of the posts.

I mean, it's pretty smart, I think. It's like just hacking away. And you can also check on product and partner of like B2B creators or B2C creators. So just go and find that kind of distribution channel.

Yeah, exactly. And I would say like, as much as you have a hypothesis for the product, you should also have a hypothesis for the channel that you can test,right? Like, I think that if I go do this thing, then I can generate leads or whatever.

And you can even test the channel before you have the product if you want to.

Yeah.

Right? Like, throw up a landing page, see if you get traffic. So, yeah.

That's it. Love it. Well, you have a course going on now, and it goes on every few months,right? So how can people find out more about the course? And why should people sign up? What does Colin teach?

Sure. Yeah, yeah. So I actually teach two courses on Maven. So one is kind of geared towards part of the discussion we had today, which is like, if you're a PM or a designer and you want to be testing ideas more quickly at work, you want to basically prototype on top of your existing product.

So I have one course on that called AI Prototyping for Product Managers. And then the one I just released, like literally, I'm teaching it for the first timeright now. So it started like two or three weeks ago. It's called Vibe Code Production Grade Side Projects.

And this is really for people who like want to build a business, to be honest. Like they're looking at building a SaaS, probably not to like the millions of dollars in revenue scale, but like, you know, tens of thousands, maybe up to $100,000 in revenue.

And yeah, I basically go through like everything from like the distribution and product side, as well as the technical side, to help them do that. The course comes with direct engineering support. It comes with a SaaS template that I built that I actually got pen-tested by a security firm, because a lot of people are concerned about security.

So I try to give like kind of the whole package, like everything you could want or need to get from point A to point B for building a side project is included in that one.

Awesome. Well, further links in the description below. If the course is of interest, go and check it out. And Colin, this has been amazing. Thank you so much. And you know, for people who are thinking about, you know, vibe coding, they should probably just go and do it,right?

Yeah, yeah, that's the best way to start. It's really not that hard. You can do it for free. So give it a try. And then honestly, like I said, try to learn a little bit of what's happening,right? Like don't just turn off your brain when you're doing it.

It's easy to do, but like try to understand like, okay, like I'm building this thing and it has to talk to this other thing and like what's going on behind the scenes.

Awesome. Colin, this has been amazing. Thank you so much.

Yeah, thanks for having me. It was great.