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

Step-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.

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

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