Skip to main content

​
Features to Help You Troubleshoot

Retry and Fix with AI do not consume any credits.

​
Retry

If you didn’t like what the AI generated, you can click the Retry button to have it try the same prompt again. Retrying a prompt does not consume any new credits.

​
Fix with AI

If you’re experiencing an issue with your design in Magic Patterns, you can use the Fix with AI feature. This tool helps resolve problems automatically and does not consume any credits.

​
/Debug Command

When you’re stuck in a situation where the AI isn’t following your instructions correctly, try using the /Debug command in the chat. It plugs in a well-crafted prompt template along with your description of the issue that helps guide the AI toward debugging the issue effectively.

​
Common Issues

​
”I Don’t See My Changes”

​
Background

The AI likely did make the change you asked for, but:
  • It’s not “hooked up” (e.g., created a new page but didn’t link a button to it)
  • It’s on a different page/route than you’re looking at
  • The element exists but isn’t visible (hidden, off-screen, or in a different state)

​
Solution

Ask the AI to reflect on why you’re not seeing the changes:
Prompt
I asked you to [describe your change] but I don't see it on the screen. Can you reflect on what you changed and where it is? Did you create a new page or component that I need to navigate to?
The /Discuss and /Debug commands can be powerful here too!
The AI might explain:
  • “I created a new /settings route, but you need to click the gear icon to navigate there”
  • “I added the feature to the mobile view, but you’re looking at desktop”
  • “I created a modal, but it only shows when you click the ‘View Details’ button”

​
Prevention Tips

  1. Be explicit about where changes should appear:
    • Bad prompt: “Add a settings page”
    • Good prompt: “Add a /settings route and make the gear icon in the header link to it”
  2. Use Select Mode to reference specific elements:
    • Click the button that should trigger the change
    • Then prompt: “When I click X, ensure that it actually goes to [XYZ].”
  3. Ask the AI to confirm:
    • Add to your prompt: “…and make sure it’s visible on [XYZ]"

​
"I never see Fix with AI""

​
Background

If Fix with AI isn’t appearing in your project, it’s likely because your app is wrapped in a special thing called an ErrorBoundary. In frameworks like React, an ErrorBoundary catches errors and displays fallback UI. While useful for production, this behavior prevents unhandled exceptions from surfacing, which means the system doesn’t recognize an error and won’t trigger Fix with AI.

​
Solution

Remove or disable your error boundary by prompting the assistant to automatically make the change:
Prompt
Do not use an error boundary at all

​
Prevention Tips

  • Avoid wrapping your entire app in an ErrorBoundary while prototyping
  • If you need error handling, consider prompting the AI to add it only to specific components rather than the “entire App"

​
"I have to click A LOT every time to navigate through my screens”

​
Background

If you have a flow of many screens, you might find yourself clicking through from the start every time you want to see the latest screen that was generated. This can be tedious and time-consuming, especially when iterating on screens deep in the flow.

​
Solution

Option 1: Prompt for a “Debug Panel”
Ask the AI to create a debug panel that lets you jump to any page or mock any state instantly:
Prompt
Add a debug panel that lets me jump to any screen in the flow directly. Include buttons for each page/state so I don't have to click through the whole flow.
The debug panel can include:
  • Buttons to navigate directly to any screen
  • Toggles to mock different states (logged in, logged out, loading, error, etc.)
  • Quick actions to simulate user interactions
Option 2: Use Routes
Routes vs. State: When to use eachUse “routes” when each screen should be independently accessible—like /settings, /profile, or /dashboard. Users can bookmark these, share links, and use browser back/forward navigation.Use “state” for flows — the AI generally defaults to this unless told otherwise — where screens are steps in a sequence. Examples: a checkout wizard or onboarding. These shouldn’t be bookmarkable mid-flow, and users typically shouldn’t jump directly to step 3 without completing steps 1 and 2.If your multi-screen flow represents a linear process (e.g., checkout, signup), you probably do not want to use this approach. See Option 1 for a better approach.
If you prompt for an actual “route” or “page” (rather than just different states within a single component), you can use the route dropdown at the top of the editor to switch between them directly:
Prompt
Add a settings page, but make it a separate route called /settings so I can navigate to it directly.
This approach gives you the page selector dropdown, making navigation between screens instant.