How Reddit’s designers build ultra-realistic prototypes with Figma + Cursor

ℹ️ EPISODE INFO

Released

October 26, 2026

Duration

29m

Channel

How I AI

Watch on YouTube

▶ Open ↗

📝 EPISODE DESCRIPTION

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._

🎤 SPEAKERS

• Blair Metcalf

  guest

  Principal UX engineer at Reddit, focused on prototyping workflows and bridging design systems with production-shaped code.

• Claire Vo

  host

  Product leader and AI-focused host of 'How I AI with Claire Vo'.

🧾 EPISODE SUMMARY

In this episode of How I AI, featuring Blair Metcalf and Claire Vo, How Reddit’s designers build ultra-realistic prototypes with Figma + Cursor explores reddit Proto: design-system prototypes with real data, Cursor, and MCPs Blair Metcalf explains Reddit Proto, an internal prototyping harness that lets designers and product managers build production-like prototypes using Reddit’s design system while avoiding Git and repo complexity.

🔗 RELATED EPISODES

I tested Claude Duet. Is it worth switching from Grok Bot?

Claude Code for creators: AI editing is here

Is Meta’s Muse Wonder model any good?

Meta Muse: the AI agent people actually love

How the OpenAI team uses ChatGPT Sites daily

Jev: 8 real use cases this fast, cheap model