How Reddit Proto Connects Design, Live Data and Production Code

Blair Metcalf describes the gap between a design and a real product. Reddit built a prototyping harness that gives designers and product managers access to its design system, components and UX patterns, so they can explore ideas before engineering commits to one.

Claire Vo introduces Metcalf, Reddit’s principal UX engineer, and asks why the team built its own environment. He says the goal was to speed up exploration and make prototypes realistic enough for people to review and choose among ideas.

The desktop launchpad hides much of Git and the project file structure. A designer or product manager can name a project and start from a scaffold, then work in an IDE. The team updates the shared starting point as new features are incorporated.

The scaffold includes example features and controls. A builder can toggle features, limit navigation when they want reviewers to focus on a particular surface, and switch device, theme or user persona, including moderator states.

One key option is the data source: a prototype can begin with mock data and then render signed-in Reddit data. Metcalf says this makes a personalized product more meaningful to reviewers than a static mockup unrelated to their own experience.

As a demonstration, Metcalf annotated a search interface, asking for relevant type-ahead suggestions and real signed-in data. He sent the annotations to Cursor and says it generated a working version that he could test in the prototype.

Vo recaps the controls: feature flags, navigation constraints, device and persona views, plus mock or real data. She notes that allowing a reviewer to see their own data gives the prototype a wider and more realistic range of inputs than a fixed mock.

Metcalf says a reviewer can put a feature through its paces instead of looking at a static picture. In the search example, real data is sent to a language model for ranking. The team can test the design before committing to a lengthy production build.

The annotation workflow makes changes more targeted. Clicking a place in the prototype and writing a request creates a file containing the location, component and desired change. Cursor can then apply the annotation to the corresponding code.

Metcalf demonstrates a small text change and says the generation uses Reddit’s design tokens and components. The intent is to keep an exploratory edit connected to the system rather than making each designer reconstruct the interface from scratch.

The launchpad also deploys prototypes on internal infrastructure using Kubernetes, which Metcalf compares to an internal Vercel. A link can be shared inside the company; an external or phone flow goes through security before opening the progressive web app.

The team has a dashboard for discovering prototypes. Metcalf reports roughly 700 and says a simple list no longer scales, so the team is developing a searchable console organized by people, product areas, tags and prototype types.

Vo asks whether prototypes are private by default. Metcalf says they are currently visible internally and that more restricted work is something the team should support. Internal visibility is distinct from public access on the internet.

Metcalf reports adoption across Reddit’s UX and product organization and says the most active builders include both designers and product managers. A visual designer and an animator surprised the team with their prototyping ability.

He attributes their success partly to strong context, the ability to direct an idea and a willingness to try without fear of failure. The useful skill is not limited to knowing how to write production code.

Vo asks how the tool changes design reviews. Metcalf says leaders can click through prototypes and provide live or Slack feedback. Commenting directly on a prototype and using those comments to trigger another build are features the team is still developing.

For Metcalf, the largest effect is alignment. Reviewers see real data and familiar design-system components, making it easier to discuss the intended experience and choose a direction. His description of the speed improvement is qualitative, not a measured causal result.

The next challenge is handoff to engineering. Metcalf demonstrates a hypothetical feature for saving posts into folders and asks how a design can be translated into material that engineers can use in production.

The launchpad can create what the team calls a feature capsule from a Figma frame. It uses the Figma MCP and the design-system mapping to identify corresponding production components, while incorporating engineering and CI review feedback.

The flow analyzes the selected frames and produces a product requirements document, including user goals, acceptance criteria and links back to Figma. After a person reviews and accepts it, the file can be sent to Cursor for the next step.

Metcalf explains the foundation: Reddit mapped design-system colors, typography and components to production code, using Code Connect for relevant links. The mapping connects the design language to implementations on different platforms.

A visual “Rosetta stone” shows tokens, components, surfaces and journeys across the Reddit product language. One token can be linked to Figma, iOS, production code and the prototype repository; the visualization can reveal differences in literal values between platforms.

The mapping is refined through use. The team submits changes, observes which pass or fail CI, and incorporates engineer feedback. Metcalf describes it as starting with a map and improving the custom MCP through iteration.

The MCP locates relevant tokens, components and examples so generated code resembles production. The result still goes through reviews and can produce a build for testing; the tool does not make review or engineering judgment unnecessary.

Vo summarizes the translation: a Figma frame becomes a request enriched with production design-system context. Metcalf says the demonstrated path goes from Figma to production-shaped code; the team has also tried moving directly from prototypes.

The requirements document matters because it carries scope, user goals and workflows into the handoff. Metcalf says this context gives engineering a clearer starting point than a visual artifact alone.

The hosts generalize the lesson: a purpose-built harness can hide setup complexity while providing a model with specific design-system context. Metcalf says the team asks what the goal and intended end state are, then refines the result.

The generated code is written in a sibling repository to keep production clean, then can become a draft pull request. Metcalf emphasizes that the pull request is reviewed and may or may not be accepted.

Vo returns to the Rosetta-stone visualization. Metcalf says it was built as a way to verify what the harness and MCP actually contain: the team can visually trace an avatar’s tokens, surfaces and workflows rather than assume the mapping is complete.

In a lightning round, Metcalf describes making illustrated playing cards for the team. He used AI tools to develop personas and illustrations, then used Cursor and a Markdown prompt to keep the visual style consistent across the cards.

When AI gets stuck, Metcalf says he sometimes steps away and restates the problem more broadly outside the project’s existing context. He describes the facts and intent like a director, then brings the result back into the project.

Vo summarizes the episode as a look at a custom prototyping system and a contextualized design system. Metcalf invites people interested in similar puzzles or work at Reddit to reach out; the conversation closes with thanks.