How I AIHow Reddit’s designers build ultra-realistic prototypes with Figma + Cursor
CHAPTERS
- 0:00 – 1:08
Why Reddit built a “production-like” prototyping harness
Blair explains the core motivation: shrinking the gap between design ideas and shippable product by making more people “builders.” The harness keeps designers and product managers on rails with Reddit’s design system so many ideas can be explored, reviewed, and then one can be chosen to invest engineering time into shipping.
- •The gap between design and product is described as “wide,” motivating a new workflow
- •The harness is built around Reddit’s design system, components, and UX patterns
- •The goal is to enable fast exploration of many ideas, then pick the one to ship
- •A core benefit is focusing engineering time only after alignment on the best option
- 1:08 – 2:37
Show overview: what “Reddit Proto” is and who it’s for
Claire introduces Blair and frames the episode around Reddit Proto, a custom prototyping system intended for product managers, designers, and others. The focus is on creating prototypes that feel close to production and can be shared broadly inside the company.
- •Claire introduces Blair as a principal UX engineer at Reddit
- •Reddit Proto is positioned as a custom “harness” for production-like prototypes
- •The tool is meant for designers, product managers, and other collaborators
- •The prototypes are intended to be shareable across the company
- 2:37 – 3:31
Removing Git complexity with a desktop “launchpad” and scaffolded projects
Blair describes how the team hid Git and repo structure behind a desktop app that creates new projects from a boilerplate. The idea is to get non-engineers into a coding environment quickly, with a consistent starting point that evolves as the organization adds features.
- •The workflow aims to obfuscate Git and file structure for designers
- •A desktop app creates a new project and loads boilerplate automatically
- •People can work in any IDE, starting from a consistent baseline
- •The scaffold evolves as new features are absorbed into the shared starting point
- 3:31 – 7:14
Prototype controls: feature toggles, navigation constraints, themes, and personas
They walk through the built-in controls that let a prototype be configured like a product. This includes toggling features, limiting navigation to keep stakeholders focused, switching devices and themes, and testing different user states such as moderator vs non-moderator.
- •Features can be toggled on/off via configuration
- •Navigation can be modified or disabled to prevent unhelpful stakeholder clicking
- •Device and theme (including dark mode) can be switched easily
- •User states/personas (e.g., moderator) can be simulated for complex ecosystems
- 7:14 – 8:35
Using real signed-in data to make prototypes relevant to leadership
Blair explains why signed-in production-like data matters: Reddit’s experiences are personalized, and mocked Figma data can feel irrelevant in leadership review. By letting leaders try features with data that’s meaningful to them, teams can validate ideas faster without waiting for a full production build.
- •Signed-in data is used so prototypes reflect personalized Reddit experiences
- •Mocked data can lead leaders to dismiss designs as not relevant to them
- •Real-data prototypes can be “put through the paces” like a real feature
- •This approach is framed as a big time-saver versus lengthy paths to production
- 8:35 – 9:15
Demo moment: LLM-ranked search and fast iteration without waiting for prod
Blair uses search as an example: real data is pulled, sent to an LLM for ranking, and then the design can be tested quickly. He emphasizes that even a rough design becomes useful when populated with real behaviors and content, enabling learning without a long production timeline.
- •Search is used as an example of a real-data, prototype-driven workflow
- •The flow described: pull real data, send to an LLM, rank results, test the UI
- •Blair notes he spent little time on the design but it still worked for testing
- •He contrasts this with taking many months to get similar learning in production
- 9:15 – 10:34
Annotations-to-Cursor workflow: targeted edits tied to code locations
Blair explains a surprising but effective workflow: write annotations on the UI, export them, then ask Cursor to apply them. Because the annotations are tied to a specific place in the code and include intent, teams can make precise changes to components and surfaces with minimal training.
- •Annotations are written, then sent to Cursor via a file export
- •In Cursor, the instruction is to “Apply annotations” to implement targeted changes
- •Specificity enables targeting any surface, composite, or component
- •Edits use design system tokens/components, making changes consistent and “on rails”
- 10:34 – 11:30
Internal deployment: Kubernetes-powered sharing, PWA installs, and distribution
Blair describes how prototypes are deployed on internal infrastructure, likening it to an internal Vercel, and mentions Kubernetes. Prototypes can be shared by URL in tools like Slack, and can also be accessed on phones—installed as PWAs after passing security for external sharing.
- •The launchpad deploys prototypes on Reddit infrastructure, using Kubernetes
- •Sharing internally is easy via copied URLs (e.g., in Slack)
- •External sharing is possible via a security process, enabling phone access
- •Prototypes can be installed and used like apps via PWA behavior
- 11:30 – 14:01
Adoption and discoverability: public-by-default prototypes and a searchable console
They discuss how prototypes are tracked and discovered across the company, including a dashboard holding hundreds of prototypes and the need for better scalability. Blair describes plans for a searchable console with tags, areas, and prototype types (including iOS and Android), and notes that prototypes are public internally by default.
- •A dashboard tracks prototypes; Blair mentions there are about 700
- •The current list is said not to scale, motivating a searchable console
- •Planned metadata includes people, areas, tags, and prototype types like iOS/Android
- •Internally prototypes are public by default, with interest in adding private modes
- 14:01 – 15:12
Leadership review and feedback loops: live testing, Slack input, and future commenting
Blair explains that leadership already clicks through prototypes and feedback arrives live, often in Slack. They want to add commenting directly on prototypes so feedback can become annotations that trigger changes and potentially kick off new builds quickly.
- •Prototypes are used in leadership reviews for hands-on evaluation
- •Feedback is currently received live, including through Slack
- •The team wants prototype comments that can become actionable annotations
- •A future state includes leaders requesting changes that can be made live quickly
- 15:12 – 15:53
Impact on product development: “instant alignment” through craft and real components
Blair argues the main impact is instant alignment: leaders review high-craft, real design system components with real data, avoiding gotchas and detail rabbit holes. This shared clarity creates velocity because teams converge on a North Star quickly.
- •Blair calls the key benefit “instant alignment”
- •High-craft systems plus real data reduce unproductive debate over details
- •Leaders can approve quickly because the prototype feels real and consistent
- •Alignment is broadcast broadly so teams share a clear North Star
- 15:53 – 18:12
Engineering handoff: the “feature capsule,” Figma MCP, and generated PRDs
Blair outlines how they approach the handoff to engineering through a “feature capsule” workflow that starts from a Figma location. Using a Figma MCP, the system maps design-system elements to what exists in production, then generates a PRD with goals and acceptance criteria, which is then sent to Cursor to help execute.
- •A “feature capsule” project is created by copying a location in Figma
- •The workflow uses Figma MCP to map design-system elements to production reality
- •The system generates a PRD including user goal and acceptance criteria, plus links
- •The PRD is saved locally and then sent to Cursor for implementation steps
- 18:12 – 21:14
How the custom MCP was built: mapping tokens/components and iterating via reviews
Blair describes building a mapping layer between the Reddit Proto design system and production code, using connected knowledge of tokens and components. The approach iterates through failures and feedback—CI outcomes and engineer review comments are incorporated to refine the MCP so it can produce more production-shaped code.
- •They start with a design system foundation (colors, typography, sizes) and map to prod
- •A visualization shows tokens/components/surfaces/journeys across Reddit product language
- •Differences across platforms can be detected at the token level
- •CI results and engineer feedback are fed back to refine the MCP through iteration
- 21:14 – 25:28
PRD value and a closing recap of the full system
Claire and Blair emphasize the PRD’s role as a strong handoff artifact, with Blair saying it carries weight by clarifying scope, goals, and workflows. Claire then recaps the system end-to-end: Reddit Proto’s sharing model, cloud deployment, controls/config, Cursor integration, and an audited design system accessible via the custom MCP.
- •Blair says the PRD carries weight because it defines scope, goals, and workflows
- •He calls it the “perfect handoff” with all the context needed for engineering
- •Claire summarizes Reddit Proto as purpose-built, public-by-default internally, and cloud-deployed
- •The recap highlights config controls, Cursor connection, and a custom MCP grounded in the design system
- 25:28 – 29:40
Lightning round: AI for team playing cards and a prompting reset strategy
In the lightning round, Blair shares a creative project: making playing cards featuring team members with consistent aesthetics using multiple tools, ending with Cursor and a markdown prompt file. He also shares a strategy for when AI gets stuck: step away, get more vague, describe intent like a director, then bring it back into the project context.
- •Blair describes generating playing cards for the team with personas and “stats”
- •He tried multiple tools; Gemini was used but ChatGPT produced the illustration he wanted
- •He used Cursor with a higher model and a markdown file to keep prompts consistent
- •When AI is obstinate, he waits, gets more vague, states facts and intent, then re-applies in-project
