Owen Williams: My dream was I want something that's like Vzero but fast. We have all of these tools internally that are really cool. We can connect different data sources together. Why can I not just do this in my browser? Like why do I need Cursor?

Claire Vemp: You're seeing a lot of designers use it but maybe even more PMs.

Owen Williams: I started seeing PMs use it and got a little nervous. Oh my goodness. PMs designing. It's like what's going to happen? is that how painful is it to prototype a data dashboard with all its interactions, all its filters, all its states, different states, zero data, a bunch of data. It is nearly impossible to do that in Figma.

Claire Vemp: It's sort of been this very transformative thing because all of a sudden I'm sitting in these design reviews and it's so convincing that I'm like, is this the real product or am I looking at something fake?

Claire Vemp: Welcome back to How I AI. I'm Claire Vemp, product leader and AI obsessive here on a mission to help you build better with these new tools. Today I have Owen Williams, design manager at Stripe, and he's going to show us how he vibecoded his own vibe coding platform for their internal design prototypes. It is one of the most impressive internal tools I have seen and such an awesome way to rethink how your product builds products with tools. Let's get to it. This episode is brought to you by Celiggo. Every company today wants AI to improve how work gets done. The fastest way is building it directly into everyday business processes, automating employee onboarding, keeping customer data accurate, managing orders and inventory, or resolving finance and operations issues. When AI lives inside the flow of work, it can update records, trigger approvals, route work, and kick off the next step across systems. That's how teams operationalize AI and deliver measurable results. Celigo makes this possible. And now with Celigo Aura, it's never been easier. Celiggo Aura gives you access to the entire platform through natural language, connecting your systems and turning intent into action. All of it under your control. Companies like Data Bricks, PayPal, and Ollipop rely on Celigo to run critical business operations at scale. Ready to operationalize AI? Visit celigo.com/howiAI. That's celi g.comhow i aai. Oh, and thanks for joining how I AI.

Owen Williams: Hey, I'm happy to be here.

Claire Vemp: I know that you're stepping away for a few minutes from parental leave with your second. So, I appreciate you giving us the time. And what I love about what you're going to show us is how to we were joking before we started recording. How to get prototypes that don't look like generic Tailwind indigo slop. So tell me about tell me the problem you're facing and kind of how you came to this solution that you came to.

Owen Williams: You know, I'm a design manager. So I'm I'm sitting in a lot of design reviews and all of the designers at Stripe right now are like playing with these tools. They're exploring. They're like, you know, trying I think, you know, Vzero is pretty popular internally. We have a bunch of other them uh different tools and like they're sitting there like trying to build the Stripe experience in these tools and kind of like what you're saying, they end up with this like weird uncanny valley like Tailwind we call um like the Indigo like blur internally. So like blural slop is what I would call them. And like they do a really really good job but they don't know about your design system, right? So,

Claire Vemp: y

Owen Williams: I'm in these design reviews and I'm like, why does the dashboard look weird? Like, it's very immersionbreaking. Like the nav is odd or like the fonts are off. And no, no foul to these designers. Like I I get that. Um, but I was kind of thinking like we have a design system like this thing is very predictable. These tools should know about it and then we can like construct the dashboard from those bu building blocks like pretty reliably. Um, so I basically ended up starting on this like I would say it's been maybe 18 months now um rabbit hole like all of these things um building a prototyping tool internally that we call ProtoDash and um a large number of designers are using it and then actually the thing that surprises me is it's actually more PMs than designers these days um which is really interesting and I can talk about that a bit more later and what it does is it makes it basically like really easy to get a dashboard like environment like a very realistic dashboard um without having to think about it much. Um so what it is is it's basically like a bundle of Cursor rules. It's you know a bunch of React that like sets up the navigation and the like chrome and some routing to like let you have the prototype in the frame and all of those things mean you can like jump into Cursor or Claw Code or whatever and you can be like I want to build a dashboard page with this this and this and it like knows how to do a pretty good job. I would say like it gets you there like 90% of the way most of the time. Don't get me wrong, it still makes mistakes. It will make slob, but it gets you, you know, 90% and like, you know, designers, that's what they're here for. Like that they are high craft. They can like then refine it uh from there. And it's been really interesting to see what people have built. Like I can show you walk you through a couple of examples, but it's it's sort of been this like very transformative thing because all of a sudden I'm sitting in these design reviews and like it it's so convincing that I'm like is this the real product or am I looking at like something fake? And so that's kind of a cool change to see happening.

Claire Vemp: I'm curious if you just walk us through how who's who who built this? Did you build this? How did you build it? What are the components? And I know you had like V1 and V2. So maybe you can walk us through through that.

Owen Williams: Maybe like some context on me actually. So I uh I lead the like developer sort of space at Stripe and my background is actually engine engineering based and I actually switched in the wrong direction. I feel like for a design manager you feel like a designer usually people go the other way. Um I always had like an engineering slant to my roles and I always kind of considered it a superpower. So when I would think about like my teams, I actually loved hiring kind of technical designers I would call it where they understood enough often in the interviews. I'm like do you feel like you can uh you know know enough terminal to be dangerous? This is preAI just to be clear. Um and that was something that always got me excited is like even if you are I don't know like not able to code but able to understand enough to feel confident like messing around and experimenting. It always gave designers superpowers.

