なぜ Reddit は独自のAIプロトタイピングツールを作ったのか | Blair Metcalf

The distance between design and product is wide. If we made everyone a builder, they could vibe code new features and products easily. And so we made a harness that uses our design system and all of our components, UX patterns, and it keeps all the designers and product managers on rails. And so this way that you can make a million ideas, they can be reviewed, and then you can pick one, and then that's where we spend our time, and that's what goes into prod. I have not heard anybody say, okay, go ahead and let you off into your production data and render that. And the reason why that we do this is because Reddit has personalized data. But if designers are mocking everything in Figma and they show that to leadership, leadership's going to look at that and be like, this isn't relevant to me. And you don't have to take nine months to get that into prod, see if that works. It saves so much time and everybody can work on other things. So if you make one of these real world prototypes with real data, They'll put it through the paces of like some new future. Search is like a is a great example to like how I AI and it new podcast like it's pulling that real data.

It sends it to an LLM, ranks it, and then you can test out that design. Are designers prototyping the most or product managers prototyping the most? Like who is prototyping the most? Welcome back to How I AI. I'm Clara Vaux, product leader and AI obsessive here on a mission to help you build better with these new tools. Today I'm Blair Metcalf, Principal UX Engineer at Reddit, and he's going to show us Reddit Proto, their custom harness for product managers, designers, and anyone else to get their ideas into a production-like prototype they can share with anybody in the company. This is an awesome one for anybody interested in design systems, prototyping, and how to make high-quality things without exposing GitHub. Let's get to it. This episode is brought to you by Firecrawl, which gives your AI agents data from the web and beyond. Your agents can search and scrape the web while accessing Alexandra's rapidly expanding library of over 100 million index sources and more than 200 data providers, all through one connection.

Connect Firecrawl to ChatGPT or Claude to find people in their work emails, pick your fantasy football lineup, or analyze trends for your next marketing campaign. Firecrawl is building the library for super intelligence, bringing more of the world's knowledge into the tools you already use. Go to firecrawl.dev slash howiai to get started. Blair, welcome to How I AI. Thanks for joining. Thanks. Glad to be here. Well, one of the reasons I was so excited to have you on the show is I feel like the best teams, And their answer to how are we going to use prototyping in our product design engineering flow is eventually they decide, you know, we're just going to build our own rig here. We're going to build our own prototyping harness. And it's going to give us exactly what we need for exactly how our team operates. And the folks that do that, and it is not impossible to do, unlock some magic in the team. So walk me through what this is and why you built it. We wanted to innovate, go faster, and get new features into users' hands.

And so we made a harness that uses our design system and all of our components, UX patterns, and it keeps all the designers and product managers on rails. And so this way that you can make a million ideas, they can be reviewed, and then you can pick one, and then that's where we spend our time, and that's what goes into prod. So what I'm looking at right now is a little render of the mobile app or the mobile site for Reddit. So tell me how would somebody come to this inside your team and actually design something? What do you think is unique? I mean, it has the design system, but what else? Why did you build this, and what is super unique about how you approached the harness that you built? When we started working with designers, we wanted to start obfuscating all of Git, what the file structure is. And so we actually made an app on your desktop that just gets you right into a new project. And you would load the boilerplate and name it, and then you would end up here in a vibe-coded environment. You can work in any IDE you like, and it sets up, like, what the app is starting point.

And we think of that app as like, you know, this is the whole world, and as people add new features, It's kind of like a mountain, and we absorb that mountain, and it's everyone's starting point. So, one, if I'm a designer or product manager, I don't have to think about, like, am I cloning the repo? Am I on a branch? Am I running locally? You've created a little custom app that says just start a project. Happy, happy. You name that project, and then you all do the hard work of, like, a baseline scaffold. And then does that scaffold put the app in a specific state? Like, what are the kind of convenience things that you get when you land with this scaffold as a designer or product manager? That's right. Yeah. So I just showed, like, how you create a new project. It's cloning the Git. You don't need to know any of that. We'll go back to that screen, and you'll just start coding. And the things that you get right out of the bat are examples of, like, features. And this is what every product development team does. They're going to add new features to the product and their explorations.

