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

1. 0:00 – 2:19

   Welcome and intro to Owen Williams

   1. OWOwen Williams0:00

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

   2. CVClaire Vo0:10

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

   3. OWOwen Williams0:14

      I started seeing PMs use it and got a little nervous. Oh my goodness, PM's designing. It's like, what's gonna happen?

   4. CVClaire Vo0:20

      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.

   5. OWOwen Williams0:33

      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?" [upbeat music]

   6. CVClaire Vo0:44

      Welcome back to How I AI. I'm Claire Vo, 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 gonna 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 Celigo. Every company today wants AI to improve how work gets done. The fastest way is building it directly into everyday business processes, automating employee onboarding, keeping customer data accurate, managing orders and inventory, or resolving finance and operations issues. When AI lives inside the flow of work, it can update records, trigger approvals, route work, and kick off the next step across systems. That's how teams operationalize AI and deliver measurable results. Celigo makes this possible, and now with Celigo 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 Ollipop 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.

2. 2:19 – 3:50

   The “blurple slop” problem with AI design tools

   1. CVClaire Vo2:20

      Owen, thanks for joining How I AI.

   2. OWOwen Williams2:23

      Hey, I'm happy to be here.

   3. CVClaire Vo2:25

      I know that you're stepping away for a few minutes from parental leave with your second.

   4. OWOwen Williams2:29

      [chuckles]

   5. CVClaire Vo2:29

      So I appreciate you giving us the time, and what I love about what you're gonna 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.

   6. OWOwen Williams2:44

      [laughs]

   7. CVClaire Vo2:45

      So tell me about... Tell me about the problem you were facing and kind of how you came to the solution that you came to.

   8. OWOwen Williams2:51

      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, a bunch of other, um, uh, different tools and, like, they're sitting there, like, trying to build the Stripe experience in these tools and kind of like what you're saying, they end up with this, like, weird uncanny valley like Tailwind, we call, um, like the Indigo, like blurple internally.

   9. CVClaire Vo3:19

      [laughs]

   10. OWOwen Williams3:19

       So like blurple slop is what I would call them and like they do a really, really good job, but they don't know about your design system, right? So-

   11. CVClaire Vo3:26

       Yep

   12. OWOwen Williams3:27

       ... [chuckles] 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, I get that. Um, but I was kind of thinking like, we have a design system, like this thing is very predictable. These tools should know about it, and then we can like construct the dashboard from those buil- building blocks,

3. 3:50 – 5:26

   Protodash: an internal vibe-coding tool for Stripe prototypes

   1. OWOwen Williams3:50

      like pretty reliably. Um, so [chuckles] I basically ended up starting on this like, I would say it's been maybe 18 months now, um, rabbit hole, like all of these things, um, building a prototyping tool internally that we call Protodash and-

   2. CVClaire Vo4:05

      Mm-hmm

   3. OWOwen Williams4:05

      ...um, a, a large number of designers are using it and then actually the thing that surprises me is it's actually more PMs than designers these days, um, which is really interesting and I can talk about that a bit more later. And what it does is it makes it basically, like, really easy to get a dashboard-like e- environment, like a very realistic dashboard, um, without having to think about it much. Um, so what it is is it's basically like a bundle of Cursor rules. It's, you know, a bunch of React that like sets up the navigation and the, like Chrome and some routing to like let you have the prototype in the frame. And all of those things mean you can like jump into Cursor or Claude Code or whatever, and you can be like, "I wanna 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 [chuckles] it gets you, you know, 90% and like, you know, designers, that's what they're here for. Like they're, they're high craft. They can like then refine it, uh, from there, and it's been really interesting to see what people have built. Like I can show, walk you through a couple of examples, but it's, it's sort of been this like very transformative thing because all of a sudden I'm sitting in these design reviews and like it, it's so convincing that I'm like, "Is this the real product or am I looking at like something fake?" And so that's kind of a cool change to

4. 5:26 – 7:55

   Why an engineering background helped Owen lower the bar for designers

   1. OWOwen Williams5:26

      see happening.

   2. CVClaire Vo5:27

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

   3. OWOwen Williams5:38

      Maybe like some context on me actually. So I, uh, I lead the like developer sort of space at Stripe and my background is actually engine- engineering based and I actually switched in the wrong direction, I feel like for a design manager, usually like a designer, usually people go the other way. Um, I always had like an engineering slant to my roles and I always kind of considered it a superpower. So when I would think about like my teams, I actually loved hiring kind of technical designers I would call it, where they understood enough. Often in the interviews I'm like-Do you feel like you can [chuckles] , uh, you know, know enough terminal to be dangerous? This is pre-AI, just to be clear. Um, and that was something that always got me excited is, like, even if you are, mm, 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, "W- 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, uh, Cursor, Claude Code, whatever, and just be like, "How does Git work?" And that's actually been the biggest mindset shift I've had to, like, give designers is, um, A, not being afraid of the terminal anymore, and B, if you're like, "I need to use NPM," you can just ask. Like, you don't even need to know the commands. And so, yeah, with my engineering background, I was sort of looking at the problem in a very pragmatic way, where I was like, "How can I lower the barrier to entry on this?" Like, "How can I make it that, uh, a designer maybe only needs to know about 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. Um, so the first version was a very basic, like, uh, you know, it's a, it's a router, it's a bunch of our design system components. So our design system is called Sail, and then it was a MCP integration with Sail, so there's a MCP server internally for that. And then just, like, a bundle of rules that I'll flash up really

