Back/How I AI
Blog
How I AI

How I AI: Data-Driven Prototyping and Structured Midjourney Prompts for Elite Results with Ravi Mehta

Learn how to generate better AI prototypes with data-driven JSON and Reforge Build.

Claire Vo's profile picture

Claire Vo

September 28, 202510 min read
How I AI: Data-Driven Prototyping and Structured Midjourney Prompts for Elite Results with Ravi Mehta

This episode of How I AI features some seriously good prompting strategies from Ravi Mehta, the former CPO at Tinder who has also led product at Facebook and TripAdvisor. Ravi knows a ton about using AI to build better product experiences, and he laid out his entire process for us.

I've seen a lot of product managers and designers, myself included, fall into a pattern I call "vibe prototyping." We feed a general idea into a prototyping tool, and while we're often impressed that anything comes back at all, the outcomes aren't always what we need for the product or experience we're trying to build.

We might be asking the AI to do too many jobs at once, which leads to a generic output instead of something exceptional. Ravi’s approach changes this by focusing on structured data and precise media generation first. This helps lift our AI-powered workflows from "good, not great" to truly professional.

He explains that while design systems and UX descriptions have their place, the real starting point for a solid prototype is often a well-built JSON file and a robust data model.

He also shares his method for using structured prompting in Midjourney to get high-quality photos and images for your prototypes.

Workflow 1: Data-Driven Prototyping for Better UX

When we build products, one of the first things engineering does is define the data schema that will power the front end. This process turns ambiguous designs and specs into something concrete. Ravi realized we can apply this same way of thinking to AI prototyping.

Instead of asking a tool to figure out the UX, code architecture, and data structure all at once, we can give it a well-defined data model to start with. This "separation of concerns" lets the AI focus on creating the best possible user experience for that specific data, which makes the final prototype much better and more flexible.

The Problem with "Vibe Prototyping"

A typical "vibe prototyping" scenario might start with a simple, functional prompt. Using a tool called Reforge Build (a prototyping tool for product teams), Ravi tried to create a trip planning website with this prompt:

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.

When I saw this prompt, my first thought was that if I sent this to a designer on Slack, I'd probably get a meeting invite to clarify a few things! Yet, AI tools can generate something from this almost instantly.

Reforge Build even asks follow-up questions to help refine the prompt, which is a great feature. But when we ask the AI to juggle everything—UX design, the underlying data structure, and the code architecture—the output is usually just average in all those areas.

It’s amazing that anything gets generated in 30 seconds, but the results often have problems. For instance, the first prototype showed a photo of a hotel in French Polynesia instead of Paris, and a link for a Seine River Cruise photo was broken.

Step 1: Generate Structured JSON Data with Real Media

Ravi’s data-driven approach doesn’t start with a broad prompt for the prototype. Instead, it begins with generating a detailed JSON data set using an LLM like Claude. This lets us define the content and structure first, giving the UI a clear foundation to build on. Ravi prefers Claude for this because it's good at generating data, especially conversations, that feels human and authentic.

Here’s the prompt Ravi used in Claude to generate and populate the data schema:

Using JSON, generate a sample itinerary that I can use to prototype a shared trip itinerary feature. The destination is Paris. The Itineration include an itinerary name, cover, photo, and date range covering three days. There should be three to four travelers associated with the itinerary. Each traveler should include a first name, last name, avatar, photo, and preferred travel style, like foodie or history buff. For each day include a collection of things to see on that day. There should be 12 to 15 items in total. The items should uh, be a hotel for day one. Popular things to see on each subsequent day. Each item should include a name, a start time, a duration, a star rating, number of reviews. Tags to describe them a photo in a short description. Some items should have notes for one or more travelers. The notes should be in chronological order and respond to each other like a message thread for each itinerary item.
An AI-powered development environment, 'Reforge Build', actively generating a 'Paris Trip Planner' web application. The screenshot displays the detailed AI prompt, a list of generated CSS and TypeScript/React files, and a live, interactive preview of the application's user interface.

A key part of this is getting real media into the JSON to avoid hallucinations and low-quality images. Ravi did this by activating the Unsplash MCP server within Claude. MCP servers are a great way for LLMs to tap into external services. The Unsplash MCP server takes a query (like "Eiffel Tower" or a hotel name) and finds actual URLs for relevant photos on Unsplash. This populates our mock data with real, high-quality images.

