Can AI Replace Software Engineers?! I Tested Lovable AI...

0:00 welcome to app design tipss I have my 0:01 best friend Garrett here and we're 0:03 working on an amazing project and I want 0:05 to get his first reaction to lovable 0:12 [Music] 0:14 dodev so this last night was the first 0:18 time that I've tried this and it was 0:19 like one of those tools remember chat 0:21 GPT when you just use it and you're like 0:23 whoa like people tell you about it and 0:25 you're like okay I think that's cool but 0:27 then you use it well there's a lot of 0:30 web Builders out there there's a lot of 0:31 app Builders out there and one of the 0:34 problems of these web and app Builders 0:36 is their limitations of uh you know 0:39 there's Squarespace and there's Wix and 0:41 there's different Builders out there 0:42 that allow people who don't know how to 0:44 code to do quite a bit of stuff but then 0:47 there's like the hardcore programmers 0:49 that are like no that stuff like I'm not 0:51 going to touch that stuff right and this 0:53 is a lot of stuff that gives even the 0:55 programmer skepticism like we can just 0:57 build that so this claim is idea to app 1:02 in 1:03 seconds so it's an app builder from text 1:06 prompts who is it for it's for product 1:09 teams so non-technical members to code 1:12 that's me Product designers bringing 1:14 your um design ideas to life Founders 1:17 and that's me and doo preneurs not solar 1:21 preneurs um human software Engineers so 1:25 this is really cool what I'm going to 1:26 try to do um is write a prompt based on 1:30 the app that we're trying to create 1:32 let's try it here so I want to do a a 1:35 group-based social media app home screen 1:37 that shows a feed of posts at the top I 1:40 want a search bar and I want a pill 1:41 style tags that say businesses products 1:43 Services events and the footer bar 1:46 should include a home icon groups 1:48 notifications and an avatar no text in 1:50 the footer just an icon so this is a 1:54 first impression first reaction I asked 1:56 Garrett to come down and be a part of a 1:58 video that he didn't even know what this 2:00 video is going to be idea 2:03 jumping this is it that's like exactly 2:07 what you would yeah that's basically 2:09 what we did right look it even has a 2:11 like comment and share for each post so 2:13 now we can see that's I want the active 2:16 icons to be purplish blue and I want to 2:18 include a new page for groups the groups 2:20 page will have similar search and will 2:22 have tags that are based on a typically 2:25 person's interest or topic the goal is 2:27 to tap on these categories to find the 2:29 type of groups the first tag will be my 2:31 groups and others will be topics or 2:33 interests and I want you to include 2:35 icons for these below the tags I want 2:37 you to come up with a list of fake 2:39 examples of groups that one would tap on 2:40 to visit that group and so notice I 2:43 didn't say tie it to the groups icon or 2:45 different things I mean that's what AI 2:47 does is you know I think it'll give you 2:51 I think it'll give you some guidance 2:52 saying I'm going to attach it to this to 2:54 make sure that it can but we all know 2:57 with AI it makes mistakes and then you 2:59 have to correct it too so yeah so one of 3:02 the issues that we have as co-founders 3:04 and working together too is Garrett has 3:06 an idea or I have an idea and it's 3:07 always well let you know I I design 3:10 those things in figma and so we have to 3:12 wait for the design in figma to bring it 3:14 to development but this can Bridge a lot 3:16 of that gap for just small things to 3:18 even communicate with the developers to 3:20 to say this is more what we're thinking 3:23 because the developers already have some 3:25 UI elements that they can take if you 3:27 can just show them kind of the user 3:29 experience notice how that's purple 3:31 right in front of our eyes so so I mean 3:34 these don't work and we can we can set 3:36 them to work if that's what we queue up 3:37 but like everything's pretty active 3:39 already so now we can go here 3:43 boom Isn't that cool yeah so so members 3:47 technology Fitness education my groups 3:51 and I wonder about functionality so in 3:54 the groups page can we have the top tags 3:57 filter the list based on its category 3:59 also I want you to include the text 4:00 below the group title number of 4:01 businesses and events in that group show 4:03 example group images in this list as 4:06 well I don't know if it'll do that but 4:10 so maybe well like either generate 4:13 generate all these 4:15 icons so if it generates images or if it 4:18 finds like some stock library and just 4:20 pulls it from because that would take a 4:22 lot of credits to generate the images 4:25 there yeah so you know I definitely 4:27 think it would help like look images and 4:29 it was looks like that looks like it's 4:31 not generated it's pulling from a stock 4:34 some stock stuff but I mean this this is 4:37 really Co so look at this where it's cut 4:40 off like where doesn't hit the edge so I 4:42 can say on the scrollable tags it 4:45 doesn't fill the entire width of the 4:47 screen it has the same margin as the 4:49 list of groups I would like the tags to 4:51 fall off the edges of the page but still 4:53 stop at the end with a margin so look it 4:56 falls off the edge now and it hits it 4:59 hits with that margin like I 5:01 wanted so like it fixes those small 5:03 things and then I'll say I want the list 5:06 of groups to be EDG to Edge too and 5:08 rather than being boxes I want them to 5:10 just have a horizontal line separating 5:12 them so it's just a little bit cleaner 5:14 interface so by this point for the free 5:17 model it would say hey did you love this 5:19 you've been using the free now pay for 5:21 it so like I got to this last night and 5:24 then with a few prompts like that and 5:26 very quickly it says pay for this but 5:29 you know I just bar paid for it cuz I 5:30 know I'm going to use this all the time 5:32 is this exciting enough to rip you out 5:34 of your meeting and to say let's make a 5:36 movie this is really really cool stuff 5:39 yeah this is incredible like when 5:40 somebody tells you about something like 5:42 this so the reason why so look at that 5:43 the reason why I learned like so I met 5:46 with a a business associate last night 5:49 and I was talking with his son about a 5:52 new business idea that he had so his 5:53 son's uh 22 years old he has a certain 5:56 idea so he's not a developer not a 5:58 programmer so so even for him he's 6:01 looking and saying how do I get 6:03 something to reality as as close as 6:05 possible so he's the one that told me 6:08 have you used lovable and usually when 6:09 people tell you about something like 6:11 this then you're like yeah yeah but it's 6:13 limited like all the there's a bunch of 6:15 app Builders out there that can create 6:17 apps like if you own a restaurant and 6:18 you want to have a menu in an app like 6:20 that's great in a in a 6:22 form but something like this like just 6:25 to have these things generated so 6:27 notification is a 404 and that's 6:30 that's expected yeah and so we might so 6:34 I'm going to go back into the home and 6:36 say now let's focus on the homepage in 6:39 addition to the feed having posts we 6:40 want the feed to also show a carousel of 6:42 trending products a few events and a 6:44 carousel of businesses that will help 6:46 with spring cleaning generate example 6:48 copy and images for all posts or 6:51 activity in the feed also add a 6:53 sponsored ad in the feed that's Prett 6:55 neat that looks just like Google 7:00 so what if you said that looks just like 7:01 Google make it look more like 7:04 Amazon I wonder if it has some of that 7:07 IP stuff like this is obviously so AI 7:11 like this uses UI style kits they have 7:13 like all these style kits baked in um 7:16 you know something like this where we we 7:18 could say here's this hiccup or this you 7:20 know this isn't horizontally 7:22 scrollable um but this is really cool so 7:25 we have spring cleaning services where's 7:27 the ad did you see the ad so I'm going 7:30 to hit 7:31 select okay cool um I want all boxes to 7:35 spam the full width of the screen to 7:37 look less like a box and more like 7:38 horizontal lined lineation make the 7:41 entire UI of this thing look more like 7:42 Reddit so I'm just going to try that and 7:45 just just see so that's that's what I 7:48 wanted now we go and 7:55 attach make the header look like this Lo 7:58 so is it going to make it 8:03 loading I don't know so here's the thing 8:05 is this is like First Impressions from 8:07 non developers but what thing one thing 8:09 that would be nice is to give this to 8:11 the dev team and get their reaction of 8:16 like 8:18 wow that is really 8:21 cool so they can't really see the 8:24 picture that we have there it is and 8:27 look like it just like Incorporated like 8:29 I think that'll look better like right 8:31 in there and it did five minutes are we 8:33 going to have a mass lay 8:35 off no we've got an awesome you're fired 8:38 you're fired you're fired who knows how 8:40 to 8:41 prompt who a prompt you can 8:45 stay I want a red orange button on all 8:49 the pages that is sticky at the bottom 8:50 right just above the footer it needs to 8:52 have a plus button and when you tap it 8:54 it needs to have a slideup card that 8:55 says new post add your business add 8:58 products new event and have icons to go 9:01 along with that the new post needs to 9:03 pull up a new screen that allows people 9:04 to write a post add a photo tag products 9:07 share events Etc also I want something 9:10 below the categories on the homepage to 9:12 say create new post or whatever social 9:14 media apps tell you to do to get a new 9:16 post started 9:18 go so you're doing you're having it do 9:20 it in two different bounced around to 9:22 say like let's do the universal one that 9:25 has a slideup card that creates a new 9:27 page and then in this other page do this 9:37 it didn't do this but wait wait is it 9:41 done I think it's done 9:45 oh that's so cool oh man Okay now click 9:48 on new post what's on your mind okay so 9:51 it did it did your second part where you 9:55 tried to bounce it around it did it in 9:56 there instead of oh my my gosh in this 10:01 might this might even control my UI like 10:05 you know you're going to create a UI in 10:07 here so two pages we're asking to gener 10:10 but I mean anybody that has any idea 10:14 that doesn't have a team around them 10:15 like even to prototype this like imagine 10:17 going to YC combinator to talk about an 10:21 idea that you haven't coded you have 10:22 don't have a development team around yet 10:25 to have that idea into like what was 10:28 that planet of the app apps on Apple TV 10:31 where they had like a escalator pitch 10:33 they got on an elevator or escalator in 10:35 30 seconds they had to pitch their 10:38 product and they had a screen where they 10:39 could show things but all the panel 10:42 could say no no no go and if like the 10:45 majority of them said go or I think if 10:47 one of them said go they can then spend 10:49 three minutes talking about the rest 10:51 that they all said no it's like get out 10:52 of here but this like what can you pitch 10:55 in 30 seconds from something like this 10:57 this closer to chest or on everybody in 11:00 the world about it because no I don't 11:02 look I know but it's like that you 11:05 know so is that powerful tool like this 11:08 is a good start and this is so here's 11:12 what I want to do like categories um on 11:16 the shopping page it needs to have a 11:17 close button at the top to close and go 11:19 back to the home I also really like the 11:21 UI of categories but where it says 11:23 categories I want it to actually list 11:25 one of the categories and then show four 11:27 products in a 2 by two grid want three 11:29 more 2x two grids that I can scroll 11:31 horizontally so I can see a grid of four 11:34 Electronics then four Home and Garden 11:36 then four fashion Etc ocracy need need 11:40 app 11:41 now can you create a social media app 11:44 that has products and goods and services 11:46 that can be serviced by the group 11:47 members 11:49 [Laughter] 11:53 yeah it did 11:55 it some images that are broken but yeah 11:58 it did it so now we'll say now I want 12:01 you to create a form to add a new 12:02 business using the orange plus button 12:04 and the add your business option and I 12:05 want the fields to be dynamic so if you 12:07 pick a certain category of business it 12:08 will ask questions relevant to that 12:10 category like subcategory also needs to 12:12 allow business owners to add open days 12:14 and hours the new form I like how it's a 12:17 little bit formless for creating a new 12:19 post so like this for example I like 12:22 that it's like a whole page instead of 12:24 one box with this 12:27 stuff I think that's pretty cool like 12:29 yeah tag a product and yeah so I'm gonna 12:32 keep going but um add your 12:36 business oh 12:39 wow that's not what see it's like I 12:42 don't want to use that many credits but 12:44 fine dining right retail but you can 12:46 probably 12:50 Electronics look at that 12:59 anyways so the whole point of this thing 13:02 is to show within the 30 minutes like 13:04 what you can create with something like 13:06 this and I think we've done our job I 13:09 what do you think about it I think we 13:10 just erased like six months of work and 13:13 did it in 30 minutes and and the reason 13:15 why you say that just to give developers 13:19 credit is this is all front end and 13:22 beauty and it has some like Skin Deep 13:24 functionality on there but nothing is 13:27 like and to the velers credit I think 13:30 honestly if we if we buil all the back 13:32 end and the functionality that they've 13:34 spent so long working on and if we gave 13:36 them this and said make that exact same 13:38 functionality look like this they can go 13:41 and just recraft that like they could 13:43 take this and plug in the functionality 13:45 and so this is sometimes people say we 13:47 need to nail down the UI and get a 13:49 template in a library for the UI because 13:51 that's going to save us loads of time 13:54 and development in apps like this is 13:56 like an iceberg where the UI is what you 13:59 see and it's what looks like it's the 14:01 biggest but there's a whole another um 14:04 under thewater piece of the iceberg that 14:06 people don't understand and so with this 14:09 what I haven't seen is I don't think 14:11 there's ever going to be a way to get to 14:13 the functionality of showing the 14:15 database of the products and like what 14:17 where it's actually being stored when 14:19 you add the form and things like this 14:22 and so this is something that if the 14:25 question is can the developers use 14:27 pieces like this to if we said we want 14:30 it to look exactly like this would they 14:33 want to recreate the entire thing and 14:35 flutter and do that or could they take 14:38 this and plug into it and so I think 14:42 it's really important to understand this 14:44 isn't a complete thing of what you get 14:46 unless it's like a brochure website or a 14:47 brochure app at this point we've done 14:50 enough we've seen enough and I wanted to 14:52 get the developers reaction of what an 14:55 app like this could do and how they feel 14:57 like they could use it so we're going to 14:59 go into the development room and get 15:00 their input hey guys Garrett and I just 15:02 finished the 15:04 app 15:06 I'm yeah we made 15:09 it so we can all just go home right we 15:11 might have some Mass layoffs after this 15:13 but we'll we let us know if we still 15:15 [Laughter] 15:18 need count our lines of 15:21 cod yeah we did it in 200 lines you guys 15:24 did it in 15:25 200,000 we want you guys' feedback on 15:27 because usually like hey check out 15:29 Squarespace they can do and then the 15:31 developers are like no I don't want 15:33 Squarespace right or whatever app 15:35 builders that like app Builders have 15:37 been out there for five or 10 years and 15:39 no it's lovable lovable. so what I want 15:43 you guys to do is peek into this and 15:45 tell me why it doesn't work like what so 15:48 so the biggest thing that I think that 15:50 can come out of this is we can have more 15:52 fleshed out ideas to to give you we and 15:56 things like this this can actually be 15:58 exported into igma right after this so 16:00 if we take things bring it into figma 16:02 and then style it our own way so at 16:04 least we have that there there is a 16:06 purpose for something like this but we 16:08 want to know the developers limits or 16:10 their resistance or their reaction to 16:12 What Happens so I went on to demo this 16:14 with the dev team and show what we 16:16 output so show what the groups look like 16:18 what a home could look like um I just 16:21 added a prompt uh make the entire thing 16:23 look like Amazon just to see what it 16:25 would do um but as I went through and 16:27 just demoed all the inter 16:29 wanted to get their first impressions 16:31 and what that was so this is where we're 16:33 at within this point of the conversation 16:35 first 16:38 thoughts yeah 16:41 that's a code it's like if it's like a 16:43 figma thing that's wired up that's 16:45 awesome for the design part of it but 16:48 see I told you they'd say 16:51 that it's like transplanting a heart 16:53 from a pig to a human just very curious 16:56 about just if you look at the code and 16:58 then seeing how the or the stuff are 17:00 organized because react widgets are very 17:03 similar to Dart widgets it's a it's a 17:04 different or the flutter widgets it's a 17:06 different language so you'd have to do 17:08 like you'd have to transfer it over but 17:10 you could see the structure and see how 17:12 things are laid out and stuff like that 17:13 you know I mean so thing is this is an 17:16 AI I'm pretty sure if you just asked it 17:18 specifically hey build this in flutter 17:21 then it would be more 17:23 directly translate yeah you could copy 17:26 and paste it and this in phot one away 17:30 very least I'm I don't doubt you could 17:33 copy and paste this into and say turn 17:35 this into phot really so this would 17:37 still be very helpful 17:39 if there's a lot of times where like the 17:41 first thing I do when building a wiget 17:44 is I ask it ask chat VT to that's okay 17:47 chat GPT could translate it yeah I would 17:49 be shocked if it couldn't it depends on 17:52 where we're working yeah right so if you 17:54 say reskin the entire app that means we 17:56 don't do this because we just just take 17:59 this as a reference point and then we go 18:00 and change what we have right but if you 18:02 say make this entire new area of the 18:04 applic don't my hand then this is a very 18:06 good place to start okay right and then 18:09 you take that and then you so if you 18:11 think about it in terms of layers the 18:12 application is in layers this is the 18:14 very surface level right so it looks 18:17 really really cool but it's like you 18:19 know it's like a nice wrapped present 18:22 that there's nothing Insight right but 18:24 it still is I it's still useful it's 18:25 still good but you still have to build 18:27 all those other layers right we got 18:28 connect this to our data we have to 18:30 connect it to our systems so here's a 18:32 question for you Matthew is let's say we 18:34 go back to the website and the homepage 18:38 I want to have some marketing pages and 18:40 so I would like to use this to create a 18:42 marketing page of you know why our app 18:45 is so cool and who would use it and all 18:46 that stuff but I might even want at the 18:50 very top just a search button that dives 18:54 in and we can narrow this initially to 18:56 say search our business businesses and 18:59 our products just for now and so then 19:02 show a view of what a business and a 19:04 product would look like and we can have 19:06 this web version as far as the front end 19:08 version do whatever this pulls up and 19:11 then could we attach the database to 19:13 this to actually pull up our inventory 19:15 of stuff you could would that be helpful 19:19 just it wouldn't be same UI like but 19:24 this could really help get some things 19:25 there on the web faster to connect those 19:27 pieces as people going from the web to 19:29 the app would it be worth betting on or 19:31 do you want to just do it all from 19:32 scratch so so this would be really 19:36 really helpful for those marketing Pages 19:39 M where you don't have to connect it to 19:41 anything yeah but when you start 19:44 connecting it to things you're going to 19:45 have to dissect the whole thing you'll 19:48 probably leave The Styling and stuff in 19:49 place but you'll have to dissect the 19:51 whole thing and connect it to what we 19:53 have yeah and so would it be helpful to 19:55 keep the styling of what it gives for 19:57 you to still make that like take that 20:00 source code the front and the styling 20:03 and then you kind of tie it into the 20:05 data and make sure the search works 20:07 because I imagine even the marketing 20:08 page everything can be pretty static on 20:11 there except just the search button so 20:13 just type search and in fact the search 20:16 can be kind of static if it's not like 20:19 if you search and it doesn't pull up a 20:21 autop populated whatever you hit search 20:23 and then it brings it to another 20:26 interface that queries that 20:28 but one one area that this would shine 20:31 is you could get this to build just 20:34 plain HTML and JavaScript and CSS and 20:37 then you have server rendered code by 20:39 default right and then you don't have to 20:41 because the thing I hate more than just 20:43 about anything is CSS because it's just 20:45 a nightmare to deal with but this is 20:46 really really good process so things 20:49 like that where it's like I I I don't 20:51 want to do anything fancy I don't want 20:52 any plugins because it's going to slow 20:53 on my website I just want to do straight 20:56 left JavaScript but I need Auto complet 20:58 or I need a reactive button or I need 21:00 this thing to be active and then this 21:02 can build it so that we don't have to 21:04 you know what I mean like if I was going 21:05 to start doing the website today I would 21:08 I would do it straight up go plus CSS 21:11 and JavaScript and then just tell tell 21:15 this to start me give me the page and 21:17 then I'm going to tweak a little bit and 21:18 then give me the next page and I'm going 21:19 to tweak a little bit because like for 21:21 static Pages that's where it will really 21:23 shine when you want when you want a lot 21:25 of active elements then it it starts to 21:26 slow down because now we have to Factory 21:28 into something that is manageable but if 21:31 it's like like Amazon if you go to 21:33 Amazon 99% of that page is static right 21:36 there's almost nothing that reacts to 21:38 your touch if I went to chat DPT and I 21:40 said I if I literally copy this and I 21:42 paste this image into chat DPT and I say 21:44 make this page but only use HTML 21:46 JavaScript and CSS i' would be very 21:49 surprised if it couldn't do that right 21:52 so you're saying there's a 21:55 chance yeah this was cool to explore 21:57 this is the first time Garrett seen I 21:58 just heard about last night and like 21:59 tried it for 20 minutes but it's kind of 22:02 a cool app I hope you enjoyed this video 22:04 If you haven't tried lovable. deev yet 22:06 just check it out really awesome just 22:08 starting with the prompt and just seeing 22:09 what you get and if you like this video 22:11 and want to see future videos like that 22:12 go ahead and subscribe and hit that Bell 22:13 icon thank you