How Does Tinder CPO Ravi Mehta Build Better AI Prototypes with JSON?

TL;DR

Better AI prototypes start with a structured JSON data model before the interface is generated. Ravi Mehta demonstrates the method with mock data for a shared Paris trip itinerary, producing a componentized prototype with 22 files, daily views, and photos. Separating the data layer helps the AI create more functional, flexible experiences that can test different datasets and collect more accurate user feedback. Read on for the workflow and its alternatives.

Transcript

PMs and designers are prompting prototyping systems that they don't quite understand how to get the best outcomes from. I'm always impressed that a prototype gets generated, but sometimes it's just like not quite what I need for the product I'm building or the experience I'm trying to craft. And so I know you have come up with this system called da... Read More

Key Insights

• Data-driven prototyping starts by helping the LLM with structured data rather than just generating the UI, which closes the gap between vibe-based prompting and prototypes that actually match the product experience you are trying to craft.
• Asking a prototyping tool to design the UX, build the data structure, and write the code architecture simultaneously produces output that is an average across those areas rather than spiking in each, lowering overall quality.
• JSON is used specifically because it is structured data, letting a prompt like 'Generate a sample itinerary for a shared trip to Paris' create concrete mock data the prototype can be built around.
• Engineers in the normal product life cycle first define the data schema that drives the front end, codifying ambiguous design and spec decisions in a concrete way; data-driven prototyping applies that same discipline to AI tools.
• Two common approaches fall short: spec-driven prototyping relies on writing an extremely detailed prompt, while design-driven prototyping starts from wireframes or Figma designs uploaded into the tool.
• Prototyping established products differs from zero-to-one work because you must adhere to existing UI, existing data, and existing functionality, making the right context critical for the vibe-coding tool.
• Reforge Build asks follow-up questions to improve your prompt and generates clean code that is more usable toward production, giving the system enough context to build the right thing.
• An MCP can programmatically work through tasks using external tools, replacing the slow human process of searching stock photos and getting higher-quality media into prototypes faster.

Questions & Answers

Q: What is data-driven prototyping?

Data-driven prototyping starts by giving the AI structured data instead of asking it to generate only the interface. The data model provides a concrete foundation for building a more functional and flexible prototype that can be tested with different datasets.

Q: Why does Ravi Mehta start AI prototypes with JSON?

Ravi Mehta uses JSON because it provides structured data that the AI can build around. This resembles the product-development step in which engineers define the data schema that will drive the front end and turn ambiguous design or specification decisions into something concrete.

Q: How do you use JSON to create a data-driven prototype?

Start with a prompt that requests structured sample data in JSON for the experience you want to test. Ravi's example asks for a sample itinerary for a shared trip feature with Paris as the destination, then uses that mock data as the basis of the prototype.

Q: What did the shared Paris itinerary prototype generate?

The finished prototype generated 22 different files with componentized code. It included sample mock data, views for day one and day two, and photos within the itinerary.

Q: Why can a single vibe-prototyping prompt produce disappointing results?

A broad prompt can require the system to handle the interface, underlying data, and code architecture together. The resulting prototype may still look impressive while failing to match the product or experience the creator actually needs.

Q: How do spec-driven and design-driven prototyping differ?

Spec-driven prototyping begins with a highly detailed prompt intended to give the tool enough context. Design-driven prototyping starts with visual material such as wireframes or Figma designs, which the tool then brings to life; data-driven prototyping instead begins with the schema that drives the interface.

Q: How does prototyping an established product differ from zero-to-one work?

An established product already has an interface, data, and functionality that the prototype must follow. The central challenge is therefore giving the AI tool enough context to respect those existing constraints.

Q: How can external tools improve prototype media?

An MCP can programmatically complete tasks through external tools, making it faster to add higher-quality media to prototypes. Ravi contrasts this with the time-consuming human process of searching stock photos for a representative image.

Summary & Key Takeaways

• Product managers and designers increasingly do 'vibe prototyping,' prompting AI tools they do not fully understand and getting results that impress but miss the actual product need. Ravi Mehta introduces data-driven prototyping to close that gap between loose prompting and structured, higher-quality prototypes.

• Instead of leading with UX descriptions or designs, the technique helps the LLM by separating out the data. A JSON prompt generates structured sample data, such as a shared Paris trip itinerary, giving the model concrete structure that mirrors how engineers define a data schema before building a front end.

• The finished prototype generated 22 componentized files with mock data showing each day of the itinerary and photos. Because spec-driven and design-driven approaches force the tool to handle UX, data, and code at once, they average out; leading with data yields more functional, flexible prototypes for accurate user feedback.