We prototyped 5 features in 84 mins (Bolt, Cursor, Lovable, Replit, v0)

1. 0:00 – 0:31

   Preview

   1. CMColin Mathews0:00

      I think really what it's about is just getting through more solutions faster. So, you know, in, in the past, maybe it takes you three months or six months to test an idea, like get it out to your customers, see if they actually like it in the flow of the product, not just in a mock-up, and, and kind of like generate some, some, you know, ideas or, or feedback based on that. And I think with AI prototyping, hopefully what you'll see today is you can do the same thing, you know, maybe in a few hours or, you know, a, a, a maximum of a week, uh, rather than it taking you two months, six months, or that- whatever that period of time is.

2. 0:31 – 2:43

   Bolt Tutorial

   1. AGAakash Gupta0:31

      Awesome. So let's do a live cooking session. [laughs]

   2. CMColin Mathews0:35

      Yeah.

   3. AGAakash Gupta0:35

      Let's say I am somebody who's working on a product like Apollo.io, which is a B2B SaaS for sales teams. It was most recently valued at $2.5 billion. Let's say I wanna pri- uh, prototype paid booking links, so it has a meeting scheduler, very similar to Google Calendar's meeting scheduler or Calendly's meeting scheduler, but they wanna make it paid, kind of like Intro or Square Pay space. Can you walk us through that?

   4. CMColin Mathews1:02

      Yeah, for sure. I'll go ahead and share my screen, and we'll walk through it. Um, and I have nothing prepared for today. Actually, we're gonna start from the very beginning and kind of walk through, uh, from, from the back on how this is gonna work. Cool. So let's go ahead and take a look at Apollo first. I have the, the page pulled up here. So this is what we're looking at, right? Uh, we have our, our meeting scheduler, and then we have the ability to kind of pop into here and edit and set some preferences. And kind of what I'm imagining here is that somewhere we have a UI element for setting the price, and then later on when we're looking at like the preview for this booking page, we can actually se- you know, set that price, uh, or I guess agree to it and then pay for the, for the meeting. Is that kind of what you were thinking?

   5. AGAakash Gupta1:40

      Exactly. Those are the two most important things, capturing the user input when they're setting up the meeting and then when somebody's booking, being able to pay.

   6. CMColin Mathews1:49

      Cool. So we'll go ahead and start just with this screen here. We're gonna use a couple of techniques kind of throughout. Uh, I think generally what I'll do is I'll, I'll get started first-

   7. AGAakash Gupta1:56

      Yeah

   8. CMColin Mathews1:56

      ... and then I'll kind of explain, uh, what I did and why I did it afterwards just 'cause Bolt is gonna take some time to, to build as we're talking. So the first thing I'm gonna do is actually just take a screenshot. Uh, so I'm just using the built-in screenshot tool here. Grab that and hop over into Bolt. And Bolt is one of many different tools. Uh, so there's, you know, Replit and, and Lovable and v0. It's one that I like, uh, for a number of reasons. Uh, one of them is that it's pretty customizable, so you can kind of set up, uh, different ways of using Bolt with different configurations, and so I have Bolt set up the way that I like to use it.

   9. AGAakash Gupta2:28

      Today's episode is brought to you by Gibson AI, the future of backend development. Imagine a world where designing, deploying, and scaling your database is as intuitive as having a conversation. Gibson AI makes that a reality. Gibson AI is your very

3. 2:43 – 4:36

   Ads

   1. AGAakash Gupta2:43

      own AI database engineer. In just minutes, you can chat with Gibson to design production-grade data models, automatically generate secure REST APIs, and even eliminate technical debt that's been holding your team back. Whether you're launching a brand-new product or modernizing an existing app, Gibson AI handles everything from data migrations to integration, so you can focus on building what matters most. Gibson AI is built for the modern engineering team, empowering you to accelerate development, reduce tedious coding, and deliver powerful solutions faster than ever before. Head over to gibsonai.com/aakash to experience the future of automated data modeling. That's G-I-B-S-O-N-A-I.com/A-A-K-A-S-H, and use code AAKASH50 for 50% off your first 12 months. Trust isn't just earned, it's demanded. Whether you're a startup founder navigating your first audit or a seasoned professional scaling your GRC program, proving your commitment to security has never been more critical or more complex. That's where Vanta comes in. Businesses use Vanta to establish trust by automating compliance needs across over 35 frameworks like SOC 2 and ISO 27001. Centralized security workflows, complete questionnaires up to five times faster, and proactively manage vendor risk. Vanta can help you start or scale your security program by connecting you with auditors and experts to conduct your audit and set up your security program quickly. Plus, with automation and AI throughout the platform, Vanta gives you time back so you can focus on building your company. Join over 9,000 global companies like Atlassian, Quora, and Factory who use Vanta to manage risk and prove security in real time. For a limited time, my listeners get $1,000 off Vanta at vanta.com/aakash. That's V-A-N-T-A.com/A-A-K-A-S-H for $1,000 off.