Owen Williams: The thing I'll say that was always frustrating is like that I don't know what the right word for this would be like the jump to that technical level is really hard like for a lot of designers like I don't know if you didn't steep yourself in web development it's like oh my god this is npm like what is vit what is this thing blah blah blah and so you know I get why a lot of people didn't know how now AI totally changed that right because now you can just like jump into Cursor core code, whatever, and just be like, how does git work? And that's actually been the biggest mindset shift I've had to like give designers is um a not being afraid of the terminal anymore, and b if you're like, I need to use npm, you can just ask like you don't even need to know the commands. And so, yeah, with my engineering background, I was sort of looking at the problem in a very pragmatic way where I was like, how can I lower the barrier to entry on this? like how can I make it that uh a designer maybe only needs to know about mpm rundev and that's it and it just works like they don't have to know about React or React Router or any of these things um so the first version was a very basic like uh you know it's a it's a router it's a bunch of our design system components so our design system is called Sale and then it was a MCP integration with Sale so there's an MCP server internally for that and then just like a bundle of rules that I'll flash up really quickly. So

Owen Williams: yeah, when you when you would jump to Cursor, there would be a bunch of bundled rules that basically taught Cursor how to use the project and like what to do in what order. So like if a user pastes a Figma link, you should, you know, check the Sale MCP server before writing any code. And then like I don't know, there's some common like pain points and things it should avoid, what it should do if the MCP server is unavailable. LLMs are so helpful. they will just like imagine the entire design system without telling you when it's not there. So like all of these things, you know, I'd like sort of whittleled down through my various um experiments. And this means that like a a designer or a PM or anybody can very quickly like open this folder in Cursor and just be like help me make a prototype that shows this and it just comes out like beautiful and to the quality bar that we expect. Like Stripe has a really high quality bar for all of our experiences. And that's the other thing. It's like you're going to these reviews with a real prototype and it looks bad. It it's just like surely we can do better. And so that's what this sort of like helps with.

Claire Vemp: But looking at this, this is something that people are running locally. So they're pulling this, they're running it locally, they're making the changes, and then in the meeting, are they just presenting sort of off their local machine?

Owen Williams: So it's a mix actually. What's really cool is um so initially we had like it was running locally. You would just like run npm run whatever but we have devbox infrastructure. I think you talked to the minion folks previously so you probably heard about that. Um

Claire Vemp: and so like dev boxes at a high level just let you just get a server on the internet in a certain state internally.

Owen Williams: Um so now designers can just go to a like URL. It's like go/protodash and it just creates one. It's like ready to go in two minutes and all they have to do is like just connect to it in Cursor and so it looks like it's running locally. It's not. It's already configured. They didn't even have to run npm. That's actually like my favorite magic trick is it just works. Um and so those like the benefit of those is you get a URL. And so you can be in the design review and be like just go to this and like can I just say being in a design review where I can click things is my favorite. Like I I love design reviews. I'm a very like nosy person who loves seeing what people are working on those kinds of things. But like for maybe the last five years it's been like drowning in presentations, right? Like show me a JPEG in your Figma, like all of these things. And it's like how magic is it when somebody comes and they're like, "Okay, I'm not going to screen share. Here's my prototype. Here's the context. Let's just like go through it and give feedback." And so being able to do that has been like the probably my number one goal is like I never want to see a slideshow again. It's like demos not memos is something that uh Dan Nelson, another design leader at Stripe, talks about a lot and I'm like this is the way that we can do that. So

Claire Vemp: what I think is interesting about this, especially for a product like Stripe, is it's such a data and visualizationheavy product and I used to tell this to my design team at Launch Darkly, you know, two years ago when AI and this kind of prototyping was really coming out. I said, how painful is it to prototype a data dashboard with all its interactions, all its filters, all its states, different states, zero data, a bunch of data.

Owen Williams: It is imp nearly impossible to do that in Figma

Claire Vemp: and we were building a lot of dashboards and what a great kind of experience as a designer to, you know, I'm looking at your your dashboard if you don't mind pulling it up.

Owen Williams: Yeah,

Claire Vemp: this is a company that's not doing too bad. you know, we love that almost half a million dollars in gross volume,

Owen Williams: but what if you want the zero state? What if you want the, you know, the company with

Claire Vemp: one transaction a day?

Owen Williams: Exactly. And and so I think the ability to prototype with data in code as a designer both lets you make more interesting prototypes and lets you push the edges of the underlying data and use cases to make it more practical. Well, that's it. And like before it was like even just I don't know the amount of effort it would be to get all the various states into a Figma file was just like unhinged. Even like if you think about internationalization is one of them. That's my favorite as well.

Claire Vemp: It's like oh it's in Dutch now. Okay. It looks terrible like cuz it's all long and stuff.

Owen Williams: Or the business model is the one that I'm obsessed with. I can actually flash this one up really quickly where you know you can just very quickly be like I want to see a startup in an enterprise and it just it just does it.

Claire Vemp: I love that.

Owen Williams: You know you could add an additional one here that's like messy data and it will just do it. And I think that's the transformative thing is like show me how real users will see this is something that was really hard until recently.

Claire Vemp: Well, and I don't want to show my age, but I like to tell people when I used to have to walk uphill both ways to my CSS, like,

Owen Williams: right,

Claire Vemp: there used to be a cottage industry of um Lauram Ipsum text generators

Owen Williams: just for putting even just fake copy in.

Claire Vemp: This is like when I was making web designs in Photoshop. So right you know and and I just

Owen Williams: those were the days

Claire Vemp: you do not know designers out there please if you have not experienced this you do not know how spoiled you are that you can

Owen Williams: I have not seen Lauram Ipsum in a while I'm

Claire Vemp: a long time I used to be a Lauram Ipsum I use hipster IPS that was like when finally ended

Claire Vemp: um but I used to have to paste that stuff in you would do dollar dollar prices you would be like10 xxx because you didn't know what the fake dollar amount is you to put in a dashboard. You were dragging and copying the same components. And I just think now with this this transformation in terms of live prototyping, you can design more interesting things and, you know, have them touch reality a little sooner, which is what we all want.