5. 7:55 – 9:04

   The Cursor rules that taught the Stripe design system

   1. OWOwen Williams7:55

      quickly. So yeah, when you, when you would jump to Cursor, there would be a bunch of bundled rules that basically taught Cursor how to use the project and, like, what to do in what order. So, like, if a user pastes a Figma link, you should, you know, check the 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, um, experiments. And this means that, like, a, a designer or a PM or anybody can very quickly, like, open this folder in Cursor and just be like, "Help me make a prototype that shows this," and it just comes out, like, beautiful and to the quality bar that we expect. Like, Stripe has a really high quality bar for all of our experiences, and that's the other thing. It's like you go into these reviews with a real prototype and it looks bad. It, it's just like, surely we can do better, and so that's what this sort of, like, helps

6. 9:04 – 10:30

   Running prototypes on dev boxes vs. locally

   1. OWOwen Williams9:04

      with.

   2. CVClaire Vo9:04

      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?

   3. OWOwen Williams9:15

      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.

   4. CVClaire Vo9:23

      Yeah.

   5. OWOwen Williams9:23

      But we have Devbox infrastructure. I think you talked to the Minion folks-

   6. CVClaire Vo9:26

      Did

   7. OWOwen Williams9:26

      ... previously, so you've probably-

   8. CVClaire Vo9:27

      Yeah

   9. OWOwen Williams9:27

      ... 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/protodash, and it just creates one. It's, like, ready to go in two minutes, and all they have to do is, like, just connect to it in Cursor, and so it looks like it's running locally. It's not. It's already configured. They didn't even have to run NPM. [chuckles] 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 five years, it's been, like, you're drowning in presentations, right? Like, show me a JPEG in your Figma [laughs] , 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

7. 10:30 – 14:50

   “Demos, not memos” and rewiring design reviews at Stripe

   1. OWOwen Williams10:30

      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. [chuckles] 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. [chuckles]

   2. CVClaire Vo10:46

      What I think is interesting about this, especially for a product like Stripe, is it's such a data and visualization heavy product.

   3. OWOwen Williams10:53

      Yeah.

   4. CVClaire Vo10:53

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

   5. OWOwen Williams11:06

      Impossible. [laughs]

   6. CVClaire Vo11:07

      "... interactions, all its filters, all its-"

   7. OWOwen Williams11:09

      Yeah

   8. CVClaire Vo11:09

      ... "states, different states, zero data, a bunch of data?" It is impo- uh, nearly impossible to do that in Figma.

   9. OWOwen Williams11:16

      Right.

   10. CVClaire Vo11:16

       And we were building a lot of dashboards, and what a great kind of experience as a designer to-

   11. OWOwen Williams11:23

       Yeah

   12. CVClaire Vo11:24

       ... you know, I'm, I'm looking at your, your dashboard, if you don't mind pulling it up.

   13. OWOwen Williams11:27

       Yeah.

   14. CVClaire Vo11:27

       This is a company that's not doing too bad, you know?

   15. OWOwen Williams11:30

       Yeah.

   16. CVClaire Vo11:30

       We love that. Almost half a million dollars in gross volume. But what if you want the zero state?

   17. OWOwen Williams11:36

       Yeah.

   18. CVClaire Vo11:36

       What if you want the, you know, the company with 10 times more than that?

   19. OWOwen Williams11:38

       Getting, like, one transaction a day or... Yeah.

   20. CVClaire Vo11:40

       Exactly.

   21. OWOwen Williams11:41

       Yeah.

   22. CVClaire Vo11:41

       And, and so I think the ability to prototype with data in code as a designer both lets you make more interesting prototypes-

   23. OWOwen Williams11:49

       Mm-hmm

   24. CVClaire Vo11:49

       ... and lets you push the edges of the underlying data and use cases to-

   25. OWOwen Williams11:55

       Yeah

   26. CVClaire Vo11:55

       ... make it more practical, um, for-

   27. OWOwen Williams11:57

       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-

   28. CVClaire Vo12:06

       Yeah

   29. OWOwen Williams12:06

       ... unhinged.

   30. CVClaire Vo12:07

       Yeah.