There's other doodads under here of, like, navigation. You can change the navigation. You can prevent navigation because some stakeholders click too much, and you don't want them to click. I love this. Yeah, so everything is controllable. You can change the device, the theme, and so you can switch the dark. And you can test out every state that you can get in, even, like, who is a moderator. And so Reddit has complex user ecosystem. And then the nicest doodad here is that you can then use signed-in data. And so you'll know if your design works. And this helps with all kinds of real-time data feeds. So like if you wanted to do search, you can actually do search right here. And before we started this, I was just playing around and I was wondering, could I add search with these annotations? And surprisingly, I was able to, I commented here, make relevant type-aheads, trending recent communities, et cetera.

And then down here, I said overall direction, using the signed-in Reddit data and real type-aheads as user types in the search box. And then I sent that to Cursor, and it vibe-coded it on the spot. And this was just playing around. I was stunned. It worked. Okay, so I just want to kind of like walk this through for folks that are listening or meeting some of this. So first of all, you have like features as configuration, basically like the ability to toggle on or off features inside this constrained prototype. You have the ability to configure the prototype itself in terms of like turning off the interactivity of features like navigation. I love this because if it is a fully like featured sort of prototype, you can kind of go anywhere with it. but this is letting a product manager designer sort of constrain and say like this is the piece that I want you to pay attention to you can obviously switch between devices but you can also switch between persona views which I thought was very interesting And then I want to make sure people did not miss that

this one of the things that it looks like you do and correct me if I'm wrong, is you scaffold it with mocked data, but then you can log in with your account and render production data in the the prototype as well. And so this is not a tactic that I've heard people use before, which I think is really, really clever. I've heard a lot about mocked data. We have a great episode about using JSON as the backing for your prototypes and updating the JSON instead of updating kind of like hard-coded data in your prototype. But I have not heard anybody say, okay, go ahead and let you auth into your production data and render that, which gives you a much more flexible set of data to work with when you're testing new features. Right. Yeah, it's a clever trick. Our team is like a bunch of magicians. And the reason why we do this is because, you know, Reddit has personalized data. But if designers are mocking everything in Figma and they show that to leadership, leadership's

going to look at that and be like, why? This isn't relevant to me. So if you make one of these real-world prototypes with real data, they'll put it through the paces of like some new feature. Search is like a, is a great example because they're going to want the search results. I think I already did it. I said like how I AI and it knew podcast, like it's pulling that real data. It sends it to an LLM, ranks it, and then you can test out that design. This, this design, I didn't spend any time on it. Um, but a designer could then populate the landing, the type of heads and the results. And you don't have to take nine months to get that into prompts, see if that works. It saves so much time and everybody can work on other things. And then to make modifications to it, just because I'm kind of inferring based on what you've showed us, you have sort of like a prompt based thing, but that's ultimately just kicking prompts over to cursor. Is that right? That's right. Yeah. So the way that this kicked off was it's a surprising workflow.

But once I showed these annotate, once I wrote the annotations, I just said send a cursor and it writes a file. And then I just tell cursor, apply annotations. And it takes the location in the code, the annotation and overall to kick it off. And you can with that specificity, you can target any surface, any composite, any component and add real data to it with very little training. Got it. So if I click something in this prototype and write an annotation on it, the prototype has already been enriched with this is like roughly where the code is. This is roughly what this component is. This is what the request is from the user. And so it's like a very targeted edit request in this repo. Is this the real repo or is this like an approximate repo that's just for prototypes? So, yeah, everything that you asked, I can go into the annotations.

I can clear these and I can say, make this italics. And so you can target very specific things. It will use all of our design system tokens, components, et cetera. And then this is the real thing. That launchpad that I showed earlier, it deploys it on our infra. And so it uses Kubernetes. It's basically like an internal verse cell. And so then you don't have to worry about any deployment and you can share it. You can share it internally. It'll copy the URL or you can share it externally and you can like scan that. You go through some security and then now it's on your phone. And so then that is a PWA. And these are these are apps that I've already installed and you can click around them as if you were on desktop and you can check. Got it. So that's the way that you I was curious. So how do you share these prototypes internally? Are you just able to give links to people or QR codes and then they can pull up and play with your prototype? Is that how it works? This is a piece that we're working on right now, and it's going into great places.

