How Reddit’s designers build ultra-realistic prototypes with Figma + Cursor
Blair Metcalf is the principal UX engineer at Reddit and the builder of Reddit Proto, the company’s in-house vibe-coding harness. With a design system MCP that maps Reddit’s product language to production code, Proto has reached 100% adoption across Reddit’s UX and product org, and more than 700 prototypes are live on it. *What you’ll learn:* 1. Why Reddit built its own prototyping harness 2. How designers share prototypes with leadership safely 3. Why real Reddit data beats mock data 4. How one annotation becomes a code edit in Cursor 5. What a “feature capsule” is 6. Why Blair built a “Rosetta stone” 7. Blair’s surprising fix when AI goes sideways 8. Who turned out to be Reddit’s best prototypers *This entire episode is brought to you by:* Firecrawl—Give your AI agents web data and beyond: https://firecrawl.dev/howiai *In this episode, we cover:* (00:00) Introduction to Blair (02:31) Reddit Proto demo (09:15) Annotations to Cursor: the targeted edit workflow (11:19) Internal deployment and adoption (14:14) How leadership reviews and gives feedback (15:52) Engineering handoff and the feature capsule (17:50) How the custom MCP was built (21:41) Quick recap (24:55) Lightning round and final thoughts *Blog and detailed workflow walkthroughs from this episode:* Inside Reddit Proto: Real Data, Constrained Prototypes, and a Better Handoff: https://www.chatprd.ai/how-i-ai/blair-metcalf-reddit-proto ↳ Create a Realistic Prototype with Live Data in Reddit Proto: https://www.chatprd.ai/how-i-ai/workflows/reddit-proto-live-data-prototype ↳ Generate a Draft Pull Request from a Figma Design with Reddit Proto: https://www.chatprd.ai/how-i-ai/workflows/reddit-proto-figma-to-draft-pr *Tools referenced:* • Cursor: https://www.cursor.com/ • Figma: https://www.figma.com/ • Figma MCP (Figma’s Model Context Protocol integration): https://www.figma.com/mcp-catalog/ • Code Connect (Figma’s code mapping tool): https://www.figma.com/developers/code-connect • Gemini: https://gemini.google.com/ • ChatGPT: https://chatgpt.com/ • Vercel (referenced as inspiration for internal deploy infra): https://vercel.com/ *Other references:* • Reddit: https://www.reddit.com/ • Kubernetes: https://kubernetes.io/ *Where to find Blair Metcalf:* LinkedIn: https://www.linkedin.com/in/jblairmetcalf *Where to find Claire Vo:* ChatPRD: https://www.chatprd.ai/ Website: https://clairevo.com/ LinkedIn: https://www.linkedin.com/in/clairevo/ X: https://x.com/clairevo *Have a really cool use case of how you use AI in your work? Let us know:* https://docs.google.com/forms/d/e/1FAIpQLSfP8wYCeDo5K0DxscDmoqgkxYY8ngA3B2anUDDvC4xadGTerg/viewform _Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._
