How to build prototypes that actually look like your product | Colin Matthews

1. 0:00 – 2:46

   Introduction to Colin Matthews

   1. CVClaire Vo0:00

      Can you show us how you get these prototyping tools to prototype your product?

   2. CMColin Matthews0:04

      So here's our component. All I have to do is click Convert to Component, throw it into my ChatPRD library, and now it's going to import basically all of that styling and structure and regenerate it as, like, a proper component. So you can see the prompt here is basically all of the code from your website.

   3. CVClaire Vo0:20

      You used to have to know how to code or get really good at Figma, and now we have unleashed the product manager with these chat-based prototyping tools. You have this prompt that lets you extract those components out of a screenshot.

   4. CMColin Matthews0:33

      So I'll say, "Create a homepage for Airbnb," and basically assemble a homepage using those components. You want to match your existing design with a screenshot, you can paste that in to start, then you add your new AI feature on top or whatever you want.

   5. CVClaire Vo0:45

      Oh, look at this! It's Airbnb.

   6. CMColin Matthews0:48

      These tools can be used by anyone on the team. Your operations team could prototype something and then send it to you, or customer success could use these tools. There's no limit on who's allowed to have ideas. [upbeat music]

   7. CVClaire Vo1:00

      Welcome back to How I AI. I'm Claire Vo, product leader and AI obsessive, here on a mission to help you build better with these new tools. Yeah, yeah, the word of the year is vibe code, but if I had to pick a close number two, it would be prototype. That's why I'm excited to have on Colin Matthews, who's gonna show product managers and designers how they can take screenshots and turn them into component libraries for your favorite prototyping tool to use, use a Chrome extension to rip your exact code to pull in to integrate with AI tooling, and how to use a fork to bring some sanity to your AI prototypes and designs. Let's get to it. This episode is brought to you by WorkOS. AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. But there's a catch: these tools only work well when they have deep access to company systems. Your copilot needs to see your entire code base. Your chatbot needs to search across internal docs, and for enterprise buyers, that raises serious security concerns. That's why these apps face intense IT scrutiny from day one. To pass, they need secure authentication, access controls, audit logs, the whole suite of enterprise features. Building all that from scratch, it's a massive lift. That's where WorkOS comes in. WorkOS gives you drop-in APIs for enterprise features, so your app can become enterprise-ready and scale upmarket faster. Think of it like Stripe for enterprise features. OpenAI, Perplexity, and Cursor are already using WorkOS to move faster and meet enterprise demands. Join them and hundreds of other industry leaders at workos.com. Start

2. 2:46 – 5:50

   Creating component libraries from screenshots in v0

   1. CVClaire Vo2:46

      building today. Colin, thanks for being here.

   2. CMColin Matthews2:50

      Yeah, super excited to join.

   3. CVClaire Vo2:51

      So one of the things product managers love right now is they are super empowered to prototype. You used to have to know how to code or get really good at Figma, and now we have unleashed the product manager with these kind of chat-based prototyping tools. But one of the problems that I found as somebody who is trying to bring these prototyping tools into a larger company is they're not, at least in my experience, particularly good at replicating your brand, your design system, your patterns. And so you sort of annoy the product managers and engineers first, by doing all this work that no one asked you to do [chuckles] , and then two, you're not giving them assets that match the, the brand and the design system, but you seem to have figured this out. So can you show us how you get these prototyping tools to prototype your product?

   4. CMColin Matthews3:41

      The, the concept here is actually pretty simple. Um, it comes kind of from the design world of having a component library. So you can see here I have kind of a mock-one of Airbnb, and, uh, I'll start by saying that this approach is applicable to any tool, so it's not like a v0 thing or a Bolt thing or anything like that. It's just the idea of basically creating these components first, rather than starting with your views. Uh, so I'll talk a little bit about how I actually go about accomplishing this in v0, and then we'll talk about some other tools that maybe, like, streamline this process a little bit for us. Uh, first things first is I just have a prompt, uh, that I typically use, and I'm happy to share this with, with the audience as well, uh, later on. I have a little prompt library for myself, and, uh, this prompt is, you know, a prompt to create a component library. So I tell the AI model that is tasked with creating this component library based on a screenshot. Using a set of technologies, I kind of outline what the behavior should be and what we want as a result. Uh, sometimes it listens, sometimes it still tries to replicate the view, and so sometimes you really have to push it on, like, "Only create the components. I want the page, uh, to be a list of components. I don't want you to recreate the views," uh, 'cause I think these tools have kind of been, uh, I don't know, pre-trained to, to create the views instead. Uh, and so that's pretty much it. I take this, uh, prompt, and I throw in an initial screenshot, and if I scroll back a little bit here in my chat, you'll see that, uh, a lot of my requests to this particular project are just screenshots in the prompt, "Please continue adding components." [chuckles] And so I very literally go through, and once I kind of have this initial setup, so I have my component library, it starts adding a couple of components, uh, I start just sending in screenshots, uh, one kind of page at a time.

   5. CVClaire Vo5:18

      And for people listening, just to call out kind of what you're seeing here is, it seems like you're taking screenshots from different parts of the app, this example is Airbnb, and you're actually pulling out things like the logo, the search bar, navigation of category items, how ratings work, property cards, so these foundational UX elements that compose this very complex app, and you have this prompt that lets you extract those components out of a screenshot.

   6. CMColin Matthews5:47

      Yeah, that's exactly right. Uh, and there's kind of two

