How I AI – Episode Summary
The Secret to Better AI Prototypes: Why Tinder’s CPO Starts with JSON, Not Design
Host: Claire Vo
Guest: Ravi Mehta (Product Advisor, former Tinder CPO, Reforge EIR)
Date: September 29, 2025
Overview
In this episode, Claire Vo sits down with Ravi Mehta to explore advanced, practical workflows for AI-driven product prototyping. Ravi introduces his “Data Driven Prototyping” method, which prioritizes defining the data model (in JSON) before focusing on UI or design systems. This approach produces higher-quality, more accurate prototypes and accelerates the development process. Ravi and Claire also discuss structured prompting strategies for image generation in Midjourney, efficient media sourcing, and foundational skills for AI product teams.
Key Discussion Points & Insights
1. The Limitations of "Vibe Prototyping"
- Definition: Claire describes "Vibe prototyping" as prompting AI prototyping systems with vague or loosely structured prompts, leading to underwhelming results.
- “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.” (00:00, Claire)
- Common Issue: PMs and designers often feel the prototypes “aren’t quite what I need”—the AI doesn’t have effective context for quality output.
2. Data Driven Prototyping: Start with JSON, Not UI
-
The Problem: Traditional approaches (spec-driven or design-driven) ask AI to simultaneously:
- Figure out UX,
- Invent a data model,
- Write code/architecture.
This “average” solution is only as good as its weakest link.- “Because you're asking it to do so many different things, the output is kind of an average across those things...” (07:16, Ravi)
-
The Shift: Ravi recommends starting with a clearly defined data structure—using JSON as the backbone for the prototype.
- “Rather than starting with a prompt like we have here, let's start with a data set.” (11:47, Ravi)
-
How to Implement:
- Use an LLM (like Claude) to generate a detailed, structured JSON schema that matches your use case.
- Generate realistic, context-rich sample data.
- Feed this data into your prototyping tool, instructing the AI to “generate UX based on this data.”
-
Media Sourcing: Integrate with external APIs (like Unsplash MCP) to pull real, relevant imagery instead of relying on hallucinated/low-quality URLs.
- “[The Unsplash MCP] was a key unlock for me, is like, how do you actually pull in actual photo data versus some of the hallucinated URLs that you'll often get?” (14:01, Ravi)
3. Practical Walk-Through: Paris Trip Itinerary Example
A. Spec-Driven Prompting
- Prompt Example:
“Make a website for planning a Paris trip with multiple people. Include some activities, hotels and restaurants over three days. Add user profiles and let people comment on things. Make it look nice.”
- Outcome: The tool produces a usable prototype, but with issues like incorrect photos, missing context, and average overall quality.
- “This is a good start, but it's not sort of the level of quality that we want and that we need.” (25:17, Ravi)
B. Data-Driven Workflow
- Step 1: Craft a human-readable prompt for the LLM to generate a detailed JSON schema and sample data.
- “You're really just describing the components of the data structure in natural language...without having to force yourself to write a data model.” (13:28, Claire)
- Step 2: Use tools like Claude integrated with the Unsplash MCP to supply real images and detailed, realistic data.
- Step 3: Paste the resulting JSON into the prototyping tool and instruct it to build UX based on the sample data.
- Outcome: The generated prototype is significantly higher quality, with accurate data, correct media, authentic avatars, and structure ready for production and iteration.
4. Benefits of Data-First Prototyping
- Rich Realism: Using structured sample data (even pulled from production databases) stress-tests UX with edge cases and more “real” content.
- “You can actually pull a representative set from your production data...to really give your prototypes a real feel for how your users are using them.” (19:50, Claire)
- Fast Iteration: Easily swap out data for different user segments, locales, or scenarios using the same prototype logic.
- Stakeholder Alignment: Data-driven prototypes provide a concrete shared language for PMs, designers, and engineers, resulting in better, less ambiguous feedback.
- “Works much better with stakeholders and with users if you have authentic data.” (23:07, Ravi)
5. Versioning and Flexibility
- Dynamic Data Swapping: Quickly iterate by generating new JSON datasets for other destinations, users, or features and dropping them in the prototype.
- “Now generate an itinerary for the same travelers going to Thailand...once we have that JSON file, we can actually take that and apply it directly to the prototype.” (29:04, Ravi)
- UI/UX Update Process: Simple string/image swaps in the JSON reflect immediately in the prototype, enabling rapid A/B or scenario testing.
6. Structured Image Prompting in Midjourney
- The Framework: To get higher-quality, “production-worthy” images, think like a photographer when prompting:
- Subject: What is the focus/object?
- Setting: Where and when? (Location, background, lighting)
- Style: How should it look? (Photo, illustration, film stock, reference artist/camera)
- “Think about three things. The subject, the setting, and the style.” (35:03, Ravi)
- Camera/Film Metadata as Cheat Codes:
Film stock/camera references (e.g., “Fujicolor C200”, “Leica, 50mm, f1.2”, “Kodak Tri-X”) map directly to high-quality images in model training data.- “When you use photographic language, it looks at the higher quality photos in the dataset.” (44:27, Ravi)
- Repeatability: By structuring prompts this way, you quickly generate sets of polished, coherent images.
7. Developing Taste and Prompting Skill
- Skill Synergy: Craft and taste become more important as AI democratizes production:
- “Taste is the ability to know what's good or what you want. Craft is the ability to actually achieve that vision. And with AI, it's completely 10x to everyone in terms of the craft. Anyone now can create photos or music...but the taste is really important.” (40:13, Ravi)
- Self-Improvement Hack: Drop images into LLMs to get descriptive vocabulary back—train yourself to “speak AI’s language” for better prompting.
- “If you don't feel like you have the natural skills...drop it in like a Claude or a ChatGPT...have it describe it back to you in language.” (40:43, Claire)
8. Practical Prompting Tips
- Be Encouraging to the Model: Use “elite” or similar language to get higher-quality outputs.
- “You are an elite sales coach or you are an elite photographer, and so just elevate its expectations of itself...” (52:30, Ravi)
- Focus on Data Models Over Design Systems: For PM-prototype workflows, define the data schema first and copy/paste it into prototyping tools for better constraints and fidelity.
- “Get your engineering to give your definition of your data schema and just copy and paste that in. That is like one of the first things I think you should do...” (26:04, Claire)
Notable Quotes & Memorable Moments
- On Why JSON, Not UI:
“Rather than starting with a prompt like we have here, let's start with a data set.”
— Ravi Mehta (11:47) - On Using AI to Generate Realistic Data:
“You're really just describing the components of the data structure in natural language...without having to force yourself to write a data model.”
— Claire Vo (13:28) - On Media Sourcing Automation:
“MCP servers are a great way for Claude to be able to access external services...so that when we generate the mock data, we're actually getting real URLs from Unsplash.”
— Ravi Mehta (14:01) - On The Value of Taste:
“Taste is the ability to know what's good or what you want. Craft is the ability to actually achieve that vision. And with AI, it's completely 10x to everyone in terms of the craft. Anyone now can create photos or music...but the taste is really important.”
— Ravi Mehta (40:13)
Key Timestamps
- Vibe Prototyping & Its Challenges: 00:00 – 03:49
- Introduction of Data Driven Prototyping: 03:49 – 06:32
- Spec-Driven Prototype Demo: 06:32 – 10:55
- Shortcomings of Image Generation: 10:55 – 11:08
- Walkthrough: Generating Detailed JSON Data: 13:28 – 18:27
- Benefits of Real Data for Prototyping: 19:50 – 23:52
- Swapping Data and Versioning Prototypes: 29:04 – 31:44
- Structured Image Prompting in Midjourney: 35:03 – 44:27
- Taste, Craft, and Prompting Language: 40:13 – 44:56
- Lightning Round – Prompting Strategies: 52:30 – 53:01
Actionable Takeaways
- Start your prototyping workflow by defining realistic, sample data in JSON (even using an LLM to generate it), not with UI specs or design systems.
- Use tools like Claude with Unsplash or similar media APIs/MCPs to avoid broken/hallucinated media and add authentic visuals.
- Structure your image prompts like photo shoot instructions (subject, setting, style/camera/film stock) for consistent high-quality assets.
- Leverage real production data (or close samples) to stress-test and “user proof” your design prototypes.
- Practice and develop art and linguistic literacy; your ability to describe what you want is now a pivotal design skill.
Closing
Ravi emphasizes that separating data from design in AI prototyping unlocks flexibility, realism, and stakeholder alignment—resulting in prototypes that are not just impressive, but ready for iteration and production. For PMs and designers learning the new AI landscape, focusing on the data model is the critical unlock.
Find Ravi:
- Substack: Ravi on Product
- Reforge “AI Strategy” course (next cohort October)
Claire’s summary:
“Instead of just prompting into your prototyping tool, actually generate a JSON schema...use that as the basis for iterations and updates, and then even swap out that data schema with entirely new content, and watch how your experience, you know, adapts to new content or show that to different user segments or just really impress your boss.” (33:02)
