Did Lovable Kill Webflow?

0:00 when the team at lovable claim web flow 0:02 is officially dead the design Community 0:04 was a bit shaken some even outraged but 0:07 I think that we do need to look reality 0:09 in the face AI is changing how web 0:11 designers work and even though I love 0:13 webflow I do think that we need to look 0:15 into this seriously not because I'm 0:16 afraid AI is going to take my job but 0:18 rather because I'm wondering whether 0:20 there's a better more effective way for 0:22 me to do my job as a web design so in 0:24 this video we're going to look into 0:26 lovable see what it does well see what 0:29 not and then conclude whether it's a 0:31 legit alternative or a threat to web 0:33 flow so what is lovable anyway well 0:35 their website says it's a superum full 0:38 stack engineer which can basically 0:40 develop things for you just by using a 0:42 prompt and looking at their Builder Hall 0:45 of Fame people are actually building 0:47 quite cool things so these are 0:49 experiment with PS5 JavaScript library 0:53 for visual arts and uh yeah they're 0:56 creating some it's pretty cool to create 0:59 something like this this like an 1:00 interactive 3D element just from a 1:03 prompt that you can embed in your 1:05 website what do we have here so here he 1:08 built a shape recognizer he's drawing a 1:11 shape and it's turning into a 3D object 1:13 that's pretty impressive okay I like 1:16 that all right so let's give this a try 1:18 I'm going to put in a prompt build a 1:20 landing page for a tech company that 1:22 does real-time golf analysis name of the 1:25 company is forecaster their brand color 1:27 is green let's see what what happens so 1:31 it's starting up it's going to reason 1:35 and think what would be the right page 1:37 and what would be the right things to 1:38 build and then it's going to start 1:41 writing some code now this does take 1:44 some time all of these code writing and 1:47 uh while some people find this exciting 1:49 I find it quite boring so let's fast 1:51 forward a few inches later okay so it's 1:54 been 3 minutes let's see what we got 1:56 here we have the forecaster page 1:58 precision allowes every swing we 2:00 actually got like a nice image here 2:03 super related to golf we've got these 2:05 analytics he really figured out like a 2:07 nice visual and a 2:09 layout looks actually quite good let's 2:11 scroll through this actually looks very 2:15 impressive also has this tiny hover 2:17 effect as we're scrolling through this 2:20 this looks like a solid you know solid 2:22 design like nice slick interactions here 2:26 request a demo what's your skill level 2:29 that's actually is quite impressive and 2:33 this is actually we can go ahead and 2:35 open this up because this is already 2:38 published um so let's see this here and 2:40 let's see if this is actually uh 2:42 responsive so you can see we've got this 2:45 here on the lovable app very nice let's 2:48 try to check if this is responsive yeah 2:51 this is even responsive and with the 2:54 mobile menu here well the mobile menu is 2:57 not amazing but still I would say this 2:59 is quite impressive now to be fair 3:02 webflow also has their a AI Builder from 3:05 a prompt to get you to something and we 3:07 can discuss about which one gets them to 3:10 a better quality but the question is now 3:12 that it's here what are we going to do 3:14 with this obviously this is just kind of 3:16 like a something to begin with what 3:18 happens if we want to edit this so first 3:20 of all lovable tells you here you can 3:23 refine this and customize you can send 3:25 this to GitHub if you want to publish it 3:27 and so forth now we can also click here 3:30 edit and then we can click some of these 3:32 elements for example the button and then 3:35 if I want to in this case I can I see 3:37 that I can change you know the the 3:40 margin on the sides I thought I might be 3:43 able to even change the color but it 3:45 looks like I can't really change the 3:47 color natively let's discard this but if 3:51 I want to make some kind of changes I'm 3:53 going to have to write a prompt so let's 3:56 actually ask it to replace this visual 3:58 with some kind of like a threejs element 4:01 something interactive let's just see 4:02 what it would do with this so 4:05 replace hero image with uh 4:09 3js uh 4:12 interactive 4:14 golf element let's see what would happen 4:18 so this is probably going to take a 4:19 couple of minutes as well so let's start 4:22 fasting forward and see what happens a 4:25 few moments later okay so we got build 4:28 unsuccessful and something is just not 4:31 loading here so we can just click try to 4:35 fix it and let's see what's going to 4:37 happen a few minutes later okay so it 4:40 seems that this is still not loading and 4:43 it seems like a lot of the interaction 4:45 with these AI coding tools is just try 4:47 to fix this error so let's say site not 4:51 loading please fix it a few inches later 4:55 okay seems like I ruined something never 4:58 mind this anyway I think that building 5:01 from a prompt whether it's with lovable 5:03 or with webflow is actually not a real 5:06 use case because in real web design you 5:08 have to work with your clients on the 5:09 content you have to plan the sit map you 5:11 have to take the design to customize it 5:14 and build the visual assets and you'll 5:16 usually do that with figma so let's 5:18 actually go and work on a real project 5:21 and see how lovable is doing on an 5:22 actual project so here I'm in figma and 5:25 I have this landing page and I've 5:27 recently built this landing page in 5:29 webflow and there's actually a full 5:31 video that you can see me building this 5:33 in webflow it took me two hours to fully 5:35 develop this and let's see if I can do 5:37 this quicker using lovable now in 5:40 lovable you can actually see there is a 5:42 figma import here and if I'm going to 5:43 click it basically is asking me to use a 5:46 builder IO figma plugin to do this so 5:49 I'm going to do that I'm going to select 5:50 this page going to go here to the 5:52 plugins in Builder IO going to try to 5:56 export this into 5:58 lovable however however it's actually 6:00 going to tell me that this page is too 6:03 big right it's over 3,000 pixels and 6:05 it's it's just not going to work and 6:07 it's asking me to just export a smaller 6:10 page and actually this is not like a 6:11 huge page so we're not going to be able 6:14 to do it this way I'm going to try 6:16 something else I'm going to just export 6:18 this as an image because I can see that 6:19 I can also attach images here so I've 6:23 exported this as an image and let's see 6:26 what it can do obviously it's not it's 6:28 going to be 6:30 difficult because you know you have here 6:33 text on the images and probably it won't 6:36 be able to get the visual done right but 6:38 let's see how lovable deals with this so 6:41 I'm going to take this homepage and I'm 6:43 just going to write here develop the 6:46 attached landing 6:49 page try to stick to the original design 6:55 as close as 6:57 possible let's go ahead head it's 7:00 probably going to take a few minutes to 7:02 run the code so let's fast forward and 7:04 see what we're getting a few minutes 7:06 later all right so a few minutes in and 7:08 let's see what we're 7:09 getting um okay it's not exactly the 7:12 same colors right here we had a black 7:14 color here we got a green background it 7:17 did recreate this golf element here and 7:20 animated it which is quite nice uh the 7:23 buttons also turned them into an arrow 7:27 Arrow while there wasn't actually an 7:29 arrow 7:32 um change the bento box here okay so 7:35 there are definitely some things here 7:37 that do are not super accurate um this 7:42 is nice that we already have the um you 7:45 know the carousel the accordion working 7:49 and animating so that's actually quite 7:51 nice let's see what happens okay so we 7:54 don't have for example the image here of 7:57 Tiger Woods so let's see if we want to 8:01 upload the image so let's try to go 8:04 ahead and maybe attach the photo here 8:08 and I'm going to say rep uh use the 8:12 attached 8:14 image uh as the 8:17 profile profile photo of Tiger Woods 8:23 let's see if it would understand this 8:25 because I don't see another way to 8:27 upload an image to here if few moments 8:30 later okay so it's been like 2 minutes 8:33 and it did work and it did replace the 8:35 image but this is already something 8:36 where I'm thinking that's actually a 8:39 problem you know if in web flow I want 8:41 to replace this image I simply double 8:43 click it and you know replace it with a 8:45 different asset but here I'm going to 8:48 have to wait two minutes every time I 8:50 want to replace an asset that already is 8:53 a little bit Troublesome now let's see 8:56 for example if I want to change 9:00 the look of this button which here we 9:02 need to have this kind of like green 9:05 gradient so let's try to edit and if I 9:08 click on the button then let's see what 9:10 we have here um I do have the font 9:15 weight I can choose like if the the font 9:17 okay so I can edit the font from here 9:20 and the 9:21 margins the color does say inherent what 9:25 happens okay so this is the color of the 9:27 text I guess maybe this is the 9:30 background yeah and it doesn't support 9:32 gradients I guess yet so let's discard 9:36 this and let's try 9:38 to um basically tell them for the uh CTA 9:44 button make the 9:49 background 9:50 green 9:52 gradient like in the original design 9:56 let's see what would happen 6 and A2 9:59 hours later okay so 2 minutes later and 10:01 we did get it to change into a gradient 10:04 but I do have to say that you know 10:06 compared to in web flow I go here and I 10:09 I just have like a very simple UI for 10:12 the Coler and to to fine tune the 10:14 gradient it it's not really ideal to 10:18 tweak designs using prompts how do I get 10:21 the the exact green I want am I going to 10:23 now specified color codes doesn't seem 10:26 very very practical now one more thing 10:29 for example let's say I want to change 10:31 the hover animation right so let's say 10:34 this button I go into the hover State 10:36 here in web flow and let's say on Hover 10:39 I want to have a little bit more padding 10:41 on the sides right so we have this kind 10:44 of an interaction but let's also animate 10:47 it so in web flow I'm going to go here 10:49 into Transitions and add transitions to 10:52 the padding let's say 300 mm okay so 10:57 let's say I want to have this in 10:59 interaction so I'm going to go into 11:03 lovable and okay let's say for the CTA 11:08 button add a hover 11:11 animation which makes the 11:14 padding let's say 3x bigger the side 11:19 paddings I guess side paddings three 11:21 times 11:23 bigger H animating over I guess 300 11:28 milliseconds I don't know it's it's it's 11:31 difficult to say when you're just 11:32 writing it right in web flag just find 11:34 unit see if I like it or not it just 11:36 takes a second here let's wait now two 11:39 minutes and see what will happen three 11:41 days later okay so 2 minutes in and it 11:44 did create the animation look I really 11:47 like the fact that you can just write 11:49 what you want and it will figure it out 11:51 but it's not it takes a lot of time and 11:53 it's not a great way to fine-tune it 11:55 right if we want to make it faster if I 11:57 want to make it smaller if I want to 11:58 make it bigger now one more thing that 12:01 I'm thinking about is in web flow hey 12:03 now we need an extra page for this 12:05 website right we click add a new page 12:07 let's say we have an about page now 12:09 right about page and we can just start 12:12 bringing in content in here right into 12:15 the about page what happens in lovable 12:17 if I need to add an extra page let's do 12:21 add a new page to the website and about 12:26 page let's see what would happen three 12:28 weeks later okay I've created a new 12:31 about page with information about 12:32 forecasters so it did edit into the 12:34 navigation and I can click it and we 12:36 have a new page here with already a 12:38 little bit of an information but I guess 12:41 how do I okay so I guess I can switch 12:43 the pages from this drop down menu here 12:46 index about um okay that was pretty slow 12:51 and tedious way to create a page I 12:54 already see that while the initial build 12:56 is quite fast making sure fine-tuning 12:59 this is going to be very slow every 13:01 request I have to wait for like two 13:03 minutes and then reload the whole thing 13:05 and what I'm thinking about is I'm going 13:07 to deliver this to a client and expect 13:10 them to make changes to content using a 13:12 prompt every time they want to change 13:14 the headline or what about when we got a 13:17 lot more context like a CMS we need to 13:20 manage the content here so this is where 13:24 we are right now with lovable all right 13:27 to conclude first of all building from 13:29 scratch was pretty impressive but to be 13:31 fair WEA also has launched their own 13:33 build from scratch using an AI prompt so 13:35 that's not super unique I do think that 13:38 being able to create interactive very 13:40 difficult to develop stuff like 3D 13:42 elements and webg animation using a 13:44 prompt is amazing and I would love if 13:47 webw added something similar to that 13:50 that being said when it comes to 13:51 fine-tuning and managing assets and 13:53 content I think that this is far from 13:56 being usable for actual websites I mean 13:58 I don't see myself delivering delivering 14:00 this to a client who needs to prompt and 14:02 weigh just to replace some text and 14:03 images and it's not an ideal user 14:05 experience so I feel like lovable is 14:08 probably great for building apps but for 14:10 website and especially for complex 14:12 content reach websites it's definitely 14:14 not a replacement for web flow at the 14:17 end of the day I'm probably going to use 14:18 webflow for the main build and use 14:20 lovable just to add like custom code 14:22 effects or elements when I need them uh 14:24 no doubt this is an exciting time to be 14:27 a web designer and let me know what you 14:29 think in the comment what your verdict 14:31 is