8. 14:50 – 19:04

   Building Protodash Studio: a browser-based wrapper for prototyping

   1. CVClaire Vo14:50

      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.

   2. OWOwen Williams15:00

      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-

   3. CVClaire Vo15:10

      Mm

   4. OWOwen Williams15:10

      ... is a little fiddly. And like Cursor and Claude Code and all of these tools make that a lot easier, but it's like a little bit slow. It's like a bit annoying and like you alluded to earlier, you also like, I don't know, you, you can't share the URL very easily, like those kinds of things. And I-

   5. CVClaire Vo15:27

      Can I share one other thing?

   6. OWOwen Williams15:28

      Yes.

   7. CVClaire Vo15:28

      I m- 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-

   8. OWOwen Williams15:37

      Yes

   9. CVClaire Vo15:37

      ... behemoth that can run anything locally.

   10. OWOwen Williams15:40

       Yes.

   11. CVClaire Vo15:40

       And designers don't always get-

   12. OWOwen Williams15:43

       Yeah

   13. CVClaire Vo15:43

       ... the machine. And so I think-

   14. OWOwen Williams15:44

       Oh my goodness

   15. CVClaire Vo15:44

       ... that's another barrier.

   16. OWOwen Williams15:46

       Yeah. That's something I... Can I just say, uh, we thankfully got right. Like I think when this started happening a year and a half ago, um, designers started being considered like engineers in many ways internally and, uh, I, as far as I remember, I believe all designers are now getting like the meaty MacBook Pro. Like I think I'm on like a 64 gig machine right now [laughs] , 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-

   17. CVClaire Vo16:13

       Yeah

   18. OWOwen Williams16:13

       ... good luck.

   19. CVClaire Vo16:14

       I, I love it. I call mine-

   20. OWOwen Williams16:16

       Yeah

   21. CVClaire Vo16:16

       ... um, Big Boy.

   22. OWOwen Williams16:17

       Yeah. The, uh-

   23. CVClaire Vo16:19

       And I tell my kids-

   24. OWOwen Williams16:20

       It's like the chonkbook is-

   25. CVClaire Vo16:21

       Yeah. Chonkbook

   26. OWOwen Williams16:22

       ... for me.

   27. CVClaire Vo16:22

       I'm like, "Can you go grab me Big Boy?" And-

   28. OWOwen Williams16:24

       Yeah

   29. CVClaire Vo16:25

       ... my cat's laptop.

   30. OWOwen Williams16:27

       That's so good. Yeah.
9. 19:04 – 21:02

   Live demo: variants, line charts, and remixing prototypes in browser

   1. OWOwen Williams19:04

      I just wanted to talk about it, is you can come in here now. So, you know, imagine we have this, like, payments analytics prototype. Instead of having to, like, go and open my Cursor window and, like, start prompting here and, like, hope that it's gonna be set up, now you can just open the embedded LLM, and you can just keep, sort of start working there. So you can say, "I want to add a new variant of my prototype where this stacked bar chart is a line chart." You didn't have to, like, do anything on your machine. You just went to a URL and you asked for it. Um, and it will go ahead and build it entirely in-browser, um, which is really cool.

   2. CVClaire Vo19:43

      Quick, quick question.

   3. OWOwen Williams19:44

      And so... Yes.

   4. CVClaire Vo19:44

      People are gonna ask this. How did you build this? Like, what is the... Give me, like, some, like, little sniff components of how you built this.

   5. OWOwen Williams19:52

      Um, like, yelling at Claude Code for 18 months. [laughs]

   6. CVClaire Vo19:56

      Okay, great. There you go.

   7. OWOwen Williams19:57

      Um, it's a mixture, like, it- I don't, I th- I definitely hand-wrote some code-

   8. CVClaire Vo20:03

      Mm-hmm

   9. OWOwen Williams20:03

      ... but not much. Like, I think-

   10. CVClaire Vo20:04

       Yeah

   11. OWOwen Williams20:04

       ... having the engineering background made it-

   12. CVClaire Vo20:07

       Yeah

   13. OWOwen Williams20:07

       ... work, right? Because I know what I need to achieve and, like-

   14. CVClaire Vo20:10

       Yeah

   15. OWOwen Williams20:10

       ... how to get the architecture right. But largely it was just like, "Okay, I'm just gonna keep going on this and see how far I can get." Um, and it beca- it, this started as a like, "Could I make something [chuckles] that lets me do this?" And then became a, "Oh my gosh, it works. I'm just gonna keep adding features." [laughs] Um, and what's really cool actually about building a tool like this for, like, internal use is it doesn't have to be, like, production grade, you know what I mean? Like, if it breaks, it's kind of fine. It doesn't need to worry about, like, logins, like, there's, you know, it's just running on your dev box, so that's fine. And so I have a, a lot more leeway maybe [chuckles] than, like, if you were shipping to production. Um, but it just, it was just a, a matter of, like, trying new things and, like, exploring and just seeing how far I could get. And so let's see. It's, it's working on adding a variant here, so it should show up pretty quickly. And

