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
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:
Ask the AI to explain the error without writing code
Let it propose a plan to fix the issue
Implement changes one step at time rather than all at once
Focus on specific files/components rather than making broad changes
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.
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.
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.
Have you played around with a bunch of the tools related to error fixing? Cline is pretty cool. It seems like each one has their strengths and weaknesses.
Excellent breakdown Colin.