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

[00:00] - My dream was, I want something that's like V0 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? Like, why do I need cursor? - You're seeing a lot of designers use it, but maybe even more. [00:13] PMs. I started seeing PMs use it and got a little nervous. Oh my goodness, PMs designing. It's like, what's going to happen? 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. 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 [00:43] Welcome back to How I AI. I'm Claire Vogue, 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 [00:58] Vibecoded his own Vibecoding platform for their internal design prototypes. It is one of the most impressive internal tools I have seen in such an awesome way to rethink how your product builds products. [01:11] with tools. [01:12] Let's get to it. This episode is brought to you by Celigo. 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

[01:42] operationalize AI and deliver measurable results. [01:45] Soligo makes this possible. And now, with Soligo Aura, it's never been easier. Soligo Aura gives you access to the entire platform through natural language, connecting your systems and turning intent into action. [01:59] All of it under your control. [02:01] Companies like Databricks, PayPal and Olipop rely on Soligo to run critical business operations at scale. [02:08] Ready to operationalize AI? Visit celigo.com slash howiai. That's C-E-L-I-G-O dot com slash howiai. [02:20] Oh, and thanks for joining How I AI. [02:23] hey i'm happy to be here 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 [02:35] how to, we were joking before we started recording, [02:38] how to get prototypes that don't look like [02:41] generic tailwind indigo [02:43] Slop. So tell me about, tell me what the problem you're facing and kind of how you came to this solution that you came to. You know, I'm a design manager, so I'm sitting in a lot of design reviews and all of the designers at Stripe right now are like, [02:57] playing with these tools they're exploring they're like you know trying i think you know v zero is pretty popular internally we have a bunch of other than uh different tools [03:06] 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 like the indigo, like blurple internally. So like blurple 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 yeah.

[03:27] I'm in these design reviews and I'm like, why does the dashboard look weird? Like it's very immersion breaking. Like the nav is odd or like the fonts are off. [03:35] And no, no foul to these designers. Like I, I get that. [03:39] Um... [03:40] But I was kind of thinking like we have a design system, like this thing is very predictable. [03:45] These tools should know about it. And then we can like construct the dashboard from those building blocks, like pretty reliably. [03:51] So I basically ended up starting on this like, [03:54] I would say it's been maybe 18 months now, rabbit hole, like all of these things, building a prototyping tool internally that we call Protodash. And 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, which is really interesting. And I can talk about that a bit more later. [04:16] And what it does is it makes it basically like really easy to get a dashboard like [04:21] environment, like a very realistic dashboard without having to think about it much. [04:26] So what it is, is it's basically like a bundle of cursor rules. [04:30] 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. [04:39] And all of those things mean you can like jump into cursor or clog code or whatever. [04:43] 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. [04:50] 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 they're high craft. They can like then refine it.

[05:05] uh from there and it's been really interesting to see what people have built like i can [05:09] walk you through a couple of examples. [05:12] but it's sort of been this like [05:14] very transformative thing because all of a sudden I'm sitting in these design reviews and like [05:18] It [05:18] It's so convincing that I'm like, is this the real product or am I looking at like something fake? And so... [05:24] That's kind of a cool change to see happening. [05:27] 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, [05:34] V1 and V2. So maybe you can walk us through through that. [05:38] Maybe like some context on me, actually. So I, I lead the like developer sort of space at Stripe and my background is actually engine engineering. [05:48] 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 and [05:55] um i always had like an engineering flunt 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 [06:10] Do you feel like you can, uh, you know, know enough terminal to be dangerous? This is pre AI, just to be clear. Um, and that was something that always got me excited as like, even if you, uh, [06:21] I don't know, like not able to code, but able to understand enough to feel confident, like messing around and experimenting. [06:28] It always gave designers superpowers. [06:30] The thing I'll say that was always frustrating is like that. [06:33] I don't know what the right word for this would be, like...