10. 21:02 – 23:20

    Self-testing prototypes that take screenshots and check their work

    1. OWOwen Williams21:02

       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 gonna self-test now. [laughs]

    2. CVClaire Vo21:11

       Ooh.

    3. OWOwen Williams21:11

       That's exciting. Um-

    4. CVClaire Vo21:12

       This is exciting.

    5. OWOwen Williams21:13

       Yeah. It, uh... So usually if it was on a dev box, you wouldn't see that 'cause you don't actually-

    6. CVClaire Vo21:18

       Yeah

    7. OWOwen Williams21:18

       ... connect to the dev box, but it's kind of fun to watch it drive.

    8. CVClaire Vo21:21

       Yep.

    9. OWOwen Williams21:21

       [laughs] So it's taking a screenshot and checking its work, which I really love. Um-

    10. CVClaire Vo21:26

        [laughs]

    11. OWOwen Williams21:26

        So this is, like, a really cool demo.

    12. CVClaire Vo21:28

        You really let-

    13. OWOwen Williams21:28

        Um-

    14. CVClaire Vo21:29

        You s- you really said, "Claude Code, make no mistakes."

    15. OWOwen Williams21:31

        Yeah. [laughs]

    16. CVClaire Vo21:31

        That's what's great.

    17. OWOwen Williams21:33

        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-

    18. CVClaire Vo21:44

        Mm-hmm

    19. OWOwen Williams21:44

        ... means that we can do this.

    20. CVClaire Vo21:45

        Yeah.

    21. OWOwen Williams21:45

        So, like, if I send it a Figma link and like, "Implement this"-

    22. CVClaire Vo21:50

        Yep

    23. OWOwen Williams21:50

        ... uh, make no mistakes. [chuckles]

    24. CVClaire Vo21:52

        Yep.

    25. OWOwen Williams21:52

        Um, it's able to, like, at least see the prototype, like-

    26. CVClaire Vo21:55

        Yep

    27. OWOwen Williams21:55

        ... look at the browser console, like, take screenshots, and, like, iterate on it-

    28. CVClaire Vo21:59

        Mm-hmm

    29. OWOwen Williams21:59

        ... to the point where it gets it pretty good and, and can ask for feedback. And so now it finished. We have this variant bar here, so you can-

    30. CVClaire Vo22:06

        There you go
11. 23:20 – 26:08

    Multiple variant features

    1. CVClaire Vo23:21

       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.

    2. OWOwen Williams23:31

       Mm-hmm.

    3. CVClaire Vo23:31

       So Claude Design will now, when you prompt it to create a prototype, it says, "How many variations do you want?"

    4. OWOwen Williams23:37

       Yeah.

    5. CVClaire Vo23:37

       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-

    6. OWOwen Williams23:45

       I know, right?

    7. CVClaire Vo23:45

       ... 20 years later.

    8. OWOwen Williams23:46

       Yeah. Yeah.

    9. CVClaire Vo23:47

       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-

    10. OWOwen Williams23:54

        Yeah

    11. CVClaire Vo23:55

        ... is it gives you, um, kind of, like, modes of the design.

    12. OWOwen Williams23:59

        Mm-hmm.

    13. CVClaire Vo23:59

        So you could be like extreme design, like-

    14. OWOwen Williams24:01

        Yep

    15. CVClaire Vo24:02

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

    16. OWOwen Williams24:16

        Mm-hmm

    17. CVClaire Vo24:16

        ... is the happy accidents of I would have never designed that, but that's kind of interesting.

    18. OWOwen Williams24:22

        Yes. Yeah.

    19. CVClaire Vo24:22

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

    20. OWOwen Williams24:28

        Yeah. I think that's, like, where I get excited is you can just be like, "Claude, make eight variants of this thing that are very different," and, like, it will cook, and then you can sort of, like, take bits from each of them. Um, that's actually something I kind of wanna-- it's my next quest, I think, is building in, like, a crazy eights mode almost. Like, it just spits out eight designs and you choose the pieces. It's not super rigid with the design system. In fact, frankly, like, my favorite thing with this is just doing silly stuff. Like, I, I showed you this 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, [chuckles] so, um, but, like, the idea there being, like, if you wanna 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 y- then you can be like, I wanna do generative stuff, right? 'Cause 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've seen, what's it called, agent, agentation out there. Uh, we have our, like, own version that we had built internally. Uh, I, I don't wanna be like, "Ahaha, first," uh, but, uh,

