How To Build Web Apps using V0 Claude AI Cursor AI

everyone in their second cousin is talking about cursor Ai and how AI is just making development very fast and developers are moving very fast and even normies are starting to develop applications using cursor I think people are going on two different extremes you have one side that says all these tools are completely useless and then you have another side that says all these tools will replace developers and I think both are wrong I think the middle is where the true sauce and the true knowledge is and the way I look at these tools is as

simple as AI is your co-pilot you are still in charge you are still the boss you are still the lead but AI is a great co-pilot and after playing with these tools for the last couple weeks I'm going to be sharing with you a great framework slf flow that I have that seems to be getting me good results so let's get straight into it so first things first I call this the ultimate AI framework because I am not clever with names step one I always start with uh v0 and the reason being is most of

the applications I develop are nextjs react applications so naturally I'm going to start with v0 because a v0 is great with UI components it just has this sauce where it makes uh the components look very clean very simple part mostly because it uses shat C nuui under the hood but VZ has the latest and greatest knowledge base when it comes to nextjs a claw and even cursor often times will suggest to you old practices like the pages router and stuff like that so because VZ off the bat will use nextjs bests practices and is great

with uh designing and building components I mean compared to the rest of course I'm going to start with that so I use v0 to build my UI components uh to just build the foundation of my application and then what I do is I take those UI components and I pass it to Claude AI not cursor Cloud Ai and what I tell CLA AI to do is to structure and organize my code base into a proper code into a proper gold Bas and basically what I mean is when I when you prompt v0 it's going to

probably give you one giant comp component you're going to obviously want to split that up to multiple components different pages organize them etc etc and I find claw to be great with structuring and organizing and giving me a diagram of how to structure things where to place um all the components and to give me the components so I can just copy paste them once I have that Foundation then it's time for cursor and me to do our thing and cursor I usually use for adding features of debugging and I'll be honest I haven't like I

find that cursor kind of starts to get dumb as you continue to use it especially if you're using it from scratch but I noticed I get really great results when I used v0 to build a components and I use CLA AI to structure the code base and now I have I use cursor with an already established code base with an already established context and I just seem to have been getting better results this is kind of the flow I've been working at things so instead of just telling you I'm going to show you uh we

are going to put this to the test so why don't we design something simple and then if this video gets uh good likes good comments and people let me know maybe I'll do a full tutorial on how to build a proper application so for now let's uh please build a notion style uh well I'm right here and great yo versel you need to fix v0 I'm going to add Jared on Twitter all right now the Q is done let's uh actually always be nice to your AI please build a notion style landing page with a

clean minimalistic uh look I don't know if I spelled that right but if I did praise God and if I didn't don't roast me so simple prompt let's just build a quick and easy landing page all right so my landing page has started so we have AC ink we have a nice header and then we have some features but this isn't this is too little uh add a tested monal section uh with hover animation so that when I hover over it it nicely animates I I don't even know what type of Animation I'm just let's

see if it comes up with something slick so again this is this is how this is where I start my applications especially if I'm building on nextjs um I'm going to start with v0 cuz VZ again can get the components right can get the components looking right and it's just a great base to start off of right it's not your finished application it's not the perfect application there still needs human human intervention but you can move a lot faster with this all right so our testimonial section has been added and I like that I like

that animation okay we have a testimonial section we have a feature section and then what else should we have um add um CTA uh after the testimonial section with a button that says uh get started oh I forgot T get started all right so it added my call to action but there's one more thing I want to fix I want to add an image in the in the hero section add an image in the hero section below the enter your email input and button I just feel like an image underneath would be great this is

starting to look good like I ain't going to lie this is this is just a couple prompts I ain't even give it design tips yet this this is starting to look good so now here's some things I would do I would say for the testimonial card please make them look more shats and ues make them look modern with that minimalistic feel but it also feels like a premium startup now I'll be honest all that stuff that I wrote I actually don't really know what it means but it felt right and let's see if v0 can

