I Put Every AI Prototyping Tool to the Ultimate Test

1. 0:00 – 1:48

   Intro

   1. AGAakash Gupta0:00

      Every PM needs to master AI prototyping in 2025. Meet Alex Danilowicz.

   2. ADAlex Danilowicz0:07

      Today we're gonna face off my tool, Magic Patterns, against many of its common competitors, and we'll let you decide who the winner is.

   3. AGAakash Gupta0:13

      How big is Magic Patterns? What usage or revenue numbers can you share?

   4. ADAlex Danilowicz0:17

      This summer we crossed a million dollars in revenue in a very short time, about six months.

   5. AGAakash Gupta0:24

      It's like over 80% of product features that are built don't hit the metrics they were trying to go for. But if you take a real prototype, you put that in front of the user, you can check against all of those risks.

   6. ADAlex Danilowicz0:34

      Totally. It's, uh, absolutely a superpower.

   7. AGAakash Gupta0:37

      You've been doing this since 2023. What made you start this so early before everybody else saw the key trend here?

   8. ADAlex Danilowicz0:43

      My co-founder and I worked as front-end engineers, where all we were doing was just implementing Figma mockups. And one day I just said, "Teddy, let's try to add AI to our component library editor" that we were building at the time.

   9. AGAakash Gupta0:54

      If you had to give people a roadmap to becoming experts in AI prototyping in six months, what would be the roadmap for them?

   10. ADAlex Danilowicz1:01

       So the first roadmap would be learning just a little bit about how LLMs work.

   11. AGAakash Gupta1:06

       So we're both gonna create a prototype, and we'll compare how this initial prototype does, how the iterations do in terms of quality.

   12. ADAlex Danilowicz1:12

       Let's do it. I can't wait. The real deal.

   13. AGAakash Gupta1:18

       Really quickly, I think a crazy stat is that more than 50% of you listening are not subscribed. If you can subscribe on YouTube, follow on Apple or Spotify podcasts, my commitment to you is that we'll continue to make this content better and better. And now on to today's episode. Alex, welcome to the podcast.

   14. ADAlex Danilowicz1:38

       Thanks very much for having me.

   15. AGAakash Gupta1:41

       So how big is Magic Patterns? What usage or revenue numbers can you share?

   16. ADAlex Danilowicz1:46

       Yeah, so this summer we crossed

2. 1:48 – 2:17

   Magic Patterns Hits $1M in 6 Months

   1. ADAlex Danilowicz1:48

      a million dollars in revenue in a very short time, about six months [chuckles] since, um, starting. And we are on- and during the summer we were only two people actually, but now we are hiring very, very rapidly, um, and supporting some of the largest enterprises on the planet.

   2. AGAakash Gupta2:05

      Very cool. So Alex, if people follow me, they know that I have put these tools head-to-head before. Magic Patterns has won some of those. I wanna do that live for everybody

3. 2:17 – 7:37

   The Live Tool Face-Off Challenge

   1. AGAakash Gupta2:17

      today. Let's put Magic Patterns to the test. You and I are gonna compete. Is that okay?

   2. ADAlex Danilowicz2:22

      Let's do it. I can't wait. The real deal.

   3. AGAakash Gupta2:24

      All right. Amazing. So we're both gonna create a prototype, and we'll compare how this initial prototype does, how the iterations do in terms of quality, as well as how long it takes to create these things. You'll use your best tools. I'll use mine. So let's get started. W- we have not agreed yet what to build. So what are like good candidates of things to build that you think will allow us to see which tool is the best?

   4. ADAlex Danilowicz2:51

      Yeah. Totally. Well, I'll say the way most people use Magic Patterns is in a product development context, right? In the earliest parts of the product development life cycle. Say I'm working on a new onboarding flow, or I'm working on a new dashboard or a new feature, and then using our existing styles to, to do that. But we also have people building websites with us. We also have people building, you know, little hobby projects with us, and then syncing that to GitHub. So we really could do, could do anything.

   5. AGAakash Gupta3:21

      Yes. So I built a website. I built a AI PM portfolio using Magic Patterns. I've also been building a lot of prototypes. I think that most people, they're really doing a lot of prototypes for like big features that they're building that really need that extra layer of user research, that iteration on the solution. So why don't we big- build like a big feature? Like, I was thinking, um, one interesting feature might be we, we just heard, uh, ChatGPT released AgentKit. It's more of a developer-focused agent tool. What if we help ChatGPT build like a consumer-facing, kinda like a NAN or Zapier-style consumer-facing workflow builder?

   6. ADAlex Danilowicz4:04

      Let's do it.

   7. AGAakash Gupta4:05

      All right. This is the product I need in my life right now.

   8. ADAlex Danilowicz4:07

      [laughs]

   9. AGAakash Gupta4:07

      So we are gonna build it. So what we're gonna do, guys, is we're not gonna be looking at each other's screens. You guys are gonna be able to see our screens in full. You'll be able to see what we're doing, how we're doing it, and we'll kinda be talking back and forth. But we're gonna go, and we're just gonna do the initial version, just like the initial five to six-minute version here, and then we'll come back and compare. All right. And so you're gonna be using Magic Patterns. Um, we both can get started now. I personally, I'm gonna try to use four tools at once, just so we can get a sense of how they all compete against each other. Do, do, do, do. So I'm just working on my prompt right now.

   10. ADAlex Danilowicz5:01

       Me too. I'm doing two different things. Because this is a face-off, I'm doing one where I'm just prompting as quickly as possible, and then also I'm just gonna go to ChatGPT actually and create like a master prompt in ChatGPT and just kinda give me a little backup here, so.

   11. AGAakash Gupta5:17

       Nice. Yep. I'm working on my master prompt in Claude.

   12. ADAlex Danilowicz5:28

       What's pretty cool is I know that ChatGPT knows about Magic Patterns, so it's helpful. You can say, "I'm building a prompt for Magic Patterns, a UI generation tool," uh, and then, you know, give it that, so.

   13. AGAakash Gupta5:42

       Oh, nice. I'll use that as well.

   14. ADAlex Danilowicz5:59

       So here I am just copy-pasting my prompt. And so actually, this is a thing that I picked up from a lot of power users. I'll see that they'll commonly use tools like ChatGPT or Claude to kind of make these master prompts, which is very similar, right, to as if you have a PRD or you have a user story in Jira already, and you paste that context in. In this case, because we're doing this completely live, right, like, you know, Agent Kit is the first time I heard about this, [chuckles] I don't really have any context, so I'm asking ChatGPT to create one for me.

   15. AGAakash Gupta6:32

       Awesome. I'm also telling it, like, giving it a couple other examples of Lindy and n8n, because those are kind of the ultimate experience that we're trying to copy here.

   16. ADAlex Danilowicz6:47

       Cool. So you'll see, uh, on my end, my first one just finished, where all I did was I set a workflow bui- builder like n8n. Uh, and here we go. Here's my schedules trigger. I can select it, my node ID, apply configuration. Now I'm just kind of observing, like, what works, how this is kind of... I'm just reacting to it right now, right? I'm looking at, okay, what do I, what do I need next? But you'll see I already have a, a working prototype here. So I'm gonna see if I can draw some connections and then, um, you know, see how this is working.

   17. AGAakash Gupta7:21

       So let's come back together.

   18. ADAlex Danilowicz7:23

       Let's do it.

   19. AGAakash Gupta7:23

       Let's maybe first look at Magic Patterns, and we'll-- let's start to, uh, just look at everything first, and then we can give out our grades once we've seen everything. Does that sound good?

   20. ADAlex Danilowicz7:34

       Let's do it.

   21. AGAakash Gupta7:35

       All right.

