How to debug AI prototypes

Practical tips to make you 10x more efficient with AI prototyping

Hey, I’m Colin! I help PMs and business leaders improve their technical skills through real-world case studies. For more, check out my live courses, Technical Foundations and AI Prototyping.

---

When building prototypes with AI tools like Bolt, v0, or Replit, running into errors is inevitable. With the right approach, you can quickly debug issues and create functional prototypes in minutes. Here's a practical guide based on lessons learned from working extensively with these tools.

Understanding the Basics

Every software prototype typically contains at least one of these components:

• Client (the user interface)

• Server (processes requests)

• Database (stores data)

Different AI prototyping tools excel at different combinations:

• Bolt/v0: Best for client and server

• Replit: Handles client, server, and database

• ChatGPT/Claude: Client-side only

3 tier architecture and their corresponding AI tools

It’s critical that you select the right tool for your use case. Don’t try to use Replit to build a simple single-file app – you’re more likely to run into issues due to increased complexity.

If you have to change your overall architecture, it’s worth restarting your prototype in the appropriate tool and providing the correct context on the initial prompt.

Common Errors and How to Fix Them

The most frequent issues you'll encounter are reference or syntax errors. These occur when the AI tries to use components or files that don't exist or has made a typo in its implementation. For example, if building a CRM, you might see errors like "pages/contacts not found" because the AI referenced a non-existent file.

When you hit an error:

1. Ask the AI to explain the error without writing code

2. Let it propose a plan to fix the issue

3. Implement changes one step at time rather than all at once

4. Focus on specific files/components rather than making broad changes

Asking Bolt to explain an issue

For example, I would handle this error by first getting Bolt to explain it to me, then identifying what files need to change, and finally implementing one change at a time.

Advanced Debugging Strategies

One of the most effective ways to reduce errors is setting up a system prompt. These are instructions that guide how the AI behaves for every request. A good system prompt should include your implementation approach, best practices to follow, error handling behavior, default technologies to use, and how to handle unclear requirements.

Global system prompts in Bolt

For example, here’s my current system prompt with Bolt:

Always:

- Define a data model

- Start with mock data instead of a database

- Respond back to the user with your plan before writing any code

- Create a component library that can be reused throughout the project

- Create centralized state management, do not rely on components for storing state

- Identify possible conflicts or issues when a request is given

- Batch implementation into smaller chunks. Do not attempt to implement an entire application in one request. Instead, guide the user through a series of smaller, more focused requests

- Double check you are changing the correct files with the user if you are not 100% certain of the changes you are implementing

- Refer back to the PRD for the overall plan

Ask follow up questions if any of the following information is unclear:

- Does the user want a client only, client and server, or client, server, and database?

- Are the current changes for client, server, or database?

- Will making these changes overwrite existing functionality?

When you encounter an error:

- Start by determining available solutions to the problem

- Prioritize the best solution based on its probability of resolving the issue

- Present the solution to the user and ask if they want to continue

If the user asks you to fix something:

- Dont write any code

- Respond with an analysis of the problem and an plan to resolve

- Ask to continue

Use the following technology when needed unless the user specifies otherwise:

- React Router: If the user wants more than one page

- React Query: If the user wants to use an external API and server state

- Zustand: Central state management of app state across components, like user states

- Recharts: If the user wants to add data visualizations

Start with:

- Create a PRD in a .md file. Use yaml tags to structure the file. The PRD should contain all relevant user stories, technical requirements, and phases of implementation

- If you’re given a screenshot, analyze the image and create a design system to match. This includes fonts, spacing, colors, logos, and overall design.

With a well-crafted system prompt, you can turn a simple request like "recreate this screenshot" into a structured implementation process, complete with a PRD and phased rollout.

Bolt creating a PRD in response to a screenshot

Finally, get familiar with tool-specific features that can save you time and headaches. In Bolt, enabling "diffs" prevents the AI from accidentally overwriting entire files. When using Replit, the agent works best for big changes while the assistant excels at small tweaks. Each tool has its own version control features – learn them and use them to your advantage.

Putting It All Together

While AI prototyping tools can significantly speed up the development process, success comes from understanding their limitations and working with them effectively. By following these debugging approaches and best practices, you can turn potential frustrations into productive prototyping sessions.