[06:36] The jump? [06:37] to that technical level is really hard. Like for a lot of designers, like, [06:41] 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... [06:50] you know i get why a lot of people didn't know how now [06:54] AI totally changed that, right? Because... [06:56] now you can just like jump into a cursor a clock or 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 [07:07] a not being afraid of the terminal anymore and b if you're like [07:11] 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? [07:29] run dev and that's it and it just works like [07:32] They don't have to know about React or React RALSA or... [07:35] any of these things um [07:37] So the first version was a very basic like, [07:41] you know, it's a, it's a router, it's a bunch of our design system components. So our design system is called SAIL and then it was a MCP integration with SAIL. So there's an MCP server internally for that. [07:52] 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 [08:02] 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,

[08:10] 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, LLMs are so helpful. They will just like imagine. [08:24] 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 um [08:34] experiments. And this means that like a designer or a PM or anybody [08:39] can very quickly like open this folder and cursor and just be like help me make a prototype that shows this [08:45] And it just comes out like... [08:47] beautiful and to the quality bar that we expect like [08:50] stripe has a really high quality bar for all of our experiences and that's the other thing it's like [08:55] You go into these reviews with a real prototype and it looks [08:58] 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 [09:18] So initially we had like, it was running locally. You would just run NPM run whatever. [09:22] But we have DevBox infrastructure. I think you talked to the Minion folks previously. So you probably heard about that. [09:29] And so like dead boxes at a high level, just let you just get a server on the internet in a certain state internally. Um, so now designers can just go to a, like URL. It's like go slash photo dash, and it just creates one. It's like ready to go in two minutes.

[09:43] And all they have to do is like just connect to it and 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. [09:55] 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, [10:02] Can I just say being in a design review where I can click things is my favorite [10:07] Like, [10:08] I love design reviews. I'm a very like nosy person who loves seeing what people are working on, those kinds of things. [10:14] But like... [10:15] For maybe the last five years, it's been like, [10:18] You're 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. [10:28] Here's my prototype has 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 strike talks about a lot. [10:43] 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? [11:03] to prototype a data dashboard with all its interactions, all its filters, all its states, different states, zero data, a bunch of data. [11:13] It is nearly impossible to do that in Figma.

[11:16] And we were building a lot of dashboards and what a great [11:21] kind of experience as a designer to, you know, I'm looking at your, your dashboard, if you don't mind pulling it up. Yeah. [11:27] This is a company that's not doing too bad. You know, we love that. Almost half a million dollars in gross volume. [11:33] But... [11:34] 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. [11:46] both lets you [11:47] make more interesting prototypes and lets you push the edges of the underlying data and use cases to make it more practical. [11:57] Well, that's it. And like before it was like even just... [12:00] 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... [12:08] 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 all long and stuff. 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... [12:26] 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. [12:37] 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...

[12:50] right well there used to be a cottage industry of um lorem ipsum text generators just for putting even just fake copy in this is like when i was making web designs in photoshop so right you know and and i just you do not know designers out there please if you have not experienced this you do not know how spoiled you are yeah i have not seen lorem ipsum in a while in a long time i used to be a [13:20] finally ended [13:21] But I used to have to paste that stuff. You would do dollar prices. You would be like 10,xxx.xx because you didn't know what the fake dollar amount is. You should put in a dashboard. You were dragging and copying things. [13:35] the same components. And I just think now with this transformation in terms of live prototyping, [13:43] You can... [13:45] design more interesting things and, you know, have them touch reality a little sooner, which is what we all want. [13:50] 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? [14:03] like what other things can you do on the page, right? Like I'm in all these design reviews where they're like, what is that button doing? They're like, and that's, that's okay. But it's also like, now we can actually build stuff that's just really like, [14:16] 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

[14:27] I don't know 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 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. [14:39] and like reuse the bits once you've got them by the way, because it's all in production and obviously looks the same. [14:45] then you can like play with it and like [14:47] really sequence it all at once, which is really cool. [14:49] Well, and let's get back to the prototype builder. So you built this, you know, react app that could run either locally [14:56] or in these dev boxes, but then you decided to take it [14:59] a step further. [15:00] Yeah, so I think like the biggest challenge that I've seen, so like just to level with you is we have a like very large monorepo and it's like getting that running on your laptop is a little fiddly. [15:12] And like... [15:13] Cursor and... [15:14] Claw code and all of these tools make that a lot easier, but it's like a little bit slow. [15:18] It's like a bit annoying and like you alluded to earlier, you also like... [15:23] I don't know. You can't share the URL very easily, like those kinds of things. Can I share one other thing? I might hypothesize, which is when you're a software engineer in a [15:33] in a company, you get issued the like [15:36] 18-inch MacBook Pro behemoth that can run anything locally. And designers don't always get [15:42] the machine. And so I think that's another barrier. [15:46] 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, [15:54] um designers started being considered like engineers in many ways internally and uh 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 yeah i i love it i call mine um