Internally, you can share this URL quickly, like on Slack. And we have a dashboard that just keeps everyone's prototypes. Right now there's about 700. The problem with this is it doesn't scale. That list doesn't scale. So what we're working on now is a very searchable console. So you can find people's prototypes, what areas they work in, people, tags, if that feature was labeled search or growth. And then you can go into prototype types. We're going to go into iOS, Android. And then you can also go through your prototypes. And so what teams you work on, this would be the way that everybody can discover quickly who's working on what gives visibility to leadership. And are all of these prototypes public? Are prototypes public by default or private by default? I'm just curious. Right. So internally, they're all public. That's amazing. Yeah. We need to add that. We should add some. So you can work under the skunk list. Yeah. Under the radar.

I don't know. I kind of like this idea of like everything's public. You can kind of see what people are messing around with. I'm curious who is prototyping the most. Like, are designers prototyping the most? Are product managers prototyping the most? Like, who is prototyping the most? Yeah, so it's a mix of designers and product. We have 100% adoption in UX and product. But there are, like, some surprising folks that show up. Like, a visual designer turned out to be one of our best prototypers. An animator turned out to be one of our best prototypers. And what it seems like is these people are, like, great directors. They have huge context. They can describe all of the things. They're vulnerable and they try things without, like, worry of failing. But, yeah, it's a mix. It's almost a perfect mix over design and product, over 150 people. This episode is brought to you by Firecrawl, which gives your AI agents data from the web and beyond.

Your agents can search and scrape the web while accessing Alexandra's rapidly expanding library of over 100 million index sources and more than 200 data providers, all through one connection. Connect Firecrawl to ChatGPT or Claude to find people in their word emails, pick your fantasy football lineup, or analyze trends for your next marketing campaign. Firecrawl is building the library for super intelligence, bringing more of the world's knowledge into the tools you already use. Go to firecrawl.dev slash howiai to get started. I can imagine how this changes how ideas are generated. And I see a lot of teams moving to this more like prototype style requirements for designs. What I'm curious is how has this changed how designs are reviewed? Like, how do you get feedback? How do people make iterations? How do they collaborate? Right. Yeah. So this is a part that we're working on also, but long story short, these

go into like leadership reviews, leadership uses them, clicks through them. And you know, you getting feedback live you getting feedback in Slack but we want to add you can comment live on the prototype And so you have those annotations Those annotations can be kicked off They could be comments They could kick off another build. If a leader just wants to say, like, make this change, it could be live momentarily. But then, you know, like that console, it also has a place for commenting. These are all things that are coming. Got it. And so do you feel like this has changed? What has this changed in terms of, you know, is it velocity? Is it quality, like craft? Where do you feel like the impact to how you build products has been felt the most? It's instant alignment. And so if you use systems with high craft, all the velocity, like, comes because you have, you know, alignment with leadership using real data, reviewing real design system components

that nobody's hanging up on like a gotcha and they don't rattle on a detail. And they can quickly approve it. That goes out to everyone. Nobody, everybody knows like the North Star that they're heading towards. But it's instant alignment. And then how does this get handed off to engineering? Right. Yeah, this is the big puzzle piece here, which is that like, you know, can you take this code and send it to prod? So here I've sketched out a fake feature. It's just like saving posts to folders. So would there be a way that we could select a component and then copy the example prompt and take this into prod? So under this launch pad, we can also start a new project where we make a feature capsule. So what you do is you copy the location in Figma.

You go over to Figma MCP. You create from Figma. And it's going to make this thing that we call a feature capsule. And what it does is it takes a lot of things. It uses Figma MCP. It goes through all of the design system, maps it to what we know is in prod. It has also incorporated, you know, CI review feedback and engineer feedback into this MCP. And then now it's analyzing all of those Figma frames, components, and it'll spit out a PRD. And so I'm going to say, yes, this is what you're looking at, and I'll continue. And then it'll generate this PRD. These can get really large. We just selected a specific frame. But you could do many surfaces. We've tried the kitchen sink, but we're going back to just like high-fidelity UI. And so here you've got your generated PRD, and it'll say, like, this is what the user goal is. This is the acceptance criteria. It'll get into details here, links to the Figma.

