UX for AI

EP. 88 - AI Web Development Showdown: When to Use Bolt vs. Lovable vs. Custom Coding for Fast Builds

• Bonanza Studios

Share episode

Send us a text

In this insightful episode, a seasoned developer shares their hands-on experience comparing various AI-powered web development tools to determine which solutions work best for different project requirements. After spending a month "in the trenches" testing these platforms, they provide a practical breakdown of the strengths and limitations of popular tools like Bolt, Lovable, and custom coding environments.

The episode begins with the speaker acknowledging the overwhelming number of AI web development tools flooding LinkedIn feeds, causing confusion for many who aren't sure which solution best suits their needs. Working at a production studio that needs to regularly test new applications, they've created a comprehensive comparison to help others navigate this rapidly evolving landscape.

At the heart of the discussion is a real-world test case: recreating Booking.com's homepage. The speaker demonstrates how they rebuilt the site with different approaches, comparing the results side-by-side. They distinguish between "one-shot effect" platforms like Bolt and Lovable, which produce impressive initial results quickly but become difficult to refine, versus a more traditional programming environment that offers greater control despite requiring more setup time.

Using visual examples, the speaker shows how Bolt produced better one-shot results than Lovable (though they acknowledge this might be due to using Bolt's paid version versus Lovable's free tier). The comparison extends to creating an Airbnb-style listing page, where the differences in layout refinement capabilities become evident. While Bolt created a functional page in just ten minutes, the custom solution took three hours but provided significantly more control over nuances and styling details.

The speaker's preferred custom setup includes Windsurf (similar to Cursor), Claude 3.7, and libraries like Three.js—providing a senior programmer's environment with complete control. They emphasize the importance of version control through GitHub for larger projects and the freedom to change libraries and add APIs as needed.

A key insight from the episode is the changing role of designers in this AI-powered landscape. Rather than creating mockups in Figma, designers are becoming "curators" who find exemplary references and iterate rapidly, prioritizing time-to-market over pixel perfection.

The speaker concludes with an impressive demonstration of building a custom video compression tool in just ten minutes, reinforcing their philosophy that mastering these development environments enables continuous creation and problem-solving without relying on pre-built solutions.

The episode offers practical advice for viewers: use Bolt or Lovable for quick projects where you can accept their limitations, but invest in learning custom environments like Cursor or Windsurf for longer-term projects requiring fine-tuned control. The speaker encourages viewers to embrace these tools now, noting that despite the learning curve requiring longer work days, the investment in understanding these technologies will pay dividends in future development capabilities.

Interested in joining the podcast? DM Behrad on LinkedIn:
https://www.linkedin.com/in/behradmirafshar/

This podcast is made by Bonanza Studios, Germany’s Premier Digital Design Studio:
https://www.bonanza-studios.com/

00:00:00:00 - 00:00:03:02


00:00:03:02 - 00:00:05:08


00:00:05:08 - 00:00:07:04

When you scroll down your

00:00:07:04 - 00:00:11:11

LinkedIn these days, you get to see so many examples of

00:00:11:11 - 00:00:35:29

websites, applications, automation being built on lovable bald notes, and whatever the case may be, I've lost count. You probably are frustrated, confused, not sure what is what, which is what. What could which app could do what for you? So I've been in the trenches for the past month, really trying to get a feel for what I can do.

00:00:35:29 - 00:00:52:19

We run a production studio and we need to basically every week now, test new apps and make sure that we pick the best one so we can offer distinguish and excellent services to all of our clients. So I have built

00:00:52:19 - 00:00:53:27

this,

00:00:53:29 - 00:00:56:03

Page on,

00:00:56:03 - 00:01:07:10

my tool stack, which I break it down for you, and it's basically what I did was I didn't like Booking.com homepage and I wanted to see how long would it take to design it

00:01:07:10 - 00:01:09:24

in a, you know, sufficiently good.

00:01:09:28 - 00:01:25:12

You know, there is you know, perfection never ends. But enough that I say like, okay, this is a better alternative, right? So what you are seeing in front of you is Google took me from the start to finish about three hours

00:01:25:12 - 00:01:32:11

and it's pretty good. Like as you can see, let me just refresh it. It has a page load.

00:01:32:11 - 00:01:35:00