Owen Williams: Yeah. And also like the multi-step flow is the other thing, right? It's like often you're just showing like there's one JPEG and maybe a second one where it's like here's this and this everything's great, but like what are the error states? Like what other things can you do on the page? Right? Like I'm in all these design reviews where they're like what does that button do? and they're like just there and that's that's okay, but it's also like now we can actually build stuff that's just really like well thought through and like everything that's there is very intentional um and like shows you the path as well, right? Like the amount of work you have to do in a Figma file often to like

Owen Williams: I don't know if if I imagine something like a workflow builder, it's like you have to get the landing page and then like the job and the workflow builder and then the edit. It's like actually I only wanted to show the end bit but you need the context. Well, now we can wire up a prototype and like reuse the bits once you've got them, by the way, because it's all in production. It mostly looks the same. Then you can like play with it and like really sequence it all out at once, which is really cool.

Claire Vemp: Well, and let's get back to the prototype builder. So, you built this, you know, React app that could run either locally or in these dev boxes, but then you decided to take it a step further.

Owen Williams: Yeah. So I think like the biggest challenge that I've seen so like just to just to level with you is we have a like very large monor repo and it's like getting that running on your laptop is a little fiddly and like Cursor and Claw Code and all of these tools make that a lot easier but it's like a little bit slow. It's like a bit annoying and like you alluded to earlier you also like I don't know you you can't share the URL very easily like those kinds of things. Can I share one other thing? I I might hypothesize, which is when you're a software engineer in a in a in a company, you get issued the like

Claire Vemp: 18inch MacBook Pro behemoth that can run anything locally. And designers don't always get the machine. And so I think that's another barrier.

Owen Williams: Yeah, that's something I can I just say uh we thankfully got right. Like I think when this started happening a year and a half ago, um designers started being considered like engineers in many ways internally and uh I as far as I remember I believe all designers are now getting like the meaty MacBook Pro. Like I think I'm on like a 64 gig machine right now which is like I can't say that I've had that at any other job. They're like, "Oh, you open Figma, you can have 10 gigs of RAM." Like

Claire Vemp: yeah, good luck.

Owen Williams: I I love it. I call mine um big boy.

Claire Vemp: Yeah. And I tell my

Owen Williams: the chunk book is

Claire Vemp: yeah chunk I like can you go grab me big boy and

Owen Williams: yeah top okay so so um lots of challenges with running you know big monor repo locally I so what did you what did you do to solve that problem

Owen Williams: so what I wanted like my dream was I want something that's like Vzero but for us like a really opinionated workflow for like building Stripebased prototypes and I know that's like very specific, but it's like, you know, we have all of these tools internally that are really cool. Um, you know, we can connect different data sources together. Why can I not just do this in my browser? Like, why do I need Cursor? And so, the the framework I approached it with was like, okay, I have this really cool like React uh site emulator, I guess, or like prototyping tool. Could I wrap that somehow in a way where it's like you can still use Cursor if you want to? like those those folks are really good at like LLM training and like giving you all the options and blah blah blah, but like now I want to be able to layer on a thing where you can just build it in your browser. So you don't have to go into you don't need any app. I just want to like go on the web and be like I want to try out this thing. Um and so what I ended up building was this um sort of extra layer called ProtoDash Studio. And so this is like almost 100% used in dev boxes. So you go to like a URL, it creates it. It takes about like a minute and then you get to go to your devbox URL. I'm just running it locally so that like the live demo gods appease us today. But when you go to it, you basically whenever you spin it up, you see the things that you're working on. So you have your prototypes. I I have a fun one here where you get uh fun ways to enter like the Stripe test card number uh in weird ways. And then you can also see like the vibe prototyping feed cuz I think the other thing that's really cool about like the way that this is all going is one you can take inspiration from other people right you can see like what they're building and their approach to prototyping like the amount of stuff I've seen I'll show you a real prototype in a minute um uh that a bunch of designers built like I think they replicated the entire functionality of our Radar product the fraud fraud detection product in ProtoDash and then they used that to like emulate different business models like you say but also like try new ideas and like they have this really cool baseline but the other thing you can do is you can like remix anybody's prototype at any time right like I think that's something that's great about like Figma except with this you can take that like code and just like start playing with their thing really easily which I think is really cool so the really like the compelling thing in here was not so much the home screen I just wanted to talk about it is you can come in here now so You know, imagine we have this like payments analytics prototype instead of having to like go and open my Cursor window and like start prompting here and like hope that it's going to be set up now. You can just open the embedded LOM and you can just keep sort of start working there. So you can say I want to add a new variant of my prototype where there chat a line chat. You didn't have to like do anything on your machine. and you just went to a URL and you asked for it. Um, and it will go ahead and build it entirely in browser. Um, which is really cool.

Claire Vemp: Quick quick question. People are going to ask this.

Claire Vemp: How did you build this? Like what is the give me like some like little sniff components of how you built this?

Owen Williams: Um, like yelling at Claw Code for 18 months or something.

Claire Vemp: Okay, great. There you go.

Owen Williams: Um, it's a mixture like and I don't I I definitely handwrote some code but not much. Like I think having the engineering background made it work, right? Because I know what I need to achieve and like how to get the architecture right.

Owen Williams: But largely it was just like okay, I'm just going to keep going on this and see how far I can get. Um and it beca this started as a like could I make something that lets me do this and then became a oh my gosh it works. I'm just going to keep adding features. Um, and what's really cool actually about building a tool like this for like internal use is it doesn't have to be like production grade, you know what I mean? Like if it breaks, it's kind of fine. It doesn't need to worry about like login. Like there's, you know, it's just running on your dev box. So that's fine. And so I have a lot more leeway maybe than like if you were shipping to production. Um, but it just it was just a a matter of like trying new things and like exploring and just seeing how far I could get. And so let's see. It's It's working on adding a vera in here, so it should show up pretty quickly. And what's I think like been really cool for me to see is like seeing the different types of users that have shown up in here. Oh, it's going to self test now.

