Inside Reddit Proto: Real Data, Constrained Prototypes, and a Better Handoff
Reddit’s Blair Metcalf shows how an internal prototyping harness gives designers and product managers realistic data, design-system guardrails, and a more deliberate path from Figma to production-shaped code.
Featuring Blair Metcalf · Principal UX Engineer at Reddit
Claire Vo
Watch or listen to the full episode
Episode chapters
6 chapters- 2:26A prototyping harness that hides GitWhy Reddit built its own launchpad and which design-system, navigation, device, and persona controls builders receive.
- 5:48Signed-in data and targeted Cursor annotationsBlair demonstrates a search prototype grounded in personalized Reddit data and annotations that become specific code-edit requests.
- 11:21Sharing, discovery, and leadership alignmentHow internally public prototypes support reviews, what adoption looks like, and why a dashboard of about seven hundred prototypes needs better discovery.
- 15:48Figma to feature capsule, PRD, and reviewed codeThe production-oriented handoff uses Figma, a design-system map, a custom MCP, and a PRD before code is generated in a sibling repository.
- 22:51Visually verifying the design-system source of truthBlair explains why the team built an inspectable map of tokens, components, surfaces, and workflows to verify the harness and MCP.
- 26:03Creative side projects and getting AI unstuckTeam playing cards lead into Blair’s prompting advice: step outside narrow project context and restate the facts and intent at a higher level.
Workflows from this episode
- Create a Realistic Prototype with Live Data in Reddit Proto
- Generate a Draft Pull Request from a Figma Design with Reddit Proto
Episode outline
The most unusual thing about Reddit’s prototyping system is that you can sign in and see your own Reddit data inside a design that hasn’t shipped.
That changes the review. A search prototype has to return something relevant. A personalized feed can’t hide behind carefully selected placeholder posts. A leader can click around with their own account and discover whether the idea makes sense to them.
It also creates an important distinction: realistic enough to evaluate is not the same as ready for production.
Blair Metcalf, Principal UX Engineer at Reddit, demonstrates both sides of that boundary in Reddit Proto, the company’s internal prototyping harness. Designers and product managers can build within Reddit’s components and UX patterns, share working prototypes, and test ideas with signed-in data. Getting code toward production is a separate, more deliberate process involving Figma, a generated PRD, a custom MCP, and engineering review.
The useful lesson is how much work Reddit has put into deciding what the AI should already know—and what the person using it should never have to configure.
Hide Git, expose the decisions that matter
Reddit Proto starts with a desktop launchpad. A designer or product manager names a project and loads the boilerplate. The app handles cloning the repository and establishing the starting point; the user doesn’t need to reason about branches or repository setup before trying an idea.
They can work in their preferred IDE. Cursor is the tool Blair demonstrates for applying AI-generated changes.
The scaffold contains Reddit’s design system, components, UX patterns, and examples of features. As the team adds useful capabilities, those can become part of the shared starting point. Rather than asking every new prototype to rediscover how Reddit works, the team maintains that context centrally.
The controls exposed to the builder are product decisions:
- Turn features on or off.
- Change the device and theme.
- Test different user states, including moderator status.
- Enable or prevent navigation.
- Switch from mocked data to signed-in data.
Preventing navigation is a particularly good detail. In a working prototype, an enthusiastic reviewer can click straight out of the experience you intended to discuss. Constraining navigation lets the builder say, effectively: this is the decision we’re reviewing today.

The principle worth copying is selective simplicity. Hide the mechanics that repeatedly trip people up, but expose the controls that help them test a product hypothesis. A blank chat box over an unfamiliar repository would make the user do much more of that work.
Give the prototype real data—and give Cursor a precise target
Blair’s search example begins with annotations inside the prototype. He writes:
“Make relevant typeaheads trending recent communities, et cetera.”
He adds an overall direction:
“Using the signed-in Reddit data and real typeaheads as user types in the search box.”
Then he sends the annotations to Cursor. That action writes a file; in Cursor, he gives the instruction “Apply annotations.”
The useful part is what accompanies the request. The annotation carries the location in the code, the targeted element, the requested change, and the broader direction. Cursor is receiving a grounded edit request rather than being asked to infer which search box, component, or surface the user meant.
Blair says this lets builders target a surface, composite, or component while using Reddit’s design tokens and components. He also demonstrates the simpler case of selecting an element and asking to make it italic.
The search experiment was something he had been playing with before the recording, and he was surprised it worked. Searching for “How I AI” recognized the podcast; Blair describes the flow as pulling real data, sending it to an LLM, and ranking it. He does not identify the model or show a detailed evaluation of the search quality.

