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? Like, 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. Oh my goodness, PM's 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 like, is this the real product or am I looking at something fake?

Welcome back to How I AI. I'm Claire Vaux, 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 vibe coded his own vibe coding platform for their internal design prototypes. It is one of the most impressive internal tools I have seen and such an awesome way to rethink how your product builds products with tools. Let's get to it. This episode is brought to you by Salego. Every company today wants AI to improve how work gets done. The fastest way is building it directly into everyday business processes. Automating employee onboarding, keeping customer data accurate, managing orders and inventory, or resolving finance and operations issues. When AI lives inside the flow of work, it can update records, trigger approvals, route work, and kick off the next step across systems. That's how teams operationalize AI and deliver measurable results. Salego makes this possible, and now with Salego Aura, it's never been easier. Celigo Aura gives you access to the entire platform through natural language, connecting your systems and turning intent into action. All of it under your control. Companies like Databricks, PayPal, and Olipop rely on Celigo to run critical business operations at scale. Ready to operationalize AI? Visit celigo.com/howiai. That's C-E-L-I-G-O.com/howiai. go.com/howiai. Owen, thanks for joining How I AI.

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 how to— we were joking before we started recording— how to get prototypes that don't look like generic Tailwind Indigo Slop. So tell me about, tell me 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, I'm sitting in a lot of design reviews and all of the designers at Stripe right now are like playing with these tools. They're exploring, they're like, you know, trying, I think, you know, v0 is pretty popular internally. We have a bunch of other different tools and like they're sitting there like trying to build the Stripe experience in these tools. And kind of like what you're saying, they end up with this like weird uncanny valley, like Tailwind, we call, um, like the Indigo, like blurple internally. So like blurple swap 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.

Yep.

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. And no, no foul to these designers. Like I get that. But I was kind of thinking like, we have a design system, like this thing is very predictable. These tools should know about it. And then we can like construct the dashboard from those building blocks, like pretty reliably. So I basically ended up starting on this, like, 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. And what it does is it makes it basically like really easy to get a dashboard-like environment, like a very realistic dashboard without having to think about it much. So what it is, is it's basically like a bundle of cursor rules. It's, you know, a bunch of React that like sets up the navigation and the like Chrome and some routing to like let you have the prototype in the frame. And all of those things mean you can like jump into Cursor or Clogcode or whatever. And you can be like, I want to build a dashboard page with this, this, and this. And it like knows how to do a pretty good job. I would say like, it gets you there like 90% of the way most of the time. Don't get me wrong. It still makes mistakes. It will make slop, 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 from there. And it's been really interesting to see what people have built. Like, I can show you, walk you through a couple of examples, but it's sort of been this like very transformative thing because all of a sudden I'm sitting in these design reviews and like, it's so convincing that I'm like, is this the real product or am I looking at like something fake? And so that's kind of a cool change to see happening.

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

Maybe like some context on me actually. So I, uh, I lead the like developer sort of space at Stripe and my background is actually engineering based. And I actually switched in the wrong direction. I feel like for a design manager, usually like a designer, usually people go the other way. I always had like an engineering slant to my roles and I always kind of considered it a superpower. So when I would think about like my teams, I actually loved hiring kind of technical designers, I would call it, where they understood enough. Often in the interviews, I'm like, do you feel like you can, 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 Cursor, ClawCode, 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, 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 Sail. And then it was an MCP integration with Sail. 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 into 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 Sail MCP server before writing any code. And then like, I don't know, there's some common like pain points and things it should avoid, what it should do if the MCP server is unavailable. LLMs are so helpful. They will just like imagine the entire design system without telling you when it's not there. So like all of these things, you know, I'd like sort of whittled down through my various, um, 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're going to 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, um, so initially we had like, it was running locally. You would just like run npm run whatever. But we have DevBox infrastructure. I think you talked to the Minion folks previously. So you've probably heard about that. Um, And so like dev 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/photo- and it just creates one. It's like ready to go in 2 minutes. 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. Um, and so those, like the benefit of those is you get a URL. And so you can be in the design review and be like, just go to this. And like, can I just say, being in a design review where I can click things is my favorite. Like, I, I love design reviews. I'm a very like nosy person who loves seeing what people are working on, those kinds of things. But like, for maybe the last 5 years, it's been like, 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 gonna 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 wanna see a slideshow again. It's like demos, not memos is something that, uh, Dan Nelson, another design leader at Stripe talks about a lot. And I'm like, this is the way that we can do that.