12. 26:08 – 27:21

    The annotate-for-AI button for in-canvas feedback

    1. OWOwen Williams26:08

       maybe a little bit I will here, where you can also, like, interact with the canvas directly to give the AI feedback. So s- imagine, um, you know, we have this payment analytics prototype with a bunch of charts on it. Um, you can click this little annotate-for-AI button and swap into the, like, selector mode and be like, I don't know, uh, let's say, "Let's make the tooltip here hover, hoverable with helper text in it." And then you can like, I don't know, add a bunch of comments for the AI to fix, like, right on the page. That's the other thing. Like, I l- [chuckles] 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, uh, add more padding to the, the table here. And so I'll send this off to the AI, and it will just work through them. Like, it'll, it'll be like, "Okay, this comment, this one," um, and, like, do that. And the other thing that you can do before that-- Like, there's so many things I wish I could show you. [chuckles]

    2. CVClaire Vo27:17

       Wow.

    3. OWOwen Williams27:17

       You'd be like, "Add a quick one."

    4. CVClaire Vo27:18

       You can show them all. I'm not in a rush. [chuckles]

    5. OWOwen Williams27:19

       I love it. Um,

13. 27:21 – 29:39

    Design review mode: comments, summaries, and AI follow-up

    1. OWOwen Williams27:21

       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 [chuckles] 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. [chuckles] So, oh look, the AI broke it finally.

    2. CVClaire Vo28:04

       And you know what? It's fine.

    3. OWOwen Williams28:05

       Yeah.

    4. CVClaire Vo28:05

       It's just internal tooling.

    5. OWOwen Williams28:07

       I love it. Well, it's probably gonna, like, try and self-fix it-

    6. CVClaire Vo28:10

       It's gonna fix it, yeah

    7. OWOwen Williams28:10

       ... 'cause it can see it. This is the thing. Um, there it goes.

    8. CVClaire Vo28:12

       Oh, there we go.

    9. OWOwen Williams28:13

       It self-fixed it. I'm gonna switch back to that commenting thing now. Uh, so imagine you wanna do a design review. Um, you get all your feedback as, like, comments. Like, "What's, uh, with this filter?" So let's say, 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 y- you know, your feedback. You don't want the Google Doc. Um, oh look, my comment did send seven times. That's fun. Um, so you get all these pieces of feedback from your design leaders, and now you wanna, 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 three more options." I don't know if that's realistic, but whatever. Um, and then that will add it to a queue that you can just send to the AI to fix, like, straight off the back of the design review. And it will be like, "I fixed Katie Dill's feedback for you," and you can send this to her. And it's, like, my favorite thing to just, like... Right? 'Cause 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.

    10. CVClaire Vo29:38

        One thing

14. 29:39 – 32:50

    Why building internal tools beats buying off-the-shelf

    1. CVClaire Vo29:39

       I, I wanna say as a sort of step back analysis of what you're showing me, which is-

    2. OWOwen Williams29:43

       Yeah

    3. CVClaire Vo29:43

       ... I know a lot of people are gonna watch this and be like, "Man, you know, like, v0 is good enough," or, "This is good enough."

    4. OWOwen Williams29:48

       Yeah.

    5. CVClaire Vo29:48

       And I, I think what is so interesting is you are right. I have led design teams. I am a specific kind of design leader.

    6. OWOwen Williams29:56

       Mm-hmm.

    7. CVClaire Vo29:56

       And design cultures, review cultures, building cultures are so different company to company.

    8. OWOwen Williams30:02

       Yes.

    9. CVClaire Vo30:03

       Right? Completely different. Um, you know, I used to run this thing called Product Craft Friday.

    10. OWOwen Williams30:08

        Mm-hmm.

    11. CVClaire Vo30:09

        I wanted three hours with everybody on what we were building-

    12. OWOwen Williams30:12

        I love that

    13. CVClaire Vo30:12

        ... across everything.

    14. OWOwen Williams30:13

        Yeah.

    15. CVClaire Vo30:13

        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-

    16. OWOwen Williams30:21

        Right

    17. CVClaire Vo30:21

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

    18. OWOwen Williams30:24

        Yeah.

    19. CVClaire Vo30:24

        Because a lot of times it did not.

    20. OWOwen Williams30:26

        Yeah.

    21. CVClaire Vo30:26

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

    22. OWOwen Williams30:32

        Yeah

    23. CVClaire Vo30:33

        ... design root prod. But-

    24. OWOwen Williams30:34

        And you can. You can just do it. [chuckles]

    25. CVClaire Vo30:35

        But then you can do, I'm like-

    26. OWOwen Williams30:37

        Yeah

    27. CVClaire Vo30:37

        ... you can just build it. And so-

    28. OWOwen Williams30:39

        Yeah

    29. CVClaire Vo30:39

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

    30. OWOwen Williams30:49

        Right.