3. 5:50 – 6:31

   Using prompts to extract components from existing products

   1. CMColin Matthews5:50

      main benefits to this. So obviously, right now we don't have, uh, what I'd consider to be a prototype, uh, but what we can do is very easily turn this into a prototype. So we can keep this kind of visual consistency, and not only in our own prototypes, like if I'm doing two different ideas, uh, but also, like, if you're working with me, I can share this component library with you, and now across the team, our prototypes all have a very similar style or visual consistency. Uh, and so I can just run through how to do that. It's, it's pretty simple.

   2. CVClaire Vo6:16

      Yeah.

   3. CMColin Matthews6:16

      Um, we're gonna use this fork feature up in the top right-hand corner, which basically creates a copy of the project.... So it'll import all of the same files that we had in the original, and this allows us to not make any changes to the component library, but still use all those files.

4. 6:31 – 11:36

   Building an Airbnb prototype from component libraries

   1. CMColin Matthews6:31

      And then from here, uh, you know, we basically ask it to build us something. So I'll say, uh, you know, "Create a homepage for Airbnb," and it will take all that existing code that we have, so all of these files that represent our components, and basically assemble a homepage using those components. And if there's something missing, right, like some UI element, um, that it wants to add that doesn't exist in the components, it will create them as needed, but generally speaking, it will just inherit those existing components.

   2. CVClaire Vo7:00

      Got it, and just looking here at the list of components you were able to generate in that prompt, it looks like you have two dozen different components, everything from the logo to what the reserve button looks like, host information, and so you've very- been able to very quickly get the building blocks of Airbnb, and, and matching the brand, matching the UX style, because you've used the screenshot, and now you're taking those different Lego pieces and composing it into something new for, for the product.

   3. CMColin Matthews7:30

      Yeah, exactly. And then we can kind of continue from there, the same way we'd normally would with prototyping, right? So if you, you wanna match your existing design with a screenshot, you can paste that in to start. It'll use all these components, then you add, like, you know, your new AI feature on top or-

   4. CVClaire Vo7:43

      Oh!

   5. CMColin Matthews7:43

      ... whatever you want.

   6. CVClaire Vo7:45

      Look at this. It's Airbnb. [laughing]

   7. CMColin Matthews7:48

      There we go. So yeah, works, works pretty good. Um, so we have the Airbnb logo. We have the search bar that we'd expect. We have all, all, you know, all the various components, um, that, that we're used to, right? And, you know, there are a lot of components that didn't end up getting used here. So, for example, if I ask it to build a detail screen, then it's gonna continue, right, to use the components. So it's selecting the relevant components to use. It's not just gonna import, you know, my thirty components into the homepage, just, just for fun. Uh, lots of these, like the amenities section, the bedroom card, the booking card, these are all things that we need in the listing page, and you can see right at the top here, uh, it's just listing out all of the, the components it's importing for that, uh, detail screen, right?

   8. CVClaire Vo8:30

      Yep. And what I would say is something like Airbnb is a well-known brand, well-known UI, and this is pretty close, but are you aiming for pixel perfect? What are you trying to get when it comes to building this component library?

   9. CMColin Matthews8:44

      Yeah, typically not pixel perfect. It is still a little challenging. You'll notice that, like, some of the icons are not like their p- particular set of icons. The, uh, the images are, are a little bit off, and so, uh, usually it's not exact matches. Um, the goal is typically to represent the product in a way that doesn't make people feel like you're talking about a different topic, right? Like, they want to be able to, to look at it and be like, "Oh, yeah, that's Airbnb, and now you're showing me, you know, the new AI Experiences feature, where it's gonna plan my whole trip for me," right? And so we're focused really on whatever it is you're prototyping, uh, but we just don't want to distract people with a UI that looks nothing like the product.

   10. CVClaire Vo9:21

       Yeah, and if I think about kind of these prototyping tools out of the box, I tell people they're great- they're great wireframing tools in that they tend to come pre-baked with these monochrome, very clean, nice to use, and accessible UI components, but rarely matches the, the unique brand that you have. And so this is almost, like, better than a wireframe. It's not a pixel perfect spec, but it gives you the sense of how the UI might look with your brand attached and some fam- familiar elements.

   11. CMColin Matthews9:53

       Yeah, exactly. So hopefully we can give this a try here. I think we've wrapped up, and if I click on this or perhaps I go to a, um... I didn't set up the routing.

   12. CVClaire Vo10:02

       Oh.

   13. CMColin Matthews10:02

       That's one other small thing. Often have to be very specific, so we can ask it to set up the routing here-

   14. CVClaire Vo10:06

       Yeah

   15. CMColin Matthews10:07

       ... uh, as well, but I'll try just throwing in a number and see if that brings us to, uh, a property. Yeah, so we have to go property and then, uh, page. Let's try that. Property and one.

   16. CVClaire Vo10:18

       Mm-hmm.

   17. CMColin Matthews10:20

       And hopefully we get our listings page.

   18. CVClaire Vo10:22

       Ah.

   19. CMColin Matthews10:22

       So this isn't quite right. Some of this is a little bit off, but we can see we have our booking card component and a lot of the other components, uh, that we have, which make this look almost the same as Airbnb, right? Like, it's pretty close.

   20. CVClaire Vo10:33

       That's amazing. That looks really good, and all those components look very familiar, very consistent. Uh, Airbnb team, look at this. We, we did some- we did some work for you. And, and I think this solves a, a, actually a very big problem for adoption of these tools inside teams, which is teams don't wanna look at, at prototypes that don't look like their own, um, product, and you're showing sort of a third-party product, but obviously this is something that any PM or design team can set up for themselves.

   21. CMColin Matthews11:08

       Yeah, exactly. I, and I agree on the adoption side. Um, the other thing is just, like, if you do a decent job, so you put a little bit of effort into those components, these tools seem to do a good job of stitching them together. So I find that I get many fewer errors because I have this kind of modular structure already. It's already broken down, and really all the code is doing is stitching them together. And so, again, from an onboarding perspective, like, it just feels like a kind of a level up in terms of the product itself, the, the prototyping product.

