← How I AI
How I AI
The internal AI tool that’s transforming how Stripe designs products | Owen Williams
00:54:44
Loading summary
Transcript150 lines
- [00:00]
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?
- [00:11]
Claire Vemp
You're seeing a lot of designers use it, but maybe even more PMs.
- [00:14]
Owen Williams
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?
- [00:20]
Claire Vemp
I said, how painful is it to prototype a data dashboard with all its interactions, all its fun filters, all its states, different states, zero data, a bunch of data. It is nearly impossible to do that in figma.
- [00:33]
Owen Williams
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?
- [00:45]
Claire Vemp
Welcome back to HOW I AI I'm Claire Vemp, product leader and AI obsessive, here on a mission to help you build better with these new tools. Today I have Owen Williams, design manager at Strategic 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 in 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 Soligo. 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. 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. All of it under your control. Companies like Databricks, PayPal and Olipop rely on Soligo to run critical business operations at scale, ready to operationalize AI. Visit soligo.com howiai that's C E L I G go.com howi AI oh, and thanks for joining how I AI hey,
- [02:24]
Owen Williams
I'm happy to be here.
- [02:25]
Claire Vemp
I know that you're stepping away for a few minutes from parental leave with your second, so I appreciate you giving us the time. And what I Love about what you're going to show us is how to. We were joking before we started recording how to get prototypes that don't look like generic tailwind Indigo slop. So tell me about, tell me what the problem you're facing and kind of how you came to this solution that you came to.
- [02:51]
Owen Williams
You know, I'm a design manager, so I'm. I'm sitting in a lot of design reviews and all of the designers at Stripe right now are like, playing with these tools. They're exploring, they're like, you know, trying. I think, you know, 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 weird, uncanny valley, like tailwind we call the Indigo 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 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 construct the dashboard from those building blocks pretty reliably. So I basically ended up starting on this. 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 a bunch of React that sets up the navigation and the 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 clog code or whatever. And you can be like, I want to build a dashboard page with this, this and this. And it, like, knows how to do a pretty good job, I would say. Like, it gets you there. Like 90% of the way most of the time, don't get me wrong, it still makes mistakes. It will make 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. 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.
- [05:27]
Claire Vemp
I'm curious if you just walk us through how. Who's. 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 that.
- [05:39]
Owen Williams
Maybe like some context on me, actually. So I lead the, like, developer sort of space at Stripe, and my background is actually engineering based and I actually switched in the wrong direction. I feel like for a design manager, you feel like a designer. Usually people go the other way. I always had an engineering slant in my roles and I always kind of considered it a superpower. So when I would think about 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 know enough terminal to be dangerous? This is pre AI, just to be clear. And that was something that always got me excited. Is 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 I get why a lot of people didn't know how now AI totally changed that, right? Because now you can just jump into cursor clock, code, whatever, and just be like, how does git work? And that's actually been the biggest mindset shift I've had to 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 a 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 had like, sort of whittled down through my various experiments. And this means that like a designer or a PM or anybody can very quickly like, open this folder in Cursor and just be like, help me make a prototype that shows this. And it just comes out, like, beautiful. And to the quality bar that we expect. Like, Stripe has a really high quality bar for all of our experiences. And that's the other thing. It's like you go into these reviews with a real prototype and it looks bad. It's just like, surely we can do better. And so that's what this sort of, like, helps with.
- [09:05]
Claire Vemp
But looking at this, this is something that people are running locally. So they're pulling this, they're running it locally, they're making the changes. And then in the meeting, are they just presenting sort of off their local machine?
- [09:15]
Owen Williams
So it's a mix, actually. What's really cool is so initially we had, like, it was running locally. You would just like run npm, run, whatever. But we have dev box infrastructure. I think you talked to the Minion folks previously, so you've probably heard about that. And so, like, dev boxes at a high level just let you just get a server on the Internet in a certain state internally. So now designers can just go to a, like, URL. It's like, go slash, proto dash, and it just creates one. It's like ready to go in two minutes. And all they have to do is like, just connect to it and curse it. And so it looks like it's running locally. It's not. It's already configured. They didn't even have to run npm. That's actually like my favorite magic trick as it just works. And so those, like, the benefit of those is you get a URL and so you can be in the design review and be like, just go to this. And like, can I just say, being in a design review where I can click things is my favorite. Like, I love design reviews. I'm a very, like, nosy person who loves seeing what people are working on, those kinds of things. But, like, for maybe the last five years, it's been like drowning in presentations, right? Like, show me a JPEG in your figma. Like, all of these things. And it's like, how magic is it when somebody comes and they're like, okay, I'm not going to screen share. Here's my prototype, here's the context. Let's just like, go through it and give feedback. And so being able to do that has been like the. Probably my number one goal is like, I never want to see a slideshow again. It's like, demos, not memos, is something that Dan Nelson, another design leader at Stripe, talks about a lot. And I'm like, this is the way that we can do that.
- [10:46]
Claire Vemp
So what I think is interesting about this, especially for a product like Stripe, is it's such a data and visualization heavy product. And I used to tell this to my design team at LaunchDarkly, you know, two years ago, when AI and this kind of prototyping was really coming out, I said, how painful is it to prototype a data dashboard with all its interactions, all its filters, all its states, different states, zero data, a bunch of data. It is nearly impossible to do that in. 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,
- [11:38]
Owen Williams
the company with getting like one transaction a day.
- [11:40]
Claire Vemp
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.
- [11:57]
Owen Williams
Well, that's it. And like before it was like even just, I don't know, the amount of effort it would be to get all the various states into a figma file was just like unhinged. Even like if you think about internationalization is one of them. That's my favorite as well. It's like, oh, it's in Dutch now. Okay. It looks terrible because it's 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, it just does it.
- [12:28]
Claire Vemp
I love that.
- [12:30]
Owen Williams
You know, you could add an additional one here that's like messy data and it will just do it. And I think that's the transformative thing is like show me how real users will see. This is something that was really hard until recently.
- [12:43]
Claire Vemp
Well, and I don't want to show my age, but I like to tell people when I used to have to walk uphill both ways to my css, like right. There used to be a cottage industry of Lorem Ipsum text generators just for putting even just fake copy in. This is like when I was making web designs in Photoshop. So.
- [13:04]
Owen Williams
Right.
- [13:04]
Claire Vemp
You know, and, and I just.
- [13:05]
Owen Williams
Those were the days.
- [13:06]
Claire Vemp
You do not know designers out there. Please, if you have not experienced this, you do not know how spoiled you are that you can do.
- [13:13]
Owen Williams
I have not seen Lorem Ipsum in a while.
- [13:14]
Claire Vemp
I know how I used to be a Lorem Ipsum. I use hipster Ipsum. That was like when 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 on a dashboard. You were draggin 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.
- [13:51]
Owen Williams
Yeah. And also like the multi step flow is the other thing. Right. It's like Often you're just showing like, there's a one JPEG and maybe a second one where it's like, here's this and this. Everything's great.
- [14:01]
Claire Vemp
Yep.
- [14:01]
Owen Williams
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 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 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 ed. It's like, actually I only wanted to show the end bit, but you need the context. Well, now we can wire up a prototype and like reuse the bits once you've got them, by the way, because it's all in production and mostly looks the same, then you can like play with it and like really sequence it all at once, which is really cool.
- [14:50]
Claire Vemp
Well, and let's get back to the prototype builder. So you built this, you know, react app that could run either locally or, or in these dev boxes, but then you decided to take it a step further.
- [15:01]
Owen Williams
Yeah. So I think like, the biggest challenge that I've seen, so like, just to, just to level with you is we have like a very large monorepo and it's like getting that running on your laptop is a little fiddly and like cursor and claw code and all of these tools make that a lot easier. But it's like a little bit slow. It's like a bit annoying. And like you alluded to earlier, you also, like, I don't know, you can't share the URL very easily. Like those kinds of things.
- [15:27]
Claire Vemp
Can I share one other thing I might hypothesize, which is when you're a software engineer in a company, you get issued the 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.
- [15:46]
Owen Williams
Yeah, that's something. Can I just say, we thankfully got right. I think when this started happening a year and a half ago, designers started being considered like engineers in many ways internally. And 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.
- [16:13]
Claire Vemp
Like, yeah, I, I love it. I call mine Big Boy.
- [16:18]
Owen Williams
Yeah. And I tell them it's like a chonk book is.
- [16:21]
Claire Vemp
Yeah, chonk book. I'm like, can you go grab me, big boy?
- [16:24]
Owen Williams
And yeah.
- [16:27]
Claire Vemp
Okay. So, so lots of challenges with running, you know, big monorepo locally. So, so what do you, what'd you do to solve that problem?
- [16:37]
Owen Williams
So what I wanted, like my dream was I want something that's like V0, but for us, like a really opinionated workflow for like building stripe based prototypes. And I know that's like very specific, but it's like we have all of these tools internally that are really cool. We can connect different data sources together. Why can I not just do this in my browser? Why do I need cursor? And so the framework I approached it with was like, okay, I have this really cool react site emulator, I guess, prototyping tool. Could I wrap that somehow in a way where it's like you can still use cursor if you want to. Those folks really good at like LLM training and like giving you all the options and blah, blah, blah. But like now I want to be able to layer on a thing where you can just build it in your browser so you don't have to go to Chris. You don't need any app. I just want to like go on the web and be like, I want to try out this thing. And so what I ended up building was this sort of extra layer called Protodash Studio. And so this is like almost 100% used in dev boxes. So you go to like a, a URL, it creates it. It takes about like a minute and then you get to go to your dev box URL. I'm just running it locally. So like the live demo gods appease us today. But when you go to it, you basically, whenever you spin it up, you see the things that you're working on. So you have your prototypes. I have a fun one here where you get fun ways to enter like the stripe test card number in weird ways. And then you can also see like the vibe prototyping feedback. 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, fraud detection product in frotordash. And then they use that to like emulate different business models, like you say, but also try new ideas. And they have this really cool baseline. But the other thing you can do is you can remix anybody's prototype at any time. I think that's something that's great about figma, except with this you can take that code and just start playing with their thing really easily, which I think is really cool. So 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. We're in this state. Our chat is 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 and it will go ahead and build it entirely in browser, which is really cool.
- [19:44]
Claire Vemp
Quick question. People are going to ask this. How did you build this? Like, what is the. Give me some little sniff components of how you built this.
- [19:53]
Owen Williams
Like yelling at Claude code for 18 months.
- [19:57]
Claire Vemp
There you go.
- [19:58]
Owen Williams
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. 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 say it's, it's working on adding a variant here, so it should show up pretty quickly. And what's I think like been really cool for me to see is like seeing the different types of users that have shown up in here. Oh, it's going to self test now. That's exciting.
- [21:12]
Claire Vemp
This is exciting.
- [21:13]
Owen Williams
Yeah, it 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.
- [21:21]
Claire Vemp
Yeah.
- [21:22]
Owen Williams
So it's taking a screenshot and checking its work, which I really love. So this is like a really cool demo.
- [21:28]
Claire Vemp
You really let, you really said Claude code, make no mistakes.
- [21:31]
Owen Williams
Yeah, well, pretty much like if you think about I said at the top, I was like, Stripe really cares about like quality and our quality bar is really high. I think like having a really opinionated way to build these prototypes means that we can do this. So like if I send it a figma link I'm like implement this, make no mistakes. Y it's able to like at least see the prototype, like look at the browser console, like take screenshots and like iterate on it to the point where it gets it pretty good and can ask for feedback. And so now it's finished. We have this variant bar here so you can like try different things. So here's my line chart demo. Ta da. It like went and swapped it out and like I think it's pretty cool to be able to very quickly do that from your browser. Like I don't have to do anything, it's just there.
- [22:20]
Claire Vemp
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 multithread our roadmap, I reach for Cursor as my favorite multimodel coding platform. Even better than building myself in Cursor, I love collaborating with bugbot to fix PRs for code security and quality and have begun relying on 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 how IAI 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 want to just call out again for folks that maybe aren't watching this variant bar in the bottom. There' very similar feature in Claude design of this. So quad design will now, when you prompt it to create a prototype, it says, how many variations do you want? As someone who, like, worked at many, many a B testing companies and did an a B testing startup, I'm like, oh, my time had finally arrived, you know, 20 years later. But it'll create multiple variants and let you select. The other thing that I think maybe you'll want to play. You kind of play with data is it gives you kind of like modes of the design. So you could be like extreme design. Like, how far are you letting. Letting the. 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. 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]
Owen Williams
Yeah.
- [24:23]
Claire Vemp
And you want to leave enough leeway, I think, for. For those moments to come out, because I think it's a real benefit.
- [24:29]
Owen Williams
Yeah, I think that's like, where I get excited is you can just be like, claude, make eight variants of this thing that are very different and like, it will cook. And then you can sort of like take bits from each of them. That's actually something I kind of want to. It's my next quest, I think, is building in like a crazy eights mode. Almost like it just spits out eight designs and you choose the pieces. It's not super rigid with the design system. In fact, frankly, like, my favorite thing with this is just doing silly stuff. Like, I showed you this 4242 mode. It's like, okay, what can the design system do? I had another prototype where I was like, can I just make emojis rain in the dashboard? I don't know. 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 pie 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 grunt 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. 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 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 agent agentation out there, we have our like own version that we had built internally. I don't want to be like ahaha first 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 hover hoverable with helper text and 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 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 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 all.
- [27:19]
Claire Vemp
I'm not in a rush.
- [27:20]
Owen Williams
I love it 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 at it that's like give me feedback as I go and it ends up being this like dumping ground of like screenshots and like trying to explain the thing. Something that we built was design review mode. So you can jump into a common section, you can click Start review and then like share a URL and then like everybody can comment as like a normal human. Oh look, the AI broke it finally.
- [28:04]
Claire Vemp
And you know what, it's fine. It's just internal tooling.
- [28:07]
Owen Williams
I love it. Well, it's probably going to like try and self fix it because it can see it. This is the thing.
- [28:13]
Claire Vemp
There we go.
- [28:14]
Owen Williams
It self fixed it. I'm going to switch back to that commenting thing now. So imagine you want to do a design review. You get all your feedback as like comments, like what's with this filter? So let's try and imagine you're like wanting to go to a design review. You share the URL with like the leaders in the room and you get, you know, your feedback. You don't want the Google Doc. Oh look, my comment did send seven times. That's fine. So you get all these pieces of feedback from your design leaders and now you want to like go through and just like get a summary of it? I guess so one AI is really good at that. So in this case I accidentally send this a bunch of times. But you would get like a detailed summary of the design review at the top and then you could actually enter like review mode and step through and be like, the filter pattern isn't right here. Please add three more options. I don't know if that's realistic, but whatever. 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 Do'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.
- [29:38]
Claire Vemp
One thing I want to say as a sort of step back analysis of what you're showing me, which is, yeah, 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 a lot of design teams. I am a specific kind of design leader and design cultures, review cultures, building cultures are so different. Company to company.
- [30:03]
Owen Williams
Yes.
- [30:03]
Claire Vemp
Right. Completely different. 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.
- [30:13]
Owen Williams
Yeah.
- [30:14]
Claire Vemp
And then we would create these things called vibe checks, where we would all drag the most recent work into one spot in the figma board 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.
- [30:26]
Owen Williams
Yeah.
- [30:27]
Claire Vemp
And I think that is not a product that anybody's going to build is like the vibe check in the design root product.
- [30:34]
Owen Williams
But then can. You can just do it.
- [30:36]
Claire Vemp
But then you. I'm like, you 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.
- [30:59]
Owen Williams
Yeah. It's like, okay, we can actually nudge the way that we work in really satisfying ways, like, you know, staffing internal tools teams has always been hard, actually. Like, I've had a few of those teams and, like, Stripe loves building custom tools, but getting resources to build a weird design review tool for whatever would have never happened before. And now we can just completely evolve the way we work by just building tools and giving them to people. And something that I love about this as well is while I've been working on it, my whole thing has been, anybody can contribute if the design reviews thing is not right, let's just evolve it. And so I actually get pull requests from designers 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 PID into the chat from Google Docs and it just. It can go and access Google Docs. It knows how to do that. And, like, then it can take it and just build it. And I think, like, making that barrier to entry that low is just incredibly magic. Like, the amount of people who are like, oh my God, like, I am blocked because I don't have a designer usually. Like, I'm. I'm a pm. I have a pm I work with on, 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 first feeling I had when I started making this was I started seeing PMs use it and got like a little nervous. Oh, my goodness. PM's designing, it's like, what's going to happen? But it's actually just been thrilling to see them having the tools to build things that look like stripe in the right way and being able to explore their ideas and actually also give them the visual tools to do it. I think the hardest thing for PMs is often they can't manifest the thing that they want to. It actually makes them better at communicating with their own designer. But also UXR is completely different. Like, they can test their idea a lot earlier in the funnel where it's like, I have this thing I want to do. Okay, how am I going to do that? I can build a prototype and like, just go and talk to some users and make them click it without it being an elaborate JPEG with like interactive zones everywhere. So it's really cool to see that changing. And I actually, I think I love the PNCs are now, like, at first I had that terror and now I'm like, no, this is like making the relationship better.
- [34:02]
Claire Vemp
I. You know, maybe I'll add one more thing to that, which is your conversations, I'm guessing, turn more into, let's talk about the work and the thing I built. And how can it be better than perpetual arguments over whether we should staff a designer on the MCP or something else, which has been our life for like, how many conversations are going to who should be on the project versus here's the actual work and let's discuss that. And I'm sure that makes everybody especially
- [34:29]
Owen Williams
just makes it easier for them to also advocate for it. Right? It's like, okay, this is what we can do with the current system. But, like, we need to, we need to push it more and like go beyond what is just like capable now. And so it's been really interesting to see how that's like changing the conversation to it's like hey, here's like what we can do with what we have off the shelf but we need a designer to help us elevate this experience. And so like it's also making it easier to talk the same language as the other thing is like I work on very technical things in the developer experience space where it's like really dense and like super like we've been working on this like web hooks thing of like seven steps for like a year now and it's like very complicated and there's all these moving parts and states and whatever and now we can actually just show them all as opposed to like trying to have to explain how webhooks work and like all of this different stuff. So it's been really interesting to see how that's changed as well. Should we just try and build something random really quickly?
- [35:24]
Claire Vemp
Let's do it. Speed run something.
- [35:26]
Owen Williams
I'm thinking it might be interesting to build a Black Friday Cyber Monday dashboard.
- [35:32]
Claire Vemp
Great, let's do it.
- [35:34]
Owen Williams
Okay, let's build a bfcm. Is it going to know what that is? We'll see. Dashboard for a pet store showing live sales on our chart. At the top of the page a ticker with the latest sales and what else should it have? I don't want to over complicated top performing products. Yeah, you had the same thought as me trending, right?
- [36:06]
Claire Vemp
Look at this. Still got it. Still got it as a brand new.
- [36:10]
Owen Williams
We're building together make sure the data is realistic in real time. And this is we're gonna full YOLO this and see what it does.
- [36:21]
Claire Vemp
Okay. And now while it's loading, I have to say as a now parent of two with a little baby, we gotta get you voice mode on this.
- [36:30]
Owen Williams
I I yes, that's actually a good point because it has, that's changed my life is just being able to like I don't know. I 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 the Claude voice mode, you can have a baby screaming and whisper in it and it still nails it.
- [36:51]
Claire Vemp
Yeah.
- [36:52]
Owen Williams
So I do need to add that this is actually really interesting though like as maybe a way to describe how this thing works as we watch it cook under the herd. What's actually happening right now is like I said it's building the dashboard, it's calling our Sail FCP 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 build that thing? How will I structure the page? What template will I use? 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, so we'll see where it winds up.
- [37:30]
Claire Vemp
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?
- [37:38]
Owen Williams
Yeah, it's pretty similar. I think it's probably a little bit more opinionated. Right. So there's additional tools that this has. It's like, got built in, like, browser tools. It's got like, a bunch of extra things. Like, you can 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, but it's largely the same. A lot of my rules 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 Figma and a canvas is pretty hard for these tools still. And so a lot of the rules work insane things to make cursor act. Sorry, not cursor. Make Figma act correctly. Because it will be like, oh, here's a thousand tailwind styles. And this random component I built from scratch, for some reason, the biggest one is matching our internal components to the thing in Figma. Like, if you see the thing that looks like this, make this not that. Like, I feel insane writing these rules, but, like, once you've got them, it works pretty well.
- [38:58]
Claire Vemp
So 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 cloud design and we both came to completely opposite conclusions. I said, I use cloud design and I think it's actually pretty Good at marketing and brand kind of style design work. And I think it's garbage. Garbage at ui. And he is a marketer and he was like, I think that it's pretty good at UI work and garbage at marketing. And I was like, we just both know what we're talking about in our own domains. Like, cannot recognize the 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.
- [39:46]
Owen Williams
Well, that's, that's the thing. And it's like, I, I don't think, I don't want to set an expectation this will solve everything. Like, it's been interesting trying to like balance that with all of this work. Like, how can I make sure that the, 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.
- [40:19]
Claire Vemp
Yeah, I'm like, you know, hey, hey, hey, Protodash. That's a big old chart.
- [40:24]
Owen Williams
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. It's like, what if I built a chart that's the entire height of the browser?
- [40:34]
Claire Vemp
Yeah, why not do it?
- [40:36]
Owen Williams
But it's interesting to look at this. Of course, used blowpool. It does love a good blowpole. It got 90% of the way, 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. 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 chat and just like it will fix it.
- [41:13]
Claire Vemp
Well, the other thing you might need to put into your overall rules is if you scroll down. Boy, oh boy, oh boy. Emojis, emoji.
- [41:20]
Owen Williams
I know 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.
- [41:32]
Claire Vemp
This is not what I would expect to see.
- [41:34]
Owen Williams
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. And the. The page is live. Like, don't get me wrong, it's like not the most beautiful thing I've ever seen, but it's. Now you could like, iterate on it and like build up from there. It looks like stripish.
- [41:57]
Claire Vemp
Yep.
- [41:58]
Owen Williams
It uses the right. It didn't use Comic Sans.
- [42:01]
Claire Vemp
There we go.
- [42:01]
Owen Williams
But yeah, the, the other thing I wanted to quickly talk about though, that I didn't show yet is 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. Of course it didn't work.
- [42:21]
Claire Vemp
Will you. Will you pretty please turn on black and white mode? This is, this is like bringing me back to my. It didn't do it.
- [42:29]
Owen Williams
It didn't do it.
- [42:30]
Claire Vemp
Okay. But this is bringing me back to my, like truly OG designer days. I used to do this. You all, you have to be very old to appreciate this. So we used to do these designs in Photoshop and you know, you get these like long scrolly things. You're, you know, rounding corners by hand. All this stuff.
- [42:47]
Owen Williams
Yes.
- [42:48]
Claire Vemp
And then one of the tricks I used to teach my designers is I said grayscale, the whole thing and look for contrast.
- [42:54]
Owen Williams
Yeah.
- [42:56]
Claire Vemp
And you built it.
- [42:58]
Owen Williams
Yeah, it's just a mode. Like, this is. I, I love it because it's like, okay, there is. We didn't even talk about this, but like one challenge with these tools is like, now I'm bringing high fidelity stuff to every review. It can be a little unnerving. Like, I actually. So I, I worked at Shopify before Stripe and something that we did at Shopify to signify, like work in progress or like still figuring things out as we would change the fonts to Comic Sans, which was like both deeply painful, but also you knew visually immediately you're like, this is non done, which I love. And so having these built in nodes, we can I guess see very clearly that it's not done. Or monospace is my favorite is just like, clearly this is not the dashboard, but you get it. It's like 80% of it is really cool. And so that's built in. And then the other thing is this is, this is the core of the original prototyping tool and now in like a visual setting. But you can emulate different states throughout really easily. So I don't know, you want to override a certain nav section or you want to show the like sandboxes banner or hide the nav. Like, you can do all of that in your prototype. And so these are like, things that would have been otherwise hard. Actually, merchant name is my favorite too. It's like you're doing UXR and you want to pretend for Uber to like, get them into the immersion. Like, you can just write the word Uber and it's there, which is, which is really cool.
- [44:22]
Claire Vemp
I love it. I'm thinking about your, your Shopify Comic Sans example and I'm like, oh, it's balsamic core is what it is. You know, remember the old.
- [44:32]
Owen Williams
Yeah, I kind of want, 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
- [44:44]
Claire Vemp
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 turn that into a web hosted interactive prototyping tool with a bunch of. I think this is 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.
- [45:34]
Owen Williams
Yeah. I mean, do we have like two minutes to show you one more thing? There's one more thing.
- [45:39]
Claire Vemp
Well, like, there's one more thing, y'.
- [45:41]
Owen Williams
All. One more thing. I wanted to show this prototype that two designers built internally just like using the tool. So Ryan and Sadiqa, they've been building the entire. They work on the radar product, which is like fraud detection. And for them, they've been basically working on net new features and being able to actually show the entire multi step flow from every point of the journey. Like, okay, we're on stripe home. You see a banner that's like this. Then you see a list view of like potential fraud risk. And like, here are the reasons and like, here's the data and the animations and like, it's all working. Like, you can Add a node. Hi. And it will work. You can even, like, jump into the rules and see what reason something happened. Like, being able to do this, like, really, really high fidelity. Like, here is the exact way the dashboard will work. Also changes the handoff. Like, the handoff for this. This piece of work on Radar, it's been fascinating because it's like they literally have a pull request of a prototype that I have. I see an engineer working on and I'm like, this has never happened ever in my career as a design manager. Like, them. And they're like, I'll just use the prototype as the source of truth. And being able to just pick that up and be like, all of the components are the same. There's some translation to do, but they can just take it and do that is a huge change. And so, like, having that level of, like, preciseness and not having to, like, I show my age again, like, red line a Photoshop file or like, some. All of that stuff is really incredible. Like, now they can just inspect element and look at the padding.
- [47:13]
Claire Vemp
I love it. I love it. Prototypes everywhere. Okay, you've blown my mind now. I want one of these. I will say one. One trick that I've also used something like this for, because I built a very similar kind of like, replica app.
- [47:28]
Owen Williams
Cool.
- [47:28]
Claire Vemp
Is I make every component a downloadable PNG so that we can use it in marketing assets.
- [47:35]
Owen Williams
Oh, that's good.
- [47:36]
Claire Vemp
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 drop it into slides and stuff.
- [47:51]
Owen Williams
Can I just say, like, the worst and best cursed thing working on these types of tools. Like, I've gotten it far enough where I'm like, wow, this is like, magical. To use is like, I just have like 90 other ideas I want to add and I can just add them like every day. I'm like, what if I just did this and then I do it? And I'm like, what?
- [48:07]
Claire Vemp
Yeah, and you can just impose your will on your teammate customers as opposed to, like, have to worry about your real customer feedback.
- [48:14]
Owen Williams
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, 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 then you can. I don't know, you've got customer feedback. I want to fix this bug.
- [48:38]
Claire Vemp
Boom.
- [48:38]
Owen Williams
Here's the prototype for it. Go and fix it. And so I think we're nearing that, where you can have this pretty compelling facsimile of your environment and, like, much more rapidly evolve it without, like, worrying about just, like, breaking things or, 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. I'm like, stop. Stop adding things.
- [49:06]
Claire Vemp
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. 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, holding a quad in the other and making stuff happen. Are you AI ing through your parental leave? Tell me the truth.
- [49:37]
Owen Williams
Yes, I. It's so funny because, like, this is my second child, my first kid. I feel like these things were nascent and didn't really exist this time. It's, like, so different, right? Like, you can just yeet a prompt into call 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 can flash it out really quickly if I can find the browser window. That's basically like, this is the most dad thing of all time that you would ever want. But, like, app where you take a photo of, like, say you buy something expensive, like a bike or a tv, you take a photo of the receipt. It's like, expensify, sort of. And then after the product, and then it basically, like, saves the serial number in the app. First of all, who saves this stuff when you bought it from where, right? Downloads the manual, and then just, like, you have it there. It's like, I bought this on this deck for this much. Here's the manual. Because I have this thing where it's like, you buy something nice, and then, like, two. I don't know, 18 months later, it might break. You're like, where did I get that. I can never find the receipt ever.
- [50:46]
Claire Vemp
Okay. And so, yeah, I love this. Let me. I'm gonna do a feature request here because your kids will get older, and those Womb bikes are expensive.
- [50:56]
Owen Williams
Oh, they're so good, though.
- [50:57]
Claire Vemp
And they're so good. But at some point, after kid number two is done with it, you're gonna want, like, three years later, a reminder to sell this thing.
- [51:06]
Owen Williams
Oh, that is a good idea. I like that. It's like, yeah, remind. Remind me in two years. I don't need this anymore.
- [51:11]
Claire Vemp
Remind me in two years, this thing needs to get out of the garage and somewhere else that is. Gene. Yes.
- [51:19]
Owen Williams
Well, thank you. I need to finish it, but also,
- [51:22]
Claire Vemp
like, when the warranty expires.
- [51:25]
Owen Williams
Yep.
- [51:25]
Claire Vemp
If it requires any maintenance.
- [51:27]
Owen Williams
Well, that was the other reason I started this as I had a bad experience with a warranty where, like, it broke probably three days before the warranty was up. But I had a kid during that time.
- [51:36]
Claire Vemp
Yeah.
- [51:37]
Owen Williams
And I. You know, if I had had a week's notice, I would have been, like, quickly emailing the company.
- [51:41]
Claire Vemp
Yep.
- [51:42]
Owen Williams
So that's why I did it.
- [51:44]
Claire Vemp
You need to join the family. Live Love Claw Slack that I run. That's all just parents trying to figure out how to use AI and open claw and all these things to do real.
- [51:56]
Owen Williams
I'm there.
- [51:58]
Claire Vemp
Okay.
- [51:58]
Owen Williams
I clearly need more side projects, don't I?
- [52:01]
Claire Vemp
Clearly. Okay. Oh, and this has been amazing. Last question. When AI is not listening, when you're whispering, you're like, my baby's crying. Make no mistakes. When it's not listening, what is your prompting strategy?
- [52:15]
Owen Williams
All cats.
- [52:16]
Claire Vemp
No, that's fine.
- [52:18]
Owen Williams
I do a lot of shouting. I think. I try. I just try and be really specific. Like, I can. 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, 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, 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.
- [52:57]
Claire Vemp
I feel like this is also applicable again to parenting children where, like, if being loud didn't work, I wouldn't do it, guys.
- [53:05]
Owen Williams
I know, but it's, like, such a funny. I think it's like, I had to retrain my brain. Right. Like, as somebody who has built a bunch of stuff. You get that like sunk cost fallacy. At some point you're like, surely I'll get this to work. But like often just throwing it away and starting again.
- [53:19]
Claire Vemp
Yeah, I love this. Oh, and this has been so fun. Where can we find you and how can we be helpful?
- [53:25]
Owen Williams
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, Owen Williams. That's just the domain name but dot before the Ms. And it works. And gosh, how can you help me just build cool design tools? We're actually like this prototyping thing. We believe in it so much that we're hiring like, I don't know how to describe it, but like a design engineer type person to like drive this stuff. Like we think it's going to transform the way that we build. And so we're hiring that kind of person so I don't have to build it as my other job. So please join us. If you're like the kind of weirdo like that maybe likes to code and also likes design stuff, send me a dm. I'd love to talk.
- [54:11]
Claire Vemp
Love it. Well, thank you, thank you, thank you for joining. How 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@howiaipod.com See you next time.