How I AIThe secret to better AI prototypes: Why Tinder's CPO starts with JSON, not design | Ravi Mehta
At a glance
WHAT IT’S REALLY ABOUT
Better AI prototypes by starting with JSON data, not design
- The conversation contrasts common AI prototyping habits—writing one big prompt or uploading designs—with a “data-driven prototyping” approach that begins by generating a realistic, schema-shaped JSON dataset for the feature.
- Ravi shows how separating concerns (data generation vs. UI/code generation) yields prototypes that look more authentic, break less (fewer hallucinated URLs), and are easier to iterate by swapping datasets rather than rewriting prompts.
- They demo using Claude to generate itinerary JSON enriched with real Unsplash images via an MCP server, then pasting that JSON into Reforge Build to generate a cleaner, more accurate trip-planning prototype.
- In the second half, Ravi introduces a subject–setting–style prompting framework for Midjourney, emphasizing photographic vocabulary (film stocks, camera/lens metadata, lighting via setting) to consistently achieve more “usable,” less uncanny images.
IDEAS WORTH REMEMBERING
5 ideasSeparate UI generation from data generation to raise prototype quality.
When the prototyping tool must design UX, invent data, fetch media, and write code at once, outputs tend to be “average across tasks.” Generating the dataset first (as JSON) lets the UI generator focus on experience and layout around concrete inputs.
Start prototypes with a realistic data model, not just UX descriptions.
Ravi argues engineering naturally begins by defining schemas that remove ambiguity; applying the same discipline to prototyping produces more functional and flexible prototypes—especially for established products with real constraints.
Use JSON as the contract that makes iteration fast and safe.
Once the prototype is wired to a sample data file, you can rename a traveler, replace a cover image URL, or regenerate an entire destination (Paris → Thailand) by swapping JSON—without reworking the UX prompt or code structure.
Real media sources reduce “broken prototype” credibility gaps.
The spec-driven demo shows typical failures: hallucinated image URLs and mismatched photos. Calling Unsplash via an MCP tool yields valid URLs and more accurate visuals, improving stakeholder/user perception immediately.
Stress-test UX with production-like data (especially UGC).
Claire highlights how real-world content (odd crops, long text, messy user input) exposes edge cases that polished Figma mocks hide. Data-driven prototypes make it easier to simulate those realities and get more trustworthy feedback.
WORDS WORTH SAVING
5 quotesDesign systems and UX descriptions are not the foundation of great prototyping. In fact, JSON and data models should be.
— Claire Vo (intro framing of Ravi’s thesis)
One of the first things that [engineering] do is they say, 'Here's the data schema that's actually gonna drive the front end.'
— Ravi Mehta
When you provide data in this way, the AI doesn't get fuzzy with it. Actually, we'll just take the data and use it as is.
— Ravi Mehta
If we cut all our nice to haves, our product is not gonna be nice to have.
— Ravi Mehta
The two fundamental inputs into creating something are taste and craft.
— Ravi Mehta
High quality AI-generated summary created from speaker-labeled transcript.
Get more out of YouTube videos.
High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.
Add to Chrome