Key Takeaways

  • Blair Metcalf built an internal tool called Reddit Proto that converts visual UI annotations directly into targeted Cursor prompts.
  • General AI coding assistants fail because they guess file locations; Reddit Proto enriches every annotation with exact component metadata, file paths, and live user context before sending it to the IDE.
  • Metcalf demonstrated building live search features, including trending community typeaheads fed by authenticated production data, simply by leaving visual notes on a prototype canvas.
  • The workflow isolates edits through an export payload file, giving Cursor both component-level instructions and global layout constraints to prevent unwanted code churn.

The Method

When non-engineers try to build software with AI coding tools, they usually run into the same wall. They tell an agent to change a button or add search suggestions, and the model modifies four unrelated files, breaks the layout, or invents dummy data structures. The model hallucinates because plain English prompts lack codebase coordinates.

Metcalf solved this at Reddit by turning the prototype itself into a context engine. Instead of asking a product manager or designer to explain where a component lives in the repository, Reddit Proto tracks the UI surfaces directly.

First, the user clicks on any visible element in the prototype interface and leaves a comment. Metcalf gives a simple example: clicking text and typing "make this italics," or clicking an input box and writing "Make relevant type aheads, trending recent communities, etc."

Second, the prototype environment enriches that comment under the hood. As Claire Vo observed, “the prototype has already been enriched with This is like roughly where the code is. This is roughly what this component is. This is what the request is from the user.” The tool attaches the exact file path, the component identifier, and the relevant styling tokens to the annotation.

Third, the user adds global requirements at the bottom of the canvas. Metcalf added an instruction saying, “overall direction using the signed-in Reddit data and real type aheads as user types in the search box.”

Fourth, the system exports a structured payload file into the local repository. Metcalf explained: “Once I wrote the annotations, I just said send to Cursor, and it writes a file, and then I just tell Cursor apply annotations, and it takes the location in the code, the annotation, and the overall to kick it off.” Cursor reads the file, jumps straight to the specified components, and applies the requested edits against live production endpoints.

Where This Breaks Down

This method requires rigid component boundaries. If your frontend architecture is messy, with giant thousand-line files mixing business logic, routing, and styling, enriching a click target with a file path will not help Cursor much. The model will still drown in excess context.

It also assumes your prototyping harness shares code tokens and data layers with actual production services. Reddit Proto works because Metcalf connected live authenticated user sessions and custom Model Context Protocol servers to Cursor. If your prototype uses fake JSON mocks while production uses authenticated GraphQL feeds, Cursor will write code that runs locally on mock data but fails completely inside your real application.

What to Do With This

Stop asking non-technical teammates to write open-ended Cursor or Claude prompts in chat sidebars. Build a lightweight metadata inspector into your internal development builds this week: when a user option-clicks any component on localhost, have it copy a markdown snippet containing the exact file path, line number range, and component name to their clipboard. Instruct your team to paste that snippet alongside their feature requests so your AI coding agents stop guessing where to work.