5. 11:36 – 18:38

   Using the Magic Patterns Chrome extension to extract components directly from websites

   1. CVClaire Vo11:36

      And are there other tools... I mean, this is, was so fast, so it's hard to, it's hard to complain about the process, but, you know, you showed that you had to do some prompting to continue to generate components. So are there other tools that you use to do this kind of work? Is v0 your favorite? How do you think about it?

   2. CMColin Matthews11:54

      Yeah, so there's one other tool that I, uh, I'm currently in love with, which is Magic Patterns. Uh, and, you know, I did work with this team. I did a little bit of advising with them, um, for, for about a month. Um, but, you know, they've been working on this problem for, like, two and a half years. Uh, they're both, uh, the two founders are, are both engineers who are very, like, design forward or design centric, and yeah, they built something really special here, I think. So I'm gonna show you a demo first, and then I'll show you how it works. Um, so you'll notice that in the bottom right-hand corner here, right, it says, "Using ChatPRD." I'm gonna explain what this is in just a minute.

   3. CVClaire Vo12:23

      Uh-oh!

   4. CMColin Matthews12:24

      [chuckles] But, uh, we're gonna start by just saying, let's say, uh, "Create an AI chat that can help me with my PRDs."

   5. CVClaire Vo12:31

      [upbeat music] Oh, no, there's, there's no moats.

   6. CMColin Matthews12:35

      [chuckles] Yeah, for- for- functionally, at least not on the design side. Um, so what it's gonna do here is, uh, follow a very similar structure to what we just went through. You don't see it, but behind the scenes, there's a bunch of components that I have pre-built in order to kind of very similarly, like, inject them into the background here. And I'll, I'll highlight specifically in the UI, where you see that happening, but it's gonna assemble those components, and again, add kind of anything else it needs in order to, uh, make this work. So you'll see, it is actually installing these components from its own kind of repository of, of code, and then it's creating a new component called chat interface that kind of wraps everything up together.

   7. CVClaire Vo13:15

      Were these components created in a similar fashion to what we saw before with screenshots, or they can c- created in a different way?

   8. CMColin Matthews13:21

      Yeah, created in a different way, and I'll say, probably, like, a more convenient way, and I'll definitely show you how to do that. Um, so we'll give this one second to wrap up here, and then we'll be able to hopefully see something similar to, um, ChatPRD. And yeah, I mean, the, the-- you'll see, like, the length of kind of how far you can go to make it look like your product is, is pretty far.

   9. CVClaire Vo13:43

      I mean, that's generally her. I will say, my colors are a little bit more subtle-

   10. CMColin Matthews13:50

       Sure

   11. CVClaire Vo13:50

       ... on some of the pieces, but you got-

   12. CMColin Matthews13:52

       Yeah

   13. CVClaire Vo13:52

       ... you got it pretty, pretty right.

   14. CMColin Matthews13:54

       Yeah. So there's-- I don't know why this picture o- of this man here, [chuckles] but that's, that's okay. Um, so yeah, just to go over really quick, we, uh, we-- you can see here we have a sidebar component, we have a chat message component, message input options menu, and so on. So basically, all of these predefined, uh, UI elements that we wanna work with. Um, well, I'll just highlight really quick, like, we can just get rid of this by clicking on here and clicking delete, which is a nice little feature.

   15. CVClaire Vo14:17

       Oh, but I like him so much. [chuckles]

   16. CMColin Matthews14:18

       [chuckles]

   17. CVClaire Vo14:19

       We're deleting a random icon of a man that has made it into this, this prototype.

   18. CMColin Matthews14:24

       Yeah, or trying to get rid of him anyway.

   19. CVClaire Vo14:25

       Yeah.

   20. CMColin Matthews14:25

       He's, he's stubborn, apparently. But, um, but yeah, so this is the, the gist, and obviously, from here, we continue as, as normal in terms of the prototyping.

   21. CVClaire Vo14:33

       [upbeat music] This episode is brought to you by Notion. Notion is now your do-everything AI tool for work. With new AI meeting notes, enterprise search, and research mode, everyone on your team gets a note-taker, researcher, doc drafter, brainstormer. Your new AI team is here, right where your team already works. I've been a longtime Notion user, and have been using the new Notion AI features for the last few weeks. I can't imagine working without them. AI meeting notes are a game changer. The summaries are accurate, and extracting action items is super useful. For stand-ups, team meetings, one-on-ones, customer interviews, and, yes, podcast prep, Notion's AI meeting notes are now an essential part of my team's workflow. The fastest-growing companies like OpenAI, Ramp, Vercel, and Cursor all use Notion to get more done. Try all of Notion's new AI features for free by signing up with your work email at notion.com/howiai.

   22. CMColin Matthews15:39

       So let's talk a little bit about, like, how I actually put this together. The process is relatively straightforward, so let's actually head over to ChatPRD, and I'll just log in really quick. And, you know, I'm on the, on the homepage here, and let's say I wanna head over to, um, Documents, and I wanna kinda take a look at this table here, or maybe I'll do Chat so we have some content in it. So what I can do is use the Magic Patterns Chrome extension, select the UI element-

   23. CVClaire Vo16:05

       No!

   24. CMColin Matthews16:05

       ... click it, and just pull it out.

   25. CVClaire Vo16:08

       For those that are listening, I just made my patented scream face, uh, on screen because that is quite clever.

   26. CMColin Matthews16:17

       Yeah. So here's our component. All I have to do is click Convert to Component, throw it into my ChatPRD library of components, and now it's going to import basically all of that styling and structure and regenerate it as, like, a proper component. So you can see the prompt here is basically all of the code from your website, the HTML.

   27. CVClaire Vo16:37

       Yep.

   28. CMColin Matthews16:37

       And then rebuild it into a, a real component, uh, that can, you know, have data inserted into it 'cause it's a table, and then we can reuse that as much as we want. So that's, that's, like, the workflow, right, is go to your website, click the button in the top right corner, start extracting stuff, build out your component library, and then reassemble your Legos however you want.

   29. CVClaire Vo16:56

       Yeah, I'm thinking about, you know, how teams are trying to bite this off today, which is they're like: "Pretty please, design engineer or front-end engineer, can you give me this code or create all these components and put them in a way that my AI can extract them?" And no front-end engineer wants to go do that, that work to extract these components, extract the functionality out of them, 'cause I found that's often part of the challenge with importing components into prototyping tools is the components often contain logic that the prototype doesn't, and you wanna, like, pull all that out. You really just want the styling and visualization. And so product managers and designers are left to sort of fend for themselves in creating, not pixel perfect, but approximate code. And so this is a really interesting flow I haven't ever seen before, where you can just browser plug-in, uh, copy and, you know, select, and, and import some code, and then again, use AI to reassemble it.

   30. CMColin Matthews17:51

       Yeah, exactly. So we have our component here. Uh, we'll go ahead and publish it, and this gets into, like, a- another section of, uh, maybe a little bit more advanced of, like, versioning. So, um, let's go back to this prior example here and take a look at the code. We can actually see that we have these component imports. If we wanted to, we could put more effort into these components, continue to change them over time, and then just click Upgrade to latest to get the new component in the old things that we prototyped. So I would argue, like, the further down this path you start to go, which is turning everything into individual components and managing them that way, kind of like the more leverage you get, right? Uh, you can even put someone in charge of, like, making sure that these components are really high-visual fidelity.... and you don't lose that work. It's not, like, stuck in one prototype, right? It's, it's an asset your team