[16:16] big boy yeah and i tell my kids book is yeah i'm like can you go grab me big boy and yeah okay so so um lots of challenges with running you know big mono repo locally so [16:34] So what do you do to solve that problem? So what I want to, like, my dream was, [16:40] I want something that's like V-Zero for us. Like a really opinionated... [16:44] workflow for like building stripe based prototypes and it's like very specific but it's like [16:51] You know, we have all of these tools internally that are really cool. You know, we can connect different data sources together. [16:56] Why can I not just do this in my browser? Why do I need cursor? [17:00] And so the, the, the framework I approached it with was like, [17:03] Okay, I have this really cool like react [17:06] site emulator, I guess, or like prototyping tool. [17:10] 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 [17:19] LLM training and like giving you all the options and blah blah blah, but like [17:24] Now I want to be able to layer on a thing where you can just build it in your browser. So. [17:27] You don't have to code because 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... [17:36] sort of extra layer called protodash studio and so [17:39] This is like [17:41] almost 100% used in dev boxes. So you go to like a URL, it creates it, it takes about like a minute.

[17:46] And then you get to go to your dev box. You're 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, uh, [18:01] fun ways to enter like the stripe test card number uh [18:06] 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 [18:14] 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, [18:22] The amount of stuff I've seen, I'll show you a real prototype in a minute. Um, [18:27] that a bunch of designers built. Like, I think they replicated the entire functionality of our radar product, the fraud detection product in FrotaDash, and then they used that to like, [18:38] Emulate different business models, like you say, but also like try new ideas and like [18:43] They have this really cool bass line. [18:44] But the other thing you can do is you can like remix anybody's prototype at any time, right? Like, [18:49] i think that's something that's great about like figma [18:53] except with this you can take that like code and just like start playing with their thing really easily [18:58] which I think is really cool. [19:00] So the really like the compelling thing in here was not so much the home screen. I just wanted to talk about it as you can come in here now. So [19:07] you know, imagine we have this like payments analytics prototype, [19:10] Instead of having to go and open my cursor window and like start prompting here and like hope that it's going to be set up.

[19:17] Now you can just open the embedded LON. [19:20] and you can just keep sort of start working there. So you can say, I want to add a new variant of my prototype. [19:29] where there's steps. [19:31] bar chat as a line chat. [19:33] 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. [19:43] Quick question. People are going to ask this. [19:46] How did you build this? Like, what is the, give me like some like little sniff components of how you built this. [19:52] Thank you. [19:53] like yelling at claw code for 18 months um it's a mixture like i don't 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 [20:12] But largely it was just like, okay, I'm just going to keep going on this and see how far I can get. And it started as a like... [20:20] could I make something that lets me do this? And then became a... [20:24] 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, [20:34] production grade, you know what I mean? [20:36] If it breaks, it's kind of fine. It doesn't need to worry about like logins. Like there's, you know, it's just running on your dev box. So that's fine. [20:45] And so I have a lot more leeway maybe than like if you were shipping to production.

[20:50] Um, but it just, it was just a matter of like trying new things and like exploring and just seeing how far. [20:55] I could get and so let's say it's it's working on adding a very in here so it should show up pretty quickly. [21:01] 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. [21:09] that's exciting this is exciting yeah it uh 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 drive yep so it's taking a screenshot and checking its work which i really love um so this is like a really cool demo you really let you really said cloud 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 [21:39] Thank you. [21:40] I think, like, having a really opinionated way to build these prototypes means that we can do this. So, like, if I... [21:47] send it a Figma link, I'm like implement this. Yeah. Make no mistakes. Yeah. 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. [21:58] to the point where it gets it pretty good and can ask for feedback. And so now it's finished. [22:04] We have this variant bar here so you can try different things. [22:08] So here's my line chart demo. [22:10] Ta-da! It like went and swapped it out and like [22:13] I think it's pretty cool to be able to very quickly do that from your browser. Like [22:18] I don't have to do anything. It's just that. 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,

