How I AIThe secret to better AI prototypes: Why Tinder's CPO starts with JSON, not design | Ravi Mehta
CHAPTERS
- 0:00 – 3:49
Why most AI prototypes miss the mark: moving beyond “vibe prototyping”
Claire sets up a common frustration: AI prototype generators can produce something impressive fast, but it often fails to match the intended product experience. Ravi introduces his “data-driven prototyping” system as a way to add structure and raise output quality.
- •PMs/designers often prompt tools without understanding how to steer them well
- •Generated prototypes can be “good, not great” for real product needs
- •Ravi proposes separating UI generation from data generation
- •Goal: higher quality prototypes with more control and less iteration churn
- 3:49 – 5:35
Spec-driven vs design-driven vs data-first: how engineers de-ambiguate products
Ravi explains two common prototype approaches—spec-driven prompting and design-driven (starting from Figma/wireframes)—and why they break down for established products. He argues data schemas are the missing bridge that engineering uses to make specs concrete, and prototypes should start there too.
- •Spec-driven: long prompts attempt to cover UX, logic, and data at once
- •Design-driven: upload visuals and ask tools to ‘bring them to life’
- •Established products require adherence to existing UI and existing data/functionality
- •Engineering starts with data schemas to eliminate ambiguity
- •Data-first prototyping yields functional and flexible prototypes
- 5:35 – 10:16
Demo: building a Paris trip planner with a typical spec-driven prompt
Ravi uses Reforge Build to generate a multiplayer Paris itinerary site from a short prompt. The tool asks follow-up questions and generates componentized code, but the system is forced to juggle UX, data modeling, and implementation simultaneously.
- •Example prompt: Paris trip, multiple people, comments, ‘make it look nice’
- •Reforge Build generates clean, reusable code and asks clarifying questions
- •One-shot prompting forces the model to average across competing tasks
- •It still creates a working prototype with mock state and data files
- 10:16 – 11:48
What goes wrong in “basic” AI prototypes: hallucinated media and low fidelity details
They review the spec-driven output and identify issues that reduce trust and perceived quality. Broken image links and incorrect photos (e.g., not Paris) reveal hallucinations and weak media grounding, requiring lots of manual back-and-forth to fix.
- •Hallucinated URLs cause broken images
- •Irrelevant photos undermine realism and stakeholder confidence
- •Aesthetic issues creep in (odd emojis, inconsistent polish)
- •Even when functional, prototypes may not be review-ready without iteration
- 11:48 – 14:12
Data-driven prototyping: generate realistic JSON first (and why it’s not as hard as it sounds)
Ravi shifts the workflow: first generate a structured dataset in JSON that matches the product’s needs, then build the UI around it. Claire notes this doesn’t require full database modeling knowledge—relationships/keys aren’t necessary to start—yet it forces clearer thinking about the feature.
- •Prompt Claude to output JSON for itinerary, travelers, items, and threaded notes
- •Natural language can express a ‘schema spec’ without formal DB modeling
- •Thinking data-first clarifies feature requirements and surface area
- •Authentic sample content improves stakeholder and user feedback
- 14:12 – 15:51
Key unlock: using MCP + Unsplash to fetch real photos (no more broken links)
Ravi demonstrates connecting Claude to the Unsplash MCP server so the model can programmatically retrieve real image URLs while generating JSON. This replaces manual stock-photo hunting and prevents many media hallucination problems.
- •MCP servers let models access external tools/services safely and repeatedly
- •Unsplash MCP returns real, relevant photo URLs for destinations/objects
- •Installation is straightforward (e.g., via Smithery)
- •Result: faster, higher quality, more believable prototype media
- 15:51 – 19:07
Why Claude for data: generating authentic “human” content and message threads
Ravi explains he uses Claude when he needs content that feels authentic—especially conversational notes between travelers. Claire highlights how the model repeatedly calls the photo tool while assembling a comprehensive dataset, compressing a normally lengthy workflow.
- •Claude chosen for consistency and more human-feeling data generation
- •Conversation threads are a key realism lever for collaboration features
- •Tool-use automates repetitive asset gathering during dataset creation
- •The agent-like pattern: specialized steps in sequence beat one giant prompt
- 19:07 – 23:31
Building the prototype from JSON: simple prompt, stronger fidelity
They paste the generated JSON into Reforge Build with a minimal instruction to generate the feature based on the data. Ravi notes the model adheres closely to provided data, and the UI forms around it—reducing fuzziness and improving accuracy.
- •Prototype prompt becomes: ‘Generate a trip itinerary feature based on the sample data below’
- •Model uses provided data as-is rather than inventing loosely aligned content
- •More precise UI emerges because constraints are embedded in the dataset
- •Clear separation of concerns improves both UX and implementation outcomes
- 23:31 – 26:44
Before/after comparison: why accurate data dramatically raises perceived design quality
Claire and Ravi compare the two prototypes and observe a large jump in richness and polish. Correct imagery, realistic avatars, tags, ratings, durations, and threaded notes make the experience feel ‘real,’ which improves the quality of feedback you can collect.
- •Better photos and realistic metadata make prototypes feel production-like
- •Avatars and traveler identities strengthen the multiplayer narrative
- •Cleaner aesthetic emerges when data is grounded and consistent
- •Data models often matter more than design systems for prototype quality
- 26:44 – 29:04
Iterating by editing the data file: quick tweaks and dynamic behavior
Ravi shows how changes can be made directly in the generated sample data file (e.g., rename a traveler, swap a cover photo URL) and instantly reflected in the UI. The prototype becomes a flexible harness for testing scenarios rather than a one-off demo.
- •Edit JSON-like sample data in the codebase to update UI instantly
- •Swap cover photos and traveler names without rewriting UI prompts
- •Data-first enables rapid scenario testing and stakeholder-ready variants
- •You can evolve functionality (e.g., free-time cards) while keeping data dynamic
- 29:04 – 35:04
Swapping datasets at will: Thailand itinerary, localization, and UGC stress-testing
They generate a new itinerary (Thailand) using the same schema and swap it into the prototype, preserving new UI features like free-time blocks. Claire discusses using real production-like datasets to reveal edge cases (cropping, long text, messy UGC) that Figma comps typically hide.
- •Reuse the same schema to generate new destinations and segments quickly
- •Dataset swaps let you test robustness and personalization scenarios
- •Localization and long-tail content become easy to simulate
- •Realistic (or production-sourced) data exposes UX failures earlier
- 35:04 – 43:20
Structured Midjourney prompting: the Subject–Setting–Style framework
Ravi transitions to image generation and shows how a simple prompt (“office chair”) yields pretty but less usable results. He introduces a practical framework—Subject, Setting (including lighting), and Style—to reliably produce curated, product-ready images.
- •Basic prompts can look good but lack catalog/brand usability
- •Use Subject: what the image is (clear, specific)
- •Use Setting: environment + mood + lighting cues (describe the scene)
- •Use Style: speak like a photographer, not a marketer
- 43:20 – 48:43
Photography ‘cheat codes’: film stock and camera metadata for more refined outputs
Ravi demonstrates how film stocks (e.g., Fujicolor C200, Kodak Tri-X) and camera details steer Midjourney toward higher-quality, better-composed training regions. Claire and Ravi discuss why metadata works: it aligns with how photos are labeled and clustered in training data.
- •Film stock names encode aesthetic intent (warmth, grain, contrast)
- •Camera cues (lens, aperture) shape depth of field and realism
- •Metadata often outperforms vague adjectives like ‘soft lighting’
- •Using photographic language can reduce uncanny, overly generic results
- 48:43 – 54:38
Taste vs craft, consumer AI opportunities, and prompting tips that ‘re-anchor’ results
In a lightning round, they discuss how AI amplifies craft while taste remains the differentiator—and why consumer AI must be grounded in psychology and real needs. Ravi shares a pragmatic trick: use expectation-setting words (e.g., ‘elite’) to bias the model toward higher-quality outputs, then closes with where to find his work.
- •Consumer AI needs strong user-need/psychology grounding; ROI is less explicit than B2B
- •Delight and personalization are underused opportunities in consumer products
- •AI boosts craft; taste and vocabulary become the competitive edge
- •Prompting trick: ‘elite’ framing nudges models toward better output regions
- •Ravi plugs his Substack and Reforge AI strategy course
