The Engineering Moat: Why Reddit Built Its Own Prototyping Harness

In this conversation, Blair Metcalf, Principal UX Engineer at Reddit, explains that the best way to speed up product development is not to buy more third-party tools, but to build a custom, internal prototyping harness. By linking a design system directly to production code through a custom Model Context Protocol (MCP), Reddit has removed the mock data bottleneck that slows down most product teams. The takeaway is that speed comes from instant alignment: the ability to show leadership functional prototypes backed by production data, which removes ambiguity. For product and engineering leaders, this approach provides a competitive edge by keeping the system honest to production realities while allowing non-engineers to build high-fidelity work.

The Hidden Cost of Mock Velocity

Most teams use external design tools like Figma to mock up features. This feels productive at first, but it creates a disconnect later on. Leadership reviews static designs, approves them, and only then does the engineering team find out how complex the implementation actually is or how the data behaves.

Metcalf argues that this leads to endless debates over details that do not exist in the actual product. By building a harness that lets designers and PMs pull real production data into their prototypes, Reddit skips the nine-month validation cycle.

> "If designers are mocking everything in Figma and they show that to leadership, leadership's going to look at it and be like, this isn't relevant to me... if you make one of these real world prototypes with real data, they'll put it through the paces of some new feature."
>
> -- Blair Metcalf

This reveals a simple truth: immediate discomfort creates a lasting advantage. Forcing designers to work within a production-like harness is harder than drawing boxes in Figma. But because that harness is constrained by the actual design system and production data, the output is ready to build.

Mapping the Rosetta Stone of Production

The core of Reddit's system is a custom MCP that acts as a Rosetta Stone, mapping design tokens, components, and surfaces across Figma, iOS, and the codebase. This is where systems thinking pays off. Instead of letting LLMs guess at code structures, the harness provides a rigid, verified map of the truth.

When a designer adds an annotation to a prototype, they trigger a targeted edit request within the actual repository. This turns the prototype into a living document that carries the full context of the design system.

> "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."
>
> -- Blair Metcalf

By building this mapping layer, the team created a feedback loop where engineering constraints are baked into the design phase. This prevents the common hand-off failure where designers and engineers speak different languages. The feature capsule generated by this process contains the UI, the PRD, user goals, and acceptance criteria, ensuring that when a feature moves to production, the alignment is already settled.

The Advantage of Under-Prompting

A fascinating insight from Metcalf involves how to handle AI when it becomes obstinate. Conventional wisdom suggests adding more detail to the prompt to force the AI into compliance. Metcalf suggests the opposite: when the system fails, pull back.

By becoming more vague and focusing on the movie director perspective--stating the facts and the intent rather than the specific mechanics--the AI can better apply the request to the existing context of the project. This is a distinction: the AI is not failing because it lacks instructions; it is failing because it is being over-constrained in a way that ignores the system goals.

Key Action Items

• Audit your design system for truth: Over the next month, check if your design tokens actually match your production code. If they do not, you are building on a foundation of fuzzy data that will cause your AI-generated code to fail.
• Build a production-data bridge: Investigate how to safely expose a subset of production data to your prototyping environment. This is a 12-18 month investment, but it eliminates the objection that prototypes do not look like the real app during leadership reviews.
• Implement feature capsules: Start treating your PRDs as machine-readable artifacts. By linking Figma frames to specific code components via an MCP, you create a perfect handoff that saves engineering time later.
• Adopt the director prompting strategy: If your AI agents are struggling, stop adding more specific instructions. Pull back, define the movie, and let the agent navigate the system constraints.
• Prioritize internal visibility: Create a searchable console for prototypes. If your team has more than 50 people, visibility is the bottleneck. Giving leadership a place to see what is being built in real-time creates the instant alignment that helps you ship faster.