Why Reddit built its own AI prototyping tool | Blair Metcalf

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.

Listen or watch on YouTube, Spotify, or Apple Podcasts

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

In this episode, we cover:

([00:00](https://www.youtube.com/watch?v=zF-J3rMbzZw)) Introduction to Blair

([02:31](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=151s)) Reddit Proto demo

([09:15](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=555s)) Annotations to Cursor: the targeted edit workflow

([11:19](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=679s)) Internal deployment and adoption

([14:14](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=854s)) How leadership reviews and gives feedback

([15:52](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=952s)) Engineering handoff and the feature capsule

([17:50](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=1070s)) How the custom MCP was built

([21:41](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=1301s)) Quick recap

([24:55](https://www.youtube.com/watch?v=zF-J3rMbzZw&t=1495s)) Lightning round and final thoughts

Tools referenced:

• Cursor: [https://www.cursor.com/](https://www.cursor.com/)

• Figma: [https://www.figma.com/](https://www.figma.com/)

• Figma MCP (Figma’s Model Context Protocol integration): [https://www.figma.com/mcp-catalog/](https://www.figma.com/mcp-catalog/)

• Code Connect (Figma’s code mapping tool): [https://www.figma.com/developers/code-connect](https://www.figma.com/developers/code-connect)

• Gemini: [https://gemini.google.com/](https://gemini.google.com/)

• ChatGPT: [https://chatgpt.com/](https://chatgpt.com/)

• Vercel (referenced as inspiration for internal deploy infra): [https://vercel.com/](https://vercel.com/)

Other references:

• Reddit: [https://www.reddit.com/](https://www.reddit.com/)

• Kubernetes: [https://kubernetes.io/](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/](https://www.chatprd.ai/)

Website: [https://clairevo.com/](https://clairevo.com/)

LinkedIn: [https://www.linkedin.com/in/clairevo/](https://www.linkedin.com/in/clairevo/)

Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].