Why Reddit built its own AI prototyping tool | Blair Metcalf

Host Claire Vo introduces Blair Metcalf, Reddit’s principal UX engineer and the builder of Reddit Proto. Blair says Reddit wanted to innovate faster and get new features into users’ hands, but the distance between design and product was too wide. The solution was a custom harness built around Reddit’s design system, components, and UX patterns. It lets designers and product managers generate many ideas, review them, choose one, and then focus engineering effort on the selected direction rather than building every experiment. The harness is designed to keep people “on rails” while still allowing broad exploration. Reddit created a desktop app that starts a new project for the user, handles cloning and setup behind the scenes, and opens a prebuilt, vibe-coding environment in whatever IDE the user prefers. Blair describes the baseline app as a growing “mountain”: each new feature becomes part of the shared starting point for future projects. Users do not need to understand repositories, branches, or local development. They name a project, load the boilerplate, and begin working from an application that already resembles Reddit. The scaffold includes feature examples, navigation controls, device and theme switching, and controls for constraining the prototype. A designer can prevent navigation so reviewers focus on one surface, switch between desktop and mobile presentations, test light and dark themes, and represent different Reddit roles, including moderators. Blair says these controls let teams test the states and user contexts that matter without rebuilding the surrounding product each time.

A central feature of Reddit Proto is that a prototype can begin with mocked data but can also use signed-in Reddit data. Claire points out that this is different from the more common approach of backing prototypes with static JSON or other mock data. Blair calls it a “clever trick” made necessary by Reddit’s personalized data: if a designer shows leadership a Figma mockup filled with generic content, leadership may reasonably respond that the design is not relevant to them. Using real data lets reviewers put a proposed feature through its actual paces. Blair demonstrates search as an example. He searches for “How I AI,” and the prototype pulls live Reddit data, sends it to an LLM to rank the results, and renders the result in the prototype. A designer could then populate autocomplete suggestions, trending results, recent communities, and the landing state using real content rather than invented examples. Blair’s point is that teams do not need to wait nine months to put a feature into production before learning whether the interaction works. Claire also demonstrates how quickly this can work. She writes annotations asking for relevant autocomplete categories and a general direction using signed-in Reddit data, then sends the request to Cursor. Cursor vibe-codes the search behavior immediately. Blair says the goal is not to replace careful product decisions with generated code; it is to let teams create and review many realistic options before committing production time.

Claire asks whether Proto’s prompt-based workflow is ultimately sending requests to Cursor. Blair confirms that it is. A user can click or select an element in the prototype, write an annotation such as “make this italics,” and send it to Cursor. Proto writes a file containing the annotation, the relevant location in the code, and the broader instruction. The user then tells Cursor to apply the annotations. Because the prototype is already connected to the underlying code structure, the request can target a particular surface, composite, or component rather than asking an AI coding tool to search an unfamiliar repository from scratch. Claire summarizes the workflow as a prototype enriched with approximate code location, component identity, and the user’s requested change. Blair agrees, adding that the edit can use Reddit’s design-system tokens and components and can incorporate real data with little training. The code is not merely an isolated mockup. Blair says Reddit’s launchpad deploys the prototype on the company’s infrastructure using Kubernetes, in a system he compares internally to Vercel. Users can copy a URL and share the result internally, or complete a security process to share it externally. The prototype can also be opened as a progressive web app on a phone, allowing people to install it and interact with it as they would a mobile product. This gives reviewers something they can click through rather than a static design file.

Proto prototypes are currently shared internally through URLs, including links posted in Slack. Reddit also has a dashboard containing everyone’s prototypes; Blair says there are about 700 at the time of the conversation. He acknowledges that a simple list will not scale, so the team is building a searchable console. The planned console will let people find prototypes by creator, product area, tags such as “search” or “growth,” platform type such as iOS or Android, and the teams involved. The console is intended to make work discoverable and give leadership visibility into what different groups are exploring. Claire asks whether prototypes are private by default. Blair says that, internally, they are currently public by default, but the team needs to add a way to work “under the radar” for skunk-work projects. He likes the visibility of public experimentation, while recognizing that not every project should immediately be visible to everyone. Claire asks who prototypes most: designers or product managers. Blair says adoption is effectively 100% across Reddit’s UX and product organization, with more than 150 people participating, and the mix is almost evenly split between design and product. Some unexpected top prototypers are a visual designer and an animator. Blair believes these people succeed because they are strong directors with broad context, can describe what they want, and are willing to try ideas without worrying about failure.