Claire Vemp: That's exciting.

Owen Williams: This is exciting.

Owen Williams: Yeah, it uh so usually if it was on a dev box, you wouldn't see that cuz you don't actually connect to the dev box, but it's kind of fun to watch it drive.

Claire Vemp: Yep.

Owen Williams: So, it's taking a screenshot and checking its work, which I really love. Um, so this is like a really cool demo.

Claire Vemp: You really let Claw Code make no mistakes.

Owen Williams: Yeah.

Owen Williams: Well, pretty much like if you think about I said at the top I was like Stripe really cares about like quality and our quality bar is really high. I think like having a really opinionated way to build these prototypes means that we can do this. So like if I

Claire Vemp: send it a Figma link, I'm like implement this make no mistakes. Yeah.

Owen Williams: Um, it's able to like at least see the prototype, like look at the browser console, like take screenshots and like iterate on it to the point where it gets it pretty good and can ask for feedback. And so now it finished. We have this variant bar here. So you can like try different things. Um, so here's my line chart demo. Tada. It like went and swapped it out. And like I think it's pretty cool to be able to very quickly do that from your browser. Like I don't have to do anything. It's just there.

Owen Williams: This episode is brought to you by cursor. If you all have been watching How I AI, you already know this. Cursor is my favorite way to code with AI. Whether I'm using plan mode to build out an ambitious feature, reviewing AI generated diffs right in my editor, or kicking off cloud agents to multi-thread our road map, I reach for cursor as my favorite multimodel coding platform. Even better than building myself in Cursor, I love collaborating with Bugbot to fix PRs for code security and quality and have begun relying on Curser's automated agents to keep our code base clean. It's not just me. The most ambitious teams love Cursor, too, including engineers at Stripe, OpenAI, and Figma. Ready to build more? We're giving $50 in Cursor credit to How I AI listeners. Claim your credits at chatpardd.ai/howi. AI/howi AI. That's $50 in cursor credits by going to chatp prd.aii/howi aai.

Claire Vemp: I love this. And I do want to just call out again for folks that maybe aren't watching this variant bar in the bottom. There's also a very similar feature in Claw Design of this. So Claw Design will now when you prompt it to create a prototype, it says how many variations do you want? as someone who like worked at many many AB testing companies and did an AB testing startup, I'm like, "Oh, my time had finally arrived, you know, 20 years later."

Claire Vemp: But it'll create multiple variants and let you select. The other thing that I think maybe you'll want to play you you kind of play with with data is it gives you um kind of like modes of the design. So you could be like extreme design like

Claire Vemp: how far are you letting letting the um the AI go with the design system might be something you play with because one of the benefits I do think of um this prototyping tools and I'm curious what you think as a a designer that works on a very opinionated codebase is the happy accidents of I would have never designed that but that's kind of interesting.

Owen Williams: Yeah. And you want to leave enough leeway, I think, for for those moments to come out because I think it's a real benefit.

Owen Williams: Yeah, I think that's like where I get excited is you can just be like, Claude, make eight variants of this thing that are very different and like it will cook and then you can sort of like take bits from each of them. Um, that's actually something I kind of want to it's my next quest I think is building in like a crazy eights mode almost like it just spits out eight designs and you choose the pieces. It's not super rigid with the design system. In fact, frankly, like my favorite thing with this is just doing silly stuff. Like I I showed you this 4242 mode. It's like, okay, what can the design system do? I had another prototype where I was like, can I just make emojis rain in the dashboard? I don't know. Um so, um but like the idea there being like if you want to keep pushing it, you can. And then the other thing actually that we have built in, and this is where the opinionated part comes through, is you don't have to just use our design system. So there's a little like rules selector in the sort of embedded thing. You can like sort of grant the LLM access to Tailwind. Uh the amount of like shouty rules I have to have in the design system rule that's like do not use Tailwind unless you're told to is actually deeply amusing. But if you would turn that on, it's like a pre- themed version of our design system. So it's got like the ride blur and that kind of thing. And so then you can be like I want to do generative stuff, right? cuz I think the issue with the design system is it's like you can make list views and charts and like whatever but doing something net new is harder and so that's there for that reason. The other thing that I think you would have seen is it called agent agentation out there uh we have our like own version that we had built internally I don't want to be like ahaha first uh but maybe a little bit I will here where you can also like interact with the canvas directly to give the AI feedback. So imagine um you know we have this payment analytics prototype with a bunch of charts on it. Um you can click this little anotype AI button and swap into the like selector mode and be like I don't know uh let's say let's make the tool tip here hover hoverable with helper text in it. And then you can like I don't know add a bunch of comments for the AI to fix like right on the page. That's the other thing like I used to lose my mind in Cursor being like the element with class name 82F please fix this and being able to just select something and like give the feedback and then hit like like hawk 10 pieces of feedback to the AI to fix is really exciting. So you know add more padding to the table here. And so I'll send this off to the AI and it will just work through them like it'll it'll be like okay this comment this one um and like do that.

Owen Williams: And the other thing that you can do before that there's so many things I wish I could show you.

Claire Vemp: I'm not in a rush.

Owen Williams: I love it. Um is actually you can take a step back from that. Imagine you're like doing a design review, right? You're showing a prototype and at different companies there are different traditions, but something that's common at Stripe is you will like show you share your screen and then you'll like send a Google doc link with like a table at it that's like give me feedback as I go and it ends up being this like dumping ground of like screenshots and like trying to explain the thing. Something that we built was design review mode. So, you can jump into a comment section. You can click start review and then like share a URL. Um, and then like everybody can comment as like a normal human.