6. 18:38 – 20:15

   The importance of improving components rather than the composed application

   1. CMColin Matthews18:38

      can use.

   2. CVClaire Vo18:38

      Yeah, I heard somebody recently say with more text-based work, they never think about improving the output, they always think about improving the prompt, and this is the kind of prototyping version of it. It's like, don't think about improving the composed application, actually think about improving the, the components, and then the composed application can follow downstream from that. So it's a really interesting way to think about what are the primitives of, of prototypes, and how you can iterate on both the, the primitive and the, and the composition.

   3. CMColin Matthews19:13

      Right. And then what we end up with is a state where the prompting doesn't actually matter as much, right? Like, we can start to move away from if you say, like, the right incantation of magic words, you get, you get a great output, and if you don't, uh, you know, it's just a mess. Because we have these primitives that are getting assembled, and so the AI has less heavy lifting to do because we've done some of that pre-work.

   4. CVClaire Vo19:36

      Well, and, you know, we're all good citizens, and I'm sure people aren't out there using this Chrome extension to copy other people's components, and yet, if there is [chuckles] a design system that you really- that really inspires you and you don't know how to recreate it, you know, you want something that looks like this or, or works like this, it's a new way to kinda clip different UX ex- ins- inspiration. And hopefully, I hope people, instead of creating, you know, a carbon copy, create something that is your own, that meets your own user needs, but that can take inspiration from other, other sites and interaction patterns.

   5. CMColin Matthews20:12

      Yeah, exactly. And then, yeah, I just kind of have one