[22:48] PRs for code security and quality, and have begun relying on Cursor'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 HowEye AI listeners. [23:09] Claim your credits at chatprd.ai slash howiai. That's $50 in cursor credits by going to chatprd.ai slash howiai. [23:21] 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 here. [23:29] in claw design of this. So claw design [23:32] Well now when you prompt it to create a prototype, it says, how many variations do you want? [23:37] As someone who like, [23:38] worked at many, many A/B testing companies and did an A/B testing startup, I'm like, "Oh, my time had finally arrived 20 years later." [23:47] But it'll create multiple variants and let you select. The other thing that I think maybe you'll want to play, you kind of play with data, is it gives you... [23:57] kind of like modes of the design. So you could be like extreme design, like, [24:01] 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... [24:13] 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.

[24:22] Yep. [24:22] And you want to leave enough leeway, I think, [24:25] for 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 [24:40] 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 [24:50] 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 showed you this 4242. [24:59] mode, it's like [25:00] 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 uh 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 [25:16] you don't have to just use our design system. [25:19] There's a little like rules selector in the sort of embedded thing. [25:23] You can like sort of [25:24] grant the LLM access to Tailwind. 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. [25:36] But if you would turn that on, it's like a pre-themed version of our design system. So it's got like the right blurple. [25:42] And that kind of thing. And so then you can be like, I want to do generative stuff, right? Because. [25:46] I think the issue with the design system is that like, you can make list views and charts and like whatever, but. [25:51] doing something net new is harder. And so that's there for that reason. The other thing that I think you would have seen the called agent agentation out there,

[26:01] We have our own version that we had built internally. I don't want to be like, ah, ha, ha first, but maybe a little bit I will here. Where you can also interact with the canvas directly to give the AI feedback. So imagine we have this payment analytics prototype with a bunch of charts on it. You can click this little Anotype AI button. [26:21] and swap into the like selector mode and be like, [26:25] I don't know [26:25] Uh, let's say let's make that tool tip here, hopper, hoverable with helper text. [26:34] 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... [26:41] 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 AR to fix is really exciting so you know add more padding to the [27:03] the table here and so i'll send this off to the ai [27:07] And it will just work through them. Like it'll be like, okay, this comment, this one, [27:11] um and like do that and the other thing that you can do before that there's so many things i wish i could show you wow i'm not in a rush 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 your prototype [27:27] and at different companies there are different traditions but something that's common stripe is you all

[27:33] Like, share your screen. [27:35] And then you're like, send a Google Doc link with like a table that's like, [27:39] give me feedback as I go and it ends up being this like dumping ground of like screenshots and like [27:44] trying to explain the thing. [27:46] Something that we built was design review mode. So you can jump into a comment section. You can click start review. [27:53] and then like share a URL. [27:55] And then like everybody can comment as like a normal... [27:59] Human. [28:01] Oh, look, the AI broke it finally. And you know what? It's fine. It's just internal tooling. 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... [28:12] There we go. It's so fixed it. I'm going to switch back to that commenting thing now. Uh, [28:17] So imagine you want to do a design review. You get all your feedback as like, [28:23] comments like [28:24] What's ham with this filter? [28:28] So, [28:29] 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. [28:39] Um, oh, look, my comment did send seven times. That's fine. Um, so you get all these. [28:44] 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. [28:52] 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. [28:58] And then you could actually enter like review mode and step through and be like, [29:02] the filter pattern isn't right here.