And then once it's done, I'll accept and continue. And you save this file locally, and then we'll send that to Cursor. Can you explain? Go a little deeper. Somebody wanted to build this themselves. Is this a lot of this you built yourself, or, like, how did you get here? Because this is really interesting. It's going from a Figma link and a frame link all the way through PRD and then something that your cursor can execute. So just like walk us through how it got built. Right. So we started with the Reddit Proto design system. And so we have all the colors and typography baked into our design system. And then we read prod and we mapped the two. So here you have all of the button sizes. And so we use code connect, and we know that everything is connected. This is kind of the whiz-bang moment where you're like, what am I looking at? Yeah, exactly. This right here is every single token, component, surface, journey that we know of across RPL, Reddit product language.

And so here, this one token is mapped into Figma, into iOS and the GitHub, and into the prototyping GitHub. And here, it has picked out that there may be a difference in the actual literal values and the token on some platforms. And so we then take that and we map it to prod code. We submit PRs that do and don't get through CI reviews. And we take all of the engineer feedback, and that iterates back. So basically, you start with a map, and then you try, fail, iterate, and you refine the MCP through feedback. Got it. And this is an MCP that you've built? Mm-hmm. Well, the team. Okay. We're going with the team. I meant the collective, the collective you. And what are some of the tools in that MCP? Is it like where's the component? What's the design token? That's right. Yeah, so right here we got it hooked up as Proto MCP Ultra,

and it's basically like looking for what are you feeding it, and then it's finding tokens, components, and examples to write that prod-shaped code. This is what the code ends up looking like. I can't show the code, but just proof in the pudding, Like it goes through all the Git reviews and makes the build for you to test out on your device. Okay, so I want to make sure that people don't miss this process, which is you all have built an MCP basically to translate any input. And in this instance, that input might be like a Sigma frame into discovering the correct tokens, design system components, code snippets, whatever, based in production. So that when you're generating prototype style code, it is as close to production as you can reasonably get because it's done this traversal kind of like through this MTP.

Yeah, that's right. Yeah. So in this example, we're going from Figma to prod. We have tried out going from prototypes to prod, but we think that this is like a very like accurate way of getting like high fidelity Figma, high fidelity architecture. But, yeah, it's doing that through a map. You know I'm a PRD girl. Do you feel like the PRD makes a difference? Yeah, it actually carries a lot of weight. And so when we started talking, the reason why we added this is because that was the handoff with engineering. And so then you clearly define your scope, all of the user goals and, you know, workflows. Yeah, it is the perfect handoff. It has all the context. I mean, you heard it here, folks. The PRD is the perfect handoff. Keep making them. I really love this. I mean, I think what folks should take away from this is not just can you build your own prototyping system and can you make it form fit to how your team likes to build things. You can hide away some of the complexity of vibe coding and prototyping from your less technical friends

while still running it in something like Kershaw in the background. And then the idea of building sort of convenience method design system based MCPs is a really clever one because a lot of times you just leading these LLMs to kind of flail about in the code and find what they think they can find Yeah that exactly it Folks say that bots hallucinate. They hallucinate writing code. And our opinion has always been like, well, what's your goal? What's the context? And you look at the design system, you look at the end state shape, and then we refine from there. But, yeah, this is the MCP using that feature capsule and asking me where it should write the code. Amazing. And it can write that code basically in the app or in a prototype or whatever you might want. Right now it's writing it in a sibling repo to keep prod clean.