Claire Vemp: Oh, look. The AI broke it finally.

Owen Williams: And you know what? It's fine. It's just internal tooling.

Claire Vemp: I love it. Well, it's probably going to like try and self fix it because it can see it. This is the thing. Um,

Owen Williams: there it goes. It self fixed it. I'm going to switch back to that commenting thing now. Uh so imagine you want to do a design review. Um you get all your feedback as like comments like what's um with this filter. So let's try and imagine you're like wanting to go to a design review. You share the URL with like the leaders in the room and you get, you know, your feedback. You don't want the Google doc. Um oh look, my comment did send seven times. That's fine. Um, so you get all these pieces of feedback from your design leaders and now you want to like go through and just like get a summary of it, I guess. So one AI is really good at that. So in this case, I accidentally send this a bunch of times, but you would get like a detailed summary of the design review at the top. And then you could actually enter like review mode and step through and be like, the filter pattern isn't right here. Please add three more options. I don't know if that's realistic, but whatever. Um, and then that will add it to a queue that you can just send to the AI to fix like straight off the back of the design review and it will be like, I fixed Katie D's feedback for you and you can send this to her. And it's like my favorite thing to just like right cuz designers have to follow up. Like there's all this extra busy work that you have to do after a design review and being able to be like, I fixed that. Here's the receipts thread is amazing.

Claire Vemp: One thing I I want to say as a sort of step back analysis of what you're showing me which is yeah I think a lot of people are going to watch this and be like man you know like Vzero is good enough or this is good enough and I I think what is so interesting is you are right I've led design teams I am a specific kind of design leader

Claire Vemp: and design cultures review cultures building cultures are so different company to company yes right completely different um you know I used to run this thing called Product Craft Friday. I wanted three hours with everybody on what we were building across everything.

Claire Vemp: And then we would create these things called vibe checks where we would all drag the most recent work into one spot in the Figma board

Claire Vemp: and then look at it and say, "Does this all look like it's from the same product?"

Claire Vemp: Because a lot of times it did not.

Owen Williams: Yeah.

Claire Vemp: And I think that is not a product that anybody's going to build is like the vibe check in the design room. But

Owen Williams: and they can you can just do it. But then you I'm like you just build it. And so

Claire Vemp: I think people really underestimate the value of building internal tools right now. Not to as I said like replace the ARR of a product you would buy externally.

Owen Williams: Right. It's not that. It's so it can be so precisely matched to the culture and cadence of your team that it actually gets used. Right. You actually get higher quality.

Owen Williams: Yeah. It's like, okay, we can actually nudge the way that we work in really satisfying ways. Like, you know, staffing internal tools teams has always been hard, actually. Like, I've had a few of those teams and like Stripe loves building custom tools, but like getting resources to build a weird design review tool for like whatever would have never happened before. And now we can just like completely uh evolve the way we work by just like building tools and like giving them to people. And something that I love about this as well is like while I've been working on it, my whole thing has been like anybody can contribute. Like if if the design reviews thing is not right, like let's just evolve it. And so I I actually get pull requests from designers like a surprising amount and I I love it so much. It makes me happy. I'm like, "Yeah, you should just evolve the culture. Like that's kind of what I'm trying to do here." Um and so like I get excited about that kind of thing because it's it's very empowering to be like design reviews aren't working. like what could we I don't know what doesn't exist that should exist. I don't want to use Google Docs. I don't want to use this thing. And so um it's similar like even with the the PMs who are using this like something that you can actually do is you can just dump in a a PD into the chat from Google Docs and it just it can go and access Google Docs. It knows how to do that and like then it can take it and just build it. And I think like making that barrier to entry that low is just incredibly magic. like the amount of people who are like, "Oh my god, like I am blocked because I don't have a designer." Usually, like I'm I'm a PM. I have a PM I work with on um I don't know, let's say like MCP stuff. It's relatively new, so we haven't staffed it properly yet. Well, now he can like go and explore things in a really like high quality way. And we'll still design review it and all of that, but like he can unblock himself, which is like a whole new thing as well. Like I will I can I just say in the safety of this like very public podcast the the first feeling I had when I started making this was um I I started seeing PMs use it and got like a little nervous oh my goodness PM's designing. Uh it's like what's going to happen? Um, but it's actually just been thrilling to see like them having the tools to like build things that look like Stripe in the right way and like being able to explore their ideas and actually also give them the um like the visual tools to do it. Like I think the hardest thing for PMs is often they can't like manifest the thing that they want to. It actually makes them better at communicating with their own designer, but also UXR is completely different. like they can test their idea a lot earlier in the funnel where it's like I have this thing I want to do. Okay, how am I going to do that? I can build a prototype and like just go and talk to some users and make them click it without it being an elaborate JPEG with like interactive zones everywhere. So, it's it's really cool to see that changing. And I actually I think I love the PN user now. Like at first I had that terror and now I'm like no, this is like making the relationship better.

Claire Vemp: I you know maybe I'll add one more thing to that which is your conversations I'm guessing turn more into let's talk about the work and the thing I built and how can it be better than perpetual arguments over whether we should staff a designer on the MCP or something else which has

Claire Vemp: been our life for like how many conversations are going to who should be on the project versus here's the actual work and let's discuss that and I'm sure that makes everybody especially

Owen Williams: just makes it easier for them to also advocate for it right? It's like, okay, this is what we can do with the current system, but like we need to we need to push it more and like go beyond what is just like capable now. And so it's it's been really interesting to see how that's like changing the conversation, too. It's like, hey, here's here's like what we can do with what we have off the shelf, but we need a designer to help us elevate this experience. And so like it's also making it easier to talk the same language as the other thing is like I work on very technical things in the developer experience space where it's like really dense and like super like we we've been working on this like web hooks thing with like seven steps for like a year now and it's like very complicated and there's all these moving parts and states and whatever and now we can actually just show them all as opposed to like trying to have to explain how web hooks work and like all this different stuff. So, it's been really interesting to see how that's changed as well. Um, I have we should we just like try and like build something random really quickly like full like