[29:06] Please. [29:08] had three more options. I don't know if that's realistic, but [29:12] Whatever. [29:13] 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 Dool's feedback for you. And you can send this to her. And it's like my favorite thing to just like. [29:26] Right, because designers have to follow up. Like there's all this extra busy work that you have to do after a design review. [29:32] And being able to be like, I fixed that. Here's the receipts. [29:36] Thread is amazing. [29:38] One thing I want to say as a sort of step back analysis of what you're showing me, which is a lot of people are going to watch this and be like, man, you know, like V-Zero is good enough or this is good enough. [29:48] And I think what is so interesting is you are right. I have led design teams. I am a specific kind of design leader and [29:57] Design cultures, review cultures, building cultures are so different company to company. Yes. Right? Completely different. Right. [30:04] 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. 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. [30:21] And then look at it and say, does this all look like it's from the same product? Because a lot of times it did not. And I think that is not a product that anybody's going to build. [30:30] is like the vibe check in the design root product. And then you can. You can just do it. But then you can just build it.

[30:39] I think people really underestimate... [30:41] the value of building internal tools right now, not to, as I said, like replace the ARR of a product you would buy externally. Right. It's not that it's so it can be so precisely matched to the culture and cadence of your team. [30:55] that it actually gets used. [30:57] right? You actually get higher quality. [30:59] yeah it's like okay we can actually nudge the way that we work in really satisfying ways like [31:05] 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. [31:12] But like, [31:13] getting resources to build a weird design review tool for like whatever would have never happened before. And now we can just like completely evolve the way we work. [31:24] by just like building tools and like giving them to people. And something that I love about this as well as like, [31:29] while I've been working on it, my whole thing has been like, anybody can contribute. [31:34] Like if the design reviews thing is not, [31:37] Right? Like, let's just evolve it. And so I actually get pull requests from designers, like a surprising amount. And 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. [31:50] um and so like i 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 [31:57] 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 [32:04] Um, it's similar, like even with the PMs who are using this, like [32:08] Something that you can actually do is you can just dump in a

[32:10] a PID into the chat from Google Docs, and it just... [32:14] 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, [32:19] making that barrier to entry that low is just incredibly magic. Like the amount of people who are like, [32:25] Oh my god. [32:26] Like... [32:27] I am blocked because I don't have a designer usually like I'm a PM. I have a PM I work with on, I don't know, let's say like MCP stuff. It's relatively new. So we haven't staffed it properly yet. [32:38] Well, now he can like go and explore things. [32:41] in a really like high quality way and we'll still design review it and all of that [32:46] But like he can unblock himself. [32:48] which is like a whole new thing as well. [32:51] Like I will, I can, I just say in the safety of this, like very public podcast. [32:55] at the [32:57] The first... [32:58] feeling I had when I started making this was, um, [33:02] I started seeing PMs use it and got like a little nervous. Oh my goodness. PMs designing. It's like, what's going to happen? [33:11] But... [33:11] It's actually just been thrilling to see, like, them having the tools to, like, build... [33:17] things that look like stripe in the right way [33:20] and like being able to explore their ideas and actually also give them the [33:25] 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. [33:35] 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.

[33:42] Okay, how am I going to do that? [33:43] 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. [33:51] So. [33:51] It's really cool to see that changing. And I actually, I think I love the PNC's are now. Like at first I had that terror and now I'm like, [33:59] 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... [34:09] the work and the thing I built and how can it be better than [34:13] perpetual arguments over whether we should staff a designer on the MCP or something else, which is... [34:18] been our life for like how many conversations are going to [34:22] who should be on the project versus [34:25] here's the actual work and let's discuss that. And I'm sure that makes everybody, especially- - It 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 been really interesting to see how that's like changing the conversation too. It's like, hey, here's like what we can do with what we have off the shelf. [34:46] But we need a designer to help us elevate this experience. Is that like. [34:49] It's also making it easier to talk the same language as the other thing is like [34:54] 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 [35:09] show them all as opposed to like trying to have to explain how webhooks work and like all this different stuff so

