Iterative Prompting: How to Refine AI Output From Good to Production-Ready

Why Iterative Prompting Beats One-Shot Prompts

One-shot prompting — trying to specify everything upfront — leads to longer, more complicated prompts that are harder to get right. Iterative prompting starts with a clear core, evaluates the output, then refines specifically. It's faster, more reliable, and produces better output.

The key insight: the first response tells you what to ask in the second response.

The Iterative Framework

1. Generate — Get a working first version
2. Evaluate — Identify specific gaps against your requirements
3. Refine — Give surgical correction prompts
4. Verify — Confirm changes didn't break what worked
5. Document — Note what the final prompt pattern looks like

Round 1: The Core Prompt

Start with the minimal viable prompt — what the component does and its key API:

Build a Combobox component in React + TypeScript:

Props:
- options: { value: string; label: string }[]
- value: string | null
- onChange: (value: string | null) => void
- placeholder?: string

Behavior:
- Text input that filters options as you type
- Dropdown shows matching options
- Click option to select and close
- Escape clears and closes

Round 2: Addressing What's Missing

After reviewing the output, identify gaps:

Good start. Make these specific changes:

1. The dropdown position is wrong when near the bottom of the viewport — add viewport-aware positioning (show above input if not enough space below)

2. Keyboard navigation is missing from the dropdown — add Up/Down arrow navigation through options with visual highlight

3. The empty state when no options match shows nothing — add "No results found" message

4. onBlur isn't handled — when clicking outside, close the dropdown

Keep everything else the same.

Round 3: Polish

Almost there. Final refinements:

1. The focus ring on the input disappears when the dropdown is open — it should stay visible while dropdown is open

2. Add a clear button (×) inside the input when a value is selected

3. Performance: the filtering is running on every keystroke synchronously — wrap it in useMemo

4. The dropdown animation needs smoothing — add a 150ms ease-out transition on open/close using CSS transitions on opacity and translateY, not display:none

Correction Prompt Patterns That Work

Effective corrections are specific and isolating:

// Good: specific, surgical
"The close animation is jumping. The issue is it changes to display:none immediately instead of waiting for the animation to finish. Fix this specific issue without changing anything else."

// Bad: vague, regenerates everything
"The animation doesn't look good. Make it better."

The "Show Me The Diff" Technique

Instead of returning the full file, show me only the specific changes as a unified diff. I will apply them manually.

Change needed: [DESCRIBE SPECIFIC CHANGE]

Current code:
[PASTE RELEVANT SECTION]

This is faster for small changes and prevents AI from accidentally breaking unrelated code while "fixing" your requested change.

When to Start Over

After 4-5 rounds of refinement on the same component, consider whether you're patching a fundamentally wrong approach. Sometimes it's faster to say "Start fresh. The previous approach had architectural issues. Here are the requirements again, and here's the specific issue with the previous approach: [EXPLAIN]. Start from scratch with a better foundation."

Starting over with accumulated context is faster than endlessly patching a broken base.