4. 7:37 – 9:29

   Magic Patterns Results

   1. ADAlex Danilowicz7:37

      So my, my hands are in the air. I am no longer prompting here. So yes, I actually created two. The first I did w- was this massive ChatGPT prompt, and then there was another one where I just did a simple little w- workflow builder prompt, like exactly what just came to mind. And I'm actually liking the simple one that I did more.

   2. AGAakash Gupta7:57

      [chuckles]

   3. ADAlex Danilowicz7:58

      Um, and so it's pretty cool. So, like, I can just drag and drop nodes. There we go. And I can drag this one, and then I can actually connect them. Um, I can connect them. I was commenting that it was, like, a little finicky connecting them when I was building this. And, you know, I didn't really spend the time w- you know, nitty-gritty trying to fix that, um, that feature. But I got, like, a-- my one-- my run workflow button hooked up. Um, you know, I-- my save button, what happens? Okay, I have a toast. If I was actually prototyping this, I would probably, the next thing I would do is, hey, move my toast to the left corner and make it green, right, versus covering, [chuckles] uh, my nav bar here. But, like, I can just refresh that. And I got my export. And yeah, what would you like to see? Anything you'd like to see in particular?

   4. AGAakash Gupta8:55

      I think we got a good view of it. So yours is working. It looks nice. Um, it seems like it understood roughly what you're doing. What is the entry point into the workflow? Did it create, like, a landing page?

   5. ADAlex Danilowicz9:05

      No. So it just-

   6. AGAakash Gupta9:06

      Or did you land here?

   7. ADAlex Danilowicz9:07

      I'm just, like, r- it just created workflow builder ready to go. So-

   8. AGAakash Gupta9:12

      Okay

   9. ADAlex Danilowicz9:12

      ... I can even name it as, like, you know, workflow builder, uh, and hit Enter here. Um, this is the entry point. There's no other pages. I just literally prompted a workflow builder like n8n, and here we are.

   10. AGAakash Gupta9:28

       Awesome. All

5. 9:29 – 10:42

   V0 Results

   1. AGAakash Gupta9:29

      right. Let's take a look at mine, and then we'll come back and grade everything. And if we... Actually, let's-- before we even grade everything, let's look at everything and see, like, if we wanna make any iterations or anything like that. All right. So let's start with V0 here. So V0 finished first on my end. You can kind of still see Claude Code working in the background there. So V0 created this Flow AI. You can, yeah, you can change the workflow name. You can drag things onto here. And I think you can connect them.

   2. ADAlex Danilowicz10:03

      Yeah. It's funny, we had the same, the same issue.

   3. AGAakash Gupta10:06

      Yeah. [chuckles] Some funny connection issue. Uh, you can put an AI agent. You can chain-- You can add some interesting things about the agent. So you could build, like, a whole thing, like manual trigger to AI agent to send email. Right now, it looks like you just can't... Oh, sometimes you can connect it. And then it has a little test workflow, a little save, a little share option. So that's V0. I would say overall, pretty nice. This is what Replit

