AI-powered web app builders
A hands-on comparison
By Nathalie Raux-Copin and Jean-Michel Claus
Date: 30 April 2025
AI-powered tools like v0, Bolt, and Lovable enable designers and developers to generate interactive web app prototypes in minutes. These platforms create responsive, functional websites with just a prompt or a link to a Figma file, offering real content, clickable links, and code. We conducted an experiment, feeding the same prompt into each tool to compare their performance and outputs.
Key takeaways
- Easy to use and very fast to provide a result
- Good prediction of user intention
- Interactive UI and clean code
- Useful for ideation and scaffolding prototypes
How AI-powered web app builders work
Once you submit your prompt, these tools rapidly generate code and display the resulting web interface. The speed of execution is remarkable, often delivering a functional prototype within seconds. But beyond speed, how well do these tools interpret design intentions? And how should designers and developers incorporate them into their workflows?
The prompt we used
Build a responsive website with four pages: Home, About, Components, and Services. Use the attached image to create a hero banner of 1280 x 615 pixels in size. Place it below the navigation and use a headline that reads "What's under the hood" in large white font on top of the image. Under the hero, stack horizontally three tiles of the same size, separated by 20 pixels. Each tile should have a title, a subtitle, and two lines of paragraph with an ACTION button. The action button should use a bright orange with white text. The footer should link to https://whitespace.ch and should have a CONTACT US button.
Uploaded image
Photo by Anurag Challa on Unsplash
Results at a glance
| v0 | Bolt | Lovable | |
|---|---|---|---|
| Use the provided imagery | ✅ | ❌ | ✅ |
| Responsive layout and navigation | ⚖️ | ✅ | ⚖️ |
| Propose content in subpages | ✅ | ❌ | ✅ |
| Support other frameworks, e.g., MUI | ✅ | ❌ | ❌ |
v0 review
Tech stack
React, Next.js, RadixUI, Tailwind CSS
Execution time
1:17 secs
User interface
V0’s interface consists of three main panels:
- Left panel: Vertical navigation for starting new chats, accessing knowledge bases, and reviewing recent chats.
- Middle panel: Prompt entry with a step-by-step execution log and feedback options (copy, retry, like/dislike).
- Right panel: Preview and code display, with actions like share, fork, and deploy.
Preview evaluation
✅ Real content generation – Sections include meaningful, relevant text.
✅ Intention prediction – The layout adapts based on section names (e.g., a product-style layout for “Components,” a feature-style layout for “Services”).
⚖️ Responsive design – Content adapts to different devices, but the menu does not convert to a hamburger menu on smaller screens.
⚖️ Imagery – The provided portrait image is resized correctly but is unnecessarily repeated across pages.
✅ Interaction – Hover states work as expected.
❓ Accessibility – Keyboard navigation is missing, and contrast for active elements is low.
Code evaluation
✅ Works well if you stick to the initial libraries used, i.e. React, Next.js, RadixUI, Tailwind CSS.
✅ Works if you ask to use another React library, like MUI.
❌ Can not display a preview if you ask it to use traditional CSS on top of it.
❌ Generates an error if you ask to use a less common React library, e.g., Mantine.
❌ Fails if instructed to use other frameworks, for example, VueJS Composition API + traditional CSS or Svelte + traditional CSS. As for using another meta framework, it works if asked to use Astro instead of NextJS but could not provide a preview.
Bolt review
Tech stack
React, Tailwind CSS, Lucide React for icons
Execution time
47 secs
User interface
Bolt’s interface is streamlined into two main sections:
- Left Panel: Prompt and execution log.
- Right Panel: Preview and code, with export, deploy options, and a Supabase link. Navigation is collapsed by default.
Preview evaluation
⚖️ Real Content Generation – Only homepage cards contain real content; other pages display titles only.
✅ Responsive Design – The menu converts to a hamburger menu on smaller screens.
❌ Imagery – The provided image was ignored; a random image was used instead.
✅ Interaction – Hover states work as expected.
❓ Accessibility – Keyboard navigation is missing, and contrast for active elements is low.
Code evaluation
✅ Works well if you stick to the initial libraries used, i.e. React and Tailwind CSS.
✅ Works if you ask to use another React library, like MUI.
❌ Does not work well if another framework is specified (for example, VueJS Composition API) or another styling solution.
Lovable review
Tech Stack
React, RadixUI, Tailwind CSS
Execution time
1:51 secs
User interface
Lovable has a two-column interface:
- Left panel: Prompt entry and execution log.
- Right panel: Preview and code, with a publish option and links to GitHub and Supabase.
- Notable feature: A "What’s Next?" guide for first-time users, though feedback and retry options are missing.
Preview Evaluation
✅ Real content generation – Sections include meaningful, structured text.
✅ Intention prediction – Advanced adaptation based on section names (e.g., “About Us” includes mission, values, and team CTA; “Services” offers paths and a quote request CTA).
⚖️ Responsive design – The menu converts to a hamburger but remains expanded, and sections stack vertically.
✅ Imagery – The provided image is correctly resized and darkened for readability, but it repeats across pages unnecessarily.
✅ Interaction – Hover states work as expected.
❓ Accessibility – Keyboard navigation is missing, and contrast issues persist.
Code evaluation
✅ Works well if you stick to the initial libraries used, i.e. React, RadixUI, Tailwind CSS.
❌ Cannot use anything outside of React as a framework or Tailwind CSS as a styling solution.
Final thoughts
In summary, AI-powered tools like V0, Bolt, and Lovable are changing the game for rapid prototyping—delivering interactive, high-fidelity outputs in a matter of minutes. Our experiment confirmed just how intuitive, efficient, and impressively accurate these platforms have become. From predicting user intent to generating clean, clickable UIs and (almost) production-ready code, they’re proving to be powerful allies in the early stages of design and development. While they’re not replacements for thoughtful UX or polished design, they shine when it comes to ideation, experimentation, and building momentum fast.
Why designers should care
AI-powered web builders offer a rapid way to prototype ideas without needing development resources. This enables:
- Faster iterations: Test multiple layouts and structures in minutes.
- Improved collaboration: Developers receive real, functional code instead of static mock-ups.
- Concept validation: Designers can quickly validate their ideas with stakeholders.
Why developers should care
Overall, code quality is good, and the workflow is easy if you fit in the chosen tech stack. Any divergence from these defaults can result in the refusal to generate alternative code, compilation errors, or just heavily impact workflow when previews are unavailable. There are some key benefits, though, even when used out of the default:
- Rapid scaffolding of a project: Invaluable for generating project file structure, especially when the number of pages and components is large.
- Rapid experimentation: Try different UI structures with minimal effort and see how the code adapts.
- Learning & adaptation: Understanding AI logic can help refine prompt engineering for better results.
Considerations
- Accessibility improvements: These tools need better keyboard navigation and contrast handling.
- More customization options: Allowing users to refine generated content and layouts, widening the choice of frameworks.
- Integration with design tools: Smoother handoff from Figma and other design platforms.
AI-powered web app builders are not replacing designers or developers but augmenting their workflows. As these tools evolve, they will become even more valuable in accelerating digital product creation.
