Reddit's AI Prototyping Harness for Product Velocity
Reddit's UX engineering team built a custom prototyping harness that allows designers and PMs to generate production-like prototypes using real data. This system leverages a custom MCP to map design systems to code, reducing the time from idea to validation and ensuring instant alignment with leadership.
The Shift to Production-Like Prototyping
Reddit’s UX engineering team has redefined the product development lifecycle by building "Reddit Proto," a custom harness that bridges the gap between design and production. Traditional workflows often rely on static Figma mockups, which fail to capture the nuance of personalized data and complex user states. By integrating authenticated production data into prototypes, Reddit ensures that leadership reviews are grounded in reality, eliminating the disconnect between design intent and user experience.
Technical Architecture and MCP Integration
The core innovation lies in the abstraction of infrastructure complexity. The harness provides a desktop application that manages Git, branching, and local environments, allowing designers and product managers to "vibe code" without technical overhead. Crucially, the team developed a custom Model Context Protocol (MCP) that maps design system tokens, components, and UX patterns to production code. This "Rosetta Stone" ensures that AI-generated code adheres to strict design standards, reducing hallucinations and ensuring high-fidelity outputs. The MCP also facilitates the automatic generation of Product Requirements Documents (PRDs) from Figma frames, streamlining the handoff to engineering.
Strategic Impact on Velocity and Alignment
This approach has resulted in 100% adoption across UX and product teams, with over 700 active prototypes. The system enables instant alignment by allowing stakeholders to interact with real features, such as search and personalized feeds, before significant engineering resources are committed. By constraining prototypes to specific features and disabling unnecessary navigation, the team focuses feedback on critical user journeys. This method not only accelerates validation but also empowers non-engineers, including visual designers and animators, to contribute to product development with high-quality, production-shaped code.
Conclusion
Reddit’s strategy demonstrates that building custom AI harnesses, rather than relying on generic tools, unlocks significant operational leverage. By treating the design system as a single source of truth and leveraging MCPs to connect design to code, companies can drastically reduce the time from idea to validation. This model is a blueprint for modern product teams seeking to integrate AI into their core development workflows while maintaining high standards of craft and alignment.
Key insights
-
Integrating authenticated production data into prototypes significantly improves stakeholder buy-in compared to static mockups. Leadership can evaluate personalized user experiences and real-world data feeds, leading to more accurate feedback and faster decision-making.
Impact: Reduces the risk of building features that look good in design but fail in real-world usage, saving engineering resources and accelerating time-to-market.
-
Abstracting infrastructure complexity through a custom desktop harness allows non-technical stakeholders to prototype without managing Git, branches, or local environments. This lowers the barrier to entry for AI-assisted development.
Impact: Increases the volume of ideas tested and validated, enabling a more iterative and data-driven product development process.
-
A custom Model Context Protocol (MCP) that maps design tokens to production code ensures AI-generated prototypes adhere to design system standards. This reduces code hallucinations and maintains consistency across the product.
Impact: Ensures that AI-assisted development scales without compromising design integrity or code quality, facilitating smoother handoffs to engineering.
-
Automating the generation of Product Requirements Documents (PRDs) from Figma frames via MCP creates a precise and comprehensive handoff for engineering. This reduces ambiguity and ensures that user goals and acceptance criteria are clearly defined.
Impact: Streamlines the transition from design to development, reducing rework and miscommunication between product, design, and engineering teams.
-
Visualizing the design system’s integrity through a "Rosetta Stone" tool allows teams to verify that all tokens and components are correctly mapped across platforms. This provides a single source of truth for the AI harness.
Impact: Enhances the reliability of AI-generated code by ensuring the underlying design system is complete and accurately represented in the MCP.
Action items
-
Audit your current prototyping workflow to identify opportunities for integrating real, authenticated data. Begin by allowing designers to access non-sensitive production data in prototype environments.
Impact: Improves the realism of prototypes and provides stakeholders with more relevant feedback, leading to better-informed product decisions.
-
Develop a custom MCP that maps your design system tokens and components to production code. Use this MCP to guide AI tools in generating code that adheres to your design standards.
Impact: Reduces AI hallucinations and ensures that AI-generated code is consistent with your design system, improving code quality and maintainability.
-
Build a simplified harness or wrapper that abstracts away Git and local environment setup for non-technical stakeholders. Provide a one-click start for new prototype projects.
Impact: Lowers the barrier to entry for AI-assisted prototyping, enabling a wider range of team members to contribute to product development.
-
Implement configuration controls in your prototypes to disable navigation and interactivity. Allow stakeholders to focus on specific features during reviews.
Impact: Directs stakeholder attention to critical user journeys, reducing feedback noise and improving the quality of reviews.
-
Create a visual verification tool to map your design system tokens across all platforms. Use this tool to ensure that your MCP has a complete and accurate source of truth.
Impact: Enhances the reliability of AI-generated code by ensuring that the underlying design system is correctly represented in the MCP.
Quotes
“The distance between design and product is wide. If we made everyone a builder, they could vibe code new features and products easily.”
“It's instant alignment and so if you use systems with high craft all the velocity like comes because you have alignment with leadership using real data reviewing real design system components”
“I take a day and then I get more vague. And we all have like bots with like projects and context. And I pop out of a project and I describe the thing large, like a movie director.”