There's a loads for you. As you can see

00:01:35:00 - 00:01:49:24

it keeps loading. It has five loads. Then it should show you the pagination. Bang on footer. Look at this footer versus this footer. Right. And sticky navigation. Very simplified.

00:01:49:24 - 00:01:55:10

Hero page with a great image. And I'm going to walk you through what I've done

00:01:55:10 - 00:01:58:01

But let me first begin with,

00:01:58:01 - 00:02:00:29

the difference I see between all these tools.

00:02:00:29 - 00:02:03:10

So I wanted to replicate

00:02:03:10 - 00:02:05:22

my process on the book.

00:02:05:22 - 00:02:07:06

So I'm using,

00:02:07:06 - 00:02:08:07

to be exact.

00:02:08:07 - 00:02:09:09

We're using actually a,

00:02:09:09 - 00:02:13:24

sort of a more advanced environment that allows me to code like a programmer,

00:02:13:24 - 00:02:15:05

like a senior programmer.

00:02:15:05 - 00:02:15:29

this,

00:02:15:29 - 00:02:20:04

allows me to build any application, and I show you a couple of stuff I'm doing right now.

00:02:20:06 - 00:02:31:27

But before that, let me walk you through some of this. Vibe coding platform is, like lovable bold. There are in that segment. This platform are basically,

00:02:31:27 - 00:02:44:01

designed and built for this purpose that give you one shot effect. Right? So when you give it a prompt, it does its magic, gives you a very, very,

00:02:44:03 - 00:02:46:03

Output close to what you want.

00:02:46:03 - 00:02:46:20

So

00:02:46:20 - 00:02:50:17

let's see what a lovable did. So I give the prompt.

00:02:50:17 - 00:02:53:18

And I'll show you what I gave.

00:02:53:18 - 00:02:54:09

Preview.

00:02:54:11 - 00:02:55:15

Just a second.

00:02:55:15 - 00:02:56:03

So,

00:02:56:03 - 00:02:57:22

unlovable. I said,

00:02:57:22 - 00:03:13:08

I gave it the screen of Booking.com and then also gave it this design, which I found on Drupal, basically a toilet. I would like for you to design the front end of Booking.com homepage and make it exactly the same as the other image I attached.

00:03:13:08 - 00:03:16:04

Keep all the components you see on the book through the tabs.

00:03:16:04 - 00:03:17:07

Login and search

00:03:17:07 - 00:03:20:13

by region. According to the other example.

00:03:20:13 - 00:03:23:22

So that's the output you're getting on lovable.

00:03:23:22 - 00:03:24:11

And

00:03:24:15 - 00:03:25:14

Interesting.

00:03:25:14 - 00:03:30:09

Because the output I got from bolt is,

00:03:30:09 - 00:03:46:21

actually bolts based on what I'm seeing. Give me a much better one shot effect. Wow. Moment. So this platform, as I said, are customized and built for the purpose of give you the closest output to what you have in mind,

00:03:46:21 - 00:03:57:15

right. So they, they do not want you to go do debugging making sure setting up the environment they do not want you to basically,

00:03:57:15 - 00:04:00:12

worry about the detail of the build.

00:04:00:15 - 00:04:09:00

They make all those decisions for you there. It's built into the, you know, their process. And as you can see,

00:04:09:02 - 00:04:12:19

what you're getting as output is very far off

00:04:12:19 - 00:04:16:16

to what you expected. But the, the,

00:04:16:16 - 00:04:18:03

the nuance here is

00:04:18:03 - 00:04:31:21

although you see something that is really close to what you ask them to do, then when you want to work on the nuances, it becomes really difficult because again, it's a pre-built environment.

00:04:31:21 - 00:04:43:21

So this is the bolt. I gave you the same prompt, but it's a bit more advanced, to be honest, because I ask you to do the listing to. So I wanted to see what it does. I have another one.

00:04:43:23 - 00:04:46:03

This is another built on bolt.

00:04:46:05 - 00:04:47:24

And compared to,

00:04:47:26 - 00:04:48:28

lovable.

00:04:48:28 - 00:04:58:23

So as you can see, this is all this component or part of what lovable offers you. So they are probably using tailwind

00:04:58:23 - 00:05:03:05

library or the likes of tailwind. That is very,