Claire asks how Proto has changed design reviews, feedback, collaboration, and iteration. Blair says prototypes are already used in leadership reviews, where leaders can click through them and provide immediate feedback. Feedback also arrives in Slack. The team is still building richer collaboration features, including live comments on the prototype and a way for a comment to trigger another build. A leader might eventually be able to write “make this change” and see the result appear momentarily, while the broader console will include a dedicated commenting system. Blair says the largest impact so far is not simply velocity or visual quality but “instant alignment.” When a prototype uses a high-craft design system and real data, leaders review the same components and realistic states that the team is working toward. They are less likely to get stuck on an irrelevant detail or a mismatch between a Figma mockup and the actual product. Once a direction is approved, everyone understands the North Star. Claire’s larger conclusion is that a custom harness can hide the complexity of vibe coding from less technical teammates while still using Cursor in the background. Blair agrees that AI coding assistants can hallucinate when they lack context. Reddit’s response is to provide the goal, the intended end-state shape, the design-system structure, and production mappings so the generated work starts from known constraints rather than an empty repository.

For the engineering handoff, Blair demonstrates a workflow Reddit calls a “feature capsule.” The user selects a Figma frame, copies its location, and uses Figma MCP to create the capsule. The system analyzes the selected frames and components, maps them to Reddit’s known design-system and production code, and generates a PRD. Blair says the generated document can include a user goal, workflows, acceptance criteria, detailed implementation context, and links back to Figma. The team experimented with selecting many surfaces—the “kitchen sink”—but is moving back toward focused, high-fidelity UI selections. Once the PRD is accepted, the user saves it locally and sends it to Cursor. Blair calls the PRD a strong handoff because it makes the scope, goals, workflows, and context explicit. The generated code can be written into a sibling repository rather than directly into production, allowing the team to iterate and create a draft pull request while keeping the production codebase clean. The resulting change still goes through engineering review and CI; it may or may not be accepted. The underlying system began with Reddit Proto’s design system. Reddit mapped colors, typography, tokens, button sizes, components, and surfaces to the corresponding production implementations. Code Connect helps map Figma objects to code. The system also records differences between literal values and platform-specific tokens, incorporates engineer feedback from pull requests and CI, and continually refines the mapping through attempts, failures, and iteration. Blair describes the resulting Proto MCP as finding tokens, components, and examples that let it write code shaped like Reddit’s production code.

Blair shows Claire a visualization he calls a “Rosetta stone.” It represents the tokens, components, surfaces, and workflows known across Reddit Product Language. A single token can be mapped across Figma, iOS, GitHub, and the prototyping repository. The visualization also highlights cases where the literal value differs across platforms. Blair says the team built it because a design-system MCP is only useful if the team can tell what is actually inside it. Earlier attempts left people asking whether the required component or token had really been included. The Rosetta stone provides visual verification: Blair can inspect an avatar, confirm its colors, see where it is used, and verify that the harness and MCP contain the necessary pieces. He describes it as a single source of truth upstream of the prototype and production workflows. Claire recaps Proto as a purpose-built, internally deployed prototyping tool with configurable features, device and persona controls, Cursor integration, real Reddit data, and a contextualized design-system MCP. Blair confirms that the team has tried prototype-to-production workflows but currently considers Figma-to-production through the feature capsule more accurate because it combines high-fidelity visual input with a production-aware architecture. The goal is not automatic production deployment; it is a reliable, reviewable path toward code that conforms to the company’s existing system.

In the lightning round, Blair describes a non-work use of AI: making high-quality playing cards for the Reddit Proto team. He first described each teammate and improvised a persona and statistics for them, then used Gemini and ChatGPT while moving between tools. ChatGPT ultimately produced the illustrations he preferred. Blair brought the illustrations into Cursor and used a high-capability model plus a Markdown file to keep the prompts and visual aesthetic consistent across the deck. Claire asks what Blair does when an MCP, Claude, or another AI system stops listening. He says he does not yell at the system or respond by piling on more instructions. Instead, he takes a day, becomes more vague, and steps outside the current project or context. He describes the problem and relevant facts “like a movie director,” explains the overall intent, and then brings that description back into the project so the model can apply it to the actual goals. His recommendation is to become a better director rather than a more aggressive prompter. Claire notes that this supports the idea of underprompting rather than overprompting. Blair closes by saying he is available on LinkedIn, enjoys helping people with puzzles like this, and jokes that when he is not on LinkedIn, he is “touching grass.”