capture my thoughts and how like what I'm trying to say now I will say I don't like how it's handling uh light mode and dark mode and I would not be using this so this is something I would remove from the code or I'd even prompt it to remove cuz I'd be using the theme provider to handle that you know what much better much better again I if I gave it more specifics like make the roundness this and all that type of stuff it would but for me this is a great base this is something

I could get started with so what I'm going to do is I'm going to click on code I'm going to copy this code and then I'm going to go to cloud and I'm going to say please organize this code into separate separate components did I spell separate wrong man separate components um separate components this is a nextjs application please use nextjs 14 standards not not the pages router but app router remember app router and then give me the file the codebase SL file structure and give me the components to copy and paste I'll be honestly

my prompting skills suck but hey I'm getting a job done aren't I so let's hit enter and this is where CLA shines in my opinion so again gives me a nice code structure wait I'm going to stop it cuz it's doing uh TS we don't do that uh so what I'm going to do is I'm going to say forgot to mention it's typescript buddy all right so now we're going to let it cook again perfect so look what it's doing give me a nice folder structure so components header hero feature testimonial CTA footer right so

I'm getting the the folder structure and I'm also getting the components looks like I have my file structure and then I have my components it didn't give me my types finish the components sometimes it'll just like Tire I'll be like oh I've reach the limit but then all you have to do is just say finish the components so what I'm going to do is I have have uh next CH application here we are using uh cursor right so if I do command shift K you see the composer there so what I'm going to do is

I'm going to tell composer create a file structure uh structure as follows and just create the files with boiler PL I will put the code in then what I'll do is just paste that and then hit enter and let's see composer cook what I'm going to do is okay all the stuff's done I'm going to hit accept Okay so composer literally created the file structure for me with just random boiler pay code so what I'm going to do now is I am going to go to CL Cloud go on my layout copy layout. TSX paste

paste go on page. TSX copy and then I'm going to paste and I'm going to keep doing this so I don't want you guys to watch me copy paste all so I'm going to copy paste all these components I copy pasted all over the code I did yarn uh to install the packages now let's say yarn Dev and let's see if this is working oops okay so page works and for the most part looks good the header is just weird the heroes okay the feature section's okay the testimonial section's okay and the CTA just needs

uh actually no it's okay technically that's how it's supposed to look but the hero is weird so now let's fix the sorry the header uh let me do command shift L and say the header looks weird and is not centered please fix and now if mys Subs are correct I believe cursor will take care of us so all I do is apply this to the entire file hit accept refresh no it did not fix it so what I'll do is say can you remove the so what I'm going to do is because it did not

fix it I'm going to to give it a screenshot and then I'm going to copy this paste it here and say look at the header navbar this is how it looks please fix it all right let's see if these changes work hit accept Okay so cursor still hasn't fixed it so this is where as the lead pilot I step in and I just paste that code and that should fix it so now I have this magnificent landing page that I can use so understand this AI isn't perfect I'm tired of people thinking that this is

going to replace developers no but this is a tool that we can sort of use to off youate certain tasks things maybe there are things we don't like I know a lot of devs don't like working on UI a lot of devs don't don't like working on front Ed a lot of devs don't like working on different things right and I feel like AI can help us speed up that process right I don't even think we've got to a point where someone who doesn't have a developer mind can use these tools efficiently you still need

a developer mind everyone building like a simple to-do list and stuff like that sure you can do that but we haven't got to the point where you can use AI without a developer mind to build uh large code bases big applications that can do like you know serious things that can solve serious problems nevertheless that doesn't mean we shouldn't learn them hope my simple yet very powerful framework I'm just joking but I hope this framework helps this is what I follow I use v0 to build my UI components build my Foundation Cloud AI Cloud AI

to structure and organize my code base and then it's me and cursor knocking down some code knocking down some bugs adding some features so that's pretty much it for this video hopefully this you know makes sense hopefully you understand this if you have any questions let me know in the comments down below if you want to see more AI content let me know in the comments down below thank you so much for watching I'll see you in the next one peace my future no code Developers