How I AIThe secret to better AI prototypes: Why Tinder's CPO starts with JSON, not design | Ravi Mehta
CHAPTERS
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.
- •PMs/designers often prompt tools they don’t fully understand
- •Outputs are impressive but not aligned to intended UX/product constraints
- •Ravi’s thesis: prototypes improve when you separate UI generation from data generation
- •Goal: more functional, flexible prototypes for realistic stakeholder/user feedback
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.
- •Spec-driven: detailed prompts attempt to encode UX + functionality + data at once
- •Design-driven: images/wireframes become the primary source of truth
- •Engineering’s early move: codify constraints via a data schema
- •Idea: use schema/data as the foundation to reduce ambiguity and improve outputs
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.
- •Example prompt: three-day Paris itinerary, multiple people, comments, “make it look nice”
- •Tool must infer UX, data model, architecture, and content simultaneously
- •Follow-up questions can improve prompts but don’t solve the core ‘too many jobs at once’ issue
- •Context: TripAdvisor-style shared trip planning as a prototyping scenario
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.
- •Prototype generates many files and basic mock data successfully
- •Hallucinated or broken image URLs appear (missing media reliability)
- •Irrelevant/incorrect photos (e.g., hotel not in Paris) reduce perceived quality
- •Even when functional, the result needs lots of iteration to reach product-grade fidelity
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.
- •Start by defining the data model in natural language, then output JSON
- •Include realism drivers: travelers, travel styles, schedules, ratings/reviews, tags
- •Add message-thread notes per itinerary item for authentic social interaction
- •Benefit: the model uses the data “as is,” reducing fuzziness in UI generation
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.
- •MCP servers let an LLM call external tools/services during generation
- •Unsplash MCP returns real image URLs matching queries (Eiffel Tower, hotels, avatars)
- •Eliminates broken links and improves visual accuracy
- •Smithery is mentioned as an easy way to install/connect MCP servers
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.
- •Prompt becomes: “Generate a trip itinerary feature based on the sample data below”
- •Prototype improves: correct photos, real avatars, better tags/comments/metadata
- •Perceived design quality rises largely because data/media is higher quality
- •Separation of concerns lets the tool focus on UX around known data
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.
- •Use production/production-like data to reveal real UX failure modes
- •UGC is rarely ‘Figma-perfect’; prototypes should reflect that reality
- •You can augment existing JSON (e.g., add conversations) with LLM help
- •Supports localization and segment-specific variants by changing the dataset
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.
- •Edit the generated sample data file directly (e.g., Marcus → Mark)
- •Swap cover images by replacing URLs and reloading
- •Regenerate a new trip with the same schema and travelers (Thailand example)
- •UI features (e.g., free-time cards) persist across dataset swaps
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.
- •Authentic data leads to more accurate user/stakeholder reactions
- •Teams can test different itineraries/personas without redesigning UI
- •Clearer constraints than design-system-first approaches in many cases
- •Helps teams prioritize delight/polish by removing manual content 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.
- •Simple prompts often generate ‘pretty but unusable’ images
- •Goal: create images that feel curated and production-appropriate
- •Midjourney speed and variation exploration make iteration easy
- •Bridge from prototyping needs: media quality strongly impacts UX perception
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.
- •Subject: what’s in frame (e.g., empty stylish chair)
- •Setting: environment + placement + lighting/mood cues
- •Style: use photographer-like descriptors rather than abstract adjectives
- •Changing setting often produces better lighting than explicitly requesting it
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.
- •Film stock prompts encode rich aesthetic priors (contrast, grain, warmth)
- •Camera metadata (lens, aperture) influences depth of field and realism
- •Using photographic language likely targets higher-quality training clusters
- •Without these cues, outputs can drift into sketches or uncanny 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.
- •Consumer AI: harder value proposition than B2B; psychology matters
- •Delight and personalization are major opportunities unlocked by AI
- •Prompting tip: “You are an elite ___” can shift output quality
- •Ravi’s links: Substack (Ravi on Product), LinkedIn, Reforge AI strategy course