4. 4:36 – 17:50

   The Power of AI-Generated PRDs

   1. CMColin Mathews4:36

      Uh, but for now we'll just go ahead and get started here. And I'm actually gonna start with, uh, a kind of an outline of, of a plan, uh, rather than getting into the code, which is the first kind of major difference in, in the approach that most people might take. Rather than being like, "Hey, can you build this for me?" Uh, I'm gonna ask it to create a plan for me and just generally describe what we're doing. So give me a second to just type that out, and of, of course, you can ask a question as I'm doing that, uh, if you want, but, uh, I'm gonna kind of focus here and type that up for a second. Okay, so here's what we have here. Uh, let's build a prototype of this app. It's a meeting scheduler that allows the admin to create more than one meeting booking link. It should allow admins to edit with the detail page, and later we'll be able to see a preview. And I asked it to create a plan and not write any code. And what we can see here, uh, that Bolt actually returns first is a PRD, right? So again, this is a, a pretty big difference from kind of our, our normal workflow or maybe what you'd intuitively think you want to do here. Uh, but basically what this PRD is doing is it's describing not only, uh, what we're going to build but also how we're going to build it. So we can see the admin user workflows, the end user workflows here, and then we have this admin dashboard. We have our different, you know, phases to our, for our workflow, and then a breakdown of the different phases of phase one, phase two, phase three. We have our design system based on the screenshot. Uh, you know, we have the spacing, fonts, components, and then some success metrics and additional notes.

   2. AGAakash Gupta5:57

      Nice. And we didn't even tell it necessarily to create a PRD. We just told it to create a plan.

   3. CMColin Mathews6:04

      Yeah, so this is part of the configuration that I have set up, um, with Bolt, is some kind of custom instructions to create a PRD first. Uh, I find that creating a PRD gives us something that we can reference back to, and so we can kind of just keep telling Bolt, "Yes, continue," uh, you know, "Keep building new features," and we don't have to try to maintain the context in the chat. Uh, w- I guess one kind of quick tip here is that the chat isn't the best at maintaining context for very, very long projects, and so having a file like this one, uh, like a PRD, kind of helps you maintain that context over time, and it's something you can reference back to.

   4. AGAakash Gupta6:35

      Love it. PRDs are still valuable. [laughs]

   5. CMColin Mathews6:37

      Yeah. Yeah, exactly.

   6. AGAakash Gupta6:38

      [laughs]

   7. CMColin Mathews6:39

      And this looks a little bit different, obviously. This isn't what I would normally think about as a PRD, right? We have, like, styling and some other stuff in here that's pretty specific, but it helps guide, uh, our overall implementation. So we'll go ahead and s- kick off. We'll say, uh, "Continue with phase one," and hopefully we get, uh, some implementation rolling here. So kind of while it's working on this, I'll just describe generally the approach here. So the first thing is to just break up these projects or these prototypes into components. Uh, if you try to just do the whole thing in one message, like, "Build me th-this entire prototype," usually what's gonna happen is it's gonna fall apart pretty quick. And so you wanna break it up, uh, into basically as small of chunks as you can, you know, within reason. A-again, the nice part about this approach is that we already have that first step, and now we just have to continue with our additional steps. So really, we don't have much here, uh, in terms of the content, but we're gonna continue. One thing that I, I do wanna ask Bolt to do here, though, is to actually try to match the design more closely before we continue. And this is, uh, a process that I call reflection, which is just, you know, giving it an opportunity to think about what it's done and then improve on that, uh, as we go along. Another quick tip is just asking it not to write any code. Uh, this basically allows you to take a look at the results first prior to it actually implementing those changes, which can be really nice if you wanna make a change, right? Because you can see it's identified a lot of differences. Maybe there's something in here that I don't actually wanna change, so I could remove that, uh, prior to continuing, whereas if I just asked it to make these changes, it would've kind of gone on without me, uh, and made the changes, and I would have had to either revert them or, or try to undo something, uh, kind of as we went.

   8. AGAakash Gupta8:13

      And I think the undo isn't that great.

   9. CMColin Mathews8:17

      Yeah, so the undo is gonna undo, like, that whole last step, right? So let's say we implement something that has, you know, a bunch of things in it, like a bunch of styling changes or adds a bunch of components. We try to undo, it's gonna undo a big chunk, uh, rather than, you know, again, if we wanted all of this except for we didn't want this toggle switch, for example, we could just say, "Okay, yes, implement that, but don't include the toggle switch," and we're a lot more precise with what we're doing, uh, by taking this approach. So yeah, now Bolt is basically working on the design changes to make the, the design match the screenshot more closely. You can see it's updating our layout, and then, uh, we'll have an updated design. We have, you know, some new components here as well that are being created, and this is just gonna split up the files to something that's a little bit more easy to maintain or is more readable for Bolt. And, uh, f- you know, for a PM, you're probably not thinking too much about the structure of the code in your prototype, and I would agree that that's not super important. But there's general patterns that you wanna see, and this is a good pattern, where we don't just have one massive file but we have a couple of small files. Again, it just makes it easier for Bolt to kind of maintain context. So this is our second iteration, and I mean, it's a massive difference from the first iteration. It looks pretty similar-

   10. AGAakash Gupta9:26

       Wow

   11. CMColin Mathews9:26

       ... to, to Apollo at this point, right? [laughs]

   12. AGAakash Gupta9:29

       It literally looks like Apollo, yeah.

   13. CMColin Mathews9:32

       Yeah. So pretty cool. So we have our first, uh, step kind of done here, and I think the next step is to work on the detail page. So I'm gonna hit, um... Well, maybe we'll add this edit first. So I'll grab a quick screenshot of this as well, just to provide that context to Bolt. And, you know, right now this-

   14. AGAakash Gupta9:50

       And so a lot of this, in terms of working, uh, with mock-ups or working with an existing product, really helps it catch up quickly.

   15. CMColin Mathews9:58

       Yeah, for sure. I mean, if you want it to look like something you already have, you know, including those mock-ups is, is a, a big deal. But obviously, like, you can get very specific styling, almost one-to-one with what you have. And so for the purpose of prototyping, uh, really, like, it's gonna feel similar to your users or to your internal stakeholders. So we'll continue on with that s- small feature, and then I think we'll implement the detail view, uh, after that.

   16. AGAakash Gupta10:28

       What's amazing here is, like, we've basically already done, like, two steps, two pages this quickly. [laughs]

   17. CMColin Mathews10:34

       Yeah, we're doing pretty good so far. Um, so this is actually... Oh, we're still updating, actually. I thought we had a little issue there. Uh, but this is at a kind of a, I guess, a quirk of Bolt. Sometimes it'll show you the preview before it's actually done updating, so you just gotta pay attention to the left side here. Look for the, the check mark, and then we'll know that everything is good to go. Um, so it's still updating our code here. All right. We'll give that a try, and we can see that we have our edit. Uh, again, almost looks identical, [laughs] which is pretty cool in terms of the, uh, the output here. And so now we'll continue on with our detail page. So we'll include a screenshot once again and ask it to include a detail page.

   18. AGAakash Gupta11:16

       So behind the hood here is some really good, like, ability to take a image and then screenshot specific elements and reuse them.

   19. CMColin Mathews11:25

       Yeah, I think behind the scenes they're using, uh, Sonnet 3.5 from Anthropic. They have some public blog posts with Anthropic. Um, so it's basically Claude, uh, behind the scenes that's actually doing all the programming here for us, and Claude is a multimodal, um, model, right? So it can, it can both write and, and see things, so that's kind of how it's working behind the scenes.

   20. AGAakash Gupta11:49

       It's not your OCR software of 10 years ago. [laughs]

   21. CMColin Mathews11:52

       Yeah, that's right. Yeah, it's come a long way. Um, the other cool thing about this, you know, is Bolt... I think Bolt is less than six months old, maybe eight months. Um, if someone could double-check me on that one. But it's, it's certainly less than a year old. And so you can just kind of imagine where this is gonna be in a year or two years or five years if we can do this already with, uh, with Sonnet 3.5. Like, as we continue to get better models, this process will only get easier and easier and faster and faster, uh, which is pretty cool. All right, so we have our, uh, next step done here. Hopefully when we click edit, yeah, we pop into this view here. And I think we're good there. So I think the first thing I'm gonna do is add in... Uh, we don't, obviously don't have all the settings, but hopefully that's okay. You know, I could basically continue this process of taking screenshots, but just for the sake of time, I don't think we'll, we'll add every, uh, configuration that we have here. So we'll go ahead and add the, uh, price. And whenever I'm uncertain about, like, how it's gonna work, sometimes I'll just say, "How would you do this? Don't write any code," just so I understand, like, what approach it's gonna take. And, and one other thing is just generally if there's a plan, it'll do a better job, so it's less likely to create any issues or, or bugs for us.

   22. AGAakash Gupta13:11

       That's an interesting quirk of LLMs. Like, forcing them to plan seems to help.

   23. CMColin Mathews13:16

       Yeah. And I think we see that now with some of the reasoning models where, like, it's basically built into the product, right? With, uh, you know, the, uh, new, like, DeepSeek and, and OpenAI models. Um, so it's an extra step for us to do it, but it still works just as well. And while Bolt's working on that, uh, let me see how I actually find the, the preview here. There we go. Preview. And I'll just double-check that this new feature is working, and then we'll work on the preview as well. All right, so here's our payment settings. We have a little config here, a toggle that we check off, then we can set our price. So let's say 50 bucks. Uh, there's some kind of... There's a number input, so... Oh, there we go. Looks much better there. Maybe 50. Around $50 works fine. And then we can save our changes. So everything works pretty decently there. We can see the price actually gets saved right on the front page. And yeah, so I think we have the admin side, uh, done. Anything you'd change so far?

   24. AGAakash Gupta14:30

       Wow. [laughs] I'm like, I can't even speak.

   25. CMColin Mathews14:36

       Yeah. It's pretty cool. Um, obviously compared to Figma, you know, um, maybe if you're, you're proficient at Figma, this, you know, would be a little bit slower. But one of the cool things about this is that once you have this up and running, you can also continue to create copies. So the same way in Figma, like, you don't have to redesign your product every time you open it, you don't have to restart from scratch. You can cr- create a copy of this and then basically restart from that copy so you don't have to redo the work every single time. Uh, but we'll go ahead and continue with the preview. So I'll ask Bolt to implement the preview. And again, you can see a lot, a lot of the similar approaches, right? "So how would you do this? Don't write any code." It makes a plan for us in terms of the, the components it needs, how it's gonna set up the, basically the routing so that we can navigate between different pages, and so on. And so once again, we can just say yes, and we'll get that implementation kicked off. And then, uh, the last thing we'll need after the preview gets going is just adding in that payment processing on that preview. So maybe what we'll do is we'll just actually grab this, uh, this view here with the select time so we can pick the time as well, and then we'll also at the same time add the pricing. We... I think we probably do that all in one, one request.

   26. AGAakash Gupta15:43

       How do you typically judge what's a good size of a single request?

   27. CMColin Mathews15:49

       Yeah. So it kind of depends on the types of changes that are being made. So I think anytime you're introducing a new feature, like a new page, it's best to get, like, the minimum version of that page working and then add to it over time. Once you have, like, that minimum page, let's say, like, the preview page in this context, then, you know, something like the time selection plus a view for s- seeing the, uh, the payment processing isn't, like, a huge change in my opinion. Like, it's, it's just not that many changes to the actual files or components. So I think that's kind of reasonable. You could also break it up if you wanna be more certain that it's gonna work and, you know, there's a chance that it doesn't work. Generally it's, like, smaller is better, but, uh, I'm also sometimes a little bit impatient and I try to patch things together where I can.

   28. AGAakash Gupta16:34

       [laughs]

   29. CMColin Mathews16:35

       All right, so we'll actually-

   30. AGAakash Gupta16:36

       Already, so fast.
