Move beyond 'vibe prototyping' by first generating a structured JSON data model with an LLM like Claude. This workflow demonstrates how to create a rich, realistic dataset with real media, which you can then feed into a prototyping tool for a more accurate and flexible UI.
with Claire Vo
Instead of starting with a vague UI prompt, begin by asking an LLM like Claude to generate a detailed JSON dataset. Define the entire data schema in your prompt, including all necessary objects, properties, and relationships for your feature. This separates the data structure from the UX design.
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.To avoid broken links and generic stock photos, integrate real media into your JSON. Activate a service like the Unsplash MCP server within Claude. This allows the LLM to make API calls to Unsplash, finding and embedding actual, high-quality image URLs directly into your JSON data based on your descriptions (e.g., 'Eiffel Tower').
With your rich JSON data generated, open your prototyping tool (e.g., Reforge Build). Use a very simple prompt that instructs the tool to build the UI based on the data you provide, then paste the entire JSON object directly below the prompt.
Generate a trip itinerary feature based on the sample data below
[Paste your entire JSON data here]The AI tool will now focus solely on creating the best user experience for the data provided. The result is a much cleaner, more accurate, and visually appealing prototype with real images and detailed, structured content.
Because the data is separate from the UI code, iteration is simple. You can either modify the data directly in the generated files (e.g., lib/sampleData.ts) or return to your LLM and ask for a new dataset using the same schema. This allows you to easily stress-test the UX with different content, languages, or scenarios.
Now generate an itinerary for the same travelers going to Thailand.
Follow Sahil Lavingia's method for delegating small but impactful maintenance tasks, like fixing an internal Slack report, to the AI agent Devin. This workflow shows how to use simple, clear prompts to fix code and update system prompts without distracting your engineering team.
Learn Gumroad CEO Sahil Lavingia's process for rapidly prototyping a UI with v0, then using the AI agent Devin to autonomously code, implement, and submit the feature for review, turning a multi-day task into a one-hour workflow.
Improve your writing in real-time by using ChatGPT as a first reader. Get instant feedback on structure, clarity, and flow as you write, allowing you to polish your work section by section.
We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.