So. What I think is interesting about this, especially for a product like Stripe, is it's such a data and visualization heavy product. Yeah. And I used to tell this to my design team at LaunchDarkly, you know, 2 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.

Right.

And we were building a lot of dashboards and what a great kind of experience as a designer to— yeah, you know, I'm looking at your, your dashboard, if you don't mind pulling it up. Yeah, 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—

Getting like one transaction a day?

Exactly. And, and so I think the ability to prototype with data in code as a designer Both lets you make more interesting prototypes and lets you push the edges of the underlying data and use cases to make it more practical.

Well, that's it. And like before it was like, even just, I don't know, the amount of effort it would be to get all the various states into a Figma file was just like unhinged. Even like if you think about internationalization as one of them, that's my favorite as well. It's like. Oh, it's in Dutch now. Okay. It looks terrible. Like, cause 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 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 wanna show my age, but I like to tell people when I used to have to walk uphill both ways to my CSS, like, right, 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, 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 that you can just—

I have not seen Lorem Ipsum in a while. I'm horrified.

I know, right? How lame. I used to be a Lorem Ipsum, I used Hipster Ipsum. That was like when it finally ended. Um, but I used to have to paste that stuff in. You would do dollar, 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. the same components. And I just think now with this, this transformation in terms of live prototyping, you can design more interesting things and, you know, have them touch reality a little sooner, which is what we all want.

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.

Yep.

But like, what are the error states? Like, what other things can you do on the page, right? Like, I'm in all these design reviews where they're like, what does that button do? And they're like, and that's, that's okay. But it's also like, now we can actually build stuff that's just really like well thought through and like everything that's there is very intentional. Um, and like shows you the path as well, right? Like the amount of work you have to do in a Figma file often to like I don't know if you, if I imagine something like a workflow builder, it's like you have to get the landing page and then like the job and the workflow builder. And then the end is, it's like, actually I only wanted to show the end bit, but you need the context. Well, now we can wire up a prototype and like reuse the bits once you've got them, by the way, cuz it's all in production and mostly looks the same. Then you can like play with it and like really sequence it all out once, which is really cool.

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

Yeah. So I think like the biggest challenge that I've seen, so like just to, just to level with you is we have a like very large monorepo and it's like getting that running on your laptop is a little fiddly and like Cursor and ClawCode and all of these tools make that a lot easier, but it's like a little bit slow. It's like a bit annoying. And like you alluded to earlier, you also like I don't know, you, you can't share the URL very easily, like those kinds of things.

Can I share one other thing? I, I might hypothesize, which is when you're a software engineer in a, in a, in a company, you get issued the like 18-inch MacBook Pro behemoth that can run anything locally. And designers don't always get the machine. And so I think that's another barrier.

Yeah, that's something I, can I just say, uh, we thankfully got right. Like, I think when this started happening a year and a half ago, Um, designers started being considered like engineers in many ways internally. And, uh, 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 love it. I call mine, um, Big Boy.

Yeah.

And I tell my kids—

It's like the chonk book.

Yeah, chonk book. I'm like, can you go grab me Big Boy?

And yeah.

Oh my God, so good. Okay. So, so, um, lots of challenges with running, you know, big monorepo locally. I empathize with that. So, so what'd you, what'd you do to solve that problem?

So what I wanted, like my dream was I want something that's like v0, but fast, like a really opinionated workflow for like building Stripe-based prototypes. I know that's like very specific, but it's like, You know, we have all of these tools internally that are really cool. Um, you know, we can connect different data sources together. Why can I not just do this in my browser? Like, why do I need Cursor? And so the, the framework I approached it with was like, okay, I have this really cool, like, React, uh, site emulator, I guess, or like prototyping tool. Could I wrap that somehow in a way where it's like, you can still use Cursor if you want to? Like those, those folks, really good at like LLM training and like giving you all the options and blah, blah, blah. But like, now I wanna be able to layer on a thing where you can just build it in your browser. So you don't have to go into Chris, you don't need any app. I just wanna like go on the web and be like, I wanna 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, a URL, it creates it, it takes about like a minute. And then you get to go to your DevBox URL. I'm just running it locally. So 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, like 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 use 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 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 there's steps. Uh, chat. It's a line chat. You didn't have to like do anything on your machine. You just went to a URL and you asked for it. Um, and it will go ahead and build it entirely in browser. Um, which is really cool.

Quick, 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.

Um, like yelling at Claude code for 18 months. I'm stupid.

Okay, great. There you go.

Um, it's a mixture of like, I don't, I definitely handwrote some code, but not much. Like, I think having the engineering background made it work, right? Because I know what I need to achieve and like how to get the architecture right. 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 became, this started as a like, could I make something that lets me do this? And then became a, Oh my gosh, it works. I'm just going to keep adding features. 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 there's, you know, it's just running on your dev box. So that's fine. And so I have a lot more leeway maybe than like if you were shipping to production. 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, it's working on adding Avera in here. So it should show up pretty quickly. And what's, I think, like been really cool for me to see is like seeing the different types of users that have shown up in here. Oh, it's going to self-test now. 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. So it's taking a screenshot and checking its work, which I really love.

Um, so this is like a really cool You really let, you really said Claude Code, make no mistakes.

Yeah, I would. 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.

Yep.

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. Um, 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 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/howiai. That's $50 in Cursor credits by going to chatprd.ai/howiai. I love this, and I do wanna 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.

Yeah.

But it'll create multiple variants and let you select. The other thing that I think maybe you'll wanna play, you, you kind of play with, with data.

Yeah.

Is it gives you, um, kind of like modes of the design. So you could be like extreme design. Like how far are you letting, letting the, um, the AI go with the design system might be something you play with. Because one of the benefits I do think of, um, this prototyping tools, and I'm curious what you think as a, a designer that works on a very opinionated code base, is the happy accidents of I would've never designed that, but that's kind of interesting.

Yep.

And you wanna leave enough leeway, I think, for, for those moments to come out, cuz I think it's a real benefit.

Yeah. I think that's like where I get excited is you can just be like, Claude, make 8 variants of this thing that are very different and like it will cook and then you can sort of like take bits from each of them. Um, that's actually something I kind of wanna, it's my next quest I think is building in like a crazy 8s mode almost like it just spits out 8 designs and you choose the pieces. It's not super rigid with the design system. In fact, frankly, like my favorite thing with this is just doing silly stuff. Like I showed you this 42/42 mode. It's like, okay, what can the design system do? I had another prototype where I was like, can I just make emojis rain in the dashboard? I don't know. Um, so, um, but like the idea there being like, if you want to keep pushing it, you can. And then the other thing actually that we have built in, and this is where the opinionated part comes through, is You don't have to just use our design system. So there's a little like rules selector in the sort of embedded thing. You can like sort of grant the LLM access to Tailwind. Uh, the amount of like shouty rules I have to have in the design system rule that's like, do not use Tailwind unless you're told to, is actually deeply amusing. But if you would turn that on, it's like a pre-themed version of our design system. So it's got like the right blurple. And that kind of thing. And so you, then you can be like, I want to do generative stuff, right? Because I think the issue with the design system is that like you can make list views and charts and like whatever, but doing something net new is harder. And so that's there for that reason. The other thing that I think you would have seen, what's it called? Agentation out there. Uh, we have our like own version that we had built internally. Uh, I don't want to be like, ahaha, first, uh, but maybe a little bit I will here. Where you can also like interact with the canvas directly to give the AI feedback. So imagine, you know, we have this payment analytics prototype with a bunch of charts on it. You can click this little annotate AI button and swap into the like selector mode and be like, I don't know, let's say, let's make the tooltip here hoverable with helper text.

I know.

And then you can like, I don't know, add a bunch of comments for the AI to fix, like right on the page. That's the other thing. Like I used to lose my mind in Cursor being like, the element with class name 82F, please fix this. And being able to just select something and like give the feedback and then hit like, like hawk 10 pieces of feedback to the AI to fix is really exciting. So, you know, add more padding to the table. Yeah. And so I'll send this off to the AI and it will just work through them. Like, it'll, it'll be like, okay, this comment, this one, um, and like do that. And the other thing that you can do before that— there's so many things I wish I could show you.

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. And at different companies, there are different traditions, but something that's common at Stripe is you will like show, share your screen, and then you'll like send a Google Doc link with like a table in it that's like, give me feedback as I go. And it ends up being this like dumping ground of like screenshots and like trying to explain the thing. Something that we built was design review mode. So you can jump into a comment section, you can click start review. And then like share a URL. Um, and then like everybody can comment as like a normal human. 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, there we go. It self-fixed it. I'm going to switch back to that commenting thing now. Uh, so imagine you want to do a Design review, um, you get all your feedback as like comments, like, what's, um, with this filter? So let's like try and imagine you're like wanting to go to a design review. You share the URL with like the leaders in the room and you get, you know, your feedback. You don't want the Google Doc. Um, oh look, my comment did send 7 times. That's fun. Um, so you get all these pieces of feedback from your design leaders and now you want to like go through and just like get a summary of it, I guess. So one, AI is really good at that. So in this case, I accidentally sent this a bunch of times, but you would get like a detailed summary of the design review at the top. And then you could actually enter like review mode and step through and be like, the filter pattern isn't right here. Please add 3 more options. I don't know if that's realistic, but whatever. 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 Doole's feedback for you and you can send this to her. And it's like my favorite thing to just like, right? Because designers have to follow up. Like there's all this extra busy work that you have to do after a design review and being able to be like, I fixed that. Here's the receipts thread is amazing.

One thing I want to say as a sort of step back analysis of what you're showing me, which is, I think a lot of people are going to watch this and be like, man, you know, like V0 is good enough or this is good enough. 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 design cultures, review cultures, building cultures are so different company to company.

Yes.

Right. Completely different. You know, I used to run this thing called Product Craft Friday. I wanted 3 hours with everybody on what we were building across everything.

Yeah.

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 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.

Yeah.

And I think that is not a product that anybody's going to build, is like the vibe check in the Design Root product.

But then you can, you can just do it.

But then you do. I'm like, you can just build it. And so I think people really underestimate the value of building internal tools right now, not to, as I said, like replace the ARR of a product you would buy externally, right? It's not that. It's so, it can be so precisely matched to the culture and cadence of your team that it actually gets used, right? You actually get higher quality.