7. 20:15 – 25:05

   Using forks and versions for iterative prototyping

   1. CMColin Matthews20:15

      last thing to show you. So we talked a lot about, um, components, and I showed you how forking works with the component library over in v0, but we have a very similar function here in Magic Patterns. And so we're gonna talk a little bit more about, like, the overall idea of using forks, uh, for, for prototyping. So I'm gonna start actually by adding this to a project. Uh, this again is a feature that's somewhat unique, so, uh, we'll call this one, uh, ChatPRD, where it basically puts your chat on a visual canvas, and so it makes it easier for you to see more than one chat at the same time. So you can see I have now this chat here, and if I wanna hop back into it, I can just click on this little kinda code icon here, a little small, but hop back in there. And so let's say that this isn't quite the best baseline, but let's say that this was my baseline. I put a little bit of effort into it, and, like, this is a good representation of the product as it is today. Then what I can do is I can just create a copy, right? And now I've created a copy that has all my components, and I'm not starting from scratch again. So again, we have the visual consistency. I can hop into the copy, and I can start to, you know, prompt on top of this one. So I can say, you know, like, "Implement a functional chat," 'cause we're missing that right now, and start from this point. So again, as a kinda... As a team, what you can have is your set of baseline prototypes, which is a starting point assembled from your components, and then when you want to prototype anything, it turns out that your prompting goes down to, like, one or two messages, right? Because you're already starting from such a great place.

   2. CVClaire Vo21:44

      Well, and for the designers listening, that visual canvas that the prototype was on looks very similar to Figma in that you have this open board, you have a frame that, that encapsulates the prototype and a little screenshot of the prototype, and then you really can duplicate not just the screenshot, the actual full chat, full functionality, et cetera, and fork it. Um, you know, create a cr- create a little branch off of it, fork it, and continue to iterate there, and then I'm presuming you could bop back and see those two different versions side by side.

   3. CMColin Matthews22:18

      Yeah, exactly. So I'll try to get this working here. We'll say, "Have the n- new, the new chat button route to our, uh, functional chat." We'll see if we can get something kind of working as a demo. But yeah, exactly right. So at any point in time, we could just head back over to the project, and we're gonna have those two- kinda two options available. And so what I do, and I'll, I'll show you in just a minute, is I actually label them. I label the first one as a baseline, and then I label the following ones as, like, var 1, var 2, var 3, with, uh, you know, another kind of, uh, description beside it. And so I can say, like, "Okay, for this feature that I'm interested in, like, here's maybe, like, one or two ways to explore this feature." Uh, and it makes it extremely easy to kinda go down that path of exploration.

   4. CVClaire Vo22:59

      And again, I think designers in particular are very used to the... I was a designer back in the day when we did things truly in files, no Figma, and you had, like, design v1, v2, final, this one, copy final, really this one. [chuckles]

   5. CMColin Matthews23:14

      Yeah.

   6. CVClaire Vo23:14

      So you're just- you're giving me a little throwback to, to how iterative design used to work, uh, back in the day.

   7. CMColin Matthews23:21

      Yeah, right. So yeah, you can see we have our, our two side by side, and if I was to hop over to my baseline, I would just label it like that, just say baseline. And then, you know, this would be like, um, whatever we wanted, so var 1 and then whatever, let's say, functional chat, uh, and so on. And so you can continue, continue this pattern kind of as much as you want, um, you know, and have whatever sets of baseline prototypes you wanna start from.

   8. CVClaire Vo23:44

      Yeah, and just, you know, maybe a tip for folks coming to some of these AI tools, whether you're a product manager or a designer, an engineer, some concepts you wanna think about understanding and building into your workflow are concepts of, like, checkpoints, versions, and forks. So when you've got something that works, the number one mistake is to keep vibe coding without a checkpoint or a commit or a version, [chuckles] and then it's very hard to wind yourself back to what you like. So anytime you think you've found something that you like, make a checkpoint, make a copy. When you want to explore but aren't sure where that exploration's gonna take you, fork it so you don't break, break your kinda main thing. And then if you wanna share a baseline, again, I like this concept of, like, a baseline chat, a baseline prompt, a baseline prototype that you can share with your team, and they can iterate and explore without breaking-... your stuff as well.

   9. CMColin Matthews24:39

      Yeah, exactly. And, and it kind of goes back again to that, like, onboarding experience, 'cause I know some people, like, they open up Bolt or v0, they type something in, and they just get error after error after error, right? And it's, like, not the best experience for, for your team. And so instead, you're kind of equipping them to actually be successful with the tool without having to try to figure it out themselves, right? Like, th- it's gonna look like the product that you're giving them a set of UI elements that they're familiar with, and then they ask, like, "Hey, could you add this thing?" And it just works.