5. 17:50 – 22:12

   AI Design Speed vs Traditional Figma

   1. AGAakash Gupta17:50

      the type of thing that if you, even if you're a designer, it would take you longer than 10 minutes [laughs] to design in Figma.

   2. CMColin Mathews17:57

      Yeah. That's for sure. Yeah. So our time selection's at the bottom instead of the side, so, you know, there's, there's a small change there. Um-

   3. AGAakash Gupta18:04

      Yeah

   4. CMColin Mathews18:05

      ... and then I don't think we actually got our ability to see the next screen, so there's something we have to fix there.

   5. AGAakash Gupta18:11

      Okay.

   6. CMColin Mathews18:14

      Oh, it might be that I just didn't enable the price. Yeah, so this is a small thing, but it, it doesn't save between our iterations. Um, so I enabled the price previously, but not the second time, so we just gotta go ahead and re-enable the price here, save our changes, and then hit that preview one more time. Get our time, and then let's see, do we have our pricing? We do not. So this is maybe a good thing, and a good example of me trying to do too much in one go probably. So what we'll do here is we'll say, uh, something along the lines of like, "I'm not seeing the pricing components. This is how I expect it to work. Uh, can you tell me why it's not working this way?"

   7. AGAakash Gupta18:49

      Okay. And these prompts are so natural language. Like, it's not like you're applying some advanced prompting framework outside of encouraging planning and reflection.

   8. CMColin Mathews19:05

      Yeah, exactly. It's, it does, really doesn't have to be super complicated. I think it's better to have like lo- like I said, lots of small changes rather than trying to get the perfect prompt up front. Uh, 'cause even if you did that, it's not gonna be able to build the thing you're asking for. Like, you can't just be like, "Build me YouTube," and if I build the perfect prompt, it's gonna do the whole thing, right? It still has to be that iterative approach.

   9. AGAakash Gupta19:26

      Seems like screen by screen or single element by single element is a good unit to think through each prompt roughly.

   10. CMColin Mathews19:33

       Yeah, exactly. All right, so yeah, prompt here is be, is that I'm just not seeing the price, and I want it to tell me why. And I, I once again said, "Don't write any code," and that I would expect to see it after, um, the, the time selection. So I'm just gonna try this one more time here I think. Let's connect to our project, make sure we're running correctly, and let's just try one last time here before I actually make any changes. So we'll set the price. Hit save, and then hit preview. So I think what might be happening here is that actually that we're, uh, somehow losing the price when we hit save when it opens in the new tab. Uh, but I'm just gonna double-check here. So this is a good example of debugging actually, and, and Bolt recommended some debugging tactics to us. So can we confirm that we're editing a meeting? We can see the price and list card. When you click the time slot, do you see any console errors? And can you try setting a price and enabling it for one of the meeting types in the edit form? So we can say, um, yes, and then I'll do a check the console after. But before I do that, I'm gonna say, uh, can you open, open the preview in the same tab instead of a new tab? And again, this is just kind of my hunch, um, based on the idea that every single time we're reloading, we're losing that we set the price. We could fix that as well if we wanted to, uh, but I think that when it's opening in a new tab, we're losing the price on the new tab, and then it's not showing up in the UI. So we'll just give this a try first, and then if not, we'll go through kind of the console and all the kind of those, those debugging tactics as well. So we'll try 50 here. We'll save.

   11. AGAakash Gupta21:29

       This is all happening so fast.

   12. CMColin Mathews21:31

       Preview. There we go. Okay, so there's our payment information. So I was right. It was just-

   13. AGAakash Gupta21:36

       Wow

   14. CMColin Mathews21:36

       ... based on the fact that we had the two tabs. So one way to s- to fix it is what I did here, which is rather than it opening in a new tab, I opened it in the same tab. Another way to do it would've been to s-save that $50, um, in something that works across tabs, which would be called local storage for a web browser. And so if... I could've fixed it either way. Um, but that, again, that was just a hunch that I had that that was the problem, and it turns out that it was. Um, but anyway, so we have our payment processing here. Maybe we don't love this, like, workflow, so we want, like, this card to appear after we pick the time rather than right below. But again, you know, you can make these iterations however you want based on just natural language as we go along

6. 22:12 – 24:44

   From Idea to Testable Prototype

   1. CMColin Mathews22:12

      here.

   2. AGAakash Gupta22:14

      Great. So we've debugged it. We have the prototype. Now we basically are ready to put it in front of users and actually see if they might resonate with this and get more data, right?

   3. CMColin Mathews22:25

      Yeah. Um, there's actually some really cool things. So because this is a product, you know, it's code, you can actually hook up any type of product analytics tool that you like, like Mixpanel or PostHog. Um, so you could get product analytics events. You can watch recordings. Obviously, you can always just put it in front of a customer and watch them try to use it. That's probably the best way. Uh, but whatever kind of product testing ideas or frameworks that you like, uh, they're applicable here as well.

   4. AGAakash Gupta22:52

      It seems like there's a future where user research and design and product management are all using tools like this.

   5. CMColin Mathews23:01

      Yeah, I could definitely see that. I think, you know, even what I just mentioned, there's, I think, third-party tools that kind of plug into Figma where people can click through Figma prototypes, and you can try to watch recordings of that. But, um, this honestly just is very quick, both in terms of building and iterating, and can plug into your existing tools that you're using for your real product. So I think, yeah, there's definitely a, a, a world in which this is just the norm. And as I mentioned earlier, like if you imagine that this gets even better than it is now, then really anyone can, can do this. You don't really have to be super technical. I mean, other than the fact that I had that one, one idea, one hunch about what the problem was, there was really nothing technical about what I did here, right? These were all pretty natural language prompts.

   6. AGAakash Gupta23:43

      And I imagine we could have been a little bit less pointed in our direction with Bolt and just said, "You know, this is the issue we're facing," and it might have been able to help diagnose that too if we had described the user's scenario.

   7. CMColin Mathews23:55

      Yeah, absolutely. We kind of could've walked through that. I mean, it did try with, um, with some debugging tips here. But yeah, we could, we could kind of try to ask Bolt to help us out and then to kind of see where we land from, from there.

   8. AGAakash Gupta24:07

      So we just used Bolt. What is the pricing on a tool like this?

   9. CMColin Mathews24:11

      Yeah, Bolt's $20 a month, I think, at the lowest price, and you get usage, so it's 10 million tokens. Um, let me see what we used there. So I was at- I'll just go into my subscription here. So I was at two point... Or 26.6, well, before we started, now I'm at 26.3. So out of 10 million, we used 0.3 million, uh, for that one. So you probably build 30 of these. I, that, maybe that math doesn't quite add up, but something like that, um, each month based on the $20 a month plan.

   10. AGAakash Gupta24:43

       Wow.

