Why Reddit built its own AI prototyping tool | Blair Metcalf

The podcast discusses Reddit's custom prototyping system, Reddit Proto, designed to bridge the gap between design and product development by enabling non-technical teams to create high-fidelity prototypes using real production data and the company's design system. This tool supports rapid iteration by allowing designers and product managers to simulate real-world user experiences across devices and user roles, test AI-driven features like search, and share prototypes internally via URLs or QR codes. Key features include a simplified desktop app environment, pre-built components, feature toggles, and integration with real data - enabling stakeholders to evaluate functionality in a production-like setting without impacting live systems.

The system enhances collaboration by streamlining feedback loops, allowing leadership to review and annotate prototypes in real time, and facilitating faster alignment on product direction. Prototypes are built using a model-centric pipeline (MCP) that connects Figma with development workflows, ensuring consistency across platforms and reducing discrepancies between design and code. The handoff to engineering is supported through feature capsules and detailed PRDs that include user goals, acceptance criteria, and design links, enabling seamless transition into development. Additionally, internal tools like the Rosetta Stone visualization help maintain a single source of truth for the design system, while AI and automation reduce code hallucination and increase prototyping accuracy.

The prototyping approach has been widely adopted across UX and product teams, with over 150 users, including designers, product managers, and even visual artists who contribute creatively without technical barriers. The system currently hosts around 700 prototypes, with plans to improve scalability through a searchable console for better discoverability. Future enhancements include private prototyping modes and live commenting, further supporting innovation while maintaining security and accessibility. Overall, the tool empowers teams to experiment rapidly, validate ideas with real data, and accelerate product development without risking the live environment.

• What if you built a personal prototyping harness like Reddit Proto to test product ideas in real-world conditions?

  • Move: Create a local or cloud-based prototype environment using your existing design system (or adopt an open-source one), pre-load it with reusable components, and integrate real API data (e.g., from your app or public endpoints) so you can simulate real user flows without writing backend code.
  • Why Now?: With tools like Figma, Vercel, and Cursor, solo developers can spin up production-like prototypes in hours - not weeks - and test high-impact features before committing engineering time.
  • Expected Upside: Reduce wasted development cycles by 50%+; validate feature demand with stakeholders or early users using interactive demos instead of static mockups.

• What if you used AI to auto-generate production-ready code from your design files, like Reddit's MCP pipeline?

  • Move: Set up a workflow where Figma frames trigger AI-generated code via Cursor or GitHub Copilot; use prompt templates that reference your design tokens, component library, and PRD structure to produce consistent, reviewable React or SwiftUI output.
  • Why Now?: AI coding tools now support context-aware generation; with a well-documented design system, you can get 70 - 80% accurate component code from prompts - especially for UI-heavy screens.
  • Expected Upside: Cut handoff time from days to minutes; maintain fidelity between design and code while freeing yourself to focus on logic and integration.

• What if you treated every prototype as a deployable PWA and shared it like a live feature for instant feedback?

  • Move: Use a framework like Next.js or SvelteKit to build prototypes that deploy automatically to a public URL via Vercel or Netlify; add login gates or mock auth to simulate real user states (e.g., moderator, pro user) and share via QR code or Slack with targeted testers.
  • Why Now?: Modern frontend tools allow zero-config deployments; sharing live, interactive prototypes mimics real usage and surfaces UX issues earlier than PDFs or Figma links.
  • Expected Upside: Accelerate feedback loops from days to hours; gain alignment with users or stakeholders through tangible interaction instead of abstraction.

• Build a lightweight, internal prototyping tool using your existing design system to enable rapid, code-free iterations for non-technical team members.
• Integrate real production data into prototypes early by implementing secure login and data rendering, ensuring designs reflect actual user experiences.
• Automate the handoff from design to development by generating structured PRDs that include user goals, acceptance criteria, and direct links to Figma components.
• Deploy prototypes on internal infrastructure with one-click sharing via URLs or QR codes, enabling fast feedback loops through Slack or mobile testing as PWAs.
• Implement a searchable prototype console with filters for tags, owners, and platforms to improve discoverability and track ongoing experiments across your team.