[35:16] It's been really interesting to see how that's changed as well. [35:19] Um, [35:20] Should we just like try and like build something random really quickly? Let's do it. Speed run something. Demo? I'm thinking like it might be interesting to build like a Black Friday Cyber Monday dashboard. Great. Let's do it. [35:33] Okay, let's let's build a BFM. Is it going to 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. [35:52] The latest [35:54] Sales and... [35:56] What else should it have? I don't want to overcomplicate it. [36:00] Uh, top performing products. Yeah. You had the same thought as me. Uh, trending. Right. Look at this. Still got it. Still got it. As a product manager. We're building together. Uh, [36:11] So make sure the data is realistic and real time. And this is, we're going to full YOLO this and see what it does. [36:20] 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. [36:28] on this? [36:29] i i yes that's actually a good point because it has that's changed my life is just being able to like [36:35] 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... [36:42] How do you not understand basic sentences? [36:44] But then like the Claude voice mode, like you can have a baby screaming and whisper in it and it still nails it. Yep. Yeah. So I do need to, I do need to add that.

[36:53] This is actually really interesting though, like as maybe a way to describe how this thing works as we watch it cook. [36:59] - Under the herd, [37:01] What's actually happening right now is like I said, it's building the dashboard. It's calling our sale MPCP service. So that's like the design system, like getting all of the content. [37:10] and like sort of working through the problem. So it's like, what components do I need to build that thing? [37:15] How will I structure the page? What template will I use? [37:18] Um, and then it's like going to figure out how to cobble them together. [37:21] and hopefully make something beautiful. We'll see at the end. Let's work it on it. We're seeing it made a page already. [37:27] And so we'll see where it winds up. And were you able to just translate those, basically those Kerscher rules into how this system works to kind of follow some of the same patterns? Or was there something different you did? [37:37] 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 also built in like browser tools. [37:45] It's got like a bunch of extra things like you can [37:49] deploy the prototype to a like permanent URL by chatting with it. Like all of those types of like niceties. [37:54] You can also be like, check your work and it will [37:57] um but it's largely the same a lot of my rules might be a little spicy [38:02] I like... [38:03] For Figma files, it's been really interesting, like trying to, I think like [38:09] 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. [38:19] But like designers want to make a figma and then translate it, which I totally get. [38:23] But like...

[38:24] Figma and like a canvas is pretty hard for these tools still. And so a lot of the rules are insane things to like make cursor act, sorry, not cursor, make Figma act correctly. [38:36] because it will be like, "Oh, here's a thousand Tailwind styles and this random component I built from scratch for some reason." [38:44] 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 [38:53] I feel insane writing these rules. But once you've got them, it works pretty well. [38:58] 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 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... [39:13] 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. [39:20] garbage at UI and he is a marketer and he was like, [39:25] I think that it's pretty good at UI work and garbage at... [39:30] marketing and i was like we just both know what we're talking about in our own domain saying 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 well that's that's the thing and it's like i i don't think i don't want to fit any expectation this will solve everything like it's been interesting trying to like balance that with all of this work

[39:56] How can I make sure that the... [39:58] Um, [39:59] The tool knows enough to be dangerous, like it gets to 80%. [40:03] But like that taste, that craft is like, that's why designers will always exist in my opinion. Like... [40:08] They know how to elevate the experience. [40:11] This thing knows how to use the components. The components are well designed. [40:14] But like, it's not going to be perfect. And like, we are here to steer them. [40:19] Yeah, I'm like, you know, hey, hey, hey, Protodash, that's a big old chart. Yeah, well, no, but this is a really great demo. I love it. It's just like first iteration of the page popped up and it's like, [40:31] 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. I, of course, used Blurple. It does love a good Blurple. It got 90% of the way, oh, I would say 80% of the way there, with a very vague prompt. Like, I was like, give me a BFCM dashboard with a ticker and some charts, and it did it. I didn't see the charts. But, [40:52] And, but now is like sort of the iteration part. And so this is a good, probably like live demo. And now you could say, like grab this chart. [41:00] jump back into here and say, [41:02] The chart is way too tall. It should. [41:06] Be a narrow... [41:08] Page, bad name, chat. And just like, it will fix it. [41:12] Well, the other thing you might need to put into your overall rules is if you scroll down, boy, oh boy, oh boy, does it want an emoji. I know. It's... [41:21] I have a rule and cursor for my own, like when I'm working on the actual tool that I clearly need to put in the tool because like I lose my mind. This is not what I would expect to see. 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.

