How I AIThe secret to better AI prototypes: Why Tinder's CPO starts with JSON, not design | Ravi Mehta
Claire Vo and Ravi Mehta on better AI prototypes by starting with JSON data, not design.
In this episode of How I AI, featuring Claire Vo and Ravi Mehta, The secret to better AI prototypes: Why Tinder's CPO starts with JSON, not design | Ravi Mehta explores 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.
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
QUESTIONS ANSWERED IN THIS EPISODE
5 questionsIn your workflow, what’s the minimum viable JSON schema you’d generate first (fields and nesting) before you ever ask a tool like Reforge Build to create UI?
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.
How do you decide when to use real production data vs. synthetic data—especially with privacy/PII constraints—and what’s your recommended ‘safe proxy’ approach?
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.
What failure modes have you seen when teams paste large JSON blobs into prototyping tools (context limits, incorrect parsing, UI overfitting), and how do you mitigate them?
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.
Can you show an example where editing the data model (adding a new entity/relationship) cleanly cascades into the UI—versus breaking the prototype—and what patterns enable that?
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.
For media: beyond Unsplash, which other MCP-style tools/services are most valuable for prototyping (e.g., maps, reviews, translation), and how do you compose them?
Chapter Breakdown
Why most AI prototypes disappoint: shifting from “vibes” to structure
Claire frames the core problem: AI prototyping tools generate impressive demos, but often miss the specific product experience teams need. Ravi introduces “data-driven prototyping” as a way to improve fidelity by giving models better inputs—starting with data, not pixels.
Two common approaches and what’s missing: spec-driven vs design-driven prototyping
Ravi contrasts today’s defaults: long, detailed prompts (spec-driven) or uploading Figma/wireframes (design-driven). He explains that in real product development, engineering quickly anchors ambiguity by defining a data schema—so prototypes should start there too.
Demo setup: a “vibe prototyping” prompt for a shared Paris trip planner
Using Reforge Build, Ravi enters a minimal prompt to create a multiplayer Paris itinerary site with profiles and comments. The tool’s follow-up questions highlight how much ambiguity is packed into a single prompt.
What the spec-driven prototype gets wrong: hallucinations and low-fidelity content
They review the generated prototype: decent structure and components, but broken images, wrong visuals, and “average” quality. The biggest issues come from weak or fabricated data/media that undermines trust and realism.
Data-driven prototyping: generate the dataset first (JSON as the spec)
Ravi shows the pivot: prompt an LLM to generate a structured JSON dataset that mirrors a realistic schema—travelers, items, timestamps, ratings, tags, and threaded notes. This acts as an explicit, testable ‘spec’ that the prototyping tool can reliably build around.
Solving media quality with MCP: pulling real images from Unsplash
To avoid hallucinated URLs and poor visuals, Ravi connects Claude to an Unsplash MCP server so image links are real and relevant. Claire highlights how this replaces time-consuming manual stock photo searching with programmatic retrieval.
Building the prototype from JSON: minimal prompt, maximal fidelity
They paste the generated JSON into Reforge Build with a simple instruction to generate the experience based on the data. The resulting prototype looks richer and more modern because it’s grounded in specific, consistent content and metadata.
Stress-testing UX with real-world data (and production-like datasets)
Claire connects the method to real product practice: prototypes break in the real world due to messy UGC, long text, odd photo aspect ratios, localization, etc. Data-driven prototyping makes it easy to test those edge cases early by swapping in representative datasets.
Iterating fast: editing the data file and swapping entire scenarios
Ravi demonstrates how modifications become straightforward: change a name, replace a cover photo, or regenerate a whole new itinerary (Paris → Thailand) while keeping the same UI behaviors. The key is that functionality remains dynamic while data is easily replaced.
Why it works: flexibility, realism, and better stakeholder feedback
They summarize the core benefits: more realistic content, faster iteration, and prototypes that behave like real products. This improves research quality and helps teams explore different personas, segments, and contexts with minimal rebuild work.
From prototypes to visuals: structured Midjourney prompting for usable images
The conversation shifts to generating high-quality images directly in Midjourney. Ravi explains that vague prompts (e.g., “office chair”) produce generic results, while structured prompts yield catalog-ready, art-directed outputs.
The Subject–Setting–Style framework (and why lighting is part of “setting”)
Ravi teaches a prompt structure: define the subject precisely, specify setting (including lighting/mood), and choose a style using photographic language. They show how changing the setting (e.g., morning light → rainy autumn) shifts the image more naturally than describing lighting directly.
Cheat codes for style: film stock and camera metadata to steer outputs
Ravi demonstrates how film stocks (e.g., Fujicolor C200, Kodak Tri‑X) and camera details (Leica, 50mm, f/1.2) reliably move Midjourney toward high-end photography distributions. They compare results with and without metadata, noting reduced ‘uncanny valley’ effects for portraits.
Lightning round: consumer AI opportunities, prompting tactics, and closing
Ravi argues consumer AI success depends on real user psychology, not tech-first novelty, and emphasizes delight/personalization as differentiators. He also shares a practical prompting trick: use ‘elite’ role framing to push models into higher-quality output modes, then closes with where to find his work.
EVERY SPOKEN WORD
Install uListen for AI-powered chat & search across the full episode — Get Full 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