The newest AI coding tools for prototyping can be an amazing addition to your workflow. But like any tooling, they each have strengths and weaknesses. This is a breakdown of what I have found so far.

Note: This is the state of play today – these tools are changing at light-speed so this will likely be obsolete pretty soon. I have also undoubtedly missed some given the pace of development, but we have to start somewhere!

There are main 3 categories of AI Code tools:

• Full Stack tools (Replit, Bolt, Lovable, etc)
• Front End – V0
• IDEs and Code Editors (Cursor, Windsurf, Copilot, etc)

TL;DR:

Tool Type	Best For	Limitations
Full Stack (Replit, Bolt, Lovable)	MVPs, end-to-end prototyping	Struggles with complex workflows
Front End (V0)	UI concepting, stakeholder demos	Weak backend, hard to style
IDEs (Cursor, Windsurf, etc)	Complex apps, dev handoff	Steeper learning curve

---

Full Stack Tools – Replit, Bolt, Lovable, etc

These are “full stack” AI coding tools that let anyone without any coding abilities build complete apps and prototypes.

Here is a Yahtzee Scorecard app I made in Replit for family game time. It only took a few hours thus far to get it into this state.

The good:

• Create a Full stack application. Any backend, including databases, user management, payments, etc. can be added easily without any setup.
• Basic Imports from Figma. Your Figma files need to be well structured.
• Everything is online, deployed, and shareable. You can send a link to it. You can point a domain name at it. You can even add payments and charge for it.

Limitations:

• Limited to apps with basic functionality, often called CRUD (Create, Read, Update, Delete). Once the application adds complexity, these tools struggle. You will likely have to migrate the application off the platform and turn it over to a developer, which you can do via Github.
• Limited collaboration features. I believe Bolt just started to introduce some of these features, but the others have none to date.
• Styling and design. The tools generate a decent UI out of the box. However, getting these tools to follow any kind of design system or component library is difficult.
• Figma Import is limited. The files have to be perfectly structured. You have to import screen by screen, it won’t recreate a prototype. If using this for design explorations, you’ll need to recreate designs in Figma to move them through a design process.
• Memory limitations with the LLMs, which requires continually starting new chats with the agent that forget prior context.

Best for:

Prototypes & Explorations, Deploying Basic Applications, MVPs

---

V0

V0 is a front end prototyping tool from makers of Next.js. It builds in Next.js by default and doesn’t handle other FE frameworks very well (i.e. you aren’t going to make an Angular app work, I tried). But if you are in a different framework but don’t need to reuse the code, it’s no big deal.

The good:

• The best front end UI tool. They have introduced some backend extensions, but you need to know a bit about that they do in order to make use of them. But for the front end prototyping for brainstorming and sharing, it’s ideal.
• Online and shareable UI prototype. Your creation is already deployed online and shareable with a link. If you are looking to test and communicate ideas, it’s great.

Limitations:

• Very basic, almost black and white UI by default – essentially a clickable wireframe. It takes work to incorporate styling – brand/design systems will be difficult. I’ve used screenshots of existing designs as reference which helps. With some trial and error, you can get there. There is a “projects” functionality that I haven’t fully explored that might make this easier.
• Backend functionality is limited, harder to implement, and requires a bit more technical knowledge. I don’t know what each of the V0 “integrations” does. If you need backend functionality like account creation or other databases in your prototypes, the full stack tools above are better for that.
• Augments, but doesn’t replace workflow – For complex design work, you will have to bring the design workflow back into Figma to complete the full designs before hand off.
• No collaboration features – you can “fork” another user’s prototype and start building off of it, but it loses connection to the original so you end up with multiple versions.

Best for: Concepting – quickly building prototypes, trying different ideas, and communicating with stakeholders. This is the evolution of design tooling.

---

AI Powered IDE/Code Editors – Cursor, Windsurf, etc

These are actual code editors that run locally on your machine. Anything built via these tools will be local until you manually deploy to a server/host that you have set up. They are basically advanced code editors with an LLM code agent built in.

Good for:

• More complex projects. Developers or folks who are more comfortable with technical workflows might prefer these – if you’re comfortable with Terminal and/or git, for example.
• Agents help with the technical challenges. You don’t need to know how to code to use these, the agents can write the code for you. It can also help you with all the technical aspects beyond the code, like pushing to Git or deploying a production server.
• Full codebase context – These tools can look at your entire codebase and make suggestions based on that – although any developer will tell you this is limited.
• Collaboration – assuming you are comfortable with git workflows.

Limitations:

• Your own technical abilities. It requires more technical literacy. You’ll need to use Terminal commands, install packages, set up any backend infrastructure. The AI agent can walk you through this, but it’s still more challenging than the other tools.
• Browser and editor are disconnected – When running locally, you’ll have to view your app in the browser, which is not connected to your code editor. You’ll have to communicate with the agent quite a bit to explain errors and problems (screenshots help a lot for this).
• Runs locally, takes work to deploy – Once you are ready to ship, you will have to deploy to a server and get it running in the production environment. The AI agent in Cursor can help with this.
• The agents can go rogue without guidelines, and can start rewriting parts of the application you don’t want it to touch. You need to set specific rules to prevent the agent from going rogue with your code, with you can do with rules files.
• Design – None of them yet handle design very well either. But if you are comfortable with HTML and CSS, you’ll have a lot more control.

Best for: Fully coded, complex apps or apps that require any additional complexity beyond basic CRUD functionality.

Which of these to try?

The best place to start is anywhere! I suggest trying the same prompt in all of them and pick the one that has your favorite output and go from there. If you can’t think of anything, start by asking them to build a To-Do list app.

These tools won’t replace developers, especially for complex products, but they dramatically lower the barrier to exploring, prototyping, and even deploying working apps. If you’re in product or design, mastering these tools will increasingly be part of the job.

---