Back/Engineering
IntermediateEngineering

How to Systematically Iterate and Debug AI-Generated Prototypes

Adopt a structured, software engineering-inspired approach to iterating on AI designs. Use forking to safely explore new ideas and apply a two-step debugging prompt to reliably fix errors without frustrating back-and-forth.

From How I AI

How I AI: Colin Matthews' Workflows for Prototyping with Your Brand's UI

with Claire Vo

How to Systematically Iterate and Debug AI-Generated Prototypes
02Step-by-Step Guide
1

Use Forks for Safe Exploration

When you have a working version of a prototype (a 'baseline'), create a duplicate or 'fork' before trying to add a new feature or make a change. This allows you to explore ideas in parallel without breaking your stable starting point.

2

Adopt a Clear Naming Convention

Keep your project organized by clearly naming your forks. For example: Baseline - Profile Page, Var 1 - Add Edit Button, Var 2 - New Layout. This makes it easy to track different design directions.

3

Diagnose AI Errors Before Solving

When the AI doesn't follow an instruction correctly (e.g., fails to delete an element), first ask it to diagnose the problem *without* writing any code. This forces the AI to analyze the root cause.

Prompt:
Tried to delete this but it didn't work. Can you explain why? Don't write any code.
4

Implement the Solution

After the AI has explained the 'why' behind the problem, you can then ask it to implement the fix. This 'explain, then solve' pattern leads to much more reliable and accurate results when debugging.

Start shipping
better products.

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

Free to start
No credit card
SOC 2 certified
Enterprise ready