00:05:03:05 - 00:05:05:16

popular. Everyone using it. And

00:05:05:16 - 00:05:15:13

this way they can give you a good enough experience to start with. But tweaking it, I find very frustrating.

00:05:15:15 - 00:05:21:05

Right? So if you're looking for something really quick, you have to put up a, you know,

00:05:21:05 - 00:05:22:11

homepage.

00:05:22:11 - 00:05:22:25

Because

00:05:22:25 - 00:05:39:14

one day you have a intimate zoom meeting and you want to get everything going, have some logging or, or, you know, have have an application that does something really quick. You probably can pull it off during the weekend, but as soon as you want to add nuances, add

00:05:39:14 - 00:05:43:07

to the to the experience, then that sort of becomes,

00:05:43:07 - 00:05:44:25

a headache.

00:05:44:28 - 00:05:46:11

So this was

00:05:46:11 - 00:06:01:08

lovable and this was bolt. Exactly. So this was both actually both because I'm on Bolt, I'm on a paid version. Lovable on the on a free version. Maybe that's that's what you're getting for, you know, free service.

00:06:01:08 - 00:06:06:03

But bolt did a actually much better job of giving me,

00:06:06:03 - 00:06:12:04

closer to what I wanted in one shot and also in the other projects,

00:06:12:04 - 00:06:13:22

I ran on bolt.

00:06:13:25 - 00:06:16:15

I asked it to basically,

00:06:16:17 - 00:06:18:17

give me the listing, but

00:06:18:17 - 00:06:22:13

look at the difference between the listing here and the listing

00:06:22:13 - 00:06:25:07

that I built with my own setup.

00:06:25:07 - 00:06:27:16

This is so I love the,

00:06:27:16 - 00:06:28:22

listing of

00:06:28:22 - 00:06:29:25

Airbnb,

00:06:29:25 - 00:06:38:18

so I ask it to do that. This what it gave me. This is my setup, and this is what bolt gave me.

00:06:45:19 - 00:06:47:10

And that's what I'm talking about when

00:06:47:10 - 00:06:47:21

I,

00:06:47:21 - 00:06:49:02

when I say that this,

00:06:49:02 - 00:06:55:16

platform, they use their own component and library, like, it's not it's not there yet. I mean,

00:06:55:16 - 00:06:59:03

it didn't really understand the nuance of it. The groundedness, the.

00:06:59:03 - 00:07:05:23

It doesn't do it because the library it's using doesn't allow so much around this, for example.

00:07:05:25 - 00:07:22:26

And you have to go now, fine tune it. But actually it's pretty good on terms of I want it to be infinite scroll. It didn't infringe the scroll to be to get to this with both. It took me two prompts and about ten minutes to get to this. It took me three hours, but

00:07:22:26 - 00:07:26:13

I have more control over the nuances.

00:07:26:13 - 00:07:27:19

It's basically,

00:07:27:19 - 00:07:31:24

a environment that a senior programmer use. So

00:07:31:24 - 00:07:33:29

my tool stack is windsurf,

00:07:33:29 - 00:07:40:28

similar to cursor. I'm using Cloud Sonnet 3.7, which is the the best out there for programing.

00:07:40:28 - 00:07:41:15

And

00:07:41:15 - 00:07:43:28

my setup is CSS is

00:07:43:28 - 00:07:48:00

using three.js for animation. I haven't used that part of it yet, but

00:07:48:00 - 00:07:52:07

I have a main.js JavaScript file and the index pretty like a simple price grab.

00:07:52:08 - 00:07:59:05

Like more complex project here to. All right, I had to set up everything. I had to set up a file system. I had to set up,

00:07:59:05 - 00:08:02:19

I had to basically tell it to find a specific,

00:08:02:19 - 00:08:10:03

libraries for, for the icon. I want it to be outline scene icon. As you can see. You don't see it here.

00:08:10:03 - 00:08:10:25

Actually,

00:08:10:25 - 00:08:15:05

actually here it uses it outside an icon without even telling telling it. But,

00:08:15:05 - 00:08:15:29

it's actually the same

00:08:15:29 - 00:08:17:14

library here.

00:08:17:14 - 00:08:24:22

These are like, all of them use open source library. And so basically I had to specify what font I want.