8. 25:05 – 26:54

   Managing team dynamics when introducing AI prototyping

   1. CVClaire Vo25:05

      So you've shown us you can replicate Airbnb, very complex, beautiful consumer user experience. You can replicate the impeccable ChatPRD, at least to some fidelity here. You can iterate. You've taught us what a component is. You know, and this is all coming from you from a product background. From an organization perspective, I have a, I have a couple questions for you. You've shown us how to do this technically. How do you pull this off in a team with egos, and roles, and responsibilities? How do you approach that part?

   2. CMColin Matthews25:37

      Well, if there's any designers listening, uh, you'll probably appreciate this. I think it just starts with empathy, to be honest. So, uh, I've had this question come up a lot, and usually my recommendation is to not go and prototype, like, a whole new feature and then hand it to your designer and be like, "Hey, could you clean this up for me? Like, I already, you know, kind of did the work." Um, and usually it starts with, like, the understanding that these tools can be used by anyone on the team. Uh, it can even be used by, by people outside of product. Like, your operations team could prototype something and send it to you and be like, "Hey, this is what I thought would be useful for, like, our internal tool." Or customer success could use these tools to talk to you a little bit about what this customer thought and, you know, uh, do some live prototyping. Like, there's no limit on who's allowed to have ideas. Uh, and then from there, like, kind of bringing the whole team along to make sure that, you know, the designer understands that, you know, this isn't replacing their role, uh, that, you know, it's basically just a way to communicate internally. Uh, same with engineering. Like, you do have the ability to sync this code to GitHub if you want, uh, but it's just a starting point. If they want to use it, they can. If it's not useful, then they shouldn't. And so I think it's really more about, like, enabling people to do their jobs faster, better, uh, you know, be a little bit more inclusive with the, the set of people who can actually, like, communicate their ideas effectively, uh, and hopefully just, like, get to the right outcome earlier on.