6. 10:42 – 11:46

   Replit Results

   1. AGAakash Gupta10:42

      built. So Replit, you click into it via chat, then it-- you can kind of drag some stuff in here. Yeah, chat agent.

   2. ADAlex Danilowicz10:53

      It's so interesting to see too, you'll notice on the left actually, Replit, I see, is prompting you, "Hey, add your OpenAI key. Let's actually hook up the AI chat agent," right? That is, like, something that would not happen in Magic Patterns, because we're, again, not trying to... We, we actually are just now releasing an integration on OpenAI, so this is an interesting example. [chuckles] But, like, we're-- we would not specifically prompt you to, like, add that full functionality. We're much more focused on, like, hey, did we get the interactions correct, right? So pretty cool to see that from Replit. I mean, it, it goes to show, like, the power of their use case.

   3. AGAakash Gupta11:30

      Yeah, for sure. So I think this is pretty nice as well. I think maybe, like, one thing I did like about what Replit did for this example is it started in ChatGPT, so that was, like, a nice-

   4. ADAlex Danilowicz11:43

      Mm-hmm

   5. AGAakash Gupta11:44

      ... touch there.

7. 11:46 – 13:07

   Ads Start

   1. AGAakash Gupta11:46

      Um, looks like Lovable also tried that too. So starting in ChatGPT, going to agent mode, or add sources, or how does one, [chuckles] how does one get into agent mode?

   2. ADAlex Danilowicz11:59

      Maybe try entering something?

   3. AGAakash Gupta12:04

      Okay. [laughs] So a little jankity way to get in. Might deduct a little bit from there. Um, we got agents. Can we click into these agents? Yep, we can do a little bit with them. Yep, we can do a little bit. We can test save workflow. Wow. So these- they're all remarkably similar, honestly. Okay. And then we got this manual trigger here. Um, in Bolt, it doesn't look like the dragging is working quite yet, right?

   4. ADAlex Danilowicz12:36

      Mm-hmm.

   5. AGAakash Gupta12:38

      Okay. So that'll hurt it in this. Said to test. But it, and it didn't have the entry point. Okay, so we got the rough results from everybody. Let's maybe, let's do this. Let's grade it on all of these, and we're gonna actually add another row below, which we should do, which is, like, iterations. And we can look at iterations after we come back. But let's get the initial results, and we can come back and do overall at the end as well. So UX, Magic

8. 13:07 – 16:09

   Grading the Tools

   1. AGAakash Gupta13:07

      Patterns. Maybe you can just show us again, and we'll decide what our final grade is.

   2. ADAlex Danilowicz13:13

      Totally. With me, it's just, I'm just the individual contributor here.

   3. AGAakash Gupta13:17

      [laughs]

   4. ADAlex Danilowicz13:18

      I am not part of the judging panel. That is for, that's for sure.

   5. AGAakash Gupta13:21

      Oh, you're in the judging panel too. Yes, you are.

   6. ADAlex Danilowicz13:24

      [laughs] Maybe for the other tools.

   7. AGAakash Gupta13:25

      Let's decide together on our own.

   8. ADAlex Danilowicz13:25

      I, I can't judge my own. I can't judge my own, but, um-

   9. AGAakash Gupta13:29

      It's okay. It's okay

   10. ADAlex Danilowicz13:30

       ... no, I mean, definitely what I, what I, what I can judge is, um, totally, you know, slightly disappointing that we see V0 had the exact same problem, right? Which just kind of flagging, um-

   11. AGAakash Gupta13:41

       Yeah

   12. ADAlex Danilowicz13:41

       ... summing up, all these tools are ultimately just using usually a version of Claude Sonnet 4.5 or 4 or 3.7 under the hood. And so I imagine it's, like, under the hood, this is probably just some issue in the Sonnet training data, right? [laughs]

   13. AGAakash Gupta13:57

       Yeah.

   14. ADAlex Danilowicz13:57

       Of why it-

   15. AGAakash Gupta13:58

       'Cause they all had it.

   16. ADAlex Danilowicz13:59

       Yes, exactly. So it's, it's very funny to me that, um, we all have that same, same issue. But, um, yeah, so what's the first thing on the, um, on the rubric?

   17. AGAakash Gupta14:09

       So UX. So I think I would-- I think it was one of the better-looking ones. I think the only ones that maybe looked as good were, uh, Replit, V0, and Lovable. So with the issue in the entry point and the issue on the tying the workflows together, I'm inclined to give it a B. Does that sound good?

   18. ADAlex Danilowicz14:32

       Sounds good to me. Yeah, I'll give-

   19. AGAakash Gupta14:34

       So that's a B

   20. ADAlex Danilowicz14:35

       ... I'll give a shout-out to Lovable. I think it's very interesting how they were, like, the only one with dark mode. I'm not sure if you prompted for that.

   21. AGAakash Gupta14:43

       Yeah, just they came up with dark mode on their own.

   22. ADAlex Danilowicz14:46

       Yeah, it's interesting. I wonder, like, that might be something under, in the system prompt, right? That it's optimizing for that or... Very interesting.

   23. AGAakash Gupta14:53

       Yep. All right. So let's go back over to the rest here. So I guess let's start with V0. V0, the UX, it did connect together, which was nice. It didn't start at ChatGPT. Did have this text workflow, this change name. Had some different types. You could click into them. So I think I'm inclined to give it a B+. Does that sound good?

   24. ADAlex Danilowicz15:23

       Sounds good to me. I agree. I thought they did a great job with the node, that node configuration.

   25. AGAakash Gupta15:29

       Awesome. B+ for them. Replit also looked quite nice. Um, and all the connectors worked, and they started it in ChatGPT. So I think they probably, alongside the Lovable-- Lovable had the weird int-intro interaction, so they, I think, got the highest grade. They get the A. Replit. And you know what? Cursor plus Claude Code is still working, so I'm just gonna disqualify them. [laughs]

   26. ADAlex Danilowicz16:07

       [laughs] I think that's also a lot of people

