How Reddit Turned Figma Into a Prototype Factory (And What Designers Can Steal From It)

Reddit's principal UX engineer, Blair Metcalf, built an internal AI prototyping tool called Reddit Proto that now has 100% adoption across the company's UX and product org, with more than 700 prototypes live on it. The engine underneath is a custom Figma MCP connected to Cursor, and it goes from blank slate to a shareable, production-shaped prototype in minutes, no Git knowledge required.

That is worth pausing on. A large company looked at what was commercially available, decided it was not good enough, and built its own. The reason tells you a lot about where the tools are right now, and where they are going.

Why "good enough" was not good enough for Reddit

The core problem Metcalf identified is one every designer will recognise. Generic AI coding tools know how to write React. They do not know how to write your React, using your design system tokens, component names, and interaction patterns. The output looks plausible but drifts from the real product immediately.

Reddit's fix was to build what Metcalf calls a "Rosetta stone": a custom MCP (Model Context Protocol, basically a structured way to feed context to an AI model) that maps Reddit's design language directly to production code. When the AI generates a component, it reaches for Reddit's actual design system, not a generic guess. The prototypes look and behave like the real app because they are built from the same vocabulary.

Figma's own Code Connect tool (which links Figma components to their real code counterparts) plays a supporting role here. The MCP and Code Connect together give the AI enough grounding to stay on-brand without a human correcting it every other step.

The workflow, step by step

This is the part worth studying closely, because it is genuinely replicable in spirit even if you do not work at Reddit.

Start in Figma. Metcalf uses Figma as the design source. The Figma MCP integration reads the file and passes structured component and layout information to the AI, so the starting point is already grounded in a real design rather than a text description.

Annotate, then edit in Cursor. Here is the move that changes the game. Metcalf adds annotations directly in Figma, targeting specific parts of a design that need to change. Those annotations become precise instructions for Cursor, the AI code editor. Instead of re-prompting from scratch or describing a vague intention, the designer points at an exact element and says what should happen to it. The AI makes a targeted edit. This keeps changes surgical and predictable.

Share safely without Git. Prototypes get deployed to an internal hosting layer inspired by Vercel's model. Anyone in the org can review and give feedback through a shareable URL. No pull requests, no branch management, no asking an engineer to push something. Leadership can click a link and leave comments.

Hand off with a "feature capsule." When a prototype is good enough to build for real, Metcalf packages the relevant context into what he calls a feature capsule: a bundle that gives engineers the design intent, the component decisions, and enough structured information to accelerate the actual build. It is a handoff artifact that travels with the work.

What this means if you are building with AI right now

You probably do not have an engineering team to build a custom MCP. That is fine. The underlying principle still applies to anyone working on vibe coded projects with AI tools.

The lesson is not "use the most powerful AI." It is "give the AI the most specific context." Figma's MCP integration is publicly available at figma.com/mcp-catalog. Code Connect is a real tool you can explore today. Even without Reddit's custom layer, connecting your Figma file to an AI coding environment like Cursor gives the model far more to work with than a screenshot or a prompt written from memory.

The annotation-to-edit workflow is especially worth borrowing. Rather than describing a whole screen and hoping the AI guesses right, treat your Figma annotations as a task list. One note, one edit, one review. It slows you down slightly up front and saves you a lot of cleanup on the back end.

Metcalf also notes something that should encourage any designer who feels intimidated by the code side: the best prototypers at Reddit were not the engineers. The people who took to this workflow fastest were the designers, because they already thought in components and interactions. The AI handled the syntax; the designers supplied the judgment.

The honest limits

Reddit Proto is a bespoke internal tool. The design system MCP took real engineering effort to build, and the deployment infrastructure runs on Kubernetes. None of that is a Saturday afternoon project.

The broader takeaway, though, is directional. The gap between a Figma design and a working, shareable prototype is closing fast, and the designers who close it quickest are the ones who treat their design files as a source of structured context for AI, not just a picture of what they want. That shift in thinking costs nothing to start.