Fix a Bug in Your AI-Built Website or Web App With Claude Code

Use Claude Code to find the real cause of a bug, fix only what is broken, and verify the result without rebuilding your project.

Roadmap & Resources

Reproduce the Bug

Reproduce the Problem

You only need to describe what you can see. Claude will investigate why it is happening.

Open the project in Claude Code Reproduce the bug once Note what you expected to happen Note what actually happened

Show Claude the Problem

Inspect the Bug

Inspect the project and identify the most likely cause of this specific bug without changing anything yet.

I have a specific bug in this project. Before changing anything, inspect the project and determine what is actually causing it. The problem is happening here: {{BUG_LOCATION}} What should happen: {{EXPECTED_BEHAVIOR}} What happens instead: {{ACTUAL_BEHAVIOR}} Type of problem: {{BUG_TYPE}} Investigate the parts of the project that are relevant to this bug. Check the code, component relationships, state or data flow, event handling, configuration, and related files only where they are relevant. Do not make changes yet. Do not give me a generic list of possible causes. Determine the most likely real cause based on this project. When finished, tell me in simple language: - What is causing the bug - Which part of the project is responsible - Why the current behavior happens - What the smallest safe fix should be Do not modify any files yet.

Where does the bug happen?

Checkout form, dashboard, navigation menu, login page...

What should happen?

Clicking Save should update the project and show a success message.

What happens instead?

Nothing happens when I click Save.

Bug type

Read Claude's diagnosis before you continue.

Confirm the Fix Plan

Confirm the Smallest Fix

Agree on the change before any file is edited.

Plan the Bug Fix

Confirm the smallest change needed to fix the bug without redesigning or refactoring unrelated parts of the project.

Using the diagnosis you just made, confirm the smallest safe change required to fix this bug. Before editing anything: - Identify the exact files or parts that need to change - Confirm which working behavior must remain unchanged - Check whether the fix could affect anything closely related - Avoid changing unrelated files Do not redesign the interface. Do not add new features. Do not refactor working code unless the bug genuinely cannot be fixed without it. Do not rewrite a working component just because another implementation might be cleaner. Give me the focused fix plan first. Do not apply the fix yet.

The goal is one clear cause and one focused fix — not a project cleanup.

Fix Only the Bug

Apply the Fix

Now let Claude make the change it just planned.

Fix the Bug

Apply the confirmed fix while keeping the rest of the website or web app unchanged.

Apply the focused bug fix we just confirmed. Fix only the problem we diagnosed. Requirements: - Make the smallest reasonable change - Preserve existing working functionality - Keep the current design unless the bug itself is visual - Do not add new features - Do not perform unrelated cleanup - Do not refactor unrelated code - Do not replace working components unnecessarily - Follow the project's existing patterns After making the change: - Summarize what you changed - Explain briefly why it fixes the bug - Tell me if anything closely related should be checked Do not make any additional improvements.

Test the Fix

Try the Same Action Again

Check it yourself before asking Claude anything.

Repeat the action that caused the bug

Confirm the expected result now happens

Try it one more time

Check one closely related feature

Have Claude Check the Fix

Verify the Bug Fix

Check that the original bug is fixed and that the change did not break closely related behavior.

Perform a focused verification of the bug we just fixed. Check: - The original bug is resolved - The expected behavior now works - The fix addresses the actual cause we diagnosed - Closely related behavior still works - The change did not introduce an obvious new error If the original bug is still present, investigate what remains wrong and fix only that issue. Do not broaden the task into a general project audit. Do not redesign anything. Do not add features. Do not refactor unrelated code. Do not run or create large test suites unless they are genuinely necessary to verify this specific bug. When finished, report: - Whether the bug is fixed - What you verified - Whether any directly related issue remains

Try the fixed action yourself one last time before moving on.