Yeah. It's like, okay, we can actually nudge the way that we work in really satisfying ways. Like, you know, staffing internal tools teams has always been hard actually. Like I've had a few of those teams and like Stripe loves building custom tools. But like getting resources to build a weird design review tool for like whatever would have never happened before. And now we can just like completely evolve the way we work by just like building tools and like giving them to people. And something that I love about this as well is like, while I've been working on it, my whole thing has been like, anybody can contribute. Like if the design reviews thing is not 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. And so like, I get excited about that kind of thing because it's very empowering to be like, design reviews aren't working. Like, what could we, I don't know, what doesn't exist that should exist? I don't want to use Google Docs. I don't want to use this thing. And so it's similar, like even with the PMs who are using this, like, Something that you can actually do is you can just dump in a PRD into the chat from Google Docs and it just, it can go and access Google Docs. It knows how to do that. And like, then it can take it and just build it. And I think like making that barrier to entry that low is just incredibly magic. Like the amount of people who are like, oh my God, like I am blocked because I don't have a designer usually. Like I'm 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. Well, now he can like go and explore things in a really like high quality way, and we'll still design review it and all of that, but like he can unblock himself, which is like a whole new thing as well. Like, I will—

I—

can I just say, in the safety of this like very public podcast, the, the first feeling I had when I started making this was, um, I started seeing PMs use it and got like a little nervous. Oh my goodness, PMs designing. It's like, what's going to happen? 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, it's really cool to see that changing. And I actually, I think I love that PMs use it now. Like, at first I had that terror and now I'm like, no, this is like making the relationship better.

I, you know, maybe I'll add one more thing to that, which is your conversations, I'm guessing, turn more into let's talk about the work and the thing I built and how can it be better than perpetual arguments over whether we should staff a designer on the MCP or something else, which has been our life for, for like how many conversations are going to Who should be on the project versus here's the actual work and let's discuss that. And I'm sure that makes everybody especially mad.

Just makes it easier for them to also advocate for it, right? It's like, okay, this is what we can do with the current system, but like we need to, we need to push it more and like go beyond what is just like capable now. And so it's, it's been really interesting to see how that's like changing the conversation too. It's like, hey, here's, here's like what we can do with what we have off the shelf, but we need a designer to help us elevate this experience. And so like It's also making it easier to talk the same language is 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 of like 7 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. I have, like, we, should we just like try and like build something random really quickly?

Let's do it.

Like full, like live demo.

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, let's build a BFCM. Is it gonna know what that is? We'll see.

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.

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, make sure the data is realistic in 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 2 with a little baby, we got to get you voice mode on this.

I, I know. Yes. That's actually a good point because it has, that's changed my life as 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, you, 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. This is actually really interesting though, like as maybe a way to describe how this thing works as we watch it cook. The, the, under the hood, what's actually happening right now is like I said, It's building the dashboard. It's calling our Sail MCP server. So that's like the design system, like getting all of the content and like sort of working through the problem. So it's like, what components do I need to do to build that thing? Um, how will I structure the page? What template will I use? Um, and then it's like going to figure out how to cobble them together and hopefully make something beautiful. We'll see at the end. It's working on it. We're seeing it made a page already. Um, 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. Um, it's got like a bunch of extra things. Like you can, um, deploy the prototype to a like permanent URL by chatting with it. Like all of those types of like niceties. You can also be like, check your work and it will. Um, but it's largely the same. A lot of my rules, this might be a little spicy, are like for Figma files. It's been really interesting, like trying to, I think like everybody's still figuring out how this changes in this world. Like frankly, I think I come from the engineering world, so I'm like, it's easier for me to use words to like describe the page I want to build. But like designers want to make a Figma and then translate it, which I totally get. But like Figma and like a canvas is pretty hard for these tools still. And so a lot of the rules are like insane things to like make Cursor act— sorry, not Cursor, make Figma act correctly. Because it'll be like, oh, here's 1,000 Tailwind styles and like this random component I built from scratch for some reason. Oh, like matching, the biggest one is like matching our internal components to like the thing in in Figma, like if you see the thing that looks like this, make this, not that. Like, I feel insane writing these rules, but like once you've got them, it works pretty well.