9. 16:09 – 24:59

   Why Cursor + Claude Code Failed

   1. ADAlex Danilowicz16:09

      -- I'm just gonna comment on that for a second. A lot of people always ask, you know, "How do you differ from Claude Code and, and Cursor," right? Like, the more technical folks. And I think the, th-that's the speed, right? Like, even if it was running, it's on localhost 3000. How do we actually share that URL with the stakeholder, right? Like, it's just a completely different workflow. So...

   2. AGAakash Gupta16:29

      Yeah, totally. Um, so let's do this. Uh, let's, let's keep it in there, [laughs] but we'll just give it an F for speed.

   3. ADAlex Danilowicz16:39

      [laughs]

   4. AGAakash Gupta16:40

      So that hurt us. At least in this task, it's not the fastest. We really like Replit, so we give it an A. We thought that it was the best. Um, Lovable, we said it looked pretty good, but it had this jankity entry point into it, where you had to just type something, which doesn't really make sense. Um, and then I think it had this issue, right? Did it have this issue? No, it didn't.

   5. ADAlex Danilowicz17:08

      Mm.

   6. AGAakash Gupta17:09

      So I think with the jankity entry, it's probably a B- or a B. Yeah, probably a B-. And then we got Bolt. Bolt was one that wasn't working, so I think that's gonna hurt it the most, right? That's probably a C grade. Cursor and Claude Code, no grade. Do we agree on the UX?

   7. ADAlex Danilowicz17:32

      Agreed. Yeah, totally, for this prompt.

   8. AGAakash Gupta17:34

      All right, perfect. And then speed-wise, I mean, Magic Pattern's one. You were talking about your iteration right away, so you get the A+. V0 was next, so I think it gets the A. After that, we had Lovable, Bolt, Replit. So I think we just kind of go down in order. B, B-. Uh, probably B-. Does that sound good?

   9. ADAlex Danilowicz18:03

      Yeah, and just to add some color here, like, in fairness, Replit's doing an awesome job where they are prompting you, "Hey, do you wanna hook up your Open API key?" Right? Like, there's probably some tool call under the hood that's saying, "Oh, this is, the user is trying to make an agentic workflow. Let me prompt it to-Let me prompt them to add their open A- API key, which might i- in fact, the slowness, right? Because it's, like, giving you that option. Versus, again, in Magic Patterns, we're hyper-focused on, like, visually communicating so we're not wasting time doing that, and it's up to you. Like, is it a time waste or not? Well, if you don't actually need to hook it up, that's when the, you, you might use a tool like Magic Patterns versus the others.

   10. AGAakash Gupta18:43

       Exactly. So I think on functionality-

   11. ADAlex Danilowicz18:47

       [laughs] Yeah, we would s- we suffer. I just [laughs] I put my nail in the coffin [laughs] with my last-

   12. AGAakash Gupta18:52

       Yeah

   13. ADAlex Danilowicz18:52

       ... comment there.

   14. AGAakash Gupta18:52

       Although-

   15. ADAlex Danilowicz18:54

       I mean, not a-

   16. AGAakash Gupta18:54

       We're, we're doing a prototype use case, so I think we just need to compare it on the prototype functionality. And did you have this pop-up, these pop-up-

   17. ADAlex Danilowicz19:04

       So-

   18. AGAakash Gupta19:04

       ... windows when you click on things?

   19. ADAlex Danilowicz19:05

       I do. I'll share my screen. I'll share my screen here. So I do have the pop-up functionality. You know, in one of my versions, it's not that significant. In my other version, um, it's much more fleshed out, which is kind of interesting, right? Like, probably the result of when I gave mi- the ChatGPT prompt. Somewhere in here it's telling it, "Hey," like, "Add a configuration panel," versus in my little baby prompt, I did not tell it that much. So, um-

   20. AGAakash Gupta19:35

       Yeah

   21. ADAlex Danilowicz19:35

       ... yeah.

   22. AGAakash Gupta19:37

       Okay, cool. So if we go back over to our grades and we assign our functionality grades, we know that Bolt is gonna get the hardest review, obviously, there, 'cause it wasn't working. So unfortunately, it's gonna get a C in this test. Lovable had that weird interaction, so I think it's gonna get a B-minus, otherwise it was working. Replit had the nice ChatGPT entry point and was working, so I think it'll get the A. But it did have that connection issue, so I think it'll get the A-minus. Func- v0 was working, so I think it gets the A, and then you guys get the A-minus for the connection issue. Does that sound right?

   23. ADAlex Danilowicz20:18

       Sounds fair to me, yeah. Totally.

   24. AGAakash Gupta20:21

       Okay, perfect. And then iterations. So we're running low on time, so what was your subjective grade on the iterations? How was it responding to your iterations?

   25. ADAlex Danilowicz20:32

       Uh, very well. So y- I mean, you'll see, um, I actually was prompting a lot. Like, and I had two different versions going. I was prompting mainly on styles, right? I wanted it to look like the ChatGPT, uh, interface. So, um, yeah. However, like, if I were to go down the rabbit hole of, again, adding functionality, like, Replit would smoke us there, you know? So, uh, which one did you get farthest with? H- how many... Did you prompt any multiple times?

   26. AGAakash Gupta21:01

       Yeah, I prompted them all multiple times because I added, I ended up putting, like, the redesign to ChatGPT style next.

   27. ADAlex Danilowicz21:07

       Mm.

   28. AGAakash Gupta21:07

       And I didn't think that v0 really did a great job. Like, this is not ChatGPT style. Neither did Replit. Um, Bolt and Lovable at least tried to, because they had that ChatGPT entry point at the very beginning. Um, but neither of them, none of them really matched the colors. So I wouldn't say any of the iterations were very good. Um, I would give B- v0 the highest grade on the iterations, just because they were super fast, and so it was easier for me to do a lot of them. So this is where I think I would rate out my iterations. B-plus for v0, B for Replit, B for Lovable, and B-minus for the Bolt.

   29. ADAlex Danilowicz21:48

       I, I appreciate your grading. You should change this to a, a B-plus. [laughs]

   30. AGAakash Gupta21:52

       Okay.
