How I AIHow Reddit’s designers build ultra-realistic prototypes with Figma + Cursor
At a glance
WHAT IT’S REALLY ABOUT
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.
- The tool supports toggling features, constraining navigation for stakeholders, switching devices/themes/personas, and even logging in to render signed-in production data inside prototypes.
- A key workflow uses UI annotations that are sent to Cursor, enabling targeted code edits on specific components and rapid iteration with minimal training.
- Prototypes are deployed on internal infrastructure for easy sharing via URLs/QR codes, and Reddit is building a searchable console plus commenting to better scale discovery and feedback.
- For engineering handoff, the team uses a custom MCP to map Figma frames to production design tokens/components, generate a PRD, and draft prod-shaped code in a sibling repo that can proceed through review.
IDEAS WORTH REMEMBERING
5 ideasReddit Proto is designed to hide Git and scaffolding so non-engineers can build quickly.
He describes Reddit Proto as a desktop “launchpad” that creates a new project from a boilerplate so designers and PMs can start building without dealing with cloning repos, branches, or local setup.
Keeping everyone “on rails” with the design system enables fast exploration without losing consistency.
He says the harness uses Reddit’s design system components, UX patterns, and tokens to keep explorations consistent, letting teams generate many ideas, review them, and then choose what to invest in for production.
Using real, personalized data makes prototypes more credible in leadership review.
He explains that leaders often find Figma mocks irrelevant because Reddit is personalized; by letting prototypes use signed-in, real data, leadership can “put it through the paces” and give more grounded feedback.
Annotations + Cursor create a targeted-edit loop that can modify specific components with minimal training.
He describes a workflow where someone writes annotations on a specific UI surface, sends them to Cursor, and Cursor applies targeted edits based on the annotation’s code location and intent.
Internal deployment turns prototypes into shareable, production-like artifacts people can actually use.
He says the launchpad deploys prototypes on Reddit infrastructure (described as “an internal Vercel” using Kubernetes), making prototypes easy to share via URL/QR and runnable as PWAs on phones.
WORDS WORTH SAVING
5 quotesThe distance between design and product is wide. And if we made everyone a builder, they could vibe code new features and products easily.
— Blair Metcalf
And so we made a harness that uses our design system and all of our components, UX patterns, and it keeps all the designers and product managers on rails.
— Blair Metcalf
I was stunned. It worked.
— Blair Metcalf
It's instant alignment.
— Blair Metcalf
So I don't yell at them. I know some folks do.
— Blair Metcalf
High quality AI-generated summary created from speaker-labeled transcript.
