Why Reddit built its own AI prototyping tool | Blair Metcalf

Reddit's in-house AI prototyping tool, Reddit Proto, has reached 100% adoption across the company's UX and product organization, with more than 700 prototypes live on it, according to Blair Metcalf, Reddit's principal UX engineer and the tool's builder. Reddit Proto pairs a design-system Model Context Protocol server that maps Reddit's product language to production code with a workflow that turns designer annotations into targeted code edits in Cursor, and it packages engineering handoffs as "feature capsules." Metcalf described the system on the How I AI podcast hosted by Claire Vo.

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 https://youtu.be/zF-J3rMbzZw , Spotify https://open.spotify.com/show/4aRP2XSavdtrLG5FZoonOK , or Apple Podcasts https://podcasts.apple.com/us/podcast/how-i-ai/id1809663079 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 https://firecrawl.dev/howiai —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 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/ https://penname.co/ . For inquiries about sponsoring the podcast, email \ email protected\ https://www.lennysnewsletter.com/cdn-cgi/l/email-protection .