10. 24:59 – 25:42

    Ads End

    1. AGAakash Gupta24:59

       So where do these come out? I feel like I need to just drop this into an LLM, but let's do it by hand here. So, or I don't know. I think we do need to put this into a- [laughs] LLM. I'm too LLM-filled at this point for this. What are the o- final overall grades? Claude, you are gonna decide.

    2. ADAlex Danilowicz25:19

       Claude is the objective judge.

    3. AGAakash Gupta25:21

       [laughs] What is your go-to LLM right now for benchmarks like this?

    4. ADAlex Danilowicz25:25

       So, you know, I, just because it was first, I use ChatGPT a lot. And even though I know Claude is better for some tasks, I mean, in terms of coding, like, Claude is way better.

    5. AGAakash Gupta25:38

       Yep. All right. These are the final grades.

11. 25:42 – 27:53

    Final Grades: V0 Wins by 0.1

    1. AGAakash Gupta25:44

       A- for Magic Patterns. All right. I think you tied for the win. Yay.

    2. ADAlex Danilowicz25:50

       [laughs] With V0. With pl- V0 gets .1, uh, above according to Claude, so-

    3. AGAakash Gupta25:55

       Oh

    4. ADAlex Danilowicz25:55

       ... very nice.

    5. AGAakash Gupta25:56

       Okay. Let's go for that then, just to be accurate. 3.6, 3.7. Okay, so it's like your GPA, right? [laughs]

    6. ADAlex Danilowicz26:04

       Exactly. We, you know, we're an honor student, just about.

    7. AGAakash Gupta26:07

       [laughs] Poor Bolt. All right. So the winner in today's challenge was V0 by a hair. Interesting. Any reflections on the w- the loss?

    8. ADAlex Danilowicz26:19

       [laughs] Yeah, so I think one reflection is, well, other than the fact that I adjusted my, my own grade to, uh, to a B-minus.

    9. AGAakash Gupta26:26

       [laughs]

    10. ADAlex Danilowicz26:26

        But one reflection is, like, I think the bake-offs are very powerful and, and, and they're fun, but, you know, there's an inherent randomness in it, right? And look, I am saying this as one of the tools that came out o- on top in terms of iteration and speed and things like that, but, like, I recognize all the tools are amazing, but, like, notice sometimes when you prompt, there's some randomness, right? And, like, maybe it's actually, you gotta think about where you're spending 90% of your time, which is iterating. It's usually not the first prompt. Like, it's so funny to me, folks say, "Oh, well, the, my first prompt was better with this tool," and then they proceed to spend 500 prompts on that tool, like, iterating, right? Like, you know, it takes a lot of time, but the real way to test these tools is, like, keep, keep using it, keep prompting it a lot. Get to version 500 with one of these tools. When you're m- when you realize that you don't actually need Supabase, but you've spent two hours debugging Supabase, and all you need is an interactive prototype, then you might have wanted to lean toward a tool like Magic Patterns instead, you know?

    11. AGAakash Gupta27:30

        Yep. Well said. All right. That concludes our challenge. So I want to help people understand, you know, one of the big differences we did here is we were just building a prototype, right? How do, when people w- and none of them really did an amazing job of integrating with the design system. So can you tutorial for us,

