←Back/Design/Claude
IntermediateDesign

How to Use Data-Driven Prototyping for High-Fidelity UX Mockups

Build a more credible product prototype by defining representative structured data before generating the interface, then swap and stretch that data to expose layout and product assumptions that polished placeholder content would hide.

How to Use Data-Driven Prototyping for High-Fidelity UX Mockups

Source episode · 03:00

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

with Claire Vo

Ravi starts with a weak itinerary prototype, defines a detailed JSON data shape, uses an Unsplash MCP for real image URLs, builds the UI from that data, and swaps in a second itinerary to test whether the design remains flexible.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • A specific user flow and the questions the prototype should answer
  • A natural-language data shape based on the product domain
  • Synthetic or properly de-identified records that cover realistic variation
  • Licensed media sources with stable URLs and attribution requirements
  • A prototyping tool that can consume structured JSON

What you’ll make

A clickable prototype driven by reusable JSON fixtures and permitted media, plus alternate datasets that stress the same interface across different users, content lengths, and states.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

5 steps

Step01

Generate a Structured JSON Dataset with an LLM

Describe the entities and fields the user will encounter in the target flow, including identifiers, relationships, optional values, status, permissions, and boundary cases. Ask for JSON fixtures, not a UI.

Example prompt
Generate synthetic JSON fixtures for [feature]. Include [entities and fields], stable IDs, relationships, optional and empty values, long text, varied image aspect ratios, permissions, and relevant status states. Do not use real customer data. Return valid JSON only.

Parse the response before using it. A visually plausible code block can still contain invalid JSON or inconsistent field types.

Step02

Incorporate Real Media via an MCP Server

Replace guessed image links with assets from a permitted source. Store the resolved URL, description, creator, license or attribution, dimensions, and a fallback for each media field.

Example prompt
Using the approved media source, find assets for these fixture records: [records]. Return the exact resolved URL, description, creator, license or attribution requirement, width, height, and source page. Do not invent URLs or silently substitute a different subject.
Step03

Generate the Prototype from Your JSON Data

Give the prototype generator the reviewed schema and fixture. Require the interface to render from data, use reusable components, preserve data as supplied, and include loading, empty, error, and missing-media states.

Example prompt
Build a clickable prototype for [flow] from the JSON below. Render every repeated element from the data rather than hard-coding content. Use reusable components and include loading, empty, error, permission-denied, and missing-media states. Preserve IDs and values exactly. [JSON]
Step04

Review and Analyze the High-Quality Prototype

Complete the critical flow and inspect content realism, hierarchy, cropping, long text, state transitions, and collaboration behavior. Record design findings separately from fixture errors.

Step05

Iterate and Augment Your Prototype

Create alternate fixtures for a different segment, locale, density, and failure case. Swap them into the same prototype, fix any structural assumptions, and keep the fixture versions with the prototype.

Example prompt
Using the same schema, create alternate synthetic fixtures for [segment or locale], extreme content lengths, missing media, partial permissions, and an error state. Do not change the schema. Report any field the new scenarios reveal is missing.

What good looks like

  • The fixture covers the entities, relationships, optional fields, and states needed by the user flow.
  • No production secrets or identifiable customer records enter the prototype.
  • Media URLs resolve, match the described content, and retain required attribution or license information.
  • The same components handle alternate datasets, long content, missing fields, and unusual aspect ratios without manual rewrites.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

Production data is copied into an external model or prototype without adequate de-identification
Use synthetic fixtures by default; if real patterns are required, obtain authorization, remove identifiers and rare combinations, and keep the data in an approved environment.
The model invents image URLs or selects media that does not match the record
Use a licensed media API or an explicit asset list, validate every URL, store attribution, and provide a fallback state.
The fixture looks detailed but omits nulls, long values, permissions, or relationships that shape the UI
Add boundary datasets and make optionality, ownership, ordering, and relationships explicit before judging the design.
The generated interface hard-codes the first fixture and breaks when data changes
Require components to render from the schema, then swap a second dataset and test without editing the UI code.

Keep building

Related workflows

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance
advancedPersonalClaude

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance

Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.

Open
Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon
intermediateProductClaudeGranola

Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon

Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.

Open
Automate Your Weekly Planning with an AI-Powered PM Assistant
intermediateProductClaudeNotion+1

Automate Your Weekly Planning with an AI-Powered PM Assistant

Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready