Troubleshooting AI

When the AI doesn't do what you expect, try these approaches.

Common Issues

AI Misunderstands the Request

Symptom: Output doesn't match what you asked for.

Solutions:

1. Be more specific

❌ "Make it better"
✅ "Increase the headline font size to 48px and add a gradient background"

2. Provide context

"In the hero section of the homepage, change..."

3. Use reference points

"Style it like the features section above"

AI Changes Too Much

Symptom: Unrelated parts of the page changed.

Solutions:

1. Limit scope explicitly

"Only modify the hero section. Do not change anything else."

2. Specify what to keep

"Change the background color but keep the text and layout the same."

3. Undo and retry Use Cmd/Ctrl + Z, then try a more constrained prompt.

AI Changes Too Little

Symptom: Only part of the request was completed.

Solutions:

1. Break into steps Request one change at a time.

2. Be explicit about all changes

"Update ALL buttons on this page to..."

3. Follow up

"Also apply that change to the mobile view"

Styling Doesn't Apply

Symptom: Colors, sizes, or styles don't change.

Solutions:

1. Use specific Tailwind classes

"Use bg-indigo-600 for the button background"

2. Check for conflicting styles Look at the code for !important or inline styles.

3. Specify the element clearly

"The primary CTA button in the hero section"

Layout Breaks on Mobile

Symptom: Desktop looks fine, mobile is broken.

Solutions:

1. Test during development Toggle mobile preview after each change.

2. Specify responsive behavior

"Stack horizontally on desktop, vertically on mobile"

3. Fix explicitly

"On mobile, make the text smaller and stack the columns"

Error Recovery

Undo Changes

• Keyboard: Cmd/Ctrl + Z
• History panel: View and restore previous versions
• Full reset: Restore from version history

Start Fresh with a Section

"Remove the current [section] and create a new one with:
- [requirement 1]
- [requirement 2]
- [requirement 3]"

When AI Gets Stuck

If the AI keeps misunderstanding:

1. Try different wording Same intent, different words.

2. Break down further Smaller, simpler requests.

3. Use the code editor Make the change manually, then continue with AI.

4. Start from a template Sometimes easier than fixing broken output.

Improving Results

Give Examples

"Create a pricing table similar to:
| Free | Pro | Enterprise |
With features listed below each"

Use Technical Terms

"Use flexbox with justify-between"
"Add shadow-lg and rounded-xl"
"Set gap-8 between items"

Describe the User Journey

"When a user clicks the button, show a modal with
a contact form. On submit, show a success message."

Reference Existing Work

"Style this section the same way as the testimonials
section on the homepage"

Known Limitations

Complex JavaScript Logic

For complex interactivity, you may need to edit code directly.

Precise Pixel Values

AI works best with Tailwind's scale. Arbitrary values may not apply.

Third-Party Integrations

Some integrations require manual code setup.

Large-Scale Refactors

Break major restructures into smaller steps.

Getting Help

Check Documentation

Many issues are covered in feature docs.

Use Clearer Prompts

90% of issues are solved with better prompts.

Contact Support

For persistent issues, reach out with:

• What you tried
• What happened
• What you expected

Related Docs

• Effective Prompts — Write better prompts
• Command Reference — All commands
• Version History — Recover from mistakes