15. 32:50 – 35:20

    PMs as the surprise power users of Protodash

    1. OWOwen Williams32:50

       as well. [chuckles] Like I will... I, can I just say in the safety of this like very public podcast, I, the, the first feeling I had when I started making this was, um, I, I started seeing PMs use it and got like a little nervous [chuckles] of it. It's like, "Oh my goodness, PM's designing." Uh, it's like, "What's gonna happen?" Um, but it's actually just been thrilling to see like them having the tools to like build things that look like Stripe in the right way and like being able to explore their ideas and actually also give them the, um, like the visual tools to do it. Like, I think the hardest thing for PMs is often they can't like manifest the thing that they want to. It actually makes them better at communicating with their own designer, but also UXR is completely different. Like they can test their idea a lot earlier in the funnel, where it's like, "I have this thing I wanna do. Okay, how am I gonna do that? I, I can build a prototype and like just go and talk to some users and make them click it" [chuckles] 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."

    2. CVClaire Vo34:02

       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-

    3. OWOwen Williams34:17

       Right

    4. CVClaire Vo34:17

       ... which has been our life for, for... [chuckles] 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 the-

    5. OWOwen Williams34:29

       It just makes it easier for them to also advocate for it, right? It's like, okay, this is what we can do with the current system, but like we need to, we need to push it more and like go beyond what is just like capable now. And so it's, it's been really interesting to see how that's like changing the conversation to it's like, "Hey, here's, here's like what we can do with what we have off the shelf, but we need a designer to help us elevate this experience." And so like it's also making it easier to talk the same language 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- we've been working on this like webhooks thing with like seven steps for like a year now, and it's like very complicated and there's all these moving parts and states and whatever. Now we can actually just show them all [chuckles] 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. Um,

16. 35:20 – 42:03

    Live demo: a Black Friday/Cyber Monday pet store dashboard

    1. OWOwen Williams35:20

       I've, like we- should we just like try and like build something random really quickly?

    2. CVClaire Vo35:23

       Let's do it.

    3. OWOwen Williams35:24

       Like full like live-

    4. CVClaire Vo35:24

       Speed run something

    5. OWOwen Williams35:25

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

    6. CVClaire Vo35:32

       Great. Let's do it.

    7. OWOwen Williams35:33

       Okay. Let's, let's build a BFCM... Is it gonna know what that is? We'll see.

    8. CVClaire Vo35:38

       We'll see.

    9. OWOwen Williams35:38

       Dashboard, um, for a pet store showing live sales on a chart at the top of the page, a ticker with the latest sales, and hmm, what else should it have? I don't wanna overcomplicate it. Uh, what-

    10. CVClaire Vo36:01

        Top-performing products.

    11. OWOwen Williams36:02

        Yeah. What... Uh, you had the same thought as me. Uh, trending. Right. Now-

    12. CVClaire Vo36:06

        Look at this. Still got it. Still got it as a product manager.

    13. OWOwen Williams36:09

        I love it. We're, we're building together. Uh, uh, make sure the data is realistic in real time. And this is, we're gonna full YOLO this and see what it does. Um-

    14. CVClaire Vo36:21

        Okay. And now while it's loading, I have to say-

    15. OWOwen Williams36:23

        Yeah

    16. CVClaire Vo36:23

        ... as a now parent of two with a little baby, we gotta get you-

    17. OWOwen Williams36:27

        Yeah

    18. CVClaire Vo36:27

        ... voice mode on this.

    19. OWOwen Williams36:29

        Yes. I, I-

    20. CVClaire Vo36:30

        You know?

    21. OWOwen Williams36:30

        Yes. [chuckles] That's actually a good point 'cause 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.

    22. CVClaire Vo36:41

        [laughs]

    23. OWOwen Williams36:41

        I'm like, "How do you not understand basic sentences?"

    24. CVClaire Vo36:44

        Yeah.

    25. OWOwen Williams36:45

        But then, like, you- the Claude voice mode, like you can have a baby screaming and whisper-

    26. CVClaire Vo36:49

        Yeah

    27. OWOwen Williams36:49

        ... in it, and it still nails it. [laughs]

    28. CVClaire Vo36:50

        Yep. Yeah.

    29. OWOwen Williams36:51

        So I do need to, I do need to add that. This is actually really interesting though, like, as maybe a way to describe how this thing works as we watch it cook. The, the, under the hood, what's actually happening right now is, like I said, it's building the dashboard. It's calling our sale MCP server, so that's like the design system, like getting all of the content and like sort of working through the c- problem. So it's like, what components do I need to le-

    30. CVClaire Vo37:14

        Mm-hmm