12. 27:53 – 33:18

    How to Integrate Your Design System

    1. AGAakash Gupta27:53

       how do we integrate, because most of us are PMs working on existing products, integrate Magic Patterns or an air prototyping tool to fit our existing design system?

    2. ADAlex Danilowicz28:02

       So, so if you go to the Magic Patterns dashboard, you'll see a very important concept, which we call a preset, and this is something that the other tools don't have because they're focused on other use cases, right? They're, like, idea to app versus we're idea to, you know, production interface that can be copy-pasted into your, into your front-end code base, right? So here we have our presets. You'll see some defaults selected, but let's pretend I work at Stripe, right? And we can kind of show you a final version here, which is I have this Stripe preset. I named it Stripe. I connected it to my component library, which I'll talk about in a second, and then I have this default prompt. Now, this default prompt I commonly see from other companies, from our customers. They have design systems teams that are, like, creating these prompts, actually, and putting them into Magic Patterns or design ops people. Um, and so in this instance, you know, um, I'm just kind of doing a demo. I created it with ChatGPT, where I said, "Hey, bold, minimal typography. Here are some hex codes and things like that." And then the way that we actually get components in there is showing that here. Let's just do one from scratch. So let's pretend I have all my components in Storybook or on stripe.com. I'll show both. So let's pretend this is, like, Stripe Storybook. Um, one thing we can do is open up the preview in Storybook and use the Magic Patterns Chrome extension to actually import that. So you'll see I just selected it, and now here are my components, and if I click Convert to Component, I can select Stripe and create that component. And so now, once that's done, across all my designs, I can reuse that button component every single time.

    3. AGAakash Gupta30:01

       And is this using Tailwind, or what is this using behind the scenes?

    4. ADAlex Danilowicz30:05

       Yeah, so interestingly, one powerful part about our Chrome extension, which we've had for a long, long time now, and it's pretty cool. Like, we see a lot of other kind of smaller competitors in the space now have Chrome extensions. Like, people have realized the power of it. Um, is under the hood, what this is doing, again, I'm on Storybook here, it is grabbing the underlying HTML codeAnd it is converting it to Tailwind, right? Because LLMs, Magic Patterns, Lovable, Replit, like all of these m- um, tools under the hood, they're generally producing Tailwind code. And so what we're doing here when I click Convert Component, we are converting like that raw HTML like to Tailwind.

    5. AGAakash Gupta30:49

       Yep.

    6. ADAlex Danilowicz30:50

       And so I have it here. And so there we go, like there's my button component ready to rumble. If I click Publish, and then I go back, you'll see if I go to my library here on Magic Patterns, and I go to my Stripe library, you'll see here are all the components that I've created, right? So like here's that Stripe link logo. And so now all I need to do is prompt like, "Use my @Stripe," you know, "icon button" and like I don't even need to @ the link logo. I can say, "And my link logo." And when I hit Enter, what our AI under the hood is doing is it's knowing what are all the components that I have available, and then leveraging those in the prompt automatically.

    7. AGAakash Gupta31:46

       Mm. Very cool. So if we were to do this, I guess the ideal way for most people, you would want to select using the HTML selector of the Chrome extension all of the components you'd wanna use in a particular prototype, presuming you wanna match the design system, then you would go in, select that preset, and then prompt.

    8. ADAlex Danilowicz32:12

       That's right. Well, you know, what's funny is you get a lot of value. I've seen customers get a lot of value where they just go ahead right out of the gate, and they just use this base preset here, right? Um-

    9. AGAakash Gupta32:24

       Yep

    10. ADAlex Danilowicz32:24

        ... one of the things I recommend is if you know you need it to use your existing components, and it's very important to you that it looks like where you work, right, or you have existing brand context, spend some time setting up a preset and, yes, connecting your components where the way I did that is I used the Chrome extension, but of course, we could also just take a picture. So if I go to stripe.com, you know, and I take a picture of my input, and I copy that, and I go back here, and I go to Component, I could say, you know, a text input component. And all I did was I just created the... created it with a screenshot.

    11. AGAakash Gupta33:06

        Yep. So there's different methods you can use. Screenshots and things also work. Amazing. So people who have seen us do the challenge, if you had to put this into

13. 33:18 – 35:42

    The 4-Step Prototyping Workflow

    1. AGAakash Gupta33:18

       a generic workflow of how to AI prototype like a pro, what would be the key steps?

    2. ADAlex Danilowicz33:24

       Yeah. So what I always recommend to all of our customers, again, product managers, designers at large enterprises or even small startups, I always h- have them think like what's the end goal? Like what am I trying to accomplish with this? You know, in Magic Patterns, you can export to Figma. So you can keep that in mind, like is my end goal passing this off to a designer, or am I just gonna share the prototype link with a customer? You know, if I'm sharing with a customer, then brand context becomes very, very important, right? Versus if I'm just sharing it with my best buddy at work, we both know that we work at Stripe, right? We don't need to spend that much time on ingesting existing context.

    3. AGAakash Gupta33:59

       Yep.

    4. ADAlex Danilowicz33:59

       And that's kinda hinting at step number one right here, right? Like step zero was what's my end goal. Step number one is do I need it to look like my existing g- design system, right? Which is basing it off of who is my intended audience here. Like how much does that matter to me?

    5. AGAakash Gupta34:16

       Yep.

    6. ADAlex Danilowicz34:17

       Cool. And then s- step number two, I always highly recommend gathering your existing context, right? And so it's interesting in our, in our little bake-off today, you and I, we were kinda building something new from scratch, like our existing context was what OpenAI released, the new agent builder. That was our context. I fed it literally a picture from the PR, the, the press release. Um, and, uh, you know, but what I most commonly see at other companies is maybe it's a Jira ticket. Maybe there's acceptance criteria. Maybe there's a user story. Maybe I wrote a PRD, right? A lot of people ask me, "Should I do a PRD or should I do a Magic Patterns link?" And it's like, well, actually, maybe the PRD is your prompt for the Magic Patterns design, right? Or maybe the Magic Patterns design is gonna influence what you write in your PRD because you're gonna align visually. Um, cool. And then lastly, I always recommend iterating very specifically, like using select mode and, and what... being very specific on exactly what you wanna update.

    7. AGAakash Gupta35:26

       Yeah. I think that the quality of iterations, the quality of prompting there matters a lot. A lot of people have heard some of what we've said about, "Hey, create a master prompt," and those types of things, so they get the start right, but they don't get that iteration right, so that's really important. What are the biggest mistakes PMs

