# Stripe Protodash: AI Internal Tools Transform Design Workflows

**Podcast:** How I AI
**Published:** 2026-05-04

## Transcript

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?
Why do I need cursor?
You're seeing a lot of designers use it, but maybe even more.
PMs.
I started seeing PMs use it and got a little nervous.
Oh my goodness, PMs designing.
It's like, what's going to happen?
I said, how painful is it to prototype a data dashboard with all its interactions, all its filters, all its states, different states, zero data, a bunch of data?
It is nearly impossible to do that in Figma.
It's sort of been this very transformative thing because all of a sudden I'm sitting in these design reviews and it's so convincing that I'm like, is this the real product or am I looking at something fake?
Welcome back to How I AI.
I'm Claire Vogue, product leader and AI obsessive here on a mission to help you build better with these new tools.
Today, I have Owen Williams, design manager at Stripe, and he's going to show us how he 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 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.
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 celigo.com slash howiai that's c-e-l-i-g-o.com slash howiai oh and thanks for joining howiai hey i'm happy to be here i know that you're stepping away for a few minutes from parental leave with your second so i appreciate you giving us the time and what i love about what you're going to show us is how to we were joking before we started recording how to get prototypes that don't look like generic tailwind indigo slop.
So tell me about, tell me what the problem you're facing and kind of how you came to this solution that you came to.
You know, I'm a design manager, so I'm 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 with a bunch of other different tools.
And, like, they're sitting there, like, trying to build the Stripe experience in these tools.
And kind of like what you're saying, they end up with this, like, weird, uncanny valley, like, tailwind.
We call, like, the indigo, like, blurple internally.
So, like, blurple slop is what I would call them.
And, like, they do a really, really good job.
But they don't know about your design system, right?
So, 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 building blocks like pretty reliably um so 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 building a prototyping tool internally that we call Protodash and a large number of designers are using it.
And then actually the thing that surprises me is it's actually more PMs than designers these days, which is really interesting.
And I can talk about that a bit more later.
And what it does is it makes it basically like really easy to get a dashboard like environment, like a very realistic dashboard without having to think about it much.
So what it is, is it's basically like a bundle of cursor rules.
it's you know a bunch of react that like sets up the navigation and the like chrome and some routing to like let you have the prototype in the frame and all of those things mean you can like jump into cursor or call 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 that 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 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 I'm curious if you just walk us through 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.
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, usually like a designer, usually people go the other way.
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 that we call it where they understood enough often in the interviews i'm like do you feel like you can uh you know know enough terminal to be dangerous this is pre-ai just to be clear um and that was something that always got me excited is like even if you i don't know like not able to code but able to understand enough to feel confident like messing around and experimenting it always gave designers superpowers the thing i'll say that was always frustrating is like that i don't know what the right word for this would be like the jump to that technical level is really hard like for a lot of designers like i don't know if you didn't steep yourself in web development it's like oh my god this is npm like what is vite what is this thing blah blah blah and so you know i get why a lot of people didn't know how now i totally changed that right because now you can just like jump into a cursor or whatever and just be like how does git work and that's actually been the biggest mindset shift i've had to like give designers is um 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 um so the first version was a very basic like 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 would jump to Cursor, there would be a bunch of bundled rules that basically taught Cursor how to use the project and like what to do in what order.
So like if a user pastes a Figma link, you should you know check the sale mcp server before writing any code and then like i don't know there's some common like pain points and things that should avoid what it should do if the mcp server is unavailable llms are so helpful they will just like imagine the entire design system without telling you when it's not there so like all of these things you know i'd like sort of whittled down through my various um experiments and this means that like a designer or a pm or anybody can very quickly like open this folder in cursor and just be like help me make a prototype that shows this and it just comes out like beautiful and to the quality bar that we expect like stripe has a really high quality bar for all of our experiences and that's the other thing it's like you go into these reviews with a real prototype and it looks bad it's just like surely we can do better and so that's what this sort of like helps with But looking at this, this is something that people are running locally.
So they're pulling this, they're running it locally, they're making the changes.
And then in the meeting, are they just presenting sort of off their local machine?
So it's a mix, actually.
What's really cool is, so initially we had, like, it was running locally.
You would just run NPM, run whatever.
But we have DevBox infrastructure.
I think you talked to the Minion folks previously.
So you probably heard about that.
And so, like, DevBox is at a high level.
Just let you just...
get a server on the internet in a certain state internally um so now designers can just go to a like url it's like go slash 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 cursor and so it looks like it's running locally it's not it's already configured they didn't even have to run npm that's actually like my favorite magic trick as it just works um and so those like the benefit of those is you get a url and so you can be in the design review and be like just go to this and like can i just say being in a design review where i can click things is my favorite like i i love design reviews i'm a very like nosy person who loves seeing what people are working on those kinds of things but like for maybe the last five years it's been like you're drowning in presentations right like show me a jpeg in your figma like all of these things and it's like how magic is it when somebody comes and they're like okay i'm not gonna screen share here's my prototype here's the context let's just like go through it and give feedback And so being able to do that has been like the, probably my number one goal is like, I never want to see a slideshow again.
It's like demos, not memos is something that Dan Nelson, another design leader at Stripe talks about a lot.
And I'm like, this is the way that we can do that.
What I think is interesting about this, especially for a product like Stripe, is it's such a data and visualization heavy product.
I used to tell this to my design team at LaunchDarkly, you know, two years ago when AI and this kind of prototyping was really coming out.
I said, how painful is it to prototype a data dashboard with all its interactions, all its filters, all its states, different states, zero data, a bunch of data?
It is nearly impossible to do that in Figma.
And we were building a lot of dashboards.
And what a great...
kind of experience as a designer to you know i'm looking at your your dashboard if you don't mind pulling it up yeah this is a company that's not doing too bad you know we love that almost half a million dollars in gross volume but what if you want the zero state what if you want the you know the company with getting one transaction a day exactly and and so i think the ability to prototype with data in code as a designer both lets you make more interesting prototypes and lets you push the edges of the underlying data and use cases to make it more practical well that's it and like before it was like even just i don't know the amount of effort it would be to get all the various states into a figma file was just like unhinged even like if you think about internationalization is one of them that's my favorite as well it's like oh it's in dutch now okay it looks terrible like 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.
I love that.
You know, you could add an additional one here that's like messy data and it will just do it.
And I think that's the transformative thing is like.
show me how real users will see this is something that was really hard until recently.
Well, and I don't want to show my age, but I like to tell people when I used to have to walk uphill both ways to my CSS, like there used to be a cottage industry of lorem ipsum text generators just for putting even just fake copy.
And this is like when I was making web designs in Photoshop.
So, you know, and I just.
You do not know, designers out there, please, if you have not experienced this, you do not know how spoiled you are.
I haven't seen Lorem Ipsum in a while.
In a long time.
I used to be a Lorem Ipsum.
I used Hipster Ipsum.
That was like when it finally ended.
But I used to have to paste that stuff.
You would do dollar prices.
You would be like 10,xxx.xx because you didn't know what the fake dollar amount is.
You should put in a dashboard.
You were dragging and copying.
the same components and i just think now with this this transformation in terms of live prototyping you can design more interesting things and you know have them touch reality a little sooner which is what we all want yeah and also like the multi-step flow is the other thing right it's like often you're just showing like there's one jpeg and maybe a second one where it's like here's this and this everything's great yeah 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 is that button doing they're like and that's that's okay but it's also like now we can actually build stuff that's just really like well thought through and like everything that's there is very intentional um and like shows you the path as well right like the amount of work you have to do in a figma file often to like i don't know if i imagine something like a workflow builder it's like you have to get the landing page and then like the job and the workflow builder and then it's like actually i only wanted to show the end bit but you need the context well now we can wire up a prototype and like reuse the bits once you've got them by the way because it's all in production and obviously looks the same then you can like play with it and like really sequence it all out once which is really cool well and let's get back to the prototype builder so you built this you know react app that could run either locally or in these dev boxes, but then you decided to take it a step further.
Yeah, so I think the biggest challenge that I've seen, so just to level with you, is we have a very large mono repo, and it's like getting that running on your laptop is a little fiddly.
And cursor and claw code and all of these tools make that a lot easier, but it's a little bit slow, it's 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.
Can I share one other thing?
I might hypothesize, which is when you're a software engineer in a company, you get issued the like 18-inch MacBook Pro behemoth that can run anything locally.
And designers don't always get the machine.
And so I think that's another barrier.
Yeah, that's something.
Can I just say?
We thankfully got right.
Like 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.
Yeah, I love it.
I call mine big boy.
Yeah.
it's like the chonk book is yeah chonk book i'm like can you go grab me big boy and yeah okay so so um lots of challenges with running you know big mono repo locally so so what do you what do you do to solve that problem so what i wanted like my dream was i want something that's like v0 but fast like a really opinionated workflow for like building stripe based prototypes and it's like very specific but it's like you know we have all of these tools internally that are really cool um you know we can connect different data sources together why can i not just do this in my browser like why do i need cursor and so the the framework i approached it with was like okay i have this really cool like react uh site emulator i guess like prototyping tool could i wrap that somehow in a way where it's like you can still use cursor if you want to like those those folks are really good at like llm training and like giving you all the options and blah blah blah but like now i want to be able to layer on a thing where you can just build it in your browser so you don't have to code because you don't need any app i just want to like go on the web and be like i want to try out this thing um and so what i ended up building was this um sort of extra layer called protodash studio and so this is like almost 100% used in dev boxes so you go to like a url it creates it it takes about like a minute and then you get to go to your dev box url i'm just running it locally so like the live demo gods appease us today but when you go to it you basically whenever you spin it up you see the things that you're working on so you have your prototypes i have a fun one here where you get uh fun ways to enter like the stripe test card number uh in weird ways and then You can also see like the Vibe prototyping feed because I think the other thing that's really cool about like the way that this is all going is one, you can take inspiration from other people, right?
You can see like what they're building and their approach to prototyping, like the amount of stuff I've seen.
I'll show you a real prototype in a minute that a bunch of designers built.
Like I think they replicated the entire functionality of our radar product, the fraud detection product in Protodash.
And then they use that to like, emulate different business models like you say but also like try new ideas and like they have this really cool baseline but the other thing you can do is you can like remix anybody's prototype at any time right like i think that's something that's great about like figma except with this you can take that like code and just like start playing with their thing really easily which i think is really cool so the really like the compelling thing in here was not so much the home screen i just wanted to talk about it is you can come in here now so You know, imagine we have this like payments analytics prototype instead of having to go and open my cursor window and like start prompting here and like hope that it's going to be set up.
Now you can just open the embedded LOA 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 sticks.
It's 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 quick quick question people are going to ask this how did you build this like what is the give me like some like little sniff components of how you built this um like yelling at claw code for 18 months okay great there you go um it's a mixture like i don't i definitely hand wrote some code but not much like i think having the engineering background made it work right because i know what i need to achieve and like how to get the architecture right but largely it was just like okay i'm just going to keep going on this and see how far i can get um and it started as a like could i make something that lets me do this and then became a oh my gosh it works i'm just going to keep adding features 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 lot more leeway maybe than like if you're shipping to production um but it just it was just a matter of like trying new things and like exploring and just seeing how far i could get and so let's see it's it's working on adding a vera in here so it should show up pretty quickly and what's i think like been really cool for me to see is like seeing the different types of users that have shown up in here oh it's gonna self-test now That's exciting.
This is exciting.
Yeah.
So usually if it was on a dev box, you wouldn't see that because you don't actually connect to the dev box, but it's kind of fun to watch it drive.
Yep.
So it's taking a screenshot and checking its work, which I really love.
So this is like a really cool demo.
You really let, you really said cloud code, make no mistakes.
Yeah.
Well, pretty much like if you think about, I said at the top, I was like, Stripe really cares about like quality and 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 yeah make no mistakes yeah um it's able to like at least see the prototype like look at the browser console like take screenshots and like iterate on it 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 that.
This episode is brought to you by Cursor.
If you all have been watching How I AI, you already know this.
Cursor is my favorite way to code with AI.
Whether I'm using plan mode to build out an ambitious feature, reviewing AI-generated diffs right in my editor, or kicking off cloud agents to multi-thread our roadmap, I reach for Cursor as my favorite multi-model coding platform.
Even better than building myself in Cursor, I love collaborating with Bugbot to fix PRs for code security and quality, and have begun relying on Cursor's automated agents to keep our codebase clean.
It's not just me.
The most ambitious teams love Cursor 2, including engineers at Stripe, OpenAI, and Figma.
Ready to build more?
We're giving $50 in Cursor credit to HowEye AI listeners.
Claim your credits at chatprd.ai slash HowEye AI.
That's $50 in Cursor credits by going to chatprd.ai slash HowEye AI.
I love this.
And I do want to just call out again for folks that maybe aren't watching this variant bar in the bottom.
There's also a very similar feature in Claude Design of this.
So Claude Design will now, when you prompt it to create a prototype, it says, how many variations do you want?
As someone who worked at many, many A-B testing companies and did an A-B testing startup, I'm like, oh, my time had finally arrived 20 years later.
But it'll create multiple variants and let you select.
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 can be like extreme design, like how far are you letting the AI go with the design system might be something you play with.
Because one of the benefits I do think of this prototyping tools, and I'm curious what you think as a designer that works on a very opinionated code base, is The happy accidents of I would have never designed that, but that's kind of interesting.
Yeah.
And you want to leave enough leeway, I think, for those moments to come out because I think it's a real benefit.
Yeah.
I think it's like where I get excited is you can just be like, Claude, make eight variants of this thing that are very different.
And like it will cook.
And then you can sort of like take bits from each of them.
um that's actually something i kind of want to it's my next quest i think is building in like a crazy eights mode almost like it just spits out eight designs and you choose the pieces it's not super rigid with the design system in fact frankly like my favorite thing with this is just doing silly stuff like i showed you this 42 42 mode it's like okay what can the design system do i had another prototype where i was like can i just make emojis rain in the dashboard i don't know um so um but like the idea there being like if you want to keep pushing it you can and then the other thing actually that we have built in and this is where the opinionated part comes through is you don't have to just use our design system so there's a little like rules selector in the sort of embedded thing you can like sort of grant the llm access to tailwind uh the amount of like shouty rules i have to have in the design system rule that's like do not use tailwind unless you're told to is actually deeply amusing but if you would turn that on it's like a pre-themed version of our design system so it's got like the right blurple and that kind of thing and so you then you can be like i want to do generative stuff right because i think the issue with the design system is 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 the called agent agentation out there uh we have our like own version that we had built internally uh i don't want to be like ahaha first uh but maybe a little bit i will here where you can also like interact with the canvas directly to give the ai feedback so imagine um you know we have this payment analytics prototype with a bunch of charts on it um you can click this little anotype ai button and swap into the like selector mode and be like i don't know uh let's say let's make the tool tip here hopper hoverable with helper text and then you can like i don't know add a bunch of comments for the ai to fix like right on the page that's the other thing like i used to lose my mind in cursor being like the element with class name 82f please fix this and being able to just select something and like give the feedback and then hit like like hawk 10 pieces of feedback to the AI to fix is really exciting so you know add more padding to the table yeah and so I'll send this off to the AI and it will just work through them like it'll it'll be like okay this comment this one um and like do that and the other thing that you can do before that there's so many things I wish I could show you wow I'm not in a rush I love it um is actually you can take a step back from that imagine you're like doing a design review right you're showing your prototype and at different companies there are different traditions but something that's common stripe is you will like show you 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 comment 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.
And you know what?
It's fine.
It's just internal tool-y.
I love it.
Well, it's probably going to like try and self-fix it because it can see it.
This is the thing.
There we go.
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 this filter.
So let's try and imagine you are 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 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 doos feedback for you and you can send this to her and it's like my favorite thing to just like right because designers have to follow up like there's all this extra busy work that you have to do after a design review and being able to be like i fixed that here's the receipts thread is amazing One thing I want to say as a sort of step back analysis of what you're showing me, which is a lot of people are going to watch this and be like, man, you know, like V0 is good enough or this is good enough.
And I think what is so interesting is you are right.
I have led design teams.
I am a specific kind of design leader and design cultures, review cultures, building cultures are so different company to company.
Right.
Completely different.
I used to run this thing called Product Craft Friday.
I wanted three hours with everybody on what we were building across everything.
And then we would create these things called vibe checks where we would all drag the most recent work into one spot in the Figma board and then look at it and say, does this all look like it's from the same product?
Because a lot of times it did not.
And I think that is not a product that anybody's going to build.
It's like the vibe check in the design root product.
And I can.
You can just do it.
But then you can do it.
I'm like, you can just build it.
And so I think people really underestimate the value of building internal tools right now, not to, as I said, like replace the ARR of a product you would buy externally.
Right.
It's not that.
So it can be so precisely matched to the culture and cadence of your team that it actually gets used.
Right.
You actually get higher quality.
Yeah.
It's like, okay, we can actually nudge the way that we work.
in really satisfying ways like you know staffing internal tools teams has always been hard actually like i've had a few of those teams and like stripe loves building custom tools but like getting resources to build a weird design review tool for like whatever would have never happened before and now we can just like completely uh evolve the way we work by just like building tools and like giving them to people and something that i love about this as well as like while I've been working on it my whole thing has been like anybody can contribute like if the design reviews thing is not right like let's just evolve it and so I actually get pull requests from designers like a surprising amount and I love it so much it makes me happy I'm like yeah you should just evolve the culture like that's kind of what I'm trying to do here and so like I get excited about that kind of thing because it's very empowering to be like design reviews aren't working like what could we i don't know what doesn't exist that should exist i don't want to use google docs i don't want to use this thing and so um it's similar like even with the 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 um 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 at the The first feeling I had when I started making this was I started seeing PMs use it and got a little nervous.
Oh my goodness, PMs designing.
It's like, what's going to happen?
But it's actually just been thrilling to see 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...
like the visual tools to do it like i think the hardest thing for pms is often they can't like manifest the thing that they want to it actually makes them better at communicating with their own designer but also uxr is completely different like they can test their idea a lot earlier in the funnel where it's like i have this thing i want to do okay how am i going to do that i can build a prototype and like just go and talk to some users and make them click it without it being an elaborate jpeg with like interactive zones everywhere so it's it's really cool to see that And I actually, I think I love the PMC's are now.
Like at first I had that terror and now I'm like, no, this is like making the relationship better.
You know, maybe I'll add one more thing to that, which is your conversations, I'm guessing, turn more into let's talk about the work and the thing I built and how can it be better than perpetual arguments over whether we should staff a designer on the MCP or something else, which has been our life for like how many conversations are going to.
who should be on the project versus here's the actual work and let's discuss that.
And I'm sure that makes everybody, especially.
Just makes it easier for them to also advocate for it, right?
It's like, okay, this is what we can do with the current system, but like we need to, we need to push it more and like go beyond what is just like capable now.
And so it's, it's been really interesting to see how that's like changing the conversation too.
It's like, Hey, here's, here's like what we can do with what we have off the shelf, but we need a designer to help us elevate this experience.
And so like, it's also making it easier to talk the same language.
Because the other thing is like, I work on very technical things in the developer experience space where it's like really dense and like super, like we've been working on this like webhooks thing with like seven steps for like a year now.
And it's like very complicated and there's all these moving parts and states and whatever.
And now we can actually just show them all as opposed to like trying to have to explain how webhooks work and like all of this different stuff.
So it's been really interesting to see how that's changed as well.
i have like we should we just like try and like build something random really quickly let's do it speed run something demo i'm thinking like it might be interesting to build like a black friday cyber monday dashboard great let's do it okay let's let's build a bfcm is it gonna know what that is we'll see dashboard for a pet store showing live sales on a chart at the top of the page a ticker with the latest sales and what else should it have i don't want to over complicated uh performing products yeah you had the same thought as me uh trending right look at this still got it still got it as a product manager we're building together uh make sure the data is realistic and real time And this is, we're going to full YOLO this and see what it does.
Okay.
And now while it's loading, I have to say as a now parent of two with a little baby, we got to get you voice mode on this.
I, I, yes, that's actually a good point.
Cause it has, that's changed my life.
It was just being able to like, I don't know.
First of all, I'll say the voice transcription built into iOS.
It's like, makes me feel insane every time I use it.
I'm like, how do you not understand basic sentences?
But then like.
the clawed voice mode like you can have a baby screaming and whisper in it and it still nails it yeah yeah so i do need to i do need to add that this is actually really interesting though like as maybe a way to describe how this thing works as we watch it cook the the under the herd 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 problem so it's like what components do i need to to build that thing um how will i structure the page what template will i use um and then it's like going to figure out how to cobble them together and hopefully make something beautiful we'll see at the end it's working on it we're seeing it made a page already and so we'll see where it winds up and were you able to just translate those basically those cursor rules into how this system works to kind of follow some of the same patterns or was there something different you did yeah it's pretty similar i think it's probably a little bit more opinionated right so there's additional tools that this has it's like got the built-in like browser tools um it's got like a bunch of extra things like you can um deploy the prototype to a like permanent url by chatting with it like all of those types of like niceties you can also be like check your work and it will um but it's largely the same a lot of my rules might be a little spicy i like for figma files it's been really interesting like trying to i think like everybody's still figuring out how this changes in this world like frankly i think i come from the engineering world so i'm like it's easier for me to use words to like describe the page i want to build but like designers want to make a figma and then translate it which i totally get but like figma and like a canvas is pretty hard for these tools still and so a lot of the rules are like insane things to like make cursor act sorry not cursor make figma act correctly um because it will be like oh here's a thousand tailwind styles and like this random component i built from scratch for some reason um or like uh matching the biggest one is like matching our internal components to like the thing in figma like if you see the thing that looks like this make this not that like i feel insane writing these rules but like once you've got them it works pretty well 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 Claude Design and we both came to completely opposite conclusions.
I said, I use Claude Design and I think it's actually pretty good at marketing and brand kind of style design work.
And I think it's garbage, garbage at UI.
And he is a marketer.
And he was like.
I think that it's pretty good at UI work and garbage at marketing.
And I was like, we just both know what we're talking about in our own domain saying like cannot recognize the slop in others.
And so I think it's really funny to see what people identify in these generations and how they use stuff, just depending on the point of view they bring.
Well, that's the thing.
And it's like, I don't think, I don't want to fit an expectation.
This will solve everything.
Like it's been interesting trying to like balance that with all of this.
work like how can i make sure that the um the tool knows enough to be dangerous like it gets to 80 but like that taste that craft is like that's why designers will always exist in my opinion like they they know how to elevate the experience like this thing knows how to use the components the components are well designed but like it's not going to be perfect and like we are here to steer them Yeah, I'm like, you know, hey, hey, hey, Protodash, that's a big old chart.
Yeah, well, no, but this is a really great demo.
I love it.
It's just like, first iteration of the page popped up.
It's like, what if I built a chart that's the entire height of the browser?
Yeah, why not?
Let's do it.
But it's interesting to look at this.
I, of course, used blowhole.
It does love a good blowhole.
it got 90 of the way oh i would say 80 of the way there with a very vague prompt like i was like give me a bfcm dashboard with a ticker and some charts and it did it i didn't um and but now is like sort of the iteration part and so this is a good probably like live demo now you can say like grab this chart jump back into here and say the chart is way too tall it should be a narrow page chart and just like it will fix it well the other thing you might need to put into your overall rules is if you scroll down boy oh boy oh boy emojis emoji i know it 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 uh this is not what i would expect to see but look at that the chart is fixed right i like pointed at it with the built-in like look at this element for me lm tool that we have and i said fix this and it fixed the chart without me having to describe it um and the the page is live like don't get me wrong it's like not the most beautiful thing i've ever seen but it's now you could like iterate on it and like build up from there it looks like stripe-ish yeah um it uses the right it didn't use comic sans um there we go but yeah the other thing i wanted to quickly talk about though that i didn't show yet is um you can also change the fidelity in here like something else that like i just miss is like just give me like monospace fonts so that you know you're looking at something fake um of course it didn't work will you will you pretty please turn on black and white mode this is this is like bringing me back to my it didn't do it that's fine it didn't do it okay but this is bringing me back to my like truly og designer days i used to do this you all you have to be very old to appreciate this so we used to do these designs in photoshop right and you know you get these like long scrolly things you're you know rounding corners by hand all this stuff yes and then one of the tricks i used to teach my designers is i said grayscale the whole thing and look for contrast yeah and you built it yeah it's just a mode like this is i love it because it's like okay there is we didn't even talk about this but like one challenge with these tools is like now i'm bringing high fidelity stuff to every review it can be a little unnerving like i actually so i worked at shopify uh before strike 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 sense which is like both like deeply painful but also you you knew visually like immediately you're like this is nonda um which i love and so like having these built-in modes we can i guess like see very clearly that it's not done or like black and white or monospace is my favorite is just like clearly this is not the dashboard but like you get it it's like 80% of it 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 throughout really easily so um I don't know you want to override a certain nav section or um you want to show the like sandboxes banner or hide the nav like you can do all of that in your prototype and so 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 which is which is really cool 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 yeah I kind of want that in here is the goal eventually.
Can we build abstracted lo-fi stuff and build...
Maybe balsamic mode is the right way to describe.
You know.
If you know, you know.
Okay, this has been so incredible.
Just to recap for folks that have made it this far with us, you built a pretty high-fidelity replica app that anybody could pull down, run locally or in a dev box, had a bunch of cursor rules.
You turned that into a web-hosted, interactive...
prototyping tool with a bunch of I think this is the the trick a bunch of controls both for how your design process works in terms of getting feedback on specific components reviewing them processing them and different states of your prototype that you know are useful across the design team and you can just ship fun things and work things and then yeah you're seeing a lot of designers use it but maybe even more pms so the stuff that people are doing and the tools that are using is really changing yeah i mean do we have like two minutes to show you one more thing there's one more thing well like there's one more thing y'all 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 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 had i see an engineer working on and i'm like this has never happened ever in my career as a design manager like them and and they're like i'll just use the prototype as the source of truth and like being able to just pick that up and be like all of the components are the same there's some translation to do but like they can just take it and do that there's a huge change and so like having that level of like preciseness and not having to like i'm gonna show my age again like red line a photoshop file or like some all of that stuff is is really incredible like now they can just inspect element and look at the padding i love it i love it uh prototypes everywhere okay uh you've blown my mind Now I want one of these.
I will say one trick that I've also used something like this for because I built a very similar kind of like replica app.
Cool.
Is I make every component a downloadable PNG so that we can use it in marketing assets.
Oh, that's good.
So, you know, like how many 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 instead can i say like the worst and best cursed thing working on these types of tools like i've gotten it far enough where i'm like wow this is like magical to use is like I just have like 90 other ideas I want to add and I can just add them.
Like every day I'm like, what if I just did this and then I do it and I'm like, what?
Yeah.
And you can just impose your will on your teammate customers as opposed to like have to worry about your real customer feedback.
Well, right.
Like let's just, let's just change the way we all work.
Like, but it does speed up their process, right?
Like if we can, I don't know, uh, one idea I've had in the back of my head for a while that I tried at one point and was just like too many layers at the time was like.
just let me clone a dashboard url like give a dashboard url clone the whole thing and it'll be in here and like then you can i don't know you've got customer feedback i want to fix this bug boom here's the prototype for it go and fix it and so i think like we're nearing that where like you can have this like pretty compelling facsimile of your environment and like much more rapidly involve evolve it without like worrying about just like breaking things or um you know, all of the like traditional boundaries of the product.
So it's, yeah, I find it, I find it very exciting.
I just have to stop myself sometimes.
I'm like, stop, stop adding things.
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 and holding a clawed in the other and making stuff happen are you ai-ing through your parental leave tell me the truth yes i it's so funny because like 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 claw 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 and 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 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 so i can expensify sort of um and then off the product and then it basically like saves the serial number in the app first of all who saves this stuff when you bought it from where right downloads the manual uh and then just like you have it there it's like i bought this on this date for this much here's the manual um because i have this thing where it's like you buy something nice and then like 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 okay and so yeah I love this.
I'm going to do a feature request here because your kids will get older and those womb bikes are expensive.
Oh, they're so good though.
They're so good.
But at some point after kid number two is done with it, you're going to want like three years later a reminder to sell this thing.
Oh, that is a good idea.
I like that.
It's like, yeah, remind me in two years I don't need this anymore.
Remind me in two years this thing needs to get out of the garage and somewhere else.
That is genius.
Well, thank you.
I need to finish it.
Also like when the warranty expires, if it requires any maintenance.
Well, that was the only reason I started this is I had a bad experience with a warranty where like it broke probably three days before the warranty was up.
But I had a kid during that time.
And I, you know, if I had had a week's notice, I would have been like quickly emailing the company.
So that's why I did it.
You 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 i'm there okay i clearly need more side projects don't i clearly okay oh and this has been amazing uh last question when ai is not listening when you're whispering you're like claw make no mistakes my baby's crying make no mistakes when it's not listening what is your prompting strategy all caps no that's fine i do a lot of shouting um i think i try i just try and be really specific like i i can my i have a lot of meandering career paths i had a content background at one point and like just being specific up front helps a lot and then like uh i have i have learned okay actually i'll i'll give you this piece of advice i find if i as soon as i've sent the first shouty prompt It's time to like reset the like slash clear and start again.
Like the context window is full.
It's not going well.
Start again.
As soon as I feel like swearing in there, like start again.
I feel like this is also applicable again to parenting children where I'm like, if being loud didn't work, I wouldn't do it guys.
I know, but it's like such a.
funny i think it's like i had to retrain my brain right like as somebody who has built a bunch of stuff you get that like sunk cost fallacy at some point like surely i'll get this to work but like often just throwing it away and starting again throw it away yeah i love this oh and this has been so fun where can we find you and how can we be helpful i'm on twitter do we still say that i say that uh twitter at at ow very short username um that's why i can't leave uh and i i'm also on my website owen williams that's just the domain name but dot before the ms and it works um and gosh how can you help me how like just build cool design tools we're actually like this prototyping thing we believe in it so much that we're hiring like i don't know how to describe it but like a design engineering type person to like drive this stuff like we think it's 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 um so please join us i feel like the kind of weirdo like that maybe likes to code and also likes design stuff uh send me a dm i'd love to talk love it well thank you thank you thank you for joining howaiai yeah thank you for having me thanks so much for watching if you enjoyed this show please like and subscribe here on youtube or even better leave us a comment with your thoughts you can also find this podcast on apple podcasts spotify or your favorite podcast app please consider leaving us a rating and review, which will help others find the show.
You can see all our episodes and learn more about the show at howiaipod.com.
See you next time.