Guides/Tools & Setup
toolsbeginner

The AI-First Prototyping Loop

A 4-step mental model for rapid prototyping with AI coding agents, from clarification to testing.

The AI-First Prototyping Loop

Before you touch any tools, you need a mental map. This loop is the foundation of AI-assisted rapid prototyping. Notice that prompting AI is step 3, not step 1.

Step 1: Clarify the Problem and Value (Human Work)

This is where most people skip ahead. They have a fuzzy idea and start asking AI to build it. That's a recipe for frustration. AI is incredibly powerful, but it's not a mind reader. Garbage in, garbage out.

Ask yourself:

  • Who specifically am I building this for?
  • What pain am I solving? Can I quantify it?
  • What's the one job this prototype needs to do?
  • How will I know if it's working?

Step 2: Constrain the Scope (Human + AI)

When you can build anything, the temptation is to build everything. Wrong move. The tighter your constraints, the better your output.

Most people fail at this step. They try to build everything instead of the one thing that matters.

Constraints to define:

  • 3-5 features maximum (P0 only)
  • What's explicitly out of scope
  • What 'done' looks like for this prototype
  • How long you're willing to spend

Step 3: Generate Interface and Flows (AI + Human Direction)

Now we start using AI to create the actual screens and user flows. Notice this is step three, not step one. We're not asking AI to 'design an app.' We're directing it to design specific screens for a specific user doing a specific thing.

The generation workflow:

  • Create a Build Brief from your 4Ps work
  • Ask AI to describe minimum screens needed
  • Generate HTML/CSS for each screen
  • Add interactivity with JavaScript state
  • Iterate with specific change requests

Step 4: Test for Signal (Human Work)

Notice I didn't say 'validate.' Validation implies confirmation. What we're looking for is signal — information that helps us decide whether to keep going, pivot, or kill the idea.

Good signal sources:

  • User walkthroughs — Watch real target users think aloud
  • Behavior feedback — 'I would check this every Monday'
  • Emotional feedback — 'That's exactly what I need'
  • Alternative descriptions — 'I currently do this in a spreadsheet'

Don't fall in love with the prototype — fall in love with learning. If 5 target users don't care, kill it or pivot. Don't polish failures.