So, um, I think what you said is really funny. As you said, like as an engineer, I feel like prompting it this way is, gets a better result. And designers like, no, I feel like as a designer, I was talking to a friend about 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 and like cannot recognize the slop in others. I think so. 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 set an expectation this will solve everything. Like, it's been interesting trying to like balance that with all of this work. Like, how can I make sure that the, um, the tool knows enough to be dangerous? Like it gets to 80%, but like that taste, that craft is like, that's why designers will always exist in my opinion. Like they, they know how to elevate the experience. Like, This thing knows how to use the components. The components are well designed, but like, it's not going to be perfect. And like, we are here to steer them.

Yeah. I'm like, you know, hey, hey, hey, Protodash. That's a, 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 and it's 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. I, of course, used Bloople. It does love a good Bloople. 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 much else. 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, jump back into here and say, the chart is way too tall. It should Be a narrow page spanning chart and just like, it will fix it.

Well, the other thing you might need to put into your overall rules is if you scroll down, boy, oh boy, oh boy.

Emojis. Does it have an emoji? I know it. I have a rule in Cursor for my own, like when I'm working on the actual tool that I clearly need to put in the tool. 'Cause like I lose my mind.

This is not what I would expect to see in—

But look at that. The chart is fixed, right? I like pointed at it with the built-in, like, look at this element for me LLM tool that we have. And I said, fix this, and it fixed the chart without me having to describe it. Um, and the, the page is live. Like, don't get me wrong, it's like not the most beautiful thing I've ever seen, but it's— now you could like iterate on it and like build up from there. It looks like Stripe-ish.

Yep.

Um, it uses the right— it didn't use Comic Sans.

Um, there we go.

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

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 Truly OG designer days. I used to do this. You all, you have to be very old to appreciate this. So we used to do these designs in Photoshop.

Right.

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, grayscale the whole thing and look for contrast.

Yeah.

And 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, I actually, so I worked at Shopify before Stripe and something that we did at Shopify to signify like work in progress or like still figuring things out is we would change the fonts to Comic Sans, which was like. both like deeply painful, but also you knew visually, like immediately you're like, this is not done, which I love. And so like having these built-in modes, we can, I guess, like see very clearly that it's not done or like, like my, or monospace is my favorite is just like, clearly this is not the dashboard, but like you get it. It's like 80% of it is really cool. And so that's built in. And then the other thing is like, This is, this is the core of the original prototyping tool and now in like a visual setting, but you can emulate different states in Stripe really easily. So, um, I don't know, you want to override a certain nav section or, um, you want to show the like sandbox's banner or hide the nav. Like you can do all of that in your prototype. And so these are like things that would have been otherwise hard. Actually, merchant name is my favorite too. It's like you're doing UXR and you want to pretend for Uber to like get them into the immersion. Like you can just write the word Uber in it. Which is, which is really cool.

Um, I love it. I'm thinking about your, your Shopify Comic Sans example and I'm like, oh, it's Balsamiq Core is what it is. You know, remember the old wireframe? Yeah.

I kind of want to, 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 Balsamiq mode is the right way to describe it.

You know, Steve, you know, if you know, you know. Okay. This has been So incredible. Just to recap for folks that have made it this far with us, you built a pretty high fidelity replica app that anybody could pull down, run locally or in a dev box, had a bunch of cursor rules. You turned that into a web-hosted interactive prototyping tool.

Mm-hmm.

With a bunch of, I think this is the, the, the trick, a bunch of controls, both for how your design process works in terms of getting feedback on specific components, reviewing them. Processing them and different states of your prototype that, you know, are useful across the design team. And you can just ship fun things and work things. And then, yeah, 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.

Yeah. I mean, do we have like 2 minutes to show you one more thing? Like, there's one more thing.

Well, like, there's one more thing, y'all.

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

I love it. I love it. Prototypes everywhere. Okay. Uh, you've blown my mind. Now I want one of these. Um, I will say one, one trick that I've also used something like this for, cause I built a very similar kind of like replica app.