17. 42:03 – 44:45

    Lo-fi modes, monospace fonts, and “Comic Sans for WIP” at Shopify

    1. OWOwen Williams42:03

       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-

    2. CVClaire Vo42:12

       Yeah

    3. OWOwen Williams42:12

       ... that like I m- 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 just then.

    4. CVClaire Vo42:21

       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.

    5. OWOwen Williams42:29

       It didn't do it. [laughs]

    6. CVClaire Vo42:30

       Okay. But this is bringing me back to my like truly OG designer days.

    7. OWOwen Williams42:34

       Yeah.

    8. CVClaire Vo42:34

       I used to do this. You all, you have to be very old to appreciate this.

    9. OWOwen Williams42:37

       Yeah.

    10. CVClaire Vo42:38

        So we used to do these designs in Photoshop-And you know, you get these like long scrolly things. You're, you're, you know, rounding corners by hand, all this stuff.

    11. OWOwen Williams42:47

        Yes.

    12. CVClaire Vo42:47

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

    13. OWOwen Williams42:54

        Yeah.

    14. CVClaire Vo42:56

        And you built it.

    15. OWOwen Williams42:58

        Yeah. It's just a mode. Like this is... I, I love it because it's like, okay, there is-

    16. CVClaire Vo43:02

        Love it

    17. OWOwen Williams43:02

        ... 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 wo- I worked at Shopify, uh, 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 [laughs] which was like both like deeply painful but also y- you, you knew visually. Like immediately you're like, "This is not done." Um, which I love. And so like having these built-in modes where you 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, you get it. It l- it's like 80% of it, um, is really cool, and so that's built in. And then the other thing is like, this is, this is the core of the original prototyping tool and now in like a visual setting, but you can emulate different states in Stripe really easily. So, um, I don't know, you wanna override a certain nav section or, um, you wanna 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've been otherwise hard. Actually, merchant name is my favorite too. It's like you're doing UXR and you wanna 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. Um-

    18. CVClaire Vo44:21

        I, I love it.

    19. OWOwen Williams44:22

        Yeah.

    20. CVClaire Vo44:22

        I'm thinking about your, your Shopify Comic Sans example, and I'm like, "Oh, it's Balsamiq Core is what it is."

    21. OWOwen Williams44:29

        Yeah. It is.

    22. CVClaire Vo44:29

        You know? Remember the old [laughs] wireframe?

    23. OWOwen Williams44:31

        Well, yeah. I kinda want it, I kinda want that in here as like the goal eventually.

    24. CVClaire Vo44:35

        Yeah.

    25. OWOwen Williams44:35

        Like can we build abstracted, like lo-fi stuff-

    26. CVClaire Vo44:38

        Yes. Yeah

    27. OWOwen Williams44:38

        ... and like build like p- maybe Balsamiq mode is the right way to describe [laughs] it.

    28. CVClaire Vo44:42

        You know. See, you know.

    29. OWOwen Williams44:43

        It's product.

    30. CVClaire Vo44:43

        If you know, you know. Okay. This

18. 44:45 – 45:35

    Quick recap

    1. CVClaire Vo44:45

       has been-

    2. OWOwen Williams44:46

       Yeah

    3. CVClaire Vo44:46

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

    4. OWOwen Williams45:03

       Mm-hmm

    5. CVClaire Vo45:03

       ... with a bunch of, I think this is the, the, the trick, a bunch of controls both for-

    6. OWOwen Williams45:08

       Mm-hmm

    7. CVClaire Vo45:08

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

    8. OWOwen Williams45:18

       Mm-hmm

    9. CVClaire Vo45:18

       ... are useful across the design team. And you can just ship fun things and work things, and then-

    10. OWOwen Williams45:26

        Yeah

    11. CVClaire Vo45:26

        ... you're seeing a lot of designers use it, but maybe even more PMs. So-

    12. OWOwen Williams45:30

        Yep

    13. CVClaire Vo45:30

        ... the stuff that people are doing and the tools that they're using is really changing.

    14. OWOwen Williams45:34

        Yeah. I mean,

