Skip to main content

AI Troubleshooting

Solutions for common issues when working with INSTROC's AI.

AI Doesn't Understand​

Symptom​

The AI generates something completely different from what you asked for.

Solutions​

Be more explicit:

Before: Add a hero section
After: Add a hero section at the top of the page with a large
headline, subtitle paragraph, and two buttons side by side

Reference what exists:

Add a hero section similar to the features section style
but with centered text and a gradient background

Break into steps:

Step 1: First, create the basic hero container
Step 2: Now add the headline and subtitle text
Step 3: Add the CTA buttons below the text

Changes Are Too Drastic​

Symptom​

AI modifies more than you asked for, affecting unrelated parts.

Solutions​

Limit scope explicitly:

ONLY change the header section. Keep everything else exactly
as it is. In the header, make the logo larger.

Reference specific elements:

In the hero section, change ONLY the headline text color to
blue. Don't modify anything else.

Use undo liberally: Press Cmd/Ctrl + Z to revert unwanted changes.

Results Are Inconsistent​

Symptom​

Similar prompts produce very different results.

Solutions​

Provide specific values:

Before: Make the text bigger
After: Set the headline to 48px font size on desktop,
32px on mobile

Reference your design system:

Use the same blue (#3B82F6) that's used in the button

Build incrementally: Make one change, verify it, then make the next.

Styling Doesn't Match​

Symptom​

New elements don't match existing design style.

Solutions​

Describe the style:

Add a new card component matching the existing card style:
rounded corners, subtle shadow, white background, and the
same padding and font sizes

Reference existing elements:

Create a testimonial card using the same styling as the
feature cards above

Layout Issues​

Symptom​

Elements are misaligned or don't fit properly.

Solutions​

Describe the layout structure:

Create a two-column layout where:
- Left column: 40% width, contains the image
- Right column: 60% width, contains the text
- Gap of 48px between columns
- On mobile: stack vertically with image on top

Fix specific issues:

The cards are not aligned properly. Make them all the same
height and ensure equal spacing between them.

Responsiveness Problems​

Symptom​

Design looks good on desktop but breaks on mobile.

Solutions​

Request mobile-first:

Create a navigation menu that works well on mobile with a
hamburger menu, then scales up to horizontal links on desktop

Specify breakpoints:

The product grid should show:
- 1 column on mobile (under 640px)
- 2 columns on tablet (640px - 1024px)
- 3 columns on desktop (over 1024px)

Check explicitly:

Check the hero section on mobile view. The text is too large
and the buttons overlap. Fix the mobile layout.

Animation Issues​

Symptom​

Animations are jarring, too fast, or don't trigger correctly.

Solutions​

Be specific about timing:

Add a fade-in animation to the cards that:
- Starts when they scroll into view
- Takes 0.5 seconds
- Has a slight ease-out curve
- Staggers each card by 0.1 seconds

Fix animation problems:

The animation is too fast and looks jarring. Make it slower
(1 second duration) and smoother (ease-in-out curve).

Color and Theme Issues​

Symptom​

Colors don't look right or don't match the brand.

Solutions​

Provide exact colors:

Use these exact brand colors:
- Primary: #7C3AED (purple)
- Secondary: #06B6D4 (cyan)
- Background: #F8FAFC
- Text: #1E293B

Reference color relationships:

The CTA button should use the primary brand color with
white text. On hover, darken the button by 10%.

Content Issues​

Symptom​

Generated text is generic or doesn't fit.

Solutions​

Provide real content:

Use this exact text for the hero:
Headline: "Ship faster with AI"
Subtitle: "Build production-ready apps in minutes, not months"

Describe the tone:

Write the feature descriptions in a friendly, conversational
tone. Avoid corporate jargon. Keep each under 20 words.

Performance Issues​

Symptom​

AI takes too long or times out.

Solutions​

Simplify the request: Break complex requests into smaller, focused prompts.

Avoid full page rewrites: Modify specific sections rather than regenerating everything.

Wait and retry: If the AI times out, wait a moment and try again.

When All Else Fails​

Use the Visual Editor​

For precise control, switch to the visual editor:

  • Click elements to select
  • Use the properties panel for exact values
  • Drag to reposition

Edit the Code​

For technical changes, use the code editor:

  • View the generated code
  • Make direct modifications
  • Changes sync to the visual preview

Start Fresh​

If a section is too broken:

Delete the features section completely and create a new
one from scratch with: [detailed description]

Ask for Help​

Use the help prompt:

I'm trying to [goal] but [problem]. What's the best way
to achieve this?

The AI can suggest alternative approaches.