14. 35:42 – 39:25

    Top 5 Mistakes PMs Make

    1. AGAakash Gupta35:42

       make when prototyping?

    2. ADAlex Danilowicz35:44

       Yeah. Very similarly t- to prompting very specifically, failure handling. You know, the most common support ticket we get is someone messages us, "Hey, it's not working." And then you... And then they say, "Hey, check it, check out my prompting history to help me." And we look at their prompting history, and there's a little bug, right? Like we've all experienced that with all of the tools, and they just keep prompting, "Doesn't work. Doesn't work. Nope, it's broken. Nope, it's broken." And this is 10 prompts in a row, right? Versus we have a feature as an example, /debug, that's a command that actually under the hood is prompting the AI, "Please reflect on your actions. Rethink it. Whatever you're doing is not working," right? Like we have a feature to break it out of a doom loop.But instead, I, I feel that people, I don't blame them, but they get frustrated very easily and they're like, "Doesn't work, doesn't work, doesn't work, doesn't work" [laughs] which is only making the problem worse.

    3. AGAakash Gupta36:41

       100%. I've done it myself.

    4. ADAlex Danilowicz36:43

       [laughs]

    5. AGAakash Gupta36:43

       But it doesn't actually help the AI, and it destroys the context.

    6. ADAlex Danilowicz36:47

       Exactly. Yeah. Um, another one thing that I always highly recommend... You know, there's a lot of debate these days: Do I need to learn how to code or not? And look, my perception is if you're working in software, it is helpful to know a little bit about software and how it's built. It's amazing how these tools empower us to create mock-ups immediately, right? And, you know, we need to know how to code less than before, right, because the AI can do a lot of it for us. But I think there's certain th- prompting... There's certain prompts that'll just help you if you know a little bit about te- like web technology as an example, right? Like, in this example, we mentioned local storage. That's a way where you can kinda persist things in the browser tab. Um, and so if you know a little bit about that, when the AI tells you, "I u- I'm gonna use local storage to persist something," you know what they're referring to, right? That's where I, I recommend that.

    7. AGAakash Gupta37:45

       100%. Yeah, and it just helps a lot of the time, I think, that you can follow along what it's doing theoretically so that you can give it better prompts.

    8. ADAlex Danilowicz37:58

       Exactly, right? Uh, reading the output is another one that should be included in here, you know? [laughs] Sometimes people... The AI t- re- repeats something or tells you something and you don't read it. [laughs]

    9. AGAakash Gupta38:09

       [laughs]

    10. ADAlex Danilowicz38:09

        What it's telling you, it's having a conversation with you.

    11. AGAakash Gupta38:12

        Yep. And then the final one here is not using the select tool or specifying what you wanna change.

    12. ADAlex Danilowicz38:19

        Yeah, just like the... I can't emphasize enough the importance of context, right? You know, there's an... The classic example is let's say you've been working on a prototype 100 versions and you tell it like, "Update this button" or "Update a but- update the button to be blue." What button are you talking about, you know? I think people forget that, like, it can't read your mind, right? Um, and, and so that's very important. And, and then kind of in a similar vein, and we saw this in our little face-off, is the importance of, like, giving it context upfront, you know? If I know I want it to look like ChatGPT, I probably should've included that in my preset and made some components right out of the gate, right? That's why we see so many, like, enterprises get so much value from us is using their design context upfront.

    13. AGAakash Gupta39:11

        Yeah. That's absolutely critical. So miss- missing best practices in two regards: not choosing the select tool and being really specific and not starting with a preset. Make sure you do both of those. So how... With AI

15. 39:25 – 43:02

    Does This Replace PRDs?

    1. AGAakash Gupta39:25

       prototyping, everybody's wondering, you know, does this replace the PRD? How should you really be using an AI prototype?

    2. ADAlex Danilowicz39:33

       Totally. Well, you know, and the classic answer is it, it depends, right, on the team, as we were talking about a little bit. If you already have a PRD, I don't think it replaces the PRD, right? Like, use the PRD as the prompt. If you don't have a PRD yet, use the visual mock-up to influence what you need to update about the PRD. Like, what assumptions did you learn from the prototype, right? Uh, and so talking about, you know, a bit about it here, I do think the new workflow is like instead of starting with the PRD, like guaranteed, right, opening up Google Docs or your notes, is gathering context, right? What do I need to build? Who's the audience? Do I need to use my design system? Using the prototype to cut down alignment time, it's crazy. I, I hear from folks that are like, "I used to spend 15 hours or 15 meetings just aligning with stakeholders," but now they're just sharing the Magic Patterns link around to, to cut down that time. And then iterating on that, right? Suddenly everybody can be in the conversation and there's something to, like, tangibly talk about versus just words in a Google Doc. And then the final step, of course, is building it, right? Like idea to production interface faster.

    3. AGAakash Gupta40:46

       Yeah. I think what is key is this new workflow, the time it takes to do that is less, even though it's the same four steps, right? The... There's a lot less back and forth because when we are just working through a PRD and maybe a napkin sketch, a lot was left to the imagination. People had lots of questions. Versus what I find is that when you force yourself as a PM to build the prototype, you actually learn some of the corner cases and edge cases and things that they would've asked you f- earlier, and people can answer a lot of their own questions when they use it. So that's one really important thing where the time is reduced. And then the other really important thing is you can finally actually use this in solution discovery. So many times when you're a PM, you want to do this step, but you can only do it for the biggest and most important features because it required designer time to create that prototype in Figma, then it required user research time to go to them. Now you just skip that designer time in Figma to like 10-minute prompt to Magic Patterns.

    4. ADAlex Danilowicz41:43

       Yeah, exactly. It's, it's, it's pretty incredible. We never actually... When we started the company, we never imagined, like, people using it directly with customers. Like, we... You know, I'm a front-end engineer by trade, and what we were trying to do is, uh, my job, my whole job was, like, taking Figma mock-ups and then implementing them, right? And that was, you know, we're solving our own problem with Magic Patterns. But then I've seen through customer iteration and talking to customers, like, they actually use the link to, to talk to their customers, and I never expected that, right? But it's like, it's just cutting it way down and it's like now the product manager has a direct line to the customer.

    5. AGAakash Gupta42:22

       And it's by far the best way to reduce risk because s- w- it's like over 80% of product features that are built don't hit the metrics that they were trying-

    6. ADAlex Danilowicz42:30

       Hmm

    7. AGAakash Gupta42:30

       ... to go for. But if you take a real prototype, you put that in front of the user, you can check against all of those risks. "Hey, is it actually usable? Hey, is it actually viable for our business? Do they actually understand what to do next? Are they gonna actually finish the flow? Are there any drop-offs?" And I think it's, it's something that now that you have this power as a PM, you should be trying to bring it to as many of the features you build as possible.

    8. ADAlex Danilowicz42:55

       Totally. It's, uh, absolutely a superpower.

    9. AGAakash Gupta43:00

       I wanna end a little

