Break It On Purpose
Most AI content shows you the highlight reel. This page shows you the errors — real ones from real builds — and exactly how to fix them. Proof that the workflow handles the messy parts, not just the clean ones.
Why Document the Failures?
Because every person learning this workflow will hit errors. If you've only seen the clean demos, the first time something breaks you'll think you did something wrong. You didn't. This is normal. Here's proof.
Errors are part of the process
Claude Code will break things. It will introduce a bug while fixing another. It will misunderstand an instruction and produce output that doesn't work. This is expected — not a sign you're using it wrong.
The fix is always findable
Every error documented here was solved. None of them required giving up or starting over. The multi-AI workflow — Claude builds, ChatGPT diagnoses — handles all of them.
Pattern recognition is the skill
The more errors you see, the faster you recognize them. After enough sessions, you'll know the fix before you've finished reading the error message. This page accelerates that learning.
Common Errors and How to Fix Them
These are error patterns that come up repeatedly in AI-assisted builds. The fix prompt is the exact language that works.
The Circular Fix Loop
Type: Infinite LoopClaude fixes a CSS layout bug. The fix breaks the mobile nav. Claude fixes the mobile nav. It breaks the original CSS layout. Repeat.
Claude's context accumulates its previous attempts. Each new fix is informed by what it just tried — including the failed approaches. It can't see that it's going in circles because it's reasoning from a history of wrong turns.
Stop Claude. Take the error to ChatGPT with this exact prompt:
"I'm getting [describe the error]. I've tried [brief description of fixes attempted]. Each fix creates a new version of the same problem. What is the most likely root cause I'm not seeing? Give me 2-3 probable causes."
Then bring ChatGPT's answer back to Claude: "Ignore your previous fixes. Based on fresh analysis, the root cause is [ChatGPT's answer]. Approach it from that angle."
CSS Doesn't Apply / Styles Ignored
Type: Styling IssueYou ask Claude to change the button color. It edits the CSS. The button stays the same color in the browser. Claude says it made the change. It did. The browser doesn't care.
Browser cache. The old CSS is cached and the browser is showing the old version. CSS specificity issues. Or Claude edited the right file but the wrong selector.
First, hard refresh the browser: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). If that doesn't fix it, tell Claude:
"The style change isn't showing in the browser even after hard refresh. Check that you edited the correct selector in the correct file. Also check if there are any competing CSS rules with higher specificity overriding this change."
Firebase Deploy Fails
Type: Deployment Errorfirebase deploy throws an authentication error, permission error, or project not found error. The site is stuck on local and won't push.
Not logged into Firebase CLI. Wrong project selected. The .firebaserc points to the wrong project ID. Firebase CLI version mismatch.
"Firebase deploy is failing with this error: [paste the full error message]. Check the .firebaserc file, verify the project ID matches my Firebase console, run firebase login to confirm authentication, and then retry the deploy."
Claude Edits the Wrong File
Type: Scope OverreachYou ask Claude to fix the homepage. It edits the homepage — and also "helpfully" modifies three other pages you didn't ask about, breaking styles that were working fine.
Claude tries to be proactively helpful. It sees related issues in adjacent files and fixes them too — without asking. This is a feature that becomes a bug when you have a working codebase you don't want touched.
Be explicit about scope in every instruction:
"Fix only index.html. Do not touch any other files. Do not 'improve' anything I haven't asked about. Only make the specific change I describe."
If it already happened: "Revert any changes you made to files other than index.html. Only the changes to index.html should remain."
Mobile Layout Breaks After Desktop Fix
Type: Responsive DesignYou ask Claude to fix a layout issue on desktop. It fixes it. Now the mobile layout is broken — cards overlap, text is cut off, the nav hamburger disappears.
Claude made a CSS change that affected the global layout without checking the responsive breakpoints. Common culprits: changes to display, position, flex, or grid properties at the base level that override media query values.
"The desktop fix you made broke the mobile layout. The issue is in the responsive breakpoints — check the @media (max-width: 768px) rules and make sure the desktop changes don't override mobile-specific values. Fix mobile without breaking desktop."
The Fix Prompt Formula That Works Every Time
Every successful fix prompt in this workflow follows the same structure. Once you internalize it, you'll write it automatically.
1. Stop and reset
"Stop your current approach." or "Ignore the previous attempts." — This signals Claude to not continue from a broken foundation.
2. State the specific error
"The error is [exact description or paste]." — Be literal. Don't paraphrase. The more specific, the better the diagnosis.
3. Provide the probable cause
"Based on analysis, the probable cause is [from ChatGPT or your own diagnosis]." — This gives Claude a new starting point instead of letting it retry the same failed approach.
More on the Debug Workflow
The multi-AI debugging workflow — Claude builds, ChatGPT diagnoses — is documented in detail.