Module 4: Building Your First AppLesson 3 of 6
0%
Lesson 3ยท4 min

Iterating with Claude

Refine and improve your code through conversation

Iterating with Claude

Building software is iterative. You build, test, refine, repeat. Here's how to iterate effectively with Claude.

The Iteration Loop

plaintext
    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
    โ”‚   Prompt    โ”‚
    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜
           โ–ผ
    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
    โ”‚   Review    โ”‚
    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜
           โ–ผ
    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
    โ”‚    Test     โ”‚
    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜
           โ–ผ
    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
    โ”‚   Refine    โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”
    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜      โ”‚
           โ–ฒ             โ”‚
           โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Example Session

Terminal
# First pass
> Build a contact form with name, email, and message fields
Claude: [Creates form]
# Test it
$ open index.html
# Form looks basic, no validation
# Iterate
> Add validation: require all fields, check email format
Claude: [Adds validation]
# Test again
# Works but error messages hard to see
# Iterate
> Make error messages red and appear below each field
Claude: [Improves styling]
# Test - looks good!
# Now let's enhance
> Add a character counter for the message field, max 500 characters
Claude: [Adds counter]
โ–Œ

Tip

Test after each change. Small iterations catch problems early!

Feedback Types

Visual Feedback

Terminal
> The button is too close to the input. Add more spacing.
> Make the error text smaller, it's overwhelming.
> Center the form on the page with max-width 500px.
โ–Œ

Functional Feedback

Terminal
> When I submit, nothing happens. Add a success message.
> The email validation accepts "test@test" which isn't valid.
> Add a loading state while the form submits.
โ–Œ

Code Quality Feedback

Terminal
> Extract the validation logic into a separate function.
> Add error handling for the API call.
> This component is getting large. Split it into smaller components.
โ–Œ

Using /undo

Made a mistake? Roll back:

Terminal
> Add animations to the buttons
Claude: [Adds complex animations]
# Too flashy!
> /undo
Reverted changes to Button.tsx.
> Add a subtle hover effect instead, just darken the color slightly
โ–Œ

Aussie Note

Don't be afraid to say "that's not what I wanted." Claude handles feedback well - no hurt feelings! ๐Ÿค

Asking for Alternatives

Terminal
> I don't love this design. Show me 3 alternative layouts for the hero section.
Claude: Here are three alternatives:
Option 1: Split layout (image left, text right)
Option 2: Full-screen image with overlay text
Option 3: Minimal with large typography
Which would you like me to implement?
โ–Œ

Getting Unstuck

If Claude is going in circles:

Terminal
> Let's step back. Here's what I actually need:
> 1. Form must be mobile-friendly
> 2. Submit to our API endpoint /api/contact
> 3. Show success/error states
>
> Please rebuild with these requirements fresh.
โ–Œ

Warning

If you're 10+ iterations deep on the same problem, try /clear and start fresh with a better initial prompt.

Key Takeaways

  • Build โ†’ Test โ†’ Refine โ†’ Repeat
  • Test after each change
  • Be specific with feedback
  • Use /undo to roll back mistakes
  • Ask for alternatives when stuck
  • Start fresh if iterations aren't working