Troubleshooting Common Issues

Things don't always work perfectly — and that's normal! This lesson is your troubleshooting reference guide.

🎯 Lesson Objectives

By the end of this lesson, you will:

• Know how to fix the most common issues
• Understand why problems occur
• Have troubleshooting prompts ready to use
• Feel confident handling unexpected results

Issue 1: AI Doesn't Understand My Request

Symptoms:

• AI generates something completely different from what you wanted
• AI asks clarifying questions
• Result is generic or irrelevant

Why It Happens:

• Prompt is too vague
• Technical terms used incorrectly
• Conflicting instructions

Solutions:

Solution A: Be More Specific

Solution B: Provide Examples

Solution C: Break It Down Instead of one complex prompt, use multiple simple ones:

1. "Create a card layout with rounded corners and shadow"
2. "Add a circular image placeholder at the top"
3. "Add heading for name and subheading for title"
4. "Add a short paragraph for bio"
5. "Add a button at the bottom"

Issue 2: Design Looks Broken on Mobile

Symptoms:

• Elements overlap on phone screens
• Text too small to read
• Buttons too small to tap
• Horizontal scrolling needed

Why It Happens:

• Fixed widths used instead of responsive
• No mobile-first design
• AI assumed desktop viewing

Solutions:

Solution A: Request Mobile-First

Solution B: Fix Specific Issues

Solution C: Request Responsive Testing

Issue 3: Can't Find Share Button

Platform-Specific Solutions:

v0.dev:

• Look for share icon (box with arrow) in top-right
• Check the three-dot menu (⋮)
• Right-click on the preview and copy link

Replit:

• Click "Run" first
• Look at the webview panel header
• Click the expand/external link icon
• Copy the URL from browser bar

General:

• Look for icons: 📤 🔗 ↗️
• Check dropdown menus
• Try right-clicking on preview

Issue 4: Page Loads Slowly

Symptoms:

• Long wait before content appears
• Images take forever to load
• Animations are choppy

Why It Happens:

• Too many large images
• Heavy animations
• Complex code that needs optimization

Solutions:

Solution A: Simplify

Solution B: Optimize Specific Elements

Solution C: Reduce Complexity

Issue 5: Colors Look Bad Together

Symptoms:

• Colors clash visually
• Text is hard to read
• Design looks unprofessional

Why It Happens:

• Random color selection
• Poor contrast ratios
• Too many colors

Solutions:

Solution A: Request Professional Palette

Solution B: Use Named Color Schemes

Solution C: Specify Exact Colors

Issue 6: Text Is Hard to Read

Symptoms:

• Low contrast between text and background
• Font size too small
• Line spacing too tight
• Font hard to read

Why It Happens:

• Poor contrast ratio
• Design over usability
• Mobile not considered

Solutions:

Solution A: Improve Contrast

Solution B: Fix Typography

Solution C: Change Font

Issue 7: Interactive Elements Don't Work

Symptoms:

• Buttons don't respond to clicks
• Forms don't submit
• Animations don't play
• Links go nowhere

Why It Happens:

• JavaScript not properly connected
• Event handlers missing
• Code errors preventing execution

Solutions:

Solution A: Request Functional Code

Solution B: Debug

Solution C: Simplify Interaction

Issue 8: AI Hit Usage Limit

Symptoms:

• "Rate limit exceeded" message
• Can't generate more
• Premium features locked

Why It Happens:

• Free tier has request limits
• Too many generations in short time

Solutions:

Solution A: Wait

• Limits usually reset hourly or daily
• Take a break and return later

Solution B: Use Alternative

• Switch between v0.dev and Replit
• Try different AI tools

Solution C: Be More Efficient

• Write better prompts to reduce iterations
• Plan your design before prompting

Quick Reference Table

When Nothing Works

If you're truly stuck:

✅ Lesson Summary

Key Troubleshooting Strategies:

1. Be more specific — Most issues come from vague prompts
2. Break it down — Complex problems need step-by-step solutions
3. Check mobile — Always verify on small screens
4. Simplify — When in doubt, reduce complexity
5. Be patient — AI tools have limits, work within them

➡️ Next Lesson

You've built, shared, improved, and troubleshot. Now let's reflect on your achievement and prepare for what's next!