This process takes a little time because Claude is not only creating a complex JSON structure but also making multiple API calls to Unsplash for each photo. The result is a detailed, authentic-feeling dataset with accurate image URLs.

A Reforge Build interface demonstrates Claude Sonnet 4 generating a detailed Paris trip itinerary in structured JSON format, complete with attraction details and image links, based on user prompts.

Step 2: Generate the Prototype from Structured Data

Once we have our rich JSON data, the prompt for the prototyping tool becomes much simpler:

Generate a trip itinerary feature based on the sample data below

Then, you just paste the entire JSON data set after it.

A 'Reforge Build' interface demonstrates an AI-powered itinerary generation, showing a conversational flow of user prompts and 'search_photos' tool calls leading to a detailed Paris trip itinerary presented in structured JSON format, generated by Claude Sonnet 4.

The way the AI uses this data is interesting. It doesn't interpret it loosely; it takes the data exactly as provided and builds the user experience around it. This results in a much cleaner, more accurate, and more visually appealing prototype than the initial "vibe" version. Now we have beautiful, relevant photos (a full Eiffel Tower!), detailed itineraries, and realistic traveler profiles with avatar photos. The quality of the data makes the design feel much higher quality.

A Reforge Build AI interface demonstrates a user prompting the tool to generate a 'trip itinerary feature' based on sample data, with a clear view of the project's TypeScript and CSS file structure, awaiting code generation.
"The tool has been able to focus on what is the right UX around this dataset rather than simultaneously figuring out the UX simultaneously, figuring out the dataset." - Ravi Mehta

Step 3: Iterate and Augment Your Prototype

The best part of this data-driven approach is how easy it is to iterate. The generated code is clean and componentized. You can make changes to the data directly within the lib/sampleData.ts file in Reforge Build.

For example, changing a traveler's name from "Marcus" to "Mark" or swapping a cover photo with a new Unsplash URL is simple.

You can also go back to Claude and ask it to generate completely new itineraries using the same schema:

Now generate an itinerary for the same travelers going to Thailand.

Claude remembers the context, uses the Unsplash MCP server for new images, and creates a fresh JSON dataset. When you swap this new JSON into your prototype, it instantly updates to the new destination with all the right photos and details.

A 'WanderWeave' AI prototype demonstrates a Paris itinerary generator, displaying the generation process logs and a detailed itinerary for Day 1, including hotel and dining suggestions.

This flexibility lets you do things like:

  • Stress-test UX: See how your design handles different content lengths, image orientations, or user-generated content. As a product leader, I love this for design reviews where I can ask, "What happens if the user's profile is a thousand words long?" or "What if this photo is vertical, but our design crops it horizontally?" AI can help surface edge cases that designers might not catch.
  • Localize instantly: Generate content in different languages to see how the experience feels.
  • Augment data: If you already have some JSON, you can ask Claude to "augment this JSON with information about the travelers and their conversations," adding new parts without starting over.
  • Add new features: Implement new functionality, like the "blank cards if people have time in between activities" that Ravi showed, and it will work with any data set you feed it.
An AI-powered web application, 'WanderWeave: Paris Itinerary Generator', shown with an AI chat discussing code modifications for 'free time' cards and displaying generated itinerary details for a hotel and restaurant.

Using a data-driven approach gives you a solid foundation for standardizing prototyping, which leads to more professional, dynamic, and realistic results.

Workflow 2: Structured Midjourney Prompting for Professional Images

Ravi also shared a framework for generating high-quality, curated images with Midjourney. A lot of us use Midjourney with "vibe prompts," which can produce beautiful but often generic images.

To get better results, Ravi developed a more structured way of writing prompts, which he shared with us.

The Subject-Setting-Style Framework

His method is to think about three elements for every Midjourney prompt:

  • Subject: What exactly do you want to show?
  • Setting: Where is the subject, and what is the lighting like? This is really important.
  • Style: How should it look? This is where references to photography and culture are useful.

Here’s a comparison of a basic prompt versus a structured one:

  • Basic Prompt: office chair

Results: They're okay, but not something you'd use in a high-end catalog.

A split-screen view shows the 'WanderWeave: Paris Itinerary Generator' web application displaying a detailed restaurant itinerary card on the right, alongside its underlying TypeScript/JSON data structure defining traveler profiles and avatar image URLs in a code editor on the left.
  • Structured Prompt: an empty stylish office chair, overlooking Milan during an autumn raining morning, Fuji Color C200