16. 43:02 – 45:50

    Why We Started in 2023

    1. AGAakash Gupta43:02

       bit on you guys. What... You've been doing this since 2023. What made you start this so early before everybody else saw the key trend here?

    2. ADAlex Danilowicz43:14

       Yeah, totally. Well, we had s- my co-founder and I worked as front-end engineers, where all we were doing was just implementing Figma mock-ups. And so we were always hovering around the design tooling space. And, you know, we, we would build a component library editor, we built a, a tool to manage design tokens, and we were pivoting. And one, one day, I just said, "Teddy," the best engineer I know, my co-founder. I said, "Teddy, let's do an internal hackathon, and let's just try to build... Let's try to add AI to our component library editor that we were building at the time." Right? It was like, "How can I use AI to actually edit components?" And this was August of t- uh, 2023. The first line of code, uh, for Magic Patterns was August 2023. And what's crazy is, like, at the time, none of these other tools existed. V0 launched October 2023. And it's funny, at the time, people told us, "Oh my God, V0 launched. Like, you guys are dead. Like, don't even bother." [laughs] And we're like, "No, I think we're onto something here." Um, but although the models sucked at the time. Like, the models were, like, GPT-3.5, which people forget how bad they were. Like, you would prompt, like, a login form, and it was the ugliest login form you've ever seen.

    3. AGAakash Gupta44:33

       [laughs] So did you, did you just h- see that... Did you have the aha moment that, "Okay, it can do it, and the models are gonna get way better, and so this is gonna be a product"? Or how did you get so early to it?

    4. ADAlex Danilowicz44:46

       Yeah. So it was definitely... Look, it was... We had been hovering around the space for a long time, right?

    5. AGAakash Gupta44:52

       Yeah.

    6. ADAlex Danilowicz44:52

       And that's what I think... It was like every iteration was just leading us to, "Oh, what if we added AI to this?" Again, right before this, we were building a component library editor. And so you'll notice how Magic Patterns right now is, like, one of the only tools that has component libraries really baked in as a first-class citizen, and that's because we were approaching it from day one with that problem set, right? How do I prototype with my actual components in production? W- w- you know, we weren't approaching it from a different angle, and I think that's... You can kinda see where every tool approached it from, right? Like Bolt, as an example, they used to be StackBlitz, where they had this crazy web container technology where you could, like, run anything in the browser. That's the angle they approached it from, right? We approached it from the component library angle. Um...

    7. AGAakash Gupta45:39

       Very interesting. So part of it is observing what technology trends are happening in the space you're building your startup in. If you had to give people a roadmap

17. 45:50 – 47:14

    6-Month Roadmap to Expertise

    1. AGAakash Gupta45:50

       to becoming experts in AI prototyping in six months, what would be the roadmap for them?

    2. ADAlex Danilowicz45:57

       Yeah. So the first roadmap would be learning just a little bit about how LLMs work, right? What is a context window? What is context rot? That's, like, another term, right? What are the best prompts? What's, like, really happening under the hood, you know? And with all of these tools that are returning code, right? W- so what does that mean? How is it returning code? What type of code is it returning? Getting a little bit into the technologies under the hood, right? As an example, we use React, right? Look, these are things you don't need to know to be successful, but I notice our power users, they understand the context window. They know a little, tiny little bit about what to prompt specifically, right? Um, so I always highly recommend, um, those things.

    3. AGAakash Gupta46:45

       Love it. Well, PMs, I hope that you will feel more confident using AI prototyping tools. You've seen how both of us use them. They are a huge unlock for your ability to go from 80% failure rate to something like 50% failure rate, and that's gonna mean a huge difference for your success as a PM. Good luck with the tool. Let us know in the comments if you have any questions, and we'll see you in the next one. So if you wanna learn more about

18. 47:14 – 47:50

    Outro

    1. AGAakash Gupta47:14

       how to shift to this way of working, check out our full conversation on Apple or Spotify Podcasts. And if you want the actual documents that we showed, the tools and frameworks and public links, be sure to check out my newsletter post with all of the details. Finally, thank you so much for watching. It would really mean a lot if you could make sure you are subscribed on YouTube, following on Apple or Spotify Podcasts, and leave us a review on those platforms. That really helps grow the podcast and support our work so that we can do bigger and better productions. I'll see you in the next one.

Episode duration: 48:00