Claire Vemp: speedun something

Owen Williams: demo. I'm thinking like it might be interesting to build like a Black Friday Cyber Monday dashboard.

Claire Vemp: Great. Let's do it.

Owen Williams: Okay, let's let's build a BFM. Is it going to know what that is? We'll see. I'll see

Claire Vemp: dashboard for a pet store showing live sales on a chart at the top of the page. A ticker with the latest sales and

Claire Vemp: what else shouldn't it have? I don't want to over complicate it. Uh

Owen Williams: top performing products.

Claire Vemp: Yeah, you have the same thought as me. Uh trending bright.

Claire Vemp: Look at this. Still got it. Still got it as a product.

Owen Williams: We're building together. Uh, make sure the data is realistic in real time. And this is we're going to full yolo this and see what it does.

Claire Vemp: Okay. And now while it's loading, I have to say as a now parent of two with a little baby, we got to get you voice mode

Owen Williams: on this.

Owen Williams: I I Yes, that's actually a good point because it has that changed my life is just being able to like

Owen Williams: I don't know. First of all, I'll say the voice transcription built into iOS, it's like makes me feel insane every time I use it. I'm like, how do you not understand basic sentences?

Claire Vemp: But then like you the clawed voice mode, like you can have a baby screaming and whisper in it and it still nails it.

Owen Williams: Yeah.

Claire Vemp: So, I do need to I do need to add that. This is actually really interesting though, like as maybe a way to describe how this thing works as we watch it cook. The the under the hood, what's actually happening right now is like I said, it's building the dashboard. It's calling our Sale MCP server. So that's like the design system like getting all of the content and like sort of working through the problem. So it's like what components do I need to to build that thing? Um how will I structure the page? What template will I use?

Owen Williams: Um and then it's like going to figure out how to cobble them together and hopefully make something beautiful. We'll see at the end. It's working on it. We're seeing it made a page already and so we'll see where it winds up. And were you able to just translate those basically those Cursor rules into how this system works to kind of follow some of the same patterns or was there something different you did?

Owen Williams: Yeah, it's pretty similar. I think it's probably a little bit more opinionated, right? So there's additional tools that this has. It's like got built-in like browser tools. Um it's got like a bunch of extra things like you can um deploy the prototype to a like permanent URL by chatting with it. Like all of those types of like nicities. You can also be like check your work and it will um but it's largely the same. A lot of my rules it might be a little spicy are like for Figma files. It's been really interesting like trying to I think like everybody's still figuring out how this changes in this world. Like frankly, I think I come from the engineering world, so I'm like it's easier for me to use words to like describe the page I want to build, but like designers want to make a Figma and then translate it, which I totally get, but like Figma and like a canvas is pretty hard for these tools still. And so a lot of the rules are like insane things to like make cursor act, sorry, not cursor, make Figma act correctly. Um because it will be like, "Oh, here's a thousand Tailwind styles and like this random component I built from scratch for some reason." Um or like uh matching the biggest one is like matching our internal components to like the thing in Figma. Like if you see the thing that looks like this, make this not that. Like I feel insane writing these rules. But like once you've got them, it works pretty well. So

Claire Vemp: I think what you said is really funny. As you said, like as an engineer, I feel like prompting it this way is gets a better result. And designers like no I feel like as a designer I was talking to a friend about claw design and we both came to completely opposite conclusions. I said, "I use cloud design and I think it's actually pretty good at marketing and brand kind of style design work and I think it's garbage garbage at UI."

Claire Vemp: And he is a a marketer and he was like, I think that it's pretty good at UI work and garbage at marketing. And I was like, we just both know what we're talking about in our own domains. They like cannot recognize the slop in others. And so I think it's really funny to see what people identify in these generations and how they use stuff just depending on the point of view they bring.

Owen Williams: Well, that's that's the thing. And it's like I I don't think I don't want to set an expectation this will solve everything. Like it's been interesting trying to like balance that with all of this work. Like how can I make sure that the um the tool knows enough to be dangerous like it gets to 80%. But like that taste, that craft is like that's why designers will always exist in my opinion. Like they they know how to elevate the experience. Like this thing knows how to use the components. The components are welldesigned, but like it's not going to be perfect. And like we are here to steer them.

Claire Vemp: Yeah. I'm like, you know, hey, hey, hey, Proto Dash, that's a that's a big old chart.

Owen Williams: Yeah. Well, no, but this is this is a really great demo. I love it. It's just like sh first iteration of the page popped up. It's like what if I built a chart that's the entire height of the browser.

Claire Vemp: Yeah, why not do it?

Owen Williams: But it's interesting to look at this. I of course used blow. It does love a good blow. Um it got 90% of the way or I would say 80% of the way there with a very vague prompt like it was like give me a BSM dashboard with a ticker and some charts and it did it. I didn't um and but now is like sort of the iteration part. And so this is a good probably like live demo. Now you could say like grab this chart, jump back into here and say the chart is way too tall. It should be a narrow page spanning chart and just like it will fix it.

Claire Vemp: Well, the other thing you might need to put into your overall rules is if you scroll down, boy oh boy oh boy does an emoji. I know it the I have a rule in cursor for my like when I'm working on the actual tool that I clearly need to put in the tool because like I lose my mind.

Owen Williams: This is not what I would expect to see in

Claire Vemp: but look at that. The chart is fixed, right? I like pointed at it with the built-in like look at this element for me LLM tool that we have and I said fix this and it fixed the chart without me having to describe it.