[41:42] And I said, fix this and it fixed the chart without me having to describe it. [41:46] 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. [41:54] build up from there it looks like stripe-ish yeah um it uses the right it didn't use comic sans [41:59] There we go. But yeah, the other thing [42:03] I wanted to quickly... [42:04] talk about that I didn't show you it is [42:08] You can also change the fidelity in here, like something else. [42:12] that, like, I... [42:14] just miss is like just give me like monospace fonts so that you know you're looking at something fake [42:19] Um, of course it didn't work. 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. It didn't do it. Okay. But this is bringing me back to my, like. [42:32] Truly OG designer days. I used to do this. You all, you have to be very old to appreciate this. [42:37] So we used to do these designs in Photoshop. [42:40] And, you know, you get these like long scrolly things, you're, you know, rounding corners by hand, all this stuff. Yes. And then one of the tricks I used to teach my designers is I said, [42:51] grayscale the whole thing and look for contrast. Yeah. [42:55] And. [42:56] You built it. Yeah. It's just a mode. Like, this is... 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... [43:11] I actually...

[43:12] So I worked at Shopify before stroke and something that we did at Shopify [43:16] to signify like [43:18] work and progress alike. [43:20] still figuring things out as we would change the fonts to comic sense which is like both like deeply painful but also you you knew visually like immediately you're like this is non-dub um which i love and so like having these built-in nodes we can i guess like see the [43:36] very clearly that it's not done or like black and white or monospace is my favorite is just like [43:41] Clearly this is not the dashboard, but like [43:43] You get it. It's like 80% of it. [43:46] um is really cool and so that's built in and then the other thing is like [43:50] This is the core of the original prototyping tool and now in like a visual setting, but [43:55] you can emulate different states and stripe really easily, so... [43:59] um i don't know you want to override a certain nav section or [44:02] 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 [44:08] 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 [44:15] 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. [44:21] I love it. I'm thinking about your Shopify Comic Sans example and I'm like, oh, it's balsamic core is what it is. You know, remember the old wireframe? [44:32] I kind of want that in here is like the goal eventually. Like, can we build abstracted, like, lo-fi stuff and, like, build, like, maybe balsamic mode is the right way to describe. You know. See, you know. If you know, you know. Okay, this has been...

[44:45] So incredible. Just to recap for folks that have made it this far with us, [44:49] You built a pretty high fidelity replica app that anybody could pull down. [44:54] run locally or in a dev box, had a bunch of cursor rules, you turn that into [44:58] a web-hosted, interactive... [45:02] prototyping tool with a bunch of, I think this is the trick, [45:06] 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... [45:20] design team and you can just ship fun things and [45:25] work things and then 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 is really changing. [45:34] Yeah, I mean, do we have like two minutes to show you one more thing? There's one more thing. There's one more thing, y'all. One more thing. I wanted to show this prototype that two designers... [45:44] built internally just like using the tool um so ryan and sarika they've been building like [45:50] the entire, they work on the radar product, which is like fraud detection. [45:53] And like for them, [45:55] They've been basically like working on net new features and being able to like actually show the entire multi-step flow. [46:01] from every point of the journey, like, okay, we're on Stripe Home. [46:05] You see a banner that's like this. [46:07] 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. [46:14] all working like you can add a note hi and it will work you can even like jump into the rules and see what reason something happened like

[46:23] being able to do this like really, really high fidelity, like here is the exact way the dashboard will work also changes the handoff. [46:31] Like the handoff for this piece of work on radar, it's been fascinating because it's like, [46:36] They literally have a pull request of a prototype that I had, 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 they're like. [46:47] I'll just use the prototype as the source of truth. And like being able to just pick that up and be like, [46:52] All of the components are the same, there's some translation to do. [46:55] But like they can just take it and do that as a huge change. [46:59] And so, like, having that level of, like... [47:01] preciseness and not having to like [47:03] I was going to show my age again, like red line of 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. I love it. I love it. Oh, prototypes everywhere. Okay. [47:18] You've blown my mind. [47:20] Now I want one of these. I will say one trick that I've also used something like this for, because I built a very similar kind of like replica app. [47:27] Cool. As I make every component, [47:30] a downloadable PNG so that we use it in marketing assets. [47:34] Oh, that's good. So you know, like how many, how many often are you screenshotting stuff? And I'm like, I need a real example of like an enterprise, you know, PRD or this component with this. [47:45] So then I just like everything, every element you can download as a PNG and then you drop it into slides and stuff. Can I say like the worst and best thing?