00:08:24:22 - 00:08:25:05

What,

00:08:25:05 - 00:08:28:04

icon library. What interface library? I want,

00:08:28:04 - 00:08:29:01

and then.

00:08:29:03 - 00:08:46:23

The getting getting for example, getting the infinite scroll, getting the pagination, getting the footer. Right. It's actually took a quite a while because again, it's a sin. You're asking a senior programmer rather than going to a website builder with pay,

00:08:46:23 - 00:08:57:06

pre-made packages. That's what Bold and levels are. So it took me three hours to get to this versus ten minutes.

00:08:57:08 - 00:09:10:19

Which one is better in the long term? Obviously this one, because I have control over everything I have. I can I can set up a GitHub, I can branch out, I can have a version control, which is very, very needed for

00:09:10:19 - 00:09:13:17

all the big projects I can

00:09:13:17 - 00:09:18:16

basically change libraries on the fly. I cannot do it here. They're using

00:09:18:16 - 00:09:21:10

their you have to use whatever they're offering.

00:09:21:13 - 00:09:36:08

Right. And I can change libraries. I can basically say I want a new technology. I want to add APIs. That gives me a lot more freedom in the long run. Right. So how did I build this page is

00:09:36:08 - 00:09:38:28

basically I use zero Figma in the process.

00:09:38:28 - 00:09:49:04

And it's very important for you to know zero Figma. But the way that we are now designing and build application and product and your role as a designer.

00:09:49:06 - 00:09:51:03

Q curator

00:09:51:03 - 00:09:53:09

is to find good examples,

00:09:53:09 - 00:10:04:05

especially for projects that are going to go. Going to market is a priority over perfection. But as you can see also,

00:10:04:05 - 00:10:21:16

this build is not it's actually in terms of look and feel is very competitive. I still kind of like, you know, fine tuned the border radius here, certain things. But this is a really good starting point given the fact I use,

00:10:21:16 - 00:10:22:13

Midjourney.

00:10:22:13 - 00:10:23:08

For image.

00:10:23:08 - 00:10:30:14

Brilliant platform. Love it. Very cheap compared to runway. And give me really good.

00:10:30:16 - 00:10:32:23

So these are all the stuff I built.

00:10:32:23 - 00:10:41:29

I created. As you can see, this was my exploration. T I've o so most of them are really good.

00:10:41:29 - 00:10:44:04

And then I pick one. I,

00:10:44:04 - 00:10:46:17

I took a screenshot here from Airbnb.

00:10:46:17 - 00:10:51:09

I said, I want listing of it. I like the future of it. And.

00:10:51:11 - 00:10:53:17

And. Yeah. So I was,

00:10:53:17 - 00:11:02:05

not sure about how to design this page again. Going to Drupal, finding the right image. Then,

00:11:02:05 - 00:11:09:27

what I found really powerful, instead of writing down what you want is much better to get screenshot right. So.

00:11:09:27 - 00:11:16:26

This was a product of three hours of going back and forth. If I spent a good three hours again

00:11:16:26 - 00:11:21:09

on this, I can get it almost ready for lunch.

00:11:21:11 - 00:11:29:24

In terms of front end and some back end, this is actually complicated application, right? But I'm talking about simple,

00:11:29:24 - 00:11:34:24

website with some level of integration and some simple business logic.

00:11:34:24 - 00:11:43:02

You could mark my word, especially if you have the right setup. You can get your project live within 1 to 4

00:11:43:02 - 00:11:44:11

working days.

00:11:44:11 - 00:11:48:26

Now, more than that, and that's all you need to know in this video.

00:11:48:26 - 00:11:50:11

So again, to sum it up,

00:11:50:13 - 00:12:00:29

if you are really fast, want to get something out, go with both or lovable. But don't expect to

00:12:00:29 - 00:12:25:17

be able to get the nuances and details right. Be happy with what it offers to you and do not insist so much on getting details right. I've done it. It's an absolute headache. But if you think you are going to work on a project long term, like for one week or two weeks or three months, absolutely, absolutely.

00:12:25:17 - 00:12:37:24

Use cursor windsurf or the likes to have GitHub and set up the environment yourself. This is going to give you a lot of freedom to the point,

00:12:37:24 - 00:12:43:27