Owen Williams: Um and the the page is live. Like don't get me wrong, it's like not the most beautiful thing I've ever seen, but it's now you could like iterate on it and like build up from there. It looks like stripish.

Owen Williams: Um it uses the right it didn't use comic sands.

Claire Vemp: Um there we go.

Owen Williams: But yeah, the the other thing I wanted to quickly talk about though that I didn't show you is um you can also change the fidelity in here. Like something else that like I just miss is like just give me like monospace fonts so that you know you're looking at something fake. Um, of course it didn't work.

Claire Vemp: Will you will you pretty please turn on black and white mode? This is this is like bringing me back to my It didn't do it. That's fine.

Owen Williams: It didn't do it.

Claire Vemp: Okay. But this is bringing me back to my like truly OG designer days. I used to do this. You all you have to be very old to appreciate this. So, we used to do these designs in Photoshop,

Owen Williams: right?

Claire Vemp: And, you know, you get these like long scrolly things, you're, you know, rounding corners by hand, all this stuff.

Owen Williams: Yes.

Claire Vemp: And then one of the tricks I used to teach my designers is I said, "Gayscale the whole thing and look for contrast."

Owen Williams: Yeah.

Claire Vemp: And you built it.

Owen Williams: Yeah. It's just a mode. Like this is I I love it because it's like okay there is we didn't even talk about this but like one challenge with these tools is like now I'm bringing high fidelity stuff to every review. It can be a little unnerving like I actually so I I worked at Shopify uh before Stroke and something that we did at Shopify to signify like work in progress or like still figuring things out is we would change the fonts to comic sense which was like both like deeply painful but also you knew visually like immediately you're like this is not done. um which I love. And so like having these built-in modes we can I guess like see very clearly that it's not done or like like my or Monospace is my favorite is just like clearly this is not the dashboard but like you get it. It's like 80% of it um is really cool and so that's built in. And then the other thing is like this is this is the core of the original prototyping tool and now in like a visual setting but you can emulate different states stripe really easily. So, um I don't know, you want to override a certain nav section or um you want to show the like sandboxes banner or hide the nav. Like you can do all of that in your prototype. And so these are like things that would have been otherwise hard. Actually, merchant name is my favorite too. It's like you're doing UXR and you want to pretend for Uber to like get them into the immersion. Like you can just write the word Uber and it's there, which is which is really cool.

Claire Vemp: Um

Claire Vemp: I love it. I'm thinking about your your Shopify comic sands example and I'm like, "Oh, it's balsamic core is what it is." You know, remember the old

Owen Williams: Yeah, I kind of wanted I kind of want that in here is like the goal eventually like can we build abstracted like lowfi stuff and like build like maybe boss araming mode is the right way to describe.

Claire Vemp: You know, you know, if you know, you know. Okay, this has been so incredible. Well, just to recap for folks that have made it this far with us, you built a pretty highfidelity replica app that anybody could pull down, run locally or in a dev box, had a bunch of Cursor rules. You turn that into a web hosted interactive prototyping tool with a bunch of I think this is the the the trick. A bunch of controls both for how your design process works in terms of getting feedback on specific components, reviewing them, processing them, and different states of your prototype that you know are useful across the design team. And you can just ship fun things and work things. And then

Owen Williams: yeah,

Claire Vemp: you're seeing a lot of designers use it, but maybe even more PMs. So, the stuff that people are doing and the tools that are using it is really changing.

Owen Williams: Yeah. I mean, do we have like two minutes to show you one more thing? There's one more thing. Well, like

Claire Vemp: there's one more thing, y'all.

Owen Williams: One more thing. I wanted to show this prototype that um two designers built internally just like using the tool. Um, so Ryan and Sera, they've been building like the entire they work on the Radar product which is like fraud detection and like for them they've been basically like working on net new features and being able to like actually show the entire multi-step flow from every point of the journey like okay we're on Stripe home you see a banner that's like this then you see a list view of like potential fraud risk and like here are the reasons and like here's the data and the animations and like it's all working like you can add a node. Hi, and it will work. You can even like jump into the rules and see what reason something happened. Like being able to do this like really really high fidelity like here is the exact way the dashboard will work also changes the handoff like the handoff for this this piece of work on Radar. It's been fascinating because it's like they literally have a pull request of a prototype that I have I see an engineer working on and I'm like this has never happened ever in my career as a design manager. like them and and they're like, "Oh, just use the prototype as the source of truth." And like being able to just pick that up and be like all of the components are the same. There's some translation to do, but like they can just take it and do that is a huge change. And so like having that level of like preciseness and not having to like show my age again like red line a Photoshop file or like some all of that stuff is is really incredible. Like now they can just inspect element and look at the padding.

Claire Vemp: I love it. I love it. H prototypes everywhere. Okay.

Claire Vemp: Uh you've blown my mind. Now I want one of these. Um I will say one one trick that I've also use something like this for because I built a very similar kind of like replica app.

Owen Williams: Cool.

Claire Vemp: Is I make every component a downloadable PNG so that we can use it in marketing assets.

Owen Williams: Oh, that's good. So, you know, like how many how many often are you screenshotting stuff

Claire Vemp: and I'm like, I need a real example of like an enterprise, you know, PRD or this component with this. So, then I just like everything every element you can download as a PNG and then you can drop it into slides and stuff.

Owen Williams: Can I just say like the worst and best cursed thing working on these types of tools like I've gotten it far enough where I'm like, "Wow, this is like magical to use is like I just have like 90 other ideas I want to add and I can just add them." Like every day I'm like, "What if I just did this?" And then I do it and I'm like, "What?"

Claire Vemp: Yeah. And you can just impose your will on your teammate customers as opposed to like have to worry about your real customer feedback.