7. 24:44 – 32:14

   AI Prototyping Tool Landscape

   1. AGAakash Gupta24:44

      And what's the broader landscape of AI prototyping tools, and when should you use which?

   2. CMColin Mathews24:50

      Yeah, that's a great question. It's definitely a confusing space. Uh, there's a lot of tools nowadays and, and people have both their own preferences, but, you know, um, basically I, I break it up into three segments of tools. So the first one is just basically your chatbots. So this is like ChatGPT or Claude. They can actually do some really basic prototyping if you want them to, so they'll, in response to a regular message, if you just ask them to be like, "Make me a mock-up or a prototype of something," they'll write some code and display it in the UI for you. Then there's the second classification, which is something like Bolt, uh, where it's a web-based tool. It has everything built into it, right? So I can, for example, export my code, I can deploy it to a web link or a website. Um, you know, everything is kind of built in here. So this is like things like Replit, Bolt, Lovable, and v0. And then the last section would be IDEs, uh, which is something a developer would use. So it's like Cursor or Windsurf, which, uh, isn't really like an AI development tool per se, 'cause you can really, you know, just write normal code in it as well. But it's more AI-enabled for developers. And I would say for most product people, you wouldn't want to be using Cursor or Windsurf, uh, just because you have to set up everything on your own computer correctly. Whereas, you know, with Bolt, there's basically a little environment that they give us, uh, where we don't have to do any setup.

   3. AGAakash Gupta26:10

      And I think in your post with Lenny, you described how certain tools cover server code, client code, and database. How did those tools break down?

   4. CMColin Mathews26:21

      Yeah. So what we just did here is a client-side only application, basically the front end, right? So, you know, if we wanted to actually use this, there's, there's nothing behind the scenes. There's no server database. This data doesn't get saved anywhere or anything like that. You wanna build something that, uh, is more close to a real product. So you have authentication, you can store data over time, then you're gonna need a database and a server. So Replit is the best tool for that. They offer that. You can also connect to third-party tools to offer the same solution, uh, servers and databases through Bolt and Lovable. So you can see up here we have that connect to Supabase button. That's exactly what that's offering. But I personally find for the purpose of prototyping, most of the time, I don't need to do that. I can just stick with the client side only, and it's really only when I'm building like personal software or something that I think, you know, is gonna be a real product that I'd be using, uh, the server and, and database to do that.

   5. AGAakash Gupta27:20

      So there is a certain degree of a hype factor to AI prototyping for PMs. What do you feel like is the actual ways in your day-to-day as a PM you should think about, "Okay, this is a scenario where I should bring AI pr- AI prototyping in instead of X that I was doing before"?

   6. CMColin Mathews27:42

      Yeah. Well, one is, is honestly as a Figma replacement. Um, it... I, I actually think at some point Figma should or, or will do something similar to what we just did because most PMs are not skilled enough at Figma to do what we just did. Um, certainly not in the amount of time that we did it, but just generally, like, I know I'm not good enough at Figma to do what we just did. And so yeah, just like prototyping an idea, testing your idea, your, on your own, uh, I think it, it's a really good u- tool for, for that. And the second one is really like prototyping more of an experience rather than just the UI. So if you think about like an AI product where you have an LLM on the back end, right, like chat, you know, ChatGPT or, or something like that, you can't really prototype an experience like that and get user feedback, uh, inside of Figma. You need something where the person actually interacts with it, interacts with like the AI agent or whatever it is, in order to, for you to get valuable feedback. And the cool thing about this is because this is code, you can integrate with an API and call an LLM and like just build an actual AI feature into the product, uh, very easily. So if you wanna test that idea, like, you know, should Apollo have like an AI chat that can, can do stuff for us? You could just actually build that AI feature on top, uh, pretty easily.

   7. AGAakash Gupta28:59

      At some point, building is overrated. When... What is the line between, "Okay, I should be doing better discovery and talking to customers," versus, "Okay, I should go prototype this"?

   8. CMColin Mathews29:11

      Yeah. That, that's a great question as well. So I think of, of AI coding tools like this one or AI prototyping tools as tools for communication primarily in this context. It's not about... Like the code that we have here, you know, if we flip back over to this code, one, one idea you might have is like, "Oh, I already built the feature. Why don't I just hand this code over to the engineer and they're gonna, you know, uh, be done so much faster?" It's really not about what we've built here from the, the perspective of, you know, building the feature. It is really just about communication. And so the way that I think about this from, you know, building versus talking to customers is that you should be using these tools to talk to your customers. And that really, like, the faster you can build doesn't mean that you should just ship more features, like ship 10, 10 times the features or 100 features, uh, in the time that you could have shipped, you know, one, but instead that you should have 10 more or 100 more co- conversations with your customers, and like richer and deeper conversations with your customers, where they can b- provide you with better feedback r- rather than just one conversation with your customers.

   9. AGAakash Gupta30:16

      So if we're putting this all together, if you're an AI native product team, you're an AI native PM, and you're trying to use these tools the best way I guess we would wanna put these together with our overall opportunity solution tree. So how does it all come together to create an end-to-end discovery process that is way more effective than the old one?

   10. CMColin Mathews30:37

       Yeah. Actually, um, I don't know if Theresa Torres listens to your podcast, but if she does, Theresa, um, I... This is a call out to you to, one, ask if you could put something together on this, but, but two, uh, you know, just, uh, thanks for all the work on opportunity solution trees. So yeah, I'm a massive fan of opportunity solution trees, and just in case anyone's not familiar with what they are, it's basically you start with, you know, some opportunity, um, or sorry, rather some outcome that you wanna go after, right? So typically it's, it's a product metric that you wanna change. You have a set of opportunities or problems related to that, and then you have a set of solutions that relate to each opportunity or problem. So maybe if our, our outcome is like, you know, reducing churn, an opportunity would be improving our onboard experience, and then a solution would be, like, how we improve that onboarding experience. So maybe it's, like, guided emails or maybe it's an in-product guide. There's more than one way to improve the, the onboarding experience. Uh, below those solutions is hypothesis, right? So, like, you know, we have an i- a specific idea we wanna test. And what I think is that basically in that kind of solution hypothesis range, so, you know, you still start with reducing churn, and you still have the idea of improving the onboarding experience. But then the how part, you can test different methods of how can we improve the onboard- improve the onboard experience much, much faster by using these tools. So basically it fits into that bottom section of, uh, solutions and, and hypotheses and basically testing those hypotheses quickly and again, getting good feedback on your product experience, uh, by giving something that feels more real than, than, you know, a, a Figma prototype.

   11. AGAakash Gupta32:06

       Amazing. I really think this is such an important thing for PMs, and I don't want PMs to only think that they have to use Bolt.

8. 32:14 – 35:00

   Cursor Tutorial

   1. AGAakash Gupta32:14

      So can we see now maybe another tool in action, perhaps Cursor? It's kind of a very sexy tool. And in this case, maybe what if we try building AI sequences for Apollo?

   2. CMColin Mathews32:28

      Yeah, sure. That sounds good. So, uh, generally speaking, moving between different coding tools can be a bit tricky. Uh, it requires a little bit more technical knowledge. So what you'll see me here, uh, do is basically export the code, get it running in Cursor. Uh, generally speaking, I would say that this is a little bit trickier to do, uh, but we'll go ahead and get that started. So first thing I'm gonna do is just export that code, and then I'm gonna open up Cursor and open the same, uh, directory inside of Cursor. And you're gonna see Cur- Cursor, in case you haven't used it before, is really like a code editor. It looks a little bit more intimidating than Bolt, uh, which is one of the reasons that you might wanna use Bolt or, or something similar. So here we have our code. Again, this is the exact same thing. If, uh, I kinda get us running here, first we just need to install our content. Uh, so I'm gonna run a little command here to do so. This is installing all the libraries in the background that this project was using. And then if we run our, uh, command here to get our project up and running, now it's running on my local computer. So we can see local host instead. A local host just means it's running on my computer, but it's the exact same, you know, view basically that we had before. And then over in Cursor, uh, they actually have something they call Composer. So Composer is very similar to Bolt, basically. It's a chat, and, you know, when I'm using Cursor nowadays, I actually don't write any code at all. Um, I just use this the entire time. And the nice part about Cursor, just in case you're wondering, like, why you might wanna do this, is I personally find Cursor can be a lot more pointed in its solutions. So, like, if there's a particularly troublesome bug that I can't figure out, I'll actually bring it down to Cursor to try to figure that out. And the second reason is you can switch between different models. So, uh, one workflow that I do sometimes is I flip over to o1 rather than Sonnet 3.5, and o1 is just... seems to be better at, at more complex issues. Uh, but yeah. So we'll go over to our sequences. Oh, sorry, this... [laughs] Sorry, I literally forgot that I wasn't looking at Apollo. I clicked on the sequences and that's what I meant to do it over here. Um, so-

   3. AGAakash Gupta34:32

      It looks that similar, guys. [laughs]

   4. CMColin Mathews34:34

      [laughs] Uh, so this is our sequences, and we can click create a sequence with AI, and then it generates a sequence for us. And let's say that I just wanna improve this feature. Uh, and you know, what I think would be an improvement would be that it asks me some questions before generating the sequence, and maybe also uses some social proof in the sequence. So it says, like, "874 other people have used this sequence and gotten 57%

9. 35:00 – 35:56

   Ad

   1. CMColin Mathews35:00

      open rates," or something like that.

   2. AGAakash Gupta35:01

      If you're enjoying this podcast episode with Colin, you'll love his course on Maven, today's podcast sponsor. The problem with most courses online, like Udemy, is there's no live component, and the instructors aren't experts in their fields, they're professors. At Maven, you get direct live access to experts and operators from the world's best tech companies. You can't get that access anywhere else, in any university, and you usually can't find them on YouTube either. I've featured so many of Maven's experts in the newsletter and podcast for that reason. To help you out, I've put together a collection of courses I recommend at maven.com/x/aakash. This includes courses like AI prototyping for PMs, product sense for PMs, and getting an AI PM certification. Visit it now at M-A-V-E-N.com/x/A-A-K-A-S-H.

   3. CMColin Mathews35:54

      Um, so you know,