[47:53] 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 [47:59] 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? Yeah. And you can just impose your will on your teammate customers as opposed to like have to worry about your real customer feedback. Well, right. Like let's just, let's just change the way we all work. Like, but it does speed up their process, right? Like if we can, I don't know. One idea I've had in the back of my head for a while that I tried at one point and was just like. [48:27] too many layers at the time was like, [48:28] Just let me clone a dashboard URL, like give a dashboard URL, clone the whole thing. And it will be in here. And like, then you can, 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. And so I think like we're nearing that where like. [48:43] You can have this like pretty compelling facsimile of your environment and like [48:48] much more rapidly 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 [49:00] Yeah, I find it. I find it very exciting. I just have to stop myself sometimes. I'm like, stop, stop adding things. [49:05] All right. And speaking of stop adding things, I know I have to get you out of here to 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. [49:15] My first one is, this is my hypothesis, that every parental leave [49:20] is what, like, [49:22] People are spending...

[49:24] Vibe coding. They're just spending their parental leave holding a baby in one arm and holding a clod in the other. [49:30] And making stuff happen. Are you... [49:34] AI-ing through your parental leave. Tell me the truth. Yes. [49:39] It's so funny because this is my second child. [49:42] My first kid, I feel like these things were nascent and didn't really exist. [49:46] This time it's like so different, right? Like you can just yeet. [49:50] a prompt into call card 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 can flash it up really quickly if I can find the browser window. That's basically like. [50:08] This is the most... [50:09] 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. [50:17] You take a photo of the receipt, it's like, expensify sort of. [50:20] And then that's the product. [50:22] 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 [50:29] 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 [50:36] 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 [50:42] You're like, where did I get that? I can never find the receipt ever. Okay. And so, yeah, I love this. Let me, 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.

[50:59] after kid number two is done with it. [51:01] 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. [51:17] That is Jean. [51:18] Yes. [51:19] Well, thank you. I need to finish it. Also like when the warranty expires, if it requires any maintenance. Well, that was the only 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. [51:34] But I had a kid during that time. Yeah. And I, you know, if I had had a week's notice, I would have been like quickly emailing the company. Yeah. So that's why I did it. You need to join the family group. [51:47] 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 i'm there okay i clearly need more side projects don't i clearly okay oh and this has been amazing uh last question when ai is not listening when you're whispering you're like claw make no mistakes yeah my baby's crying make no mistakes [52:10] When it's not listening, what is your prompting strategy? [52:13] Hmm. [52:14] uh all caps no that's fine i do a lot of shouting um i think i try i just try and be really specific like i i can might i have a lot of meandering career paths i had a content background at one point [52:29] and like just being specific up front 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

[52:39] If I... [52:41] As soon as I've sent the first shouty prompt, [52:44] 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... [53:07] 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 like surely I'll get this to work but like often just throwing it away and starting again throw it away [53:19] I love this. Oh, and this has been so fun. Where can we find you and how can we be helpful? [53:24] I'm on Twitter. Do we still say that? I say that. [53:27] Twitter at at OW, very short username. [53:30] 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 [53:46] Like this prototyping thing, we believe in it so much that we're hiring like [53:50] I don't know how to describe it, but like a design engineering type person to like drive this stuff. Like we think it's going to transpond the way that we build. [53:58] And so we're hiring that kind of person so I don't have to build it. [54:01] as my other job um so please join us if you're like the kind of weirdo like that me likes to code and also likes design stuff uh send me a dm i'd love to talk

[54:10] Love it. Well, thank you, thank you, thank you for joining How I AI. [54:13] Yeah. Thank you for having me. [54:24] 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.