Owen Williams: Whoa. Right. Like let's just let's just change the way we all work. Like

Claire Vemp: But it does speed up that process, right? Like if we can

Owen Williams: I don't know. Uh one idea I've had in the back of my head for a while that I tried at one point and was just like too many layers at the time was like just let me clone a dashboard URL. like give a dashboard URL clone the whole thing and it'll be in here and like then you can very I don't know you've got customer feedback I want to fix this bug boom here's the prototype for it go and fix it

Owen Williams: and so I think like we're nearing that where like you can have this like pretty compelling faximile of your environment and like much more rapidly invol evolve it without like worrying about just like breaking things or um you know all of the like traditional boundaries of the product. So, it's Yeah, I find it I find it very exciting. I just have to stop myself sometimes, though. I'm like, stop stop adding things.

Claire Vemp: All right. And speaking of stop adding things, I know I have to get you out of here, too. The little one soon. So, we're going to do one lightning round. Well, two lightning round questions. I'm going to get you out of here. My first one is this is my hypothesis, but every parental leave is what like people are spending vibe coding. They're just spending their parental leave holding a baby in one arm. You're holding a claw in the other and making stuff happen. Are you AIing through your parental leave? Tell me the truth.

Owen Williams: Yes. I It's so funny cuz like uh this is my second child. My first kid. I feel like these things were nent and didn't really exist. This time it's like so different, right? Like you can just yeet a prompt into cloud code from your phone and like all of this stuff. So, he'll be like asleep on me and I'm just like, "Can you make an app that does this?" And like, "Yeah, I made I made at least one app. I think I uh can flash it up really quickly if I can find the browser window." Um, that's basically like this is the most dad thing of all time that you would ever want, but like a app where you take a photo of like say you buy something expensive like a bike or a TV. Um, you take a photo of the receipt. It's like Expensifier sort of. Um, and then of the product and then it basically like saves the serial number in the app. First of all, who saves this stuff? When you bought it, from where, right? Downloads the manual. Uh, and then just like you have it there. It's like I bought this on this date for this much. Here's the manual. Um, because I have this thing where it's like you buy something nice and then like two, I don't know, 18 months later it might break. You're like, where did I get that? I can never find the receipt ever.

Claire Vemp: Okay. And so, yeah,

Claire Vemp: I love this. Let me I'm gonna do a feature request here because your kids will get older and those womb bikes are expensive.

Owen Williams: Oh, they're so good though.

Claire Vemp: And they're so good. But at some point after kid number two is done with it. You're going to want like 3 years later a reminder to sell this thing.

Owen Williams: Oh, that is a good idea. I like that. It's like, yeah, remind remind me in two years I don't need this anymore.

Claire Vemp: Remind me in two years. This thing needs to get out of the garage and um somewhere else.

Owen Williams: That is Jean. Yes.

Claire Vemp: Well, thank you. I need to finish it. But

Claire Vemp: also like when the warranty expires. Yep.

Claire Vemp: If it requires any maintenance.

Owen Williams: Well, that was the other reason I started this is I had a bad experience with a warranty where like it broke probably 3 days before the warranty was up, but I had a kid during that time.

Claire Vemp: Yeah.

Owen Williams: And I, you know, if I had had a week's notice, I would have been like quickly emailing the company. So that's why I did it.

Claire Vemp: You need to join the family live love claw slack that I run

Claire Vemp: that's all just parents trying to figure out how to use AI and open claw and all these things to do real stuff. Okay, I'm going to

Owen Williams: I clearly need more side projects, don't you?

Claire Vemp: Clearly. Okay, Owen, this has been amazing. Uh, last question. When AI is not listening, when you're whispering, you're like, "Make no mistakes.

Claire Vemp: My baby's crying. Make no mistakes." When it's not listening, what is your prompting strategy?

Owen Williams: Uh, all caps. No,

Claire Vemp: that's fine.

Owen Williams: I do a lot of shouting. Um, I think I I just try and be really specific. Like I I came my I have a lot of meandering career paths. I had a content background at one point and like just being specific upfront helps a lot and then like uh I have I have learned okay actually I'll I'll give you this piece of advice. I find if I as soon as I've sent the first shouty prompt, it's time to like reset the like slashcle and start again. Like the context window is full. It's not going well. Start again. As soon as I feel like swearing in there, like start again.

Claire Vemp: I feel like this is also applicable again to parenting children where I'm like, if being loud didn't work, I wouldn't do it, guys.

Owen Williams: I know. But it's like such a funny I think it's like I had to retrain my brain, right? Like as somebody who has built a bunch of stuff, you get that like sunk cost fallacy at some point. You're like, "Surely I'll get this to work." But like often just throwing it away and starting again.

Claire Vemp: Yeah.

Owen Williams: I love this. Owen, this has been so fun. Where can we find you and how can we be helpful?

Owen Williams: I'm on Twitter. Do we still say that? I say that. Uh Twitter. Very short username. Um that's why I can't leave. Uh, and I I'm also on my website, Owen Williams. That's just the domain name, but dot before the MS and it works. Um, and gosh, how can you help me? How like just build cool design tools. We're actually like this prototyping thing. We believe in it so much that we're hiring a like I don't know how to describe it, but like a design engineery type person to like drive this stuff. Like we think it's going to transform the way that we build and so we're hiring that kind of person so I don't have to build it as my other job. Um, so please join us. If you're like the kind of weirdo like that maybe that likes to code and also likes design stuff, uh, send me a DM. I' I'd love to talk.

Claire Vemp: Love it. Well, thank you. Thank you. Thank you for joining How I AI.

Owen Williams: Yeah. Thank you for having me.

Claire Vemp: Thanks so much for watching. If you enjoyed this 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 howiipod.com. See you next time.