19. 45:35 – 49:08

    The Radar prototype that changed engineering handoff

    1. OWOwen Williams45:35

       do we have like two minutes to show you one more thing? [laughs] Like there's one more thing.

    2. CVClaire Vo45:39

       Uh-

    3. OWOwen Williams45:39

       Well, like the, the-

    4. CVClaire Vo45:39

       There's one more thing, y'all

    5. OWOwen Williams45:40

       ... one more thing. I wanted to show this prototype that, um, two designers built internally just like using the tool. Um, 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 ha- I see an engineer working on and I'm like, "This has never happened ever in my career as a design manager." Like them and, and they're like, "Oh, just use the prototype as the source of truth." And like being able to just pick that up and be like all of the components are the same. There's some translation to do, but like they can just take it and do that is a huge change. And so like having that level of like preciseness and not having to like, [laughs] I'm gonna 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, right? [laughs]

    6. CVClaire Vo47:13

       I love it.

    7. OWOwen Williams47:14

       Yeah.

    8. CVClaire Vo47:15

       I love it. Oh-

    9. OWOwen Williams47:16

       It's really good

    10. CVClaire Vo47:16

        ... prototypes everywhere. Okay.

    11. OWOwen Williams47:18

        Yeah.

    12. CVClaire Vo47:18

        Uh, you've blown my mind.

    13. OWOwen Williams47:20

        [laughs]

    14. CVClaire Vo47:20

        Now I want one of these. Um, I will say one, one trick that I've also-

    15. OWOwen Williams47:24

        Yes

    16. CVClaire Vo47:24

        ... used something like this for, 'cause I built a very similar kind of like replica app-

    17. OWOwen Williams47:28

        Cool

    18. CVClaire Vo47:28

        ... is I make every component a downloadable PNG so that we can-

    19. OWOwen Williams47:32

        Oh

    20. CVClaire Vo47:33

        ... use it in marketing assets.

    21. OWOwen Williams47:34

        Oh, that's good.

    22. CVClaire Vo47:35

        So you know, like how many, how many often are you screenshotting stuff?

    23. OWOwen Williams47:39

        Yes.

    24. CVClaire Vo47:39

        And I'm like, I need a real example of like an enterprise-

    25. OWOwen Williams47:42

        Yeah

    26. CVClaire Vo47:43

        ... you know, PRD or this component-

    27. OWOwen Williams47:44

        Yeah

    28. CVClaire Vo47:44

        ... with this... So then I just like everything, every element you can download as a PNG-

    29. OWOwen Williams47:49

        Yeah

    30. CVClaire Vo47:49

        ... and then you drop it into slides and stuff.
20. 49:08 – 54:42

    Lightning round and final thoughts

    1. CVClaire Vo49:08

       adding things, I know I have to get you out of here to-

    2. OWOwen Williams49:10

       Yeah

    3. CVClaire Vo49:10

       ... the little one soon. So we're gonna do one lightning round... Well, two-

    4. OWOwen Williams49:13

       Yeah

    5. CVClaire Vo49:13

       ... lightning round questions. I'm gonna get you out of here. My first one is, this is my hypothesis-

    6. OWOwen Williams49:18

       [laughs]

    7. CVClaire Vo49:18

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

    8. OWOwen Williams49:28

       Yep. Yeah

    9. CVClaire Vo49:29

       ... and holding a Claude in the other-

    10. OWOwen Williams49:31

        Yeah

    11. CVClaire Vo49:31

        ... and making stuff happen. Are you AI-ing through your parental leave?

    12. OWOwen Williams49:36

        I-

    13. CVClaire Vo49:36

        Tell me the truth.

    14. OWOwen Williams49:37

        Oh, yes. I-

    15. CVClaire Vo49:38

        [laughs]

    16. OWOwen Williams49:39

        It's so funny 'cause, 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, a w- a app where you take a photo of, like, say you buy something expensive like a bike or a TV. Um, you take a photo of the receipt, it's like 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, [laughs] uh, and then just, like, you have it there. It's like, "I bought this on this date for this much. Here's the manual." Um, because I have this thing where it's like you buy something nice, and then, like, two y- I don't know, 18 months later it might break. You're like, "Where did I get that?" I can never find the receipt [laughs] like ever.

    17. CVClaire Vo50:46

        Okay.

    18. OWOwen Williams50:47

        And so, yeah. Uh, yeah.

    19. CVClaire Vo50:48

        I love this. Let me... I'm gonna do a feature request here because your kids-

    20. OWOwen Williams50:52

        Okay, please

    21. CVClaire Vo50:52

        ... will get older, and those Woom bikes are expensive.

    22. OWOwen Williams50:56

        Oh, they're so good, though. [laughs]

    23. CVClaire Vo50:57

        And it- they're so good. But at some point-

    24. OWOwen Williams50:59

        Yeah

    25. CVClaire Vo50:59

        ... after kid number two is done with it, you're gonna want, like, three years later-

    26. OWOwen Williams51:03

        Yeah

    27. CVClaire Vo51:03

        ... a reminder to sell this thing.

    28. OWOwen Williams51:05

        Oh, that is a good idea.

    29. CVClaire Vo51:07

        [laughs]

    30. OWOwen Williams51:07

        I like that. It's like, yeah, remind, remind me in two years I don't need this anymore.

Episode duration: 54:44