10. 35:56 – 44:29

    Building AI Sequences for Apollo

    1. CMColin Mathews35:56

       it's compelling for me to use it as like, yeah, I think this is a good sequence, and also it seems personalized, or hopefully it is personalized, uh, based on the information that I'm providing. So we're gonna do a very similar approach to what we did before.

    2. AGAakash Gupta36:10

       I love seeing an improvement to a feature I shipped. [laughs]

    3. CMColin Mathews36:12

       Yeah. So you can still paste images inside of, uh, the Composer here. Again, it depends on the model. So as I mentioned before, Sonnet 3.5 is a multimodal model. This works just fine. o1 is not, so if I try to send an image to o1, it doesn't work. Uh, but we're gonna start by saying... Uh, well, I guess one is can you implement this? [typing] Yeah, so can you implement this view? This should appear when I select sequences. And again, you're gonna see, like, a very similar workflow overall. It's gonna write the code for us. Uh, I'm gonna apply the code changes, and then we'll see it show up. So there we are. Still working through it, but as I mentioned, behind the scenes, Bolt is using the exact same model, so this is actually gonna feel very similar to using Bolt. So we apply those changes, hop back over here, go to sequences, and we do not have anything on our screen, so we'll have to take a look at why.

    4. AGAakash Gupta37:23

       All right, so now debugging in action.

    5. CMColin Mathews37:26

       Yeah, that's right. Uh, okay. So the problem is, is that I've actually made a mistake, and I make this mistake fairly frequently, um, which is I forgot to pass in the correct context. So one thing that's different about Cursor is that you have more control over how it works, uh, which can be a good thing and a bad thing. On the Bolt side, it decides for you what the relevant context is to send over, so basically which files are relevant, and I forgot to send any files as context. Um, so I'm gonna say, "Can you integrate this into my app?" [typing] And this time, I'm gonna press, um, Command + Enter, and you'll see that it sends my files over, uh, rather than, you know, not sending my files. So that, that was my mistake at the beginning there. Uh, so it's gonna update my existing files hopefully. And one thing that, you know, maybe would've been a better approach, I might still do this anyway, is actually to revert this first one because it made these changes or these updates with no context to what I was doing. Um, and so I don't know if any of this code is actually valuable to us, whereas, you know, the second set, uh, would be based on our actual content. But we'll give this one more try. [mouse clicking] And let's see what we have going on here. Yeah, so I think what I might do is actually just revert back, and you can see that we have a little restore button at the top here. So revert all cha- files to before. Hit continue here. Double check that we can see our content from before, and basically just ask the same question, uh, but this time pass in the correct context. And that's another kinda, I guess, quick tip is rather than doubling down on mistakes, it's best to just revert, uh, when you can because, you know, I could spend probably 15 minutes, 20 minutes trying to debug why that wasn't working, or I can just flip it back and, and fix it, uh, so that I send the correct message the first time.

    6. AGAakash Gupta39:24

       And it's cool that it's... You can just flip it back that way.

    7. CMColin Mathews39:28

       Yeah, it's really not that hard. I mean, it's, it's pretty, pretty intuitive. And so yeah, now we have something that looks correct, right? We have our sequences, um, and we want this button to, to do something. So we'll flip back over to Apollo, click here, and kinda grab this screenshot. And what I'm gonna do is I'm gonna ask it to implement this as well, but with a bit of a difference. So [typing] let's start with, "Can you implement this, um, for the AI button?" Something like that. And then I'll say, "Before s- showing me the sequence, uh, can you collect some, some data from me that would help shape the sequence?" And I'm not even gonna tell it what to do. Uh, I think this is maybe one of the cool parts is, like, normally you'd have to say what I want, like, "I want these data elements collected." I'm just gonna give it free rein to decide what it thinks is relevant in this context. And I'll say, "Can you also add some social proof to the, um, sequence at the end? Like the number of users who have a similar sequence." [typing] And yeah, passing in the context is pretty, pretty critical, so I made sure to get it right the second time. Uh, but yeah, very similar workflow here. So it's gonna add some questions for us. Uh, again, I didn't decide what those questions were. Maybe they're not relevant, but I find most of the time it actually does a pretty good job of figuring out, like, based on the context, what to do. And in some ways, this honestly replaces, like, the PRD, right? Normally this would be part of your PRD is, like, figuring out what to do, what questions to ask.

    8. AGAakash Gupta41:28

       Yeah.

    9. CMColin Mathews41:29

       But [laughs] you can just prototype it directly in here and see how it does.

    10. AGAakash Gupta41:34

        And people can give such better feedback if they actually see it in the product like this versus read it in a PRD and their eyes glaze over.

    11. CMColin Mathews41:43

        Yeah. I mean, I'm sure many people have had this experience, but I've written long enough PRDs that I've been told by my engineer, like, "Oh yeah, I read half of it."

    12. AGAakash Gupta41:52

        Yeah.

    13. CMColin Mathews41:52

        [laughs] Which never feels great. But, you know, if you can communicate the ideas with, like, a clickable prototype rather than that, like, your engineer's gonna have no problem clicking through a couple of views and, and starting to have some questions rather than reading half the PRD. But yeah, so, uh, let's go back over here. So here's our, our new flow, right? So create with an AI sequence. I wanna book more meetings. I am in healthcare.

    14. AGAakash Gupta42:23

        This is legit. It's come up with a multi-stage quiz.

    15. CMColin Mathews42:26

        Yeah. Let's say VP director level and cost optimization. So it generates the sequence for us, and here's our social proof, right? So yeah, those are the changes we were targeting. And I'd say, I mean, I literally didn't give it any direction, and it came up with what I would say is pretty, pretty reasonable implementation here.

    16. AGAakash Gupta42:47

        Very nice. And we didn't really run into any issues. So people keep saying that debugging is such a big deal, but we didn't really run into any issues that were generated by Cursor itself, just some user error that we, we went back and re-entered something.

    17. CMColin Mathews43:04

        Yeah. Debugging's definitely a critical skill. Um, I find that usually it looks, looks a little bit easier when, when I'm the pilot, uh, just because I have some p- prior, you know, programming knowledge. And so I know generally what it's doing. That's definitely a strong skill to have, like in this context. I wouldn't say like technical skills somehow go out the window. Um, d- in fact, it's kind of the opposite. Technical skills make you even better at doing this. But, um, yeah, we got, we got pretty lucky, I would say. Usually it's like, you know, 20% chance that something goes wrong on a me- a given message. Um, we also aren't doing anything on the client si- or rather on the server side or with the database, so we're minimizing complexity, and that actually goes a really long way as well. Like just keeping things simple just increases the probability that everything's gonna work correctly.

    18. AGAakash Gupta43:51

        So for prototyping, if you can stick to prototyping and you're not trying to build a full-functioning app, you can really reduce a lot of the errors and debugging steps.

    19. CMColin Mathews44:01

        Yeah, exactly. It's really when you're trying to integrate with, you know, APIs or external services or a database or set up authentication where things get a bit trickier. But for just general prototyping, I would say like this is, this is pretty representative. Um, sorry, I'm still just shocked like how good of a job it did. Like even like-

    20. AGAakash Gupta44:18

        Yeah

    21. CMColin Mathews44:18

        ... the styling, like the lo- like everything looks almost perfect. But anyway, um, yeah, yeah, to answer your question directly, yeah. That, that's really right.

    22. AGAakash Gupta44:26

        I am shocked as well. I mean, these demos are going so,