that now for everything that I want to build, I used to go actually go

00:12:43:27 - 00:12:47:18

what I used to do is, for example, I wanted to do a video compressor

00:12:47:18 - 00:12:48:04

right.

00:12:48:06 - 00:12:48:27

And

00:12:48:27 - 00:12:58:28

used to so what I would do, I would go to Google and say, hey, I want to mp4 to look, you know, I want to compress my mp4. Then.

00:12:59:00 - 00:12:59:15

Then

00:12:59:15 - 00:13:00:05

find the,

00:13:00:05 - 00:13:07:18

solution in front of me. Then I had to use it. I didn't have so much power over

00:13:07:18 - 00:13:16:23

what it offers to me. I had to use with what in front of me, but now I can. I just did build it up that compress

00:13:16:23 - 00:13:24:20

massive 27 gigabyte MP4 to 200 megabyte and it works. Works really good.

00:13:24:22 - 00:13:37:15

So just let me show you. Actually, this was the fastest build I ever meant and had to use Python for it. It has to bring some APIs into it, and it did all of it all together. Right.

00:13:37:15 - 00:13:43:13

So let me show you that. And with that, we can end the conversation. And when the video.

00:13:43:13 - 00:13:45:18

The call. So.

00:13:45:18 - 00:13:53:26

All I ask it is that I want to compress massive empty force and breaking down to,

00:13:53:28 - 00:13:59:27

one gigabyte 500 gigabyte, not losing the quality. So,

00:13:59:27 - 00:14:05:29

it says that we need to set up the environment. We need to set up Python, we need to set of FFmpeg,

00:14:05:29 - 00:14:13:09

connected to that API, and do some stuff over there and actually install f mpeg into the

00:14:13:11 - 00:14:15:25

here in the, in the folder.

00:14:15:27 - 00:14:17:19

None of these things I asked.

00:14:17:19 - 00:14:23:19

Now I, I specify, I just said that make me like allow me to

00:14:23:19 - 00:14:26:12

basically choose the quality,

00:14:26:14 - 00:14:30:22

how fast it is and the, the rest, it picked it up.

00:14:30:22 - 00:14:31:29

I can upload.

00:14:31:29 - 00:14:32:26

So this is,

00:14:32:26 - 00:14:34:04

seven gigabytes.

00:14:34:04 - 00:14:35:09

I start compressing,

00:14:35:09 - 00:14:38:06

I build this up within ten minutes.

00:14:38:06 - 00:14:40:07

Now I have this in my local drive.

00:14:40:07 - 00:14:42:16

Whenever I need it, I can run it. I can use it

00:14:42:16 - 00:14:43:02

right?

00:14:43:02 - 00:14:44:16

Is that a.

00:14:44:16 - 00:14:49:11

That, you know, is that the running on local drive? Is that

00:14:49:11 - 00:14:52:23

is that a good way of doing it rather than just going to Google?

00:14:52:23 - 00:15:00:15

Yeah. I cannot care less. I build this one. If I build this one, I could build more. That's how I'm thinking about it.

00:15:00:15 - 00:15:09:27

So as you can see, it's processing. It is calculating. I did not give any of this specification. I just said what I would like to do. It went

00:15:09:27 - 00:15:11:15

and gave me this.

00:15:11:15 - 00:15:12:03

So

00:15:12:03 - 00:15:12:09

I

00:15:12:09 - 00:15:21:05

get into the bottom of this set up environment. Getting accustomed to these tools really allow you to do a lot more in the future. Right now

00:15:21:05 - 00:15:25:03

it's time to invest in these apps and learning them is today, right?

00:15:25:10 - 00:15:37:00

That's why running a business at the same time, I'm working out with this tool. So basically I went from eight hours work day to 14 15 hours work day because

00:15:37:00 - 00:15:38:14

there is no other way for me.

00:15:38:14 - 00:15:38:29

So,

00:15:38:29 - 00:15:42:28

with that, I want to I want to end this,

00:15:42:28 - 00:15:44:11

recording and

00:15:44:11 - 00:15:45:16

encourage you

00:15:45:16 - 00:15:48:10

to get busy. Thank you.

00:15:48:10 - 00:15:50:05


00:15:50:05 - 00:16:02:10


00:16:02:10 - 00:16:02:16