Debugging AI Output: Fix Common Issues

Debugging AI Output

AI isn't perfect. Here's how to identify and fix common issues with AI-generated apps.

Common Issues and Fixes

Issue: Layout Broken on Mobile

Symptoms: Content overflows, elements overlap, text too small Cause: Responsive design not properly implemented Fix prompt: "Fix the mobile layout. The [specific section] breaks on small screens. Ensure all content stacks vertically, text is readable (min 16px), and buttons are full-width on mobile."

Issue: Buttons Don't Work

Symptoms: Clicking does nothing Cause: Missing onClick handlers or navigation Fix prompt: "The [button name] button doesn't work. It should [expected action]. Add the click handler to navigate to [destination] / submit the form / trigger [action]."

Issue: Data Not Saving

Symptoms: Form submits but data disappears Cause: Missing database integration or API call Fix prompt: "Form data isn't being saved. Connect the [form name] to Supabase. Save to the [table name] table with fields: [list fields]. Show success message after saving."

Issue: Styling Inconsistent

Symptoms: Different fonts, colors, or spacing across pages Cause: Inconsistent component styling Fix prompt: "The styling is inconsistent. Standardize: use Inter font throughout, primary color #3B82F6, consistent padding (16px in cards, 24px sections), and border-radius of 8px for all rounded elements."

Issue: Missing Validation

Symptoms: Forms accept invalid input Cause: No validation rules added Fix prompt: "Add validation to [form]: email must be valid format, password minimum 8 characters, name required. Show error messages below each field. Disable submit until valid."

Issue: Slow Performance

Symptoms: Page loads slowly, laggy interactions Cause: Unoptimized images, too much re-rendering Fix prompt: "Optimize performance: lazy load images below the fold, add loading states for data fetching, reduce unnecessary re-renders by memoizing [components]."

Debugging Process

Step 1: Identify the Problem

• What exactly isn't working?
• What should happen vs. what does happen?
• Is it consistent or intermittent?

Step 2: Check the Console

• Open browser dev tools (F12)
• Look for red errors
• Note any warnings

Step 3: Describe Specifically

• Don't say "it's broken"
• Say exactly what's wrong and where

Step 4: Prompt for Fix

• Be specific about the expected behavior
• Reference the exact component/section
• Include any error messages

Debugging Prompts

For Visual Issues

"The [section/component] doesn't look right. It should [expected appearance]. Currently it [actual appearance]. Fix the styling."

For Functional Issues

"The [feature] isn't working. When I [action], it should [expected result] but instead [actual result]. Fix this functionality."

For Data Issues

"Data from [source] isn't displaying in [component]. Verify the API call is correct, handle loading and error states, and display the data as [description]."

For Integration Issues

"The [integration name] isn't working. I've added my API key as [env variable]. Error message: [error]. Fix the integration."

Prevention Tips

Write Better Initial Prompts

Many issues come from vague initial prompts. Be specific upfront.

Test Incrementally

Don't wait until the whole app is built. Test each feature as it's added.

Check Mobile Early

Mobile issues are common. Check responsive design early and often.

Include Edge Cases

"Handle empty states when there's no data. Show loading states during API calls. Display error messages when things fail."

When to Start Over

Sometimes it's faster to re-prompt than fix. Consider starting fresh when:

• Multiple fundamental issues
• Architecture is wrong
• Would require more work to fix than rebuild
• You've learned what you actually want

Key Takeaways

1. Identify the specific problem first
2. Check browser console for errors
3. Describe exactly what should happen
4. Prompt with specific fixes
5. Prevention > debugging