The internal AI tool that’s transforming how Stripe designs products | Owen Williams

My dream was, I want something that's like V0, but for us. 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? Why do I need Cursor? You're seeing a lot of designers use it, but maybe even more PMs. I started seeing PMs use it and got a little nervous. I was like, my goodness, PMs designing. What's going to happen? Is it 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. 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? And so that's kind of a cool change to see happening. I'm curious if you just walk us through how, 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. Maybe like some context on me, actually. So I, I lead the like developer sort of space at Stripe and my background is actually 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. I always had like an engineering slump 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, you know, know enough terminal to be dangerous? This is pre-AI, just to be clear. 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. 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 Vite? 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 a cursor, a cloak code, whatever, and just be like, how does good work? And that's actually been the biggest mindset shift I've had to like give designers is 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 a designer maybe only needs to know about NPM run dev, 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. So the first version was a very basic, like, 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 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 that should avoid what it should do if the MCP server is unavailable. LMs 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 whittled down through my various experiments. And this means that like 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 go into these reviews with a real prototype and it looks bad. It's just like, surely we can do better. And so that's what this sort of like helps with. 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? So it's a mix actually. What's really cool is, so initially we had like, it was running locally. You would just run NPM run whatever, but we have dev box infrastructure. I think you talked to the minion folks previously, so you probably heard about that. And so like dev box is at a high level, just let you just get a server on the internet in a certain state internally. So now designers can just go to a like URL. It's like go slash prototype 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 as it just works. 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 you're drowning in presentations, right? Like show me a JPEG in your Figma, 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 Dan Nelson, another design leader at Stripe talks about a lot. And I'm like, this is the way that we can do that. What I think is interesting about this, especially for a product like Stripe, is it's such a data and visualization heavy product. And I used to tell this to my design team at LaunchDarkly, 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. It is nearly impossible to do that in Figma. 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. This is a company that's not doing too bad, you know, we love that almost half a million dollars in gross volume. But what if you want the zero state? What if you want the, you know, the company with 10 times more than that? Getting like one transaction a day. Exactly. 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. It's like, oh, it's in Dutch now. Okay. It looks terrible because it's so long and stuff. Yeah. 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 and an enterprise and it just, it just does it. I love that. 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. 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 there used to be a cottage industry of Lorem Ipsum text generators just for putting even just fake copy into this. This is like when I was making web designs in Photoshop. So, you know, and I just think like, 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 just. I have not seen Lorem Ipsum in a while. It's been a long time. Yeah, chonkbook. Can you go grab me big boy? And OK, so lots of challenges with running, you know, big monorepo locally. I can empathize with that. So what do you do to solve that problem? So what I want to, like, my dream was I want something that's like v0, but for us. Like a really opinionated workflow for like building Stripe-based prototypes. I know this is like very specific, but it's like, you know, we have all of these tools internally that are really cool. 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 framework I approached it with was like, OK, I have this really cool, like, React 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 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 code. 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. And so what I ended up building was this 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 dev box URL. I'm just running it locally. So, 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 have a fun one here where you get fun ways to enter, like, the Stripe test card number in weird ways. And then you can also see, like, the vibe prototyping feed. Because 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 that a bunch of designers built. Like, I think they replicated the entire functionality of our radar product, the 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 LLM 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 this thing's bar chart is a line chart. You didn't have to, like, do anything on your machine. You just went to a URL and you asked for it. And it will go ahead and build it entirely in browser, which is really cool. Quick question. People are going to ask this. How did you build this? Like, what is the... Give me, like, some, like, little sniff components of how you built this. Like, yelling at Claude code for 18 months. OK, right. There you go. It's a mix. Like, I definitely hand wrote 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. But largely, it was just like, OK, I'm just going to keep going on this and see how far I can get. And it 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. 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, logins. Like, this, 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. But it just, it was just 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 working on adding a variant 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. That's exciting. This is exciting. Yeah. So usually if it was on a dev box, you wouldn't see that because you don't actually connect to the dev box. But it's kind of fun to watch it drift. Yep. So it's taking a screenshot and checking its work, which I really love. So this is, like, a really cool demo. You really, like, you really said Claude code make no mistakes. Yeah. 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 send it a Figma link, I'm like, implement this. Make no mistakes. Yep. 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's finished. We have this variant bar here, so you can, like, try different things. So here's my line chart demo. Ta-da. 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. 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 roadmap, I reach for Cursor as my favorite multi-model 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 Cursor's automated agents to keep our codebase 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 ChatPRD.AI slash HowIAI. That's $50 in Cursor credits by going to ChatPRD.AI slash HowIAI. 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 Claude design of this. So Claude 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 A-B testing companies and did an A-B testing startup, I'm like, oh, my time had finally arrived, you know, 20 years later. But it'll create multiple variants and let you select the other thing that I think maybe you'll want to play with. You kind of play with data is it gives you kind of like modes of the design. So you could be like extreme design. Like how far are you letting the AI go with the design system might be something you play with because one of the benefits I do think of this prototyping tools, and I'm curious what you think as a designer that works on a very opinionated code base, is the happy accidents of I would have never designed that, but that's kind of interesting. Yeah. And you want to leave enough leeway, I think, for those moments to come out because I think it's a real benefit. Yeah. I think it'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. 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 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. Can I just say in the safety of this, like, very public podcast, the first feeling I had when I started making this was, um, I started seeing PMs use it and got like a little nervous. I thought, oh my goodness, PMs designing. 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, 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 really cool to see that changing. And I actually, I think I love the PMs use it now. Like, at first I had that terror. And now I'm like, no, this is, like, making the relationship better. 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 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 as happy as it makes me. 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 push it more and, like, go beyond what is just, like, capable now. And so, it's been really interesting to see how that's, like, changing the conversation to, 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, because 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've been working on this, like, webhooks 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 webhooks work and, like, all of this different stuff. So, it's been really interesting to see how that's changed as well. Should we just, like, try and, like, build something random really quickly? Let's do it. Speedrun something. I'm thinking, like, it might be interesting to build, like, a Black Friday Cyber Monday dashboard. Great, let's do it. Okay, let's build a BFCM. Is it gonna know what that is? We'll see. Dashboard. For a pet store showing live sales on a chart at the top of the page. A ticker with the latest sales and what else should it have? I don't want to overcomplicate it. Top performing products. Yeah, you had the same thought as me. Or trending. Right. Look at this, still got it. Still got it as a product manager. We're building together. Make sure the data is realistic and real time. And this is, we're gonna full YOLO this and see what it does. 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 on this. Yes. That's actually a good point. Because it has dance Changed my life. It's just being able to, like, 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? But then, like, the Claude voice mode, like, you can have a baby screaming and whisper in it, and it still nails it. Yep. Yep. So 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. Under the hood, what's actually happening right now is, like I said, it's building the dashboard. It's calling our Salesforce service. So that's, like, the design system, like, getting all of the content and, like, sort of working through the problems. So it's like, what components do I need to build that thing? How will I structure the page? And what template will I use? And then it's, like, gonna 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? 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, like, built-in, like, browser tools. It's got, like, a bunch of extra things, like, you can deploy the prototype to a permanent URL by chatting with it. Like, all of those types of, like, niceties. You can also be, like, check your work, and it will... But it's largely the same. A lot of my rules might be a little spicy. I, 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 wanna build. But, like, designers wanna 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 work. Insane things to, like, make cursor act. Sorry, not cursor. Make Figma act correctly, because it'll be like, oh, here's a thousand Tailwind styles. I'm like, this random component I built from scratch for some reason. Or, like, 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. I think what you said is really funny, as you said, like, as an engineer, I feel like prompting it this way gets a better result. And designers are like, no. I feel like as a designer, I was talking to a friend about Claude Design, and we both came to completely opposite conclusions. I said, I use Claude 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. And he is 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. Like, cannot recognize the sloth 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. Well, that's the thing. And it's like, I don't think... I don't wanna set expectations 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... 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 know how to elevate the experience. Like, this thing knows how to use the components. The components are well designed, but, like, it's not gonna be perfect. And, like, we are here to steer them. Yeah, I'm like, you know, hey, hey, ProtoDash. That's a big old chart. Yeah, well, no, but this is... This is a really great demo. I love it. It's just like, first iteration of the page popped up. I'm just like, what if I built a chart that's the entire height of the browser? Yeah, why not? Let's do it. But it's interesting to look at this. Of course, he's lowboard. Does love a good blowhole. It got 90% of the way. Oh, I would say 80% of the way. There was a very vague prompt. Like, I was like, give me a BSCM dashboard with a ticker and some charts. And it did it. I didn't... But now it's, like, sort of the iteration part. And so this is I'll sometimes be like, stop. Stop adding things. Alright, and speaking of stop adding things, I know I have to get you out of here to the little ones 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, that every parental leave is what, like, people are spending vibe coding. They're just spending their parental leave holding a baby in one arm and holding a quad in the other and making stuff happen. Are you AI-ing through your parental leave? Tell me the truth. Yes, I... It's so funny because, like, this is my second child. My first kid, I feel like these things were nascent and didn't really exist. This time, it's like so different, right? Like, you can just yeet a prompt into clog 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 at least one app. I think I can flash it up really quickly if I can find the browser window. That's basically like, this is the most dad thing of all time that you would ever want. But like, an app where you take a photo of, like, say you buy something expensive, like a bike or a TV. You take a photo of the receipt, so I can experience, sort of. 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. And then just, like, you have it there. It's like, I bought this on this date for this much. Here's the manual. Because I have this thing where it's like, you buy something nice and then, like, I don't know, 18 months later, it might break. And you're like, where did I get that? I can never find the receipt ever. Okay, I love this. I'm going to do a feature request here because your kids will get older and those womb bikes are expensive. Oh, they're so good, though. And they're so good. But at some point, after kid number two is done with it, you're going to want, like, three years later, a reminder to sell this thing. Oh, that is a good idea. I like that. It's like, yeah, remind me in two years I don't need this anymore. Remind me in two years, this thing needs to get out of the garage and somewhere else. That is genius. Well, thank you. I did finish it. But also, like, when the warranty expires, if it requires any maintenance. Well, that was the other reason I started this, is I had a bad experience with a warranty where, like, it broke probably three days before the warranty was up. But I had a kid during that time. 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. You know what? You need to join the family Live Love Claw Slack that I run. That's all just parents trying to figure out how to use AI and open claw and all these things to do real boring kind of stuff. I clearly need more side projects, don't I? Okay, Owen, this has been amazing. Last question. When AI is not listening, when you're whispering, you're like, God, make no mistakes. My baby's crying. Make no mistakes. When it's not listening, what is your prompting strategy? All caps. That's fine. I do a lot of shouting. I think I just try and be really specific. Like, I have a lot of meandering career paths. I had a content background at one point. And, like, just being specific up front helps a lot. And then, like, I have learned, okay, actually, 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, slash clear 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. 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. I know. But it's, like, such a funny... I think it's, like, I had to reframe my brain, right? Like, as somebody who has built a bunch of stuff, you get that, like, sun cost fallacy and some people are like, surely I'll get this to work. But, like, often just throwing it away and starting again is the thing you got to do. I love this. Oh, and this has been so fun. Where can we find you and how can we be helpful? I'm on Twitter. Do we still say that? I say that. Twitter at OW. Very short username. That's why I can't leave. And I'm also on my website, owenwilliams. That's just the domain name, but . before the MS and it works. And, gosh, how can you help me? Just build cool design tools. We're actually, like, this prototyping thing, we believe in it so much that we're hiring, like, I don't know how to describe it, but, like, a design engineer-y 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. So please join us if you're, like, the kind of weirdo, like, that maybe likes to code and also likes design stuff. Send me a DM. I'd love to talk. Love it. Well, thank you, thank you, thank you for joining How AI AI. Yeah, thank you for having me. 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 howaipod.com. See you next time.