Reddit principal UX engineer Blair Metcalf shows Claire Vo how Reddit Proto helps designers and product managers build working prototypes. The 29-minute How I AI episode is sponsored by Firecrawl.

Give builders a guided starting point

  • A desktop launchpad handles Git setup and scaffolds Reddit’s design system, components and interaction patterns.
  • Builders control features, navigation, device, theme and user states, including moderator views.
  • Shared improvements become part of the next project’s starting point.

Test behavior with real data

  • Prototypes can switch from mocked content to signed-in Reddit data, making personalized search and feeds meaningful to reviewers.
  • On-screen annotations carry the target’s code location, the requested edit and overall direction into Cursor.
  • Metcalf demonstrates search suggestions and model-ranked results; the demo provides no measured search-quality result.
  • The underlying data permissions and model-processing controls are not detailed; this is an authorized internal workflow.

Make reviews easier to act on

  • Internal deployment produces shareable URLs; a security-gated route also supports phone testing as an installable web app.
  • Metcalf reports about 700 prototypes and 100% adoption across UX and product, a group of over 150 people.
  • “Public” means visible inside Reddit; private projects, richer discovery and live commenting are discussed as additions.
  • He credits realistic data and familiar components with faster alignment; the episode gives no measured cycle-time improvement.

Keep a checkpoint between design and production

  1. Select a high-fidelity Figma frame and create a feature capsule, a bundle describing the proposed feature.
  2. Use MCP, a standard for connecting agents to tools, to find matching production components and design tokens.
  3. Review a generated PRD, a product requirements document, containing goals, scope and acceptance criteria.
  4. Send the approved context to Cursor, generate code in a sibling repository and submit a draft pull request for engineering review.

Inspect the knowledge behind the agent

  • A visual “Rosetta Stone” maps tokens, components, surfaces and journeys across Figma and implementation platforms.
  • The map exposes platform differences and missing coverage; rejected changes and engineering feedback help refine it.
  • Production code stays off-screen, and draft PRs may be rejected. Broad prototype-to-production conversion remains exploratory.

“You need a single source of truth that’s upstream from everything.” — Blair Metcalf, 24:24