That distinction matters. The demonstration establishes that a realistic search interaction can be assembled and explored quickly. It does not establish that the ranking is production-ready. Blair explicitly says he hadn’t spent time on the design; a designer could then develop the landing experience, typeaheads, and results.
His reason for using signed-in data is pragmatic: Reddit is personalized. A mocked Figma experience may look polished and still feel irrelevant to the person reviewing it. Their own data gives them a reason to exercise the feature more seriously.
For another team, the adaptable pattern is to connect a prototype to representative, authorized data through a controlled path. This is an internal, privacy-controlled workflow—not a recommendation to give arbitrary prototypes unrestricted production access. The episode demonstrates the capability, not the underlying permission architecture.
Seven hundred prototypes create a discovery problem
Reddit Proto handles deployment as well as project creation. Blair describes the infrastructure, which uses Kubernetes, as “basically like an internal Vercel.” Builders can share a URL internally, including through Slack. He also demonstrates a security-gated sharing route and installed PWAs that can be used on a phone.
The prototypes are public within Reddit by default. That is useful for visibility, but it is also a product choice with consequences: when asked about private projects, Blair acknowledges that the team needs to add that capability.
At the time of the conversation, the dashboard held about seven hundred prototypes. A list of that size no longer works particularly well. The team is developing a searchable console to help people discover work by person, area, tag, team, and prototype type, with iOS and Android among the directions discussed.
Here, it is important to separate what exists from what is coming. Leadership already reviews working prototypes, clicks through them, and gives feedback live or in Slack. Live commenting on prototypes, comments that could trigger another build, and additional console commenting are described as work in progress.
Blair reports “100% adoption in UX and product,” across over 150 people, with a nearly even mix of design and product. Some of the strongest prototypers have been a visual designer and an animator. His explanation is that they are good directors: they carry substantial context, can describe what they want, and are willing to try things that might fail.
When I ask where the impact is strongest, Blair’s answer is “instant alignment.” Real data and familiar components reduce the distracting objections that can consume a design review. People can focus on whether the feature should exist and how it should behave.
That is a reported organizational benefit, not a measured cycle-time result. But it is a more useful target than counting how quickly someone can generate a screen.
The route toward production still runs through a PRD
The handoff is where the demo becomes more cautious—and more interesting.
Can a team take prototype code and send it to production? Blair calls that “the big puzzle piece.” Reddit has experimented with prototype-to-production flows, but the demonstrated route starts from high-fidelity Figma.
Using a sample feature for saving posts to folders, he copies a Figma location into a launchpad flow and creates what the team calls a feature capsule. Figma MCP analyzes the selected frames and components, while Reddit’s system maps that design to known production components and incorporates lessons from CI reviews and engineering feedback.
An intermediate output is a PRD. It includes the user goal, acceptance criteria, details about the work, and links back to Figma. The user reviews and confirms the interpretation, accepts the document, saves it locally, and sends it to Cursor.

Blair says they tried a broader “kitchen sink” approach and then narrowed back toward high-fidelity UI. That is a useful constraint to preserve. The system is not presented as reliably converting every aspect of a product idea into a complete implementation.
The PRD carries weight because it was already the handoff to engineering. It makes scope, goals, and workflows explicit before the agent starts writing code. This is where my enthusiasm for a written specification remains intact: an interactive artifact can show behavior, but it doesn’t automatically communicate every boundary of the work.
The code is written into a sibling repository to keep production clean. It can iterate there and produce a draft PR. That PR gets reviewed and, as Blair emphasizes, may or may not go through.
The copyable pattern is a checkpoint between interpretation and implementation. Ask a person to approve what the system believes it is building before treating generated code as progress.
The design-system map needs inspection, too
Behind that handoff is a substantial grounding effort. Reddit started with the Reddit Proto design system, read production code, and mapped the two. Blair names CodeConnect as part of connecting the design assets and implementation.
He shows a visualization covering tokens, components, surfaces, and journeys across RPL, Reddit Product Language. A token can be mapped into Figma, iOS, GitHub, and the prototyping GitHub. The visualization can also reveal differences in literal token values across platforms.
The custom MCP, shown as Proto MCP Ultra, uses that knowledge to find tokens, components, and examples for generating production-shaped code. Its quality depends on the map—and on feedback from attempts to use it.
Blair describes the process plainly: start with a map, try, fail, iterate, and refine the MCP using engineering feedback. Some submitted PRs pass CI review; others do not. Those outcomes improve the system.
The visualization exists because earlier attempts left people asking a basic question: what is actually in the harness? Being able to inspect an avatar’s colors, surfaces, and workflows gives the team a way to verify coverage rather than assume it.
This is one of the strongest ideas in the episode. If an agent is supposed to use your design system, you need a way to inspect its source of truth. Putting documentation within reach is different from verifying that the required relationships are represented correctly.
The production code itself is not shown. We can assess the demonstrated map and handoff, and report Blair’s description of the review process; we cannot independently assess implementation quality from this walkthrough.
Copy the boundaries, not the whole platform
Blair’s final prompting advice sounds almost contradictory to the precision of the annotation workflow: when AI gets stuck, he steps out of the narrow project and becomes more vague.
He takes time away, describes the facts and intent at a higher level—like a movie director—and brings that framing back into the project. The useful distinction is between precision about the target and over-prescription about the solution. “Change this component” can be precise; an accumulated set of tactical instructions can still obscure the goal.
My verdict: Reddit Proto is most worth studying if your organization already has a shared product surface and design system, but designers and product managers still struggle to turn ideas into credible, reviewable experiences.
Start by copying the launchpad, the contextual annotations, and the reviewable specification. Add realistic data only with appropriate access controls. Invest in the component map before expecting dependable production-shaped output.
The human work remains consequential: choosing what deserves to be built, judging whether personalized results are useful, correcting the system’s understanding of scope, and deciding whether a draft PR belongs in production. Reddit has made more people capable of exploring an idea. It has not made those decisions disappear.
Watch or listen
Thanks for supporting How I AI
SponsorsSearch and scrape web data for AI agents.
Build your next product with ChatPRD
Turn an idea into a PRD, user stories, and a plan.