11. 44:29 – 51:39

    Lovable Tutorial

    1. AGAakash Gupta44:29

       so fast. So I wanna do another one here. The other tool that, you know, is really sexy right now is Lovable, and I think Lovable is really useful for Figma conversion to prototype. So let's walk people through that.

    2. CMColin Mathews44:42

       Yeah, sure. Let's go through that. Um, so let's hop over into Figma. And we will pick up, uh, on a design here. So, uh, what I actually did ahead of time, and this is pretty funny, um, that this works as well. We'll see how well it works. It... I wouldn't recommend this workflow necessarily. Maybe we'll do one more afterwards. But I literally took a screenshot. This is, like you can see in Figma, this is just a picture. Uh, and we're gonna try to convert this to code. So, um, what I'm gonna do here is I'm gonna run, um, the, uh, plugin here. Sorry, the little screenshot thing was in my way. So I'm running a plugin called builder.io. This is another third-party company that has an integration with Lovable. So, um, you know, one is, I guess, shout out to builder.io, 'cause this is so far the best Figma converter that I've seen so far. Uh, two, obviously you'd have to pay additional money to, to build an, uh, IO if you wanna do a lot of conversions, um, or, or have like some specific requirements. But generally speaking, you can install this plugin, create an account, and run this as much as you want to. I don't know if there's an actual limit, but I have never hit it without really seeing anything other than this, you know, Figma screen and then directly over into Lovable. So what Builder does is it actually generates kind of the first outline of the code based on the screenshot or the content, and then over in, um, Lovable, we'll get the kind of the second iteration. So here you can see a couple of different iterations of what, uh, what it kinda came up with. And we get to pick which one we like. So maybe the bottom one. I think that's the closest. And then we click Open Lovable, and then this will take a little bit of extra time as well. Uh, but we'll actually get kind of a, the initial screen of a functional prototype where you can continue to iterate it on over time, very similar to what we did in Bolt. Uh, you know, we're gonna just be on that first screen. Uh, and this is nice because this process gets you much closer to your actual designs than just the screenshot. Although, to be honest, the screenshot approach worked pretty well today. Uh, most of the time it gets close but not, not quite as close as we did today. Uh, today was like an outlier, honestly, from my perspective in terms of just how close we got, uh, with, with just the screenshot. All right. We got an error on that one. That's okay. Maybe I'll give it a try with, with the other approach here, and we'll take a look at an actual file, uh, that has some content here. I did actually do this once before, so maybe before we move on, uh, maybe I'll show you what it looks like and we'll, we'll try the other way. So this is what I had. From just the screenshot, we have kind of the import here. And again, you know, you can see we have a very similar approach, uh, or, to, to what we had in Bolt. So this one looks a little bit different, but, but very similar, uh, to, to what we had before.

    3. AGAakash Gupta47:21

       So screenshot can work, but Figma with all the proper sort of elements described and things like that is gonna be better.

    4. CMColin Mathews47:27

       Yeah, exactly. So let's hop over into, um, this one here. This is a UI kit that I have, and it has some kind of pre-built stuff we can use. So I'm gonna grab a dashboard for us.

    5. AGAakash Gupta47:40

       So this would be a really powerful workflow for, for instance, user research teams to be able to take a Figma design and convert it into a prototype to have a better working test.

    6. CMColin Mathews47:52

       Definitely, like if you wanna get that one-to-one view of what you already have rather than something that looks similar, then this approach works a lot better. So we're gonna do something very similar. I'm gonna go ahead and click basically the screen that I wanna convert, uh, run that, you know, step one more time here and convert this to code. And then, um, you know, this is actually using like the proper Figma content with all the layers and all that content that you're, you're used to seeing inside of Figma. So this'll analyze the Figma layers, convert it over for us, and then we'll open it in Lovable one more time here. And then maybe if we have time, I'll give that other... the last one another shot, uh, just 'cause, you know. It was working earlier, but, uh, we had a bit of an issue with the, the screenshot approach there. And yeah, this one can take a little bit of time. Um, I find like the more content there is in the screenshot, the longer it takes. So- This one might take, like, two to three minutes in total. But again, it does a pretty decent job of creating, uh, a view that looks similar to what we have in Figma.

    7. AGAakash Gupta48:49

       So while we're waiting on that, how much do Lovable, Builder.io, and Cursor cost?

    8. CMColin Mathews48:55

       Yeah. They're all pretty much priced the same. Uh, so it's either 20 or $25. So you can definitely, like, rack up a, a good bill if you subscribe to all of them. My general recommendation here would be, like, pick one tool that you like and then just stick with it. The tools are changing so quickly anyway that, um, you know, three months from now, they're all gonna have different features and, and different, different, uh, you know, tools within themselves that, like... Like, you know, this Figma conversion was new in the last month, for example. That just picking one and sticking with it is probably the best bet so that you feel comfortable with what you're doing, and not, like, switch, switching between them based on, like, the newest feature. 'Cause again, they just all change so quickly that they'll probably all have Figma imports in like, three or six months or something like that.

    9. AGAakash Gupta49:43

       It's insane that they're such young products but so stable, too. I've worked on mature products with more errors. [chuckles]

    10. CMColin Mathews49:50

        Yeah. Yeah, for sure. Yeah, they work really, really well. Um, and I guess kudos to those teams on that, especially because these are non-deterministic products, right? Like, it's using an AI model behind the scenes to try to write code, and, uh, I mean, I'm sure you've used LLMs before. They're not always the most reliable, right? So yeah. I mean, they, they work pretty well.

    11. AGAakash Gupta50:11

        Lovable seems to be taking the longest time, but I think it's a lot related to how many elements are on this screen compared to the other screens we had.

    12. CMColin Mathews50:19

        Yeah. I'd agree. Um, also, like, hopefully, you know, in two minutes when this is done, uh, what I'm about to say is correct, but I've found that this process does the best job of creating a one-to-one mock, like, like literally id- identical. If you take a screenshot and you put this into Bolt or something like that, it'll look similar but not the same. This process, in the past for me, has done a fantastic job of, of imitating exactly what I have in Figma.

    13. AGAakash Gupta50:46

        It's getting so much more metadata about your design.

    14. CMColin Mathews50:50

        Yeah, exactly. Like, a screenshot really, you're not sending any data about the design. You're just sending in the screenshot to be analyzed by Sonnet 3.5 or by Claude. Uh, whereas here, we're actually kinda, like, using the content inside of Figma, like the actual layers, you know, the, the metadata about, like, fonts and colors and all that stuff, to try to build the mock-up based on that. So there's a lot more information that's being passed here, uh, between Figma and Builder.io and Lovable than just a, a typical screenshot would do. And yeah, looks like we're almost there. Finalizing project. Hopefully we can wrap up soon on, on this one. There's still gonna be, like, once we import it into Lovable, it'll probably take another minute once it's in Lovable. So again, this one's a little bit slower. Uh, but I think hopefully what we'll see is it's worth, worth the wait.

    15. AGAakash Gupta51:34

        This is how much time I expected everything to take, so it's really a testament to how