And then it'll iterate, and then it'll send off draft PR. Yeah. And then that'll get reviewed. May or may not go through. May or may not. And then can you go back to the Rosetta Stone, because I don't want people to miss this amazing thing that you had, which is you have this, like, nice visualization of what's going on in our design system. Right. Basically, why did you all decide to build this? Well, so the theory was how do we get the design system into a harness, and then the harness goes into an MCT. and we had made several attempts and the number one thing was well I don't know what's in there and so I was like well this is a visual verification and if I can hunt down and see that I know that a avatar has these colors and is used in these surfaces and as a part of these workflows I can visually verify ah well I know that the harness and therefore the MCP has all

of the parts so it's just like kind of and is this how your brain works because you're like oh i can easily visualize i'm like you can visualize what man it's like a bunch of fuzzy auras over here so tell me like is this just is this what what is inside blair's brain this is well yeah collectively this was what it was in the team's brain but this was like you know i was trying to explain this to people like you need a single source of truth that's upstream from everything um you know and when I would show this, people were like, I know it's in there. It was a visual verification for the team. I love it. And it's very beautiful. It's very soothing. It needs a little music, though. What would you play? I don't know. Some sound bathy kind of stuff. Oh, there you go. Yeah. Some Brian Eno. Exactly. Exactly. I love this. I just want to recap for everybody. Okay. So we saw Reddit Proto So purpose-built prototyping tool for product managers, designers, public by default.

Anybody can open these deployed sort of in your cloud. Some controls via config, connection to cursor, and then a really thoughtful, audited, and contextualized design system that's accessible to this whole harness via a custom MCP. Nailed it. Yeah, that is what we do. No big deal. Easy peasy. This is really, I just, my head is spinning. I'm going to swirl on like how much of this I think I can build because I think it would really change how I think about some of my design system problems. As I noodle on this, let's go to some lightning round questions if you're ready. One is just what are some non-work, non-prototyping, maybe not non-work, But, like, what are some non-prototyping use cases that you're really loving AI for these days? Before this podcast, I was working on making playing cards for the whole team.

And so this is, like, this is the person who helped start the whole Reddit proto project. And so we're making, like, our players, all the players on the team. And then you have, like, all their stats on the back. And what's nice about this is like you have to like direct this and get it into like brand. And yeah, and then everybody will have it in their hand. I know. It's so fun to be able to make like creative physical goods that are high quality. I mean, again, and these are like very high quality, super cute, consistent. What did you use to generate these? Like how did what was the process? Yeah, so I bounced around a bunch of places. But with my boss, I described everyone. And I kind of just like ad lib. This is their like, you know, this is their persona. And then I actually took that to I took that to Gemini. Gemini could have performed better. But like ChatGPT ended up making the illustration that was perfect.

I took that into cursor and generated on a high model. And then that used like a markdown file to use the prompt that kept them all in the same aesthetic. Yeah, it was it was it was quite a workflow. Oh, I love it. Super, super genius. I mean, I hid in how I AI at the very, very end of this episode. Okay, my last question, I ask everybody this. When your MCP is not replying, when Claude is being obstinate, well, you know, whoever it is, when AI is not listening, what is your prompting strategy? How do you get back on track? So I don't yell at them. I know some folks do. But what I do is I take a day and then I get more vague. And we all have like bots with like projects and context. And I pop out of a project and I describe the thing large, like like a movie director. And so here are all the facts. And then here is all the intents. And then and then I pull that back into the project. And then it knows enough to apply it to what what our goals are.

But essentially, I become a better director that is more vague, not specific. I like that. I do tell a lot of people just like under prompt your AI. It's a lot more effective than over prompting. That's a good one. That's one we haven't heard yet. Well, Blair, this has been really interesting. Very, very dense. And I think a lot of great ideas for teams out there looking to think about how they can improve their own prototyping harness, why they might build their own, and even just designers and product managers out there that want to get better at using design systems to build production like code. Awesome. Yeah. Thanks for having me. We're really excited to get these features in the user's hands. Awesome. Well, where can we find you and how can we be helpful to you? I'm on LinkedIn. And when I'm not on LinkedIn, I'm touching grass. If you want to work at Reddit, feel free to reach out to me on LinkedIn. If you've got any puzzles like this, I'm also really friendly. I love helping folks. Amazing. Well, thanks for joining How I AI. Thanks. Thanks so much for watching.

If you enjoyed the 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.