Breakdown:

  • Subject: an empty stylish office chair
  • Setting: overlooking Milan during an autumn raining morning (This defines the location and lighting)
  • Style: Fuji Color C200 (A warm film stock known for producing golden-hour tones)

Results: Beautiful, curated images with great lighting and a clear sense of place. This is a genuinely usable photo.

The Film Stock and Camera Metadata "Cheat Code"

One of the most effective parts of the "style" element is using photographic language—specifically, film stocks and camera metadata. These models were trained on huge datasets that likely included this metadata. By mentioning specific film stocks, camera brands, or lens settings, you're pointing the AI toward a higher-quality, more aesthetic part of its training data.

Film Stock Example: Kodak Trix

Instead of just saying you want a "grainy" or "high-contrast" image, specify Kodak Trix. It's a classic black-and-white film known for its contrast and grain, and Midjourney will emulate that look in a subtle and effective way.

The Midjourney web interface displaying an AI-generated image of a stylish office, accompanied by the detailed prompt: 'An empty stylish office chair behind a trestle desk in the early morning light in a modern glass American architects office in New York, FujiColor C200 --v 7'.

Camera Metadata Example: Leica + Lens Details

For a portrait of a young man, Ravi used this prompt:

A young man with brown hair and eyes at golden hour, Leica 50mm F1.2, Fujifilm Provia

Breakdown:

  • Leica: Refers to a high-end, $8,000 camera, which guides the AI toward premium photography styles.
  • 50mm lens: A standard focal length for portraits.
  • F1.2: Specifies a very blurry background (bokeh), which creates an ethereal look.
  • Fujifilm Provia: A film stock that's great for portraits.

Results: Professional-looking portraits that don't have that "uncanny valley" feel you often get with AI-generated people.

A Midjourney prompt for a realistic portrait, demonstrating the inclusion of camera and lens metadata (Leica, 50mm, f1.2, Fujifilm Pro) to influence the generated image's style.

When we tried the same prompt without the camera metadata, just portrait of a young man with brown hair and eyes, the results were generic sketches or photos that looked a little too perfect and uncanny.

The Midjourney web interface showcasing various AI-generated images and their corresponding prompts, as discussed on the 'How I AI' podcast.
"As you develop that understanding [of art literacy], you'll also develop a vocabulary around it, which I think is incredibly powerful for prompting." - Ravi Mehta

This workflow really shows how important art literacy is becoming with AI. If you can describe design, taste, and quality using the specific vocabulary of photography or art, you'll be able to create much better assets.

If you're not sure where to start, try dropping a photo you like into Claude or ChatGPT and ask it to describe the visual elements, lighting, and style. It's a great way to build your descriptive vocabulary.

Final Thoughts and Opportunities

Ravi has totally changed how I think about AI prototyping and image generation. His data-driven method is easy to pick up and lets you create realistic prototypes very efficiently.

By separating the data from the UI and using specific, structured language, we can move past "vibe prototyping" and get more consistent results. These techniques don't just save time; they also allow for better testing and more useful feedback, which leads to better products.

For consumer product teams, AI is opening up huge opportunities for delight and personalization. These are often the "nice-to-have" features that get cut from the scope but are essential for making a product stand out. With AI, we can build rich, engaging, and personalized experiences without the usual time and resource limitations. It’s a way to let your product do something for the user today that it couldn't do yesterday.

And for those times when the AI just isn't getting it right, Ravi has a great pro-tip: be encouraging! Try adding words like "elite sales coach" or "elite photographer" to your prompt. You're not trying to flatter the AI; you're just guiding it toward the higher-quality parts of its training data associated with those terms.

I really hope you give these workflows a try! Start by generating your own structured JSON data and then play around with Midjourney's Subject-Setting-Style framework. You'll be surprised by the difference it makes.

Thanks again to Ravi for sharing his insights and workflows with us! If you'd like to learn more from him, you can find him on his Substack, Ravi on product, at ravi-mehta.com, or connect with him on LinkedIn and X.

He also has an AI Strategy course with Brian Balfour through Reforge, which is designed to help product builders create winning products in today's intense tech environment.

Thank you to our Sponsors:

  • Google Gemini —Your everyday AI assistant
  • Persona —Trusted identity verification for any use case

Try These Workflows

Step-by-step guides extracted from this episode.

Become a 10x PM.
For just $15 / month.

We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.