12. 51:39 – 58:54

    Setting Realistic Timeframe Expectations

    1. AGAakash Gupta51:39

       fast Bolt and Cursor are. [chuckles]

    2. CMColin Mathews51:41

       Yeah. That's true. Uh, Bolt is very quick as well. Uh, out of this, out of this set, I think Bolt is, is the fastest. Um, Cursor's really fast just because it's on my local computer, so, like, there's less that it has to do in terms of the background processing, whereas the other ones are all cloud-hosted, so they have to do a bit more work because of that. Um, but yeah. I mean, they're all, they're all extremely quick. Uh, you know, the other ones, again, if you increase the complexity, it's gonna take a bit more time, right? So if you have a database and you have to make database changes or something like that, then that'll take a bit more time as well.

    3. AGAakash Gupta52:12

       And what's the scenario where you might want to do that?

    4. CMColin Mathews52:15

       Yeah. So I mean, maybe while we're waiting here, I can talk through a couple of the other small things that I've done. Oh. [chuckles] As I say that, we wrap up. But basically, if you wanna launch a real project, uh, or a real product, so I have a couple of things that I've built over time that I use on a day-to-day basis. Uh, I'm sure people know that I teach on Maven and, you know, one example is that I built my own referral system, so students can refer other students, and it provides, uh, the person who's, you know, creating the referral code, this prior student that I've already had, it gives them their own unique link. Uh, you know, I basically have authentication. It stores all their page views. Like, it's, it's own little referral product that I built, and I built that one on Replit, and that probably took me about a day to make. Um, but, uh, you know, not like 12 hours or anything like that. Maybe six hours in total. But, uh, but that's a good example where you wanna have, like, a database and that whole kind of set of features, is where you're trying to offer a real product or something that resembles a real product, uh, rather than just the prototype.

    5. AGAakash Gupta53:11

       A real growth factor for your life. That's amazing. I mean, the ROI on that six hours is probably so high.

    6. CMColin Mathews53:18

       Yeah. Uh, well, I've actually already had my first referral sale, which is, uh, pretty crazy. Uh, didn't think it would come in that quickly 'cause I just shipped it, again, maybe a, a week ago. Um, but, uh, yeah. No, that, it was a pretty cool system, and also, you know, just fun to see that I could ship something like that that's a bit more complex, it has, like, a Stripe integration and all that, uh, in a relatively short period of time. Uh, but yeah. So here we have our inte- our, our other, uh, our new mock-up, and it did a pretty decent job. There's, like, some weird kind of artifact on the left-hand side here in the navigation. If I kinda open this up in a larger screen here, you can see, uh, something's not quite right there. But overall, did a, a pretty decent job, I would say, of replicating that, that Figma mock we had. I'll just flip back for a second, so you can see that here.

    7. AGAakash Gupta53:59

       So how do we debug that artifact in the navigation?

    8. CMColin Mathews54:03

       Yeah. That's a good question. So basically, it's gonna be a very similar approach. Um, so we can go ahead, take a screenshot here. Throw that into Lovable. And at this point, we're basically back over to where we were with Bolt. Obviously, different tool, but very similar process of kinda clicking through. And we can ask some questions here. The other thing you can do is you can actually select different elements. So you can see that it's kinda has, like a, an image or a div on the left-hand side. So I can say, uh, "Can you remove this div?" And that's one nice feature of, um, Lovable that some of the other ones don't have, is this kind of selector tool where I can select different elements of the page, just to be a bit more precise with what I'm trying to do.

    9. AGAakash Gupta54:48

       Very cool.

    10. CMColin Mathews54:52

        And yeah, we'll see if it works here, and then maybe I'll move on to what, um... Actually, I can walk you through that, that referral, uh, tool that I was, I was mentioning earlier. One other thing about Lovable, just while we're here, is Lovable is, in some ways, more friendly to non-technical users because you can't actually see the code. So nowhere in here is there a code editor. That's a good thing in some ways. Uh, it- obviously, it's a little bit less intimidating. I find that sometimes it's not as good if you want to see a little bit about what's going on. So if you wanna learn how to code, for example, or just generally understand what's happening, then, um, it's not quite as good to not be able to see the code. And so just pros and cons, depending on your preference. Uh, you know, but in, in this case, no, no code available to us to actually see. And we, we can see that it removed something, but not the one that I actually wanted here. Um, so I'm gonna say, uh, "Can you remove this div on the left side?" [typing] And again, just trying to be more specific, more precise is, is good. It was probably too general. Uh, I relied a little bit too much on the selection being kind of all I needed, and all I said is, "Can you remove this div?" And it didn't quite work. So again, just generally be more specific, be more precise, and you'll get better results.

    11. AGAakash Gupta56:22

        And it's a relatively minor thing anyways. For the purpose of your prototype or your prototype as PRD, [chuckles] as we're suggesting some PMs start to think about it, might not always be the highest ROI thing, too.

    12. CMColin Mathews56:35

        Yeah, I would agree with that. I would say this is probably a pretty small thing to change. I think we got rid of the, the little gray coloring. You can see I'm kind of just having to iterate through, so there's still this little, whatever this artifact is here. It looks like some kind of icon that's getting cut off. Um, so we made some progress, right? We got rid of that gray coloring. But maybe we'll leave it there for now, just so we don't spend more time trying to, trying to clean up this-

    13. AGAakash Gupta56:54

        Yeah, 'cause we gotta see Replit and what Replit can do, because it sounds like that's the one to go to. That's the final stage, I guess you could say. We got Lovable, you don't even see code. Bolt, you see the code. Cursor is an IDE, and then Replit is an IDE with database capabilities.

    14. CMColin Mathews57:13

        Yeah, that's exactly right. So maybe I'll show you one of the tools that I built previously, um, and then we'll hop into something new perhaps. So I'll start with something simple, uh, this Substack image resizer. Actually, you might really appreciate this one. Uh, so for whatever reason, I've never been able to figure out what image sizes Substack wants from me. Like, every time I put something in the preview image, it seems to get cut off in some weird way. And so what I built is this little tool here where I can just put whatever image I want in here. Uh, so let's just say this one here. And I process the image, and it resizes it to all these variants, and then I can use whatever-

    15. AGAakash Gupta57:48

        Amazing

    16. CMColin Mathews57:48

        ... variant I want. So I can use... If I'm using the feature layout, I can use the feature one. If I'm using the cover layout, I can use the cover one. Uh, it's just 'cause I kept getting so annoyed that, like, I was trying to fix this in Canva. I just-- My stuff kept getting cut off, and I just, I just hated it. So this is something that-

    17. AGAakash Gupta58:02

        You gotta publish this to the web [laughs] so we can use it. [laughs]

    18. CMColin Mathews58:06

        Yeah. This is one that just bothered me so much, so it's just like a little personal tool that I built, right? Um, because-

    19. AGAakash Gupta58:12

        Which is hugely valuable. I think people might be sleeping on this, but one of the best SEO hacks in the world is to build tools like this. [chuckles]

    20. CMColin Mathews58:20

        Oh, yeah. For sure. Yeah. Engineering is marketing is, I think, the-

    21. AGAakash Gupta58:23

        [laughs]

    22. CMColin Mathews58:23

        ... the word there. But, uh, yeah. Stuff like this is great for, you know, marketing your product, but obviously... And I probably couldn't monetize this, but I could maybe use this as an example, like, for my course, right?

    23. AGAakash Gupta58:34

        Yeah.

    24. CMColin Mathews58:35

        Um, in, in, in some way. So this is a good example. And again, on the left-hand side, you're gonna see that we have our code. Uh, this one is running both a client and a server. So, uh, we have a backend server here. I'm not gonna bother going through the code here, but that's what this is. And then, you know, our front-end view on the right-hand side. You can see the actual results. Um, and then maybe we-

    25. AGAakash Gupta58:52

        So can we start from zero