9. 26:54 – 32:07

   Final thoughts

   1. CVClaire Vo26:54

      And my second question is, you are a very structured prototyper here, probably one of the most structured one I've seen, but do you ever let yourself ride the wave of vibe coding and let-

   2. CMColin Matthews27:07

      Sure

   3. CVClaire Vo27:07

      ... the components take you where they will? Where do you decide to go with the exact structure, and where do you decide to be a little bit more freeform?

   4. CMColin Matthews27:14

      In the prompting techniques, uh, no, I'm very structured in how I approach it. Um, like, even in Cursor, you know, I have my Cursor rules files and all that stuff. Like, I have everything set up the way that I like, um, and very, like, clean code structures. 'Cause I find that when I don't do it that way, I spend more time debugging than, like, kind of going down the path that I want to go down. Uh, in terms of actual features, definitely. Like, from a, more of, like, a product perspective and less of an implementation perspective, I will go and, like, test an idea and see if it works, and if it doesn't work, then I kind of give up. Um, so, like, one idea I had a while back was, uh, kind of like a wrapper around prototypes where you could collect analytics data, kind of like a, like PostHog or, or Amplitude, but specifically for prototypes. And so I built that in Cursor. I tried it out. I, like, tested it with a few folks. It didn't really resonate, and so, so I threw it away. And so, like, that's the way I think I explore more, less so on the g- actual prompting side.

   5. CVClaire Vo28:10

      Got it. Okay, so you are... You're- I mean, I can tell you've got your Notion workbook of prompts. You've got your components. You're a man that likes structure. I am very different. I wanna just go where the LLM takes me, ride the wave of the tokens, generate what we will. Um, okay, and then my final question, love to ask everybody this. You're structured, so you probably don't have this problem, but when AI does not listen, when it will not delete this dude off of my prototype, who- he's still there, sitting on the, the, the fake ChatPRD prototype, what's your prompting tactic? Do you have, like, a mean prompt in your prompt library that you pull out of your pocket?

   6. CMColin Matthews28:54

      No, unfortunately not. I am actually very nice to the AI, uh, just in case. Um, no, so usually it is, uh, like asking it to explain what's happening. So actually, we'll, we'll go through a quick example here. Uh, so this is my most common prompt, is, "Explain to me why this is happening. Don't write any code." Um, literally just getting the AI to first tell you what's happening and then secondly, implementing a solution, I have found is the most effective way to, you know, basically get it to behave. Uh, so I'll do that here. I'll kind of click on our friend once again, uh, add into the chat, and say, uh, "I tried to delete this, but it didn't work. Can you explain why?" And then, "Don't code." And again, like, I use this for errors, so if there's an error, I copy/paste the error, say, "Can you explain what's going on here? Don't write any code." Um, any type of... Like, literally, any type of problem that I come up against, uh, this is the same pattern that I use. And I think it makes sense because, like, we know that the planning step is important. Like, when you're prompting, it's kind of just continuing that pattern while you're talking, right? So making sure you have a plan while you're, you know, making your changes.

   7. CVClaire Vo30:01

      Yeah, I use a very similar prompt when dealing with errors, where I say, "Explain why this error is happening, and give me your top three hypotheses on why in priority order." Because... And, and don't code. I also say-

   8. CMColin Matthews30:14

      Sure

   9. CVClaire Vo30:14

      ... "And don't code." Um, these, these AI agents are very eager to write code, so you have to often instruct it not to. That's a, that's a really great prompting technique. So again, you probably- your response to it not listening is another well-structured, well-thought-out-

   10. CMColin Matthews30:28

       [chuckles] Yeah, that's right

   11. CVClaire Vo30:29

       ... prompt.

   12. CMColin Matthews30:29

       Yeah.

   13. CVClaire Vo30:29

       Well, Colin, this has been very fun, super useful. I'm gonna take this into my team, and we're gonna go build out a big component library that we can use to prototype. So where can our listeners find us, and how can we be helpful to you?

   14. CMColin Matthews30:43

       Yeah, so, uh, a couple places. Um, one, I am teaching on Maven, uh, so if you wanna take a course on this topic, I kind of go through, you know, all the tips and tricks on, on this, as well as getting a little bit more technical. I think that's one of the things that, uh, differentiates folks and their skill here, is actually being able to communicate to the LLM effectively, which requires a little bit of technical knowledge. Uh, so that's the course over on Maven, AI prototyping for PMs. And then, uh, recently, I've actually kind of stood up, uh, offering directly for teams that wanna start going down this path. Um, so over at, uh, teams.techforproduct.com, I have, like, a one-day, six-hour course. Uh, you can bring your whole team, and then you'll end up with those assets that we talked about. So you'll leave kind of with a good idea about who's doing what, uh, the component libraries, and then your baseline prototypes, kind of hit the ground running. So, uh, yeah, and then finally, you know, LinkedIn, Substack, if you were just looking for more casual stuff.

   15. CVClaire Vo31:34

       Great. Well, Colin, thanks for showing all this. It's awesome.

   16. CMColin Matthews31:37

       Yeah, no problem. Happy to be here.

   17. CVClaire Vo31:38

       [upbeat music] Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube, or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show. You can see all our episodes and learn more about the show at howiaipod.com. See you next time.

Episode duration: 32:07