TLDR: When AI-generated code doesn’t work, you do not fix it by reading code, you fix it by describing the problem precisely. Capture what you did, what you expected, and what actually happened. Open the browser console and copy the first red error line. Hand all of that back to the AI, ask for the complete file, and change one thing per turn. When the same bug keeps returning after a few rounds, copy the last working version into a fresh chat and start clean. The model that wrote the code is the fastest tool for repairing it, if you give it a real bug report instead of “it doesn’t work.”
You asked AI to build you a page, and for a glorious minute it looked like magic. Then you opened it, and something is wrong. The screen is blank. The button does nothing. The layout that looked perfect in the preview collapsed into a stack of gray boxes. You typed “it’s broken, fix it,” the AI apologized and changed something, and now a different thing is broken.
Here is the part nobody tells you: fixing AI-generated code is a skill, and it is not the skill you think. You do not need to learn to read JavaScript. You need to learn to describe a problem the way a good bug report does. The model that wrote the code can almost always repair it, faster than you could ever learn to, but only if you tell it precisely what is wrong. This is the playbook for doing that, written for people who do not read code.
Why AI code breaks in the first place
It helps to know what you are dealing with. AI-generated pages tend to fail for a small handful of predictable reasons, and none of them mean you did anything wrong.
- The file got too long to hold in its head. As a page grows, the model can no longer see all of it at once. When you ask for a change, it edits the parts it remembers and guesses at the rest. That is why a fix to the header can quietly break the footer.
- It invented something that does not exist. Models sometimes reference a library, an image URL, or a function that was never included. The code looks confident and fails instantly.
- The response got cut off. Long files sometimes stop mid-way. The page is not broken so much as unfinished, missing its closing tags or the second half of a script.
- A copy-paste dropped a piece. When you move code out of the chat by hand, it is easy to miss the last few lines or a stray bracket.
The common thread: these are mechanical failures, not mysteries. A precise description points the model straight at the cause.
Step one: file a bug report, not a complaint
The single biggest upgrade you can make is to stop typing “it doesn’t work” and start giving three facts. Every good bug report answers them:
- What you did. The exact action. “I clicked the blue Submit button.” “I loaded the page on my phone.” “I typed a number into the tip field.”
- What you expected. “I expected the form to clear and show a thank-you message.”
- What actually happened. “Nothing happened. The button pressed in visually but the message never appeared.”
That is it. Those three lines turn a guessing game into a repair job. The AI now knows where to look, what the intended behavior was, and how reality diverged. Compare the two prompts:
It's broken. Fix it.When I click the blue "Submit" button, nothing happens. I expected the
form to clear and show a "Thanks, we got it" message. Instead the button
depresses but no message appears and the form stays filled in. Nothing
else on the page seems affected.The second one gets fixed on the first try far more often, because you did the hard part: you localized the problem. This is the same discipline that makes iterating on AI pages go smoothly, aimed at breakage instead of polish.
Step two: read the one error the browser is hiding
Your browser knows exactly what went wrong. It is just not showing you unless you ask. That hidden panel is the console, and learning to open it is the highest-leverage thing a non-coder can do.
- Chrome or Edge: press F12, or Cmd+Option+J on a Mac, then click the Console tab.
- Firefox: press F12 and click Console.
- Safari: enable the Develop menu in Settings, then press Cmd+Option+C.
You are looking for the red lines. You do not need to understand them. You need to copy the first one, including the file and line number that usually sits at the end of it, for example Uncaught TypeError: Cannot read properties of null (reading "value") at line 214. Paste that straight into the chat:
The page renders blank. The console shows this error:
Uncaught TypeError: Cannot read properties of null (reading "value")
at line 214
Please find the cause and return the complete corrected file.That single red line is often a map with an X on it. A blank white page almost always means one JavaScript error stopped everything before the page could draw, and the console names the line. You just handed the model the answer to its own bug.
The symptom-to-cause cheat sheet
Most AI page failures fall into a few buckets. Match your symptom, and you will know what to tell the AI even before you open the console.
| What you see | Likely cause | What to tell the AI |
|---|---|---|
| Blank white screen | A JavaScript error halted the page early | “Page renders blank. Console error: [paste]. Return the complete fixed file.” |
| A button or link does nothing | The click handler is missing or misnamed | “Clicking [X] does nothing. I expected [Y]. Wire it up and confirm the handler is attached.” |
| Layout looks fine on desktop, wrecked on phone | Missing viewport tag or fixed widths | “Layout breaks on mobile. Make it responsive with a viewport meta tag and flexible widths.” |
| Page cuts off halfway down | The AI response was truncated | “The file looks cut off, it ends mid-tag. Please resend the complete file from top to bottom.” |
| An image or chart is a broken box | A referenced file or library does not exist | “The [image/chart] doesn’t load. Replace any external references with inline, self-contained code.” |
| It worked, then a later edit broke it | The model edited a file it can no longer fully see | “Your last change broke [X], which worked before. Restore that behavior and keep everything else identical.” |
For the mobile row specifically, there is a deeper walkthrough on making AI pages mobile-friendly. For the broken-references row, the durable fix is asking for self-contained HTML from the start, so nothing can go missing in transit.
Step three: guardrails so the fix does not break something else
The most maddening loop in AI coding is whack-a-mole: every fix breaks a new thing. Two habits stop it cold.
Ask for the complete file every single time. When a model returns “just the changed part,” you have to splice it in by hand, and that is where pieces get dropped. Instead end your prompt with:
Return the entire updated file from the opening tag to the closing tag,
so I can replace everything at once. Do not give me a snippet or a diff.Change one thing per turn, and protect the rest. Bundling “fix the button, and also make the header blue, and add a footer” into one message invites a rewrite. Name the single change and pin down everything else:
Make only this one change: the Submit button should show a success
message when clicked. Keep every other part of the page, the layout,
colors, text, and all other buttons, exactly as they are now.This is the same restraint that powers a good polish pass with follow-up prompts. When you are repairing rather than polishing, it matters even more, because a broken page has less margin for a surprise rewrite.
Step four: isolate a stubborn bug
If a bug survives two or three rounds, shrink the problem. Ask the AI to build the smallest possible version that still shows the bug:
Let's isolate this. Make a tiny standalone page with just the Submit
button and the success message, nothing else, so we can see why the
click isn't working. Once it works there, we'll put it back.A minimal reproduction strips away everything unrelated, so both you and the model can see the actual failure. Nine times out of ten, the bug becomes obvious the moment it stands alone. Then you carry the working piece back into the full page.
When to stop patching and start fresh
Sometimes the conversation itself is the problem. After many turns, the model has lost track of earlier versions, and it starts contradicting its own fixes: reintroducing a bug it removed, forgetting a decision you made ten messages ago. When you notice the same class of bug cycling back, or fixes that undo previous fixes, stop patching.
Do this instead: copy the last version that actually worked, open a brand new chat, paste the full file in, and describe the single remaining problem cleanly.
Here is a working HTML page. It has one problem: on mobile, the menu
button in the top right does nothing when tapped. Please fix only that,
and return the complete file.
[paste the full file]A fresh context, handed clean code and one clear symptom, often fixes in a single turn what a long, tangled conversation could not fix in ten. There is no shame in restarting. It is a technique, not a defeat.
Test the fix where it actually breaks
A fix that works in the chat preview is not a fix yet. Chat previews hide the exact bugs that bite hardest: how the page behaves on a real phone, on a real network, when a real person taps a real button. The only honest test is the page running as a live page on a device.
This is the moment to get the page out of the chat. Once you have HTML that looks right, publish it to a live link and open that link on your phone, on a friend’s laptop, on the device where the bug first appeared. VisiblePage is built for exactly this loop: paste the HTML, or drop a ZIP if the project has multiple files, and you get a real URL in seconds, with every button, form, and chart running for real, not a screenshot. You can keep the page private or password-protected while you are still squashing bugs, then send the link to the person who reported the problem so they can confirm it is gone. And because the page has one canonical address, every time you fix something you re-publish to the same URL, so there is never any confusion about which version is the broken one.
Try it now: Publish your AI-generated HTML with VisiblePage and get a live link you can test on any device in seconds.
Frequently asked questions
Do I need to know how to code to fix AI-generated code?
No. Your job is to describe the problem precisely, not to read the code. Tell the AI exactly what you did, what you expected, and what actually happened, and paste any error message from the browser console. The model wrote the code and can repair it far faster than you could learn to. Clear symptoms beat code-reading every time.
The AI page is a blank white screen. What do I do?
A blank screen almost always means a JavaScript error stopped the page before it drew anything. Open the browser console (press F12, or Cmd+Option+J in Chrome), copy the first red error line and line number, and paste it back to the AI with the words the page renders blank, here is the console error. That one error usually points straight at the broken line.
Why does AI keep breaking one thing while fixing another?
Because it is editing a long file it can no longer fully see, so it guesses at parts it does not remember. Fight this by changing one thing per turn, asking it to return the complete file, and telling it explicitly to keep everything else identical. If it keeps regressing, start a fresh chat and paste in the last version that worked.
When should I stop patching and start over?
When you have gone three or four rounds and the same class of bug keeps coming back, or the AI starts contradicting its own earlier fixes. That is a sign the conversation has drifted. Copy the last working version, open a new chat, paste it in, and describe the single remaining problem cleanly. A fresh context often fixes in one turn what a tired one could not fix in ten.
How do I test a fix on my phone quickly?
Publish the page to a live link and open that link on your phone. A preview inside a chat window does not reveal touch, viewport, or real-network bugs. Publishing to a URL, such as with VisiblePage, gives you a page you can open on any device and send to whoever reported the bug so they can confirm it is fixed.
The short version
Broken AI code is not a wall, it is a bug report waiting to be written. Say what you did, what you expected, and what actually happened. Open the console and copy the first red line. Hand it all back, ask for the complete file, and change one thing at a time. When the loop gets tangled, start fresh with the last working version. Then publish the fixed page to a live link and test it where it actually runs. You never had to read a single line of code, you just had to describe the problem well enough that the machine could solve it.