13. 58:54 – 1:11:29

    Replit Tutorial

    1. AGAakash Gupta58:54

       in Replit? I wanna maybe just do something simple, you know? Like-

    2. CMColin Mathews58:57

       Yeah

    3. AGAakash Gupta58:57

       ... what if we just did, like, a, a database where it actually had the other element of the database for, like, a to-do list or something just so simple.

    4. CMColin Mathews59:06

       Sure. Yeah. So we'll do, uh, "Can you create me a to-do list?" [typing] And I'm just gonna tell it to use React. Um, what I'm doing here is specifying the technology. So most of these tools can only use, uh, JavaScript-based frameworks for building web apps. Replit can use Python as well. Python's really, really great for data-driven applications, um, so like image resizing or, you know, uh, image conversions or stuff like that. Um, for things that you want to look a little bit better, then typically I wouldn't recommend using Python. I'd recommend using JavaScript. And so me saying use React is m- me just telling Replit to use a JavaScript framework so it doesn't recommend using Python instead.

    5. AGAakash Gupta59:58

       Got it.

    6. CMColin Mathews1:00:01

       Yeah. So we're gonna get, you know, our to-do app. Replit actually kind of takes on bigger chunks of work, uh, with the, with the agent here. So, uh, one thing that's a little bit different is they have two different chat modes. They have the agent and the assistant. The agent, like... Well, it's kind of like an automated developer, as I said, so it takes on very large tasks, and it does all the work for you, whereas the assistant can basically be used to make small iterations. So if you wanna, you know, just change a font or something like that, you'd use the assistant. And, uh, what I've done over time is I just use the agent maybe once, twice i- in the entire project. Like, I really just use it to get going, and I use the assistant most of the time to make small iterations.

    7. AGAakash Gupta1:00:43

       People are always asking, "What are AI agents in action?" Here it is in action. [chuckles]

    8. CMColin Mathews1:00:47

       Yeah. Yeah, we have our, our to-do list here, and it works reasonably well. So at this point, I don't think we have a database set up, but if we want one, we hop over to database We could click the button [chuckles] and create a database. That's it. That's all, all it takes. Um, and then we just have to ask it to hook up our... to our database.

    9. AGAakash Gupta1:01:10

       So it's really easy and integrated in Replit versus in Bolt, I think we saw something about a Supabase connection.

    10. CMColin Mathews1:01:17

        Yeah, that's right. So, um, you have to connect to an external product, in this case Supabase, in order to use a, a database or, like, set up authentication or anything like that. The nice thing about Replit is that it knows about everything that you're doing, like it has context to the entire project. And so if you wanna make changes, it can change your database very easily, uh, or kind of like understand what's going on with that database. I always found with the Supabase integrations, that's less true. So, like, they might make assumptions about what's in database, uh, or what's in Supabase, or they may make assumptions about how things are working even though they're not configured that way. And so I would generally recommend using Replit for any type of, like, full stack application that you have to build, so client, server, and database, uh, rather than the Supabase integrations. If you are gonna use a Supabase integration, personally I found Lovable is, is the best out of the set right now. You know, again, this changes, like, every two or three weeks, so it could be different three weeks from now, but, uh, today-

    11. AGAakash Gupta1:02:16

        [chuckles]

    12. CMColin Mathews1:02:16

        ... Lovable is the best out of the set. Um, and, and you know, that, that's fine. And actually c- one kind of cool thing here. So it was running some commands for us, and then you can see it said that there's errors and it needs to fix them. And there's pros and cons to this, but Replit will just basically, like, you give it a task and it just goes. Like, you don't need to interrupt it. If there's errors, it will detect the errors and try to fix them by itself. Like, it just continues indefinitely. The good part about that is like, um, you know, it just fixes problems by itself, which is great. The bad part is sometimes it just gets in a loop of, of like can't f- it can't fix the problem, and so you have to interrupt it and, like, try to get it to, to work yourself. Um, so there's definitely pros and cons to, to the different tools. And yeah, so our app crashed. We'll see what happens here. Try to run it one more time after that.

    13. AGAakash Gupta1:03:11

        So this is the first time we're really running into, like, the tool crashing potentially, and that's, like, what we said, like once you add complexity it's more likely to.

    14. CMColin Mathews1:03:20

        Yeah, exactly. And I'm not sure what the reason is at this point. Um, so we'll see in a second. You can actually see it's running a SQL command for us to check if there's any content in the database. So this is actually... If you think about this, this is incredibly cool. The agent is running a SQL command to look at the content in the database to see if our app is working correctly based on there being content stored. Like, I, I don't know, that just seems kind of insane to me that it's checking our database content, uh, by itself.

    15. AGAakash Gupta1:03:46

        Insane.

    16. CMColin Mathews1:03:47

        Yeah. So we'll try again. We'll do test. We have our content here, and then now if we look at our database, we can actually just click my data and we see that our database record is, is right there. So now this is, like, a proper to-do app, right? It stores the actual content, uh, rather than us losing it every single time we refresh the page.

    17. AGAakash Gupta1:04:08

        And then I guess the next level up would be to add, like, authentication. So how would we do that?

    18. CMColin Mathews1:04:13

        It's actually really not that hard. Um, this is how you do it. Add auth [chuckles] and then-

    19. AGAakash Gupta1:04:18

        What?

    20. CMColin Mathews1:04:19

        [chuckles] It'll add authentication. Yeah, it's really not that, you know, complicated in Replit, to be honest. It has a lot of this stuff built into it directly. So, um, if you wanna do, like, Google authentication or something, that, that's a bit more work. But just, like, email, password authentication, uh, you just ask it to add auth and it will.

    21. AGAakash Gupta1:04:37

        And for $20 a month with Replit, you can still build like 10, 20 apps?

    22. CMColin Mathews1:04:42

        Yep. Yep, you can build... I mean, I have a couple of apps. Uh, I'll maybe pop over to another tab here while it's working on that. So I have s- some deployments, which are, these are apps that are running in production that users are using. So I have two deployments right now, and then I have a variety of apps that I've built. Uh, you can see I have a bunch. I also delete these every once in a while. I try to clean it up. Um, but yeah, you can... I would say you can basically build as much as you want to build, uh, with, with this within, you know, reasonable limits.

    23. AGAakash Gupta1:05:16

        And is there a point where you add so much complexity to the code base and it's such a complex app that the LLM just struggles with the context?

    24. CMColin Mathews1:05:25

        Yes, 100%. So context is kind of the, the most important element of this whole thing. So as the app gets bigger, they just do a worse and worse job. For whatever reason, Cursor has done a good job of implementing a solution where, and Wind Search to be fair, where, um, it basically identifies the correct context for you. So if we flip back for a second, you see that, like, when I sent those prior messages... Oh, well, it's not showing up now, but, um, you know, if I, if I send a message with context, I don't have to specify what the context is. Let's, so I'll just say, "Tell me about these files," and I can just hit this button and Cursor actually decides what the relevant context is, right? And they actually score, you kind of saw in the pop-up there, score it based on some kind of weighted model, I assume, how relevant the different files are. So Cursor does a great job of managing that context. The other applications like these ones don't do as good of a job of managing context. They start to fall apart, uh, when the project gets, gets too big.

    25. AGAakash Gupta1:06:31

        I think that was what the Cursor team was bragging about, was, like, their inference tricks around context windows. So there you go.

    26. CMColin Mathews1:06:37

        Yeah. Yeah, and there's, there's lots of little, like, interesting things because they actually use, you know... There's, there's lots of different ways AI is im- integrated into Cursor. So, you know, we have the composer here. You can also, like, let's say, generate a command, uh, down here. You can highlight text and, you know, edit in line with AI. And these all use, from what I understand, use different AI models or basically different, different models or different tricks with those models to try to get the best performance at the minimal cost. It's not like you're talking to the same model- For all of these different, uh, UI elements. They're actually different models depending on what you're doing.

    27. AGAakash Gupta1:07:11

        And before this, I think some people had the perception Cursor you couldn't interact with via chat, but as we saw in the demo, you ch- totally can.

    28. CMColin Mathews1:07:19

        Yeah, I don't... I mean, other than getting the code running, which you saw me do through some commands that, you know, I knew how to do, you don't have to be technical. And even at that point, it's kind of tricky, but you can ask Cursor to run the commands for you. So, you know, if I come down here, I'll just show you really quick while we're waiting. Uh, so if I cancel this command, and rather than me typing the command, I say, I generate a command and say, "Run my app," it write the command, wrote the command for me, right? So-

    29. AGAakash Gupta1:07:48

        Nice

    30. CMColin Mathews1:07:48

        ... I don't even need to know how to run the command. I could just say, r- do whatever I want, "Run my app," and it'll do it for me. And the reason we're waiting for, you know, just context is, um, Replit's trying to fix something. So I said, "Add auth." It's trying to set up the database. And here's a good example. It says, it says it created a PostgreSQL database, but we already had one. It's seemed like it maybe have dropped my, my to-dos for some reason. Uh, let's refresh here and see if this is still in here. Yeah, so it deleted my to-dos items for some reason. I don't know why. Um, and so on. So this is, this is a good example of what I was saying before, where, like, Replit, the agent will just go and do things sometimes, and, like, I have no idea why it deleted all my to-dos, and it actually deleted them from my database, which is kind of scary, because I don't have a backup of that to-do anywhere. Um, and so this is a good example of, like, where sometimes, like, more, more is more, let's say. Like, add auth is a fine prompt, but for whatever reason, we ended up dropping the, the to-do list items as, as part of that. Um, but theoretically, we have authentication now, so let's go ahead and sign up.
14. 1:11:29 – 1:12:47

    v0 Tutorial

    1. AGAakash Gupta1:11:29

       Wow. [chuckles] Insane. That's the power of Replit. And where does v0 kind of fit into all of this and compared to the tools we've looked at?

    2. CMColin Mathews1:11:39

       Yeah. I'd say v0 is very similar to, like, Bolt, uh, or, or Lovable. So again, you, you know, you throw in a prompt, so maybe we'll just do a simple one like, uh, make a to-do app. It's going to do, by default, client side only. It can do server side stuff. Um, you can actually deploy with Vercel. Vercel is a kind of hosting company, so they offer, you know, um, running servers and stuff like that for you. So you can deploy with them. You can set up a custom domain, all the same stuff. You can't have a database. They don't offer databases, so you have to integrate with a third party, so very similar like you might pick Supabase, uh, for your da- for your database there. But, uh, yeah, I mean, you can see it's basically very, very similar. Uh, they have some cool features as well, like maybe we'll just pop this open in another tab, like a community here. So you can see, like, there's a bunch of pre-built things we can start with. This login page, I just click open in v0, and now I have this login page. Um, and so you can kind of cobble together different pages or components based on the pre-built stuff that they have, and this, this is pretty unique to, uh, to v0.

    3. AGAakash Gupta1:12:44

       Colin, this has been an amazing

15. 1:12:47 – 1:14:04

    Takeaways on AI Prototyping Revolution

    1. AGAakash Gupta1:12:47

       whirlwind tour through these tools. I feel like my mind just exploded with seeing the potential and how quickly and how well you've mastered using them. Thank you so much. If people want to approach your level of mastery, uh, what are you putting on and what are you working up and cooking up for them?

    2. CMColin Mathews1:13:05

       Yeah. So, uh, well, first of all, there's the, the course on Maven, uh, AI prototyping for PMs. So you wanna get to, like, a similar level of mastery to be able to produce things pretty quickly with not too many errors. Uh, you'll probably still have some, but, uh, you know, that's okay. You'll be able to get through those. Then, then you can check that out. And then also just on, like, my LinkedIn and Substack, I post content pretty regularly on this topic as well. So if you're just looking for, like, some quick tips, um, then you can check that out as well. It's a good place to look.

    3. AGAakash Gupta1:13:31

       Amazing. This has to have been one of my favorite podcast episodes yet, Colin. Thank you so much.

    4. CMColin Mathews1:13:37

       Yeah. It was great being here. Thanks for having me.

    5. AGAakash Gupta1:13:40

       Thank you so much for listening. If you found this valuable, you can subscribe to the show on Apple Podcasts, Spotify, or your favorite podcast app. Also, please consider giving us a rating or leaving a review, as that really helps other listeners find out about the podcast. You can find all the past episodes or learn more about the show at product-growth.com. See you in the next episode.

Episode duration: 1:14:06