Cool.

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

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. So then I just like everything, every element you can download as a PNG and then you can drop it into slides and stuff.

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

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. Uh, one idea I've had in the back of my head for a while that I tried at one point and it was just like too many layers at the time was like, just let me clone a dashboard URL. Like give a dashboard URL, clone the whole thing and it'll be in here. And like, then you can very, I don't know, you've got customer feedback. I wanna 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 you can have this like pretty compelling facsimile of your—

Yeah.

environment and like 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, yeah, I find it, I find it very exciting. I just have to stop myself sometimes though. I'm like, stop, stop adding things to this thing.

All right. And speaking of stop adding things, I know I have to get you outta here to the little one soon. So we're gonna do one lightning round. Well, 2 lightning round questions. I'm gonna get you outta 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.

Yeah.

And holding a quad in the other.

Yeah.

And making stuff happen. Are you AIing through your parental leave? Tell me the truth.

So, yes, I, it's so funny cuz like, uh, 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 Claude Code from your phone and like all of this stuff. So he'll be like asleep on me and I'm just like, can you make an app that does this? And like, yeah, I made, I made at least one app. I think I, uh, can flash it up really quickly if I can find the browser window. Um, that's basically like, This is the most dad thing of all time that you would ever want, but like an app where you take a photo of like, say you buy something expensive, like a bike or a TV. Um, you take a photo of the receipt. It's like Expensify sort of. Um, and then of the product. And then it basically like saves the serial number in the app. First of all, who saves this stuff? When you bought it, from where, right? Downloads the manual. Uh, and then just like you have it there. It's like, I bought this on this date for this much. Here's the manual. Um, because I have this thing where it's like you buy something nice and then like 2, I don't know, 18 months later it might break. You're like, where did I get that? I can never find the receipt ever.

Okay. Um, and so, yeah, I love this. Let me, I'm gonna do a feature request here because your kids will get older and those Woom bikes are expensive.

Oh, they're so good though.

And they're so good. But at some point after kid number 2 is done with it, you're gonna want like 3 years later a reminder to sell this thing.

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

Remind me in 2 years this thing needs to get out of the garage and, um, somewhere else. That is genius.

Well, thank you. I need to finish it, but—

Also, like, when the warranty expires.

Yep.

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 3 days before the warranty was up. But I had a kid during that time. Yeah. And I, you know, if I had had a week's notice, I would've been like quickly emailing the company.

Yeah.

So that's why I did it.

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 OpenClaw and all these things to do real boring cat stuff. I'm there.

I clearly need more side projects, don't I?

Clearly. Okay, Owen, this has been amazing. Last question. When AI is not listening, when you're whispering, you're like, Claude, make no mistakes. Yeah. My baby's crying. Make no mistakes. When it's not listening, what is your prompting strategy?

Hmm. All caps?

No. That's fine.

I do a lot of shouting. I think I try, I just try and be really specific. Like I can, my, I have a lot of meandering career paths. I had a content background at one point. And like, just being specific upfront helps a lot. And then like, uh, I have, I have learned, okay, actually I'll, I'll give you this piece of advice. I find if I, as soon as I've sent the first shouty prompt, it's time to like reset the like /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've 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 retrain my brain, right? Like, as somebody who has built a bunch of stuff, you get that like sunk cost fallacy at some point. You're like, surely I'll get this to work. But like, often just throwing it away and starting again is the thing you gotta do.

Yeah, I love this. Owen, 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 @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, put dot before the MS and it works. And gosh, how can you help me? How, like, just build cool design tools. We're actually like this prototyping thing. We believe in it so much that we're hiring, like, 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 gonna transform the way that we build. And so we're hiring that kind of person so I don't have to build it as my other job. Um, so please join us if you're like the kind of weirdo like that, me, that likes to code and also likes design stuff. Uh, send me a DM. I, I'd love to talk. Love it.

Well, thank you. Thank you. Thank you for joining How I AI.

Yeah. Thank you for having me.

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