Can Lovable.dev design and build a site better than Webflow?
Part 2 of designing & developing my website, this time using a full-stack AI tool
I never thought I'd let AI take the reins on designing my website. But after my first experiment with ChatGPT and Webflow, I was curious—could AI handle the entire process?
After more than a 100+ messages and $20 later, the answer is yes.
In my last post, I experimented with AI-assisted web design, using a mix of ChatGPT, Webflow, and Midjourney to create a personal landing page. I was pleasantly surprised—ChatGPT made navigating Webflow much smoother by translating my ideas into web design terminology that I could map back to the Webflow style panel interface. It was like having an on-demand Webflow specialist, helping me bridge the gap between vision and execution.
But after that experience, I wondered: What if I let AI take over the entire process from design to deployment? Instead of just assisting me, could it actually design and develop my site while I played the role of creative director?
I decided to put this to the test with Lovable.dev, an AI-powered web-building tool that claims to generate full-stack websites from simple text prompts. I’d heard a lot of good things about it, but what really caught my attention was Build Wars: Webflow vs. Lovable.dev, a live competition where a Webflow designer and a marketer using Lovable.dev raced to build a website in an hour—with 25K+ viewers watching. Naturally, I had to see if Lovable.dev could rebuild and evolve my own site with minimal manual intervention.
🧐 What is Lovable.dev?
Lovable.dev is an AI-powered web-building tool that generates full-stack websites from simple text prompts. The AI can handle styling, animations, and even some interactivity.
For example, prompting it with something like:
“Create a simple, clean, and minimalist one-page portfolio website for a product manager named Kaci, showcasing their best projects, a short bio, and contact details.”
…results in a fully functional site like this: minimal-kaci-space.lovable.app—in about three minutes. It’s pretty insane.
Could Lovable.dev re-build and further evolve my existing personal site, with minimal manual intervention?
The Experiment
I started with a simple prompt, attaching a screenshot of my current Webflow-built landing page:
Create a personal website landing page that looks like this. Use placeholder images for now.
That got me this:
First impressions: not bad… but not perfect
When the AI generated my first draft, I had mixed feelings. On one hand, the structure was pretty close to my original design. It applied styling intelligently, even using hover effects for the interest tags and good proportions between all the text elements.
On the other hand, some elements felt off—image layout wasn’t quite right, and of course there weren’t interaction animations in place. Still, for something that took less than five minutes to generate, I had a decent foundation to work with for a simple landing page.
Enhancements & Iterations
Once I had my AI-generated site, I went in and refined it.
🛠 Adding tooltip interactions
I wanted tooltips to appear when users hovered over the interest tags and the external link icon. I wasn’t too specific with my prompt, and simply asked for a tooltip to appear on hover—the AI got me a pretty clean tooltip to work with.
🚀 Importing components from 21st.dev
I used 21st.dev, a library of pre-built UI components, to enhance my site. I landed on the highlight animation and sparkles text components, which made the main header pop more and add some interesting movement to an otherwise simple and static page.
🖼 Image hover animations & refinements
This was one of my biggest challenges. While Lovable.dev added animations, they weren’t consistent across all images. Some hovered smoothly, while others felt a bit janky. I had to dig into the code to figure out what was going on and get more specific with my prompt to make the right adjustments.
One unexpected (and hilarious) moment: While trying to debug the animations, I noticed that only one image (the otter) had the smooth transition I wanted. So, I prompted:
"Make sure all component image animation transitions are smooth and consistent. It looks like only the otter image transition is smooth right now."
Apparently, Lovable.dev took some creative liberties because the result was a set of floating, bouncing ghostly apparitions 🤣. Not exactly what I had in mind, but it gave me a good laugh before I reverted it.
📌 Refactoring (AI helps fix its own code!)
One super cool thing: Lovable.dev proactively suggested refactoring parts of the code to make it cleaner and more efficient. Instead of manually rewriting everything, I could just click a button, and AI would optimize it for me. Pretty handy for someone whose least concern is on code readability/maintainability/redundancy.
This was the refactoring prompt that got triggered by clicking the button:
Refactor src/index.css into smaller files to improve organization and maintainability. Consider creating separate files for animations, layout components, and responsive styles.
🎨 Visual polish
To bring everything together, I pulled colors from an image on the site and applied them to the highlight and sparkle components. This helped create more consistency and cohesion across the page.
The Result
🤩 What went well
✅ Beautiful design right out of the box – Lovable.dev is known for its aesthetic UI, and it delivered. It automatically added drop shadows to my images for depth and included smooth animations that felt polished.
✅ Automatic animations – It surprised me by adding subtle fade-in and slide-up effects to the content on page load, making everything feel more dynamic without me even asking for it.
✅ AI-suggested code refactoring – The built-in ability to clean up and optimize the code was a game-changer. I didn’t have to worry about how the website would get built. Instead, I could focus on how it looked and functioned which is really what I care about.
😭 What didn’t go so well
❌ Font inconsistencies – Lovable.dev struggled to match my existing fonts exactly, possibly due to lack of font parity between Webflow and Google Fonts which I later found out was used by Lovable.
❌ Animation consistency – Not all elements had the same smooth transitions. For example, my otter image animation worked perfectly, but other images felt choppy. Trying to correct this without looking at the code felt frustrating. I’d often get a “Changes already applied” message even though it was clear no functional changes were made.
❌ Slow iteration cycle – Every request took 2–3 seconds to process, plus another 2–5 seconds for the preview to update. Compared to Webflow’s instant visual feedback, this felt sluggish when making small tweaks.
Takeaways & lessons learned
Prompting matters—A LOT
I quickly realized that the way I framed my requests directly impacted the results. Using clear, structured language—especially with design-related or coding-related terminology—helped AI understand what I wanted faster.Using existing UI components is a hack
Leveraging 21st.dev for pre-built elements sped things up significantly. Instead of figuring out the right words to get the visuals I wanted, I was able to leverage the prompts directly from 21st.dev and let the AI incorporate the code into its existing code.AI is fast, but not instant
One of Webflow’s biggest advantages is instant feedback when tweaking designs. You can see your changes in the style panel reflect immediately in the canvas. With Lovable.dev, there was always a brief waiting period between entering the prompt and seeing the preview, which made quick iterations and validations feel drawn out.
What would I do differently next time?
Plan my prompting strategy more carefully
Instead of a trial-and-error approach, I’d predefine a sequence of prompts for smoother iterations and try out new prompting strategies.Experiment with the knowledge base
I wonder if adding design guidelines (like Dieter Rams’s principles or Nielsen Norman’s usability heuristics or the principles of visual design) to the knowledge base in the project settings would influence the AI’s design decisions. There were times when I didn’t know if something looked good or not. For example, I wasn’t incredibly happy with the image positions and sizing relative to each other. It would have been nice if the AI proactively made suggestions to improve the overall aesthetic, or incorporated best practices from the get-go.Be mindful of subscription limits
My starter subscription included 100 monthly messages, and I burned through them quickly testing out different changes. Since Lovable.dev only gives 5 daily messages after hitting the limit, I’d need to be more strategic in future projects.
Final thoughts: Is Lovable.dev a Webflow killer?
Not quite, but gawd dayum, it’s scary impressive. I wouldn’t be surprised by how the technology will mature over the next few years.
Webflow still reigns supreme for those who want full creative control over their websites. Its robust visual editor allows for pixel-perfect precision and quick iterations. However, there’s a learning curve—users must invest time in understanding the interface to unlock its full potential.
Meanwhile, Lovable.dev caters to a broader audience who prioritize speed and ease over granular control. While this makes it an excellent choice for non-designers or those looking for a no-fuss solution, it also means that the final product may feel less unique or tailored compared to a Webflow-built site. If you’re okay with a more standardized, boilerplate look in exchange for efficiency and ‘getting the job done’, Lovable.dev is a solid contender.
Ultimately, the choice between the two platforms depends on your priorities—if you value unrestricted creativity and customization, Webflow is still the gold standard. But if you want a sleek, functional site with minimal effort, Lovable.dev provides a hassle-free alternative.
Would I use Lovable.dev again? Absolutely. But next time, I’ll approach it more strategically to get the best results with fewer iterations and optimized prompts.
🚀 On to the next project!
➡️ See the final result for yourself: kacinguyen.lovable.app!