Transcription
Hello, I'm Mike. In this video, I'm going to look at creating a landing page using the top three AI no-code tools. I want to find out how quick it is. So the speed of these tools, the ease of using them, also the design capability—how good does the landing page look—and the functionality as well? Does the landing page actually work? And most importantly, deployment, because there's no point in creating something amazing and beautiful if you can't get it out there on the internet.
So here I have my trusty iPhone with a stopwatch so I can time each tool as it goes along. By the way, if you don't want to get too technical, we'll look at a simple solution for deploying a landing page with ease that integrates with most email list providers at the end of the video. Stick around for that. But first of all, let's hop in with our first contender and the one I'm using all the time: Cursor.
Here is Cursor. It's very dark, especially when it's on dark mode. I'm using Cursor 0.48.1, as of late March 2025. Our second contender will be Windsurf. Oh, it's a little bit brighter. And as of this video, I'm using Windsurf version 1.5.8. And finally, we'll hop into a web browser for Lovable. Yes, idea to app in seconds. This possibly could be the most user-friendly AI no-code tool to create our landing page today. So there you go. Many of you are looking for Cursor AI alternatives. It's the one I use, but I'm open to being surprised during this video.
Now, the only thing I'll do with the tools that allow it is to change the model to the maximum model available. In Cursor, that will be Claude 3.7 Max, which costs an extra $0.05 per request. And in the case of Windsurf, it will be Claude 3.7 Sonnet thinking, which costs 1.25 credits. So let's start vibe coding my landing page.
Create a landing page for Creator Magic, a place that covers the latest AI tools and news with the spotlight on AI coding. The page should captivate visitors and prompt them to sign up for email updates by submitting their name and email address. Use a magic theme. The design must be responsive, visually stunning, and features subtle animations to amplify the magical vibe. I've got my magic timer at the ready. So let's set the agent in Cursor going on this task straight away.
And there you go. Cursor is done in five minutes and 42 seconds on the clock. Right there. Five minutes and 42 seconds. So let's click through and see what Cursor has built. And it's an error. Not a great start. But let's copy this error and we'll paste it into Cursor and restart the clock to fix the error.
Okay. Six minutes and 17 seconds. We've got an error popping up here. Let's have a look. And...yes. Still an error here. Oh, we're going to need to fix this. This isn't a great start. Maybe Cursor is having a bad day here. I'll post this new error here. And I'll also give the terminal context as well, so that Cursor has absolutely everything that it can do to fix the error.
Now, bear in mind here, as well as my $16 a month for access to Cursor, I'm also paying $0.05 per call to Claude 3.7 Sonnet Max. So far this has cost me $0.15. And we're getting an error with npm run dev with no turbo pack. So let me just give it a chance by doing npm run dev on its own and clicking through. No errors so far, so that's a good sign. And we're getting to...no. Still errors, still errors, errors everywhere. So I'm pasting in this error over here. I'll also paste in the error from running the node Turbo pack version as well, and see if it can fix from all of this.
Now, bear in mind this is getting quite expensive for me as I'm now heading up to $0.20 paid and just a landing page with an error message at the moment. Okay, this is looking a lot more positive. And we have a clock timer now. Full Cursor at seven minutes and 48 seconds to build my landing page. Let's click. And I'm losing the faith. But...oh, yes, it works...kinda. That's weird. AIP magic. Discover the magic of AI-powered Creation, your ultimate resource for the latest AI tools and news, and some kind of weird AI code generator going on here. This is like glitchy as heck.
Now, don't get me wrong, Cursor is my main daily driver for creating AI-coded tools, web apps, and stuff like that. And I am seriously surprised at the results I've got here. It's the first time I've ever used the max version of Claude 3.7. It...maybe I shouldn't have chosen that, but hey, this is what I've ended up with, so it's not a great start in terms of designing something with speed at seven minutes, 48 seconds in total, and I kind of feel like I'm almost giving up now on designing this landing page with Cursor. So let's move on to Windsurf.
Okay. Over here in Windsurf, we've got a fresh slate. So let's run that prompt. And I am indeed timing this with my calculator. So I've got five seconds running and there we go. Claude 3.7 Sonnet is thinking inside Windsurf. And hopefully it's going ahead. Yes, it's going ahead, analyzing what's already in the project and starting to create. Well, that's interesting. It's starting off with a Readme file. Let's see what comes up next. It's keeping things a little simpler than 3.7 Sonnet Max inside Cursor. That may well have been Cursor's downfall. And here we go. It seems to have created the index. Now it's moving on and generating some more files and thinking through each step as it goes.
Now, one thing worth noting here, in fairness to Cursor, I did switch away from Claude 3.7 Sonnet Max to the auto mode to see if that was the problem, and it would create something amazing. On auto mode, it created an index HTML file and then started working on the CSS styling, but then again got completely stuck for about five minutes on the CSS styling and couldn't proceed. I don't know what's up. And look at that. In three minutes and 37 seconds, less than half the time of Cursor, we have a landing page from Windsurf. So let's take a brief look. And I like the way that it's actually loaded the preview inside my code editor, not taking me out to a separate Chrome tab.
So we've got Creator Magic. We've got a couple of menu things here. We've got a signup button with nice animations, floating bubbles here. Discover the magic of AI coding. Join the magic. Explore the features. Yes, about creative magic. This is...this is not too bad. I mean, the design for me and the colors here are clashing and everything. And I'm not so sure about "joining the magic circle." I think I might get copyright claims there. And obviously, it's got the landing opt-in form here. So this is okay. This is not bad. It's not my kind of style. I would have made it darker, but you know what? For creating something in half the time that doesn't have any errors, and with Windsurf costing $15 a month so far, I'm feeling pretty good about what I got out in a one-shot prompt.
Let's move over to Lovable. Okay, Lovable is a completely web-based AI coder. So again, I've got exactly the same prompt, and I'm just going to hit enter and see what Lovable comes up with. One thing I'll say is it seems much more user-friendly than Cursor or Windsurf, which are more technically oriented, and it's already spinning up a preview. Now, this, of course, does take a little time at first to get going, but of course, Lovable is up and away and creating features, planning things out, and already starting to create the files in front of my eyes. It just seems a little more intuitive than the other two AI coding tools that I've used. But hey, we have yet to see exactly how Lovable is going to turn out in terms of what it produces for us.
Okay, it's creating the CSS as well, which is the styling of the page. This is all really rather fast. And again, we're creating multiple files. There's a header file going down here. And one thing to note with Lovable is there's no way to select which AI model you use. I believe they just use the latest models such as Claude 3.7 Sonnet. Still whirring away here. It does seem to be super fast at the rate of coding, much faster than the other tools I was using, and it's only just gone over a minute in terms of duration right now. There we go. And it's done. It is there. And look at that. On the clock: one minute and 51 seconds. The fastest AI coding tool by far.
And again, I got to say, actually, I'm liking this Creator Magic. It's got similar kinds of menus as Windsurf. Made a subscribe here. Unlock the magic of AI-powered creation. This is good. This is nice. I think this design is slightly better than what Windsurf came up with, but there's not much in it. I'm not sure about this exclamation mark in a triangle next to "magic awaits," but we do indeed have an opt-in form here to put our email address. And with little guidance in my initial prompt, I think this is probably the best-looking and cleanest of the pages so far.
So bear in mind, so far, Lovable is costing $20 a month, so arguably it's the most expensive of the bunch. But also, it's the fastest. And in my opinion, so far, the cleanest-looking in terms of designs. So now that we've looked at the ranking on speed, we've also looked at ease of use and the kind of designs that come out once we use these AI coding tools. What about the functionality? What about actually getting those email addresses recorded? Let's have a look at Lovable.
And first and foremost, it's come straight back after designing this AI landing page and said, "If you want to store email sign-ups, you can use the Supabase menu on the top right to connect your project to Supabase." So Lovable is already guiding me in the right direction to get these email addresses stored, which is really cool. So I'm going to try it now and see just how easy this is to do. Now it's taking me to my Supabase area where I can create a new project, add in a super strong password, and create that project. Okay. And already Lovable can see that I just created that Supabase. So let's click connect. Okay. Supabase is now connected. So it was really that easy. Just a few clicks to get a database connected to my Lovable landing page. I set up Supabase and connect my email opt-in form to it so that the username and email go into my database. Okay, it's asking me to authenticate with Supabase. And it says now that those commands have been executed, I'll update the newsletter form so that it will work with your Supabase database. Very cool stuff indeed. So again, over here, I'm going to test this out and see what happens. Join the magic. And then hopefully a quick refresh. And yes, I can see that Mike, with my email and the created-at timestamp and unique user ID, all stored in my Supabase. So a really slick integration there from Lovable in terms of designing a great landing page, using AI, and also getting that data into a database really, really quickly.
Now, I want to test my Windsurf landing page. I want to make sure that when someone types in their name and email on the landing page, it's stored somewhere in the database. Can you set that up for me, please? Okay, I can see already from the text here. It's creating a MongoDB database and it's handling all of that for me. But we'll find out in just a moment just how well that works out. Okay. And it seems to be done already. And what it's told me is that I need to install MongoDB on my local machine. So in this case, on my Mac, and it's giving me the brew commands to install Mongo directly on my Mac and then get it all up and running with node, which is running this landing page, and start it all. Now that's a little more complex than Lovable made it, with the slick and direct integration to Supabase.
And I should say at this stage I've got absolutely no preference with AI coding tools. In fact, I started this video thinking I use Cursor daily. This is going to be the tool to absolutely smash it, but it turns out that Cursor really didn't perform very well at this simple task. Windsurf is, well, doing a lot, but making it much more technical and complicated for me, and Lovable seems to make it pretty straightforward to get a nice-looking landing page integrated with Supabase, quick.
So I think there is one more test with creating a landing page with AI no-code tools, and that's deployments—getting it out on the web so people can actually use it—and it's not just a dream running locally on your computer. First of all, I'm going to head into Windsurf and try that here. Can you deploy this landing page for me on a website so people can access it? And we'll run that command and see what Windsurf is going to do? Okay. It says there are several options, such as Netlify or GitHub pages for front end and separate backends like Heroku or Render. It's mentioning lots of stuff. It's continuing to set up my database as well in the background. Okay. Now I can see it's just created a deployment file here, which is like a readme file, giving me instructions on how to get this deployed to the web myself. And I think it is just about done. It's just doing a little bit more and trying to follow up on things. But if I accept this and read it step by step, okay, so I need to sign up for Netlify, I need to sign up for Heroku, and I need a database on MongoDB, the free tier. It's told me very clearly what I need to do, and it's given me step by step. But this is a lot of command-line stuff. This is not fully automated for me. I need to be really technically capable to get this online because I need a front end, a back end, and also a database. My head is starting to spin using Windsurf.
Going back to Lovable, let's see if it's Lovable by name and by nature. Now you'll see over here I've got a publish button. So this looks good. And it's already created me like a custom domain. And I can also go ahead and connect a custom domain name if I have one. So that's good to know. But I'm just going to hit the publish button and see how well this works. It's going to maybe take a couple of seconds. And there you go. It says, "Project Updated. The project has been published." So if I click this now into a new window, I can see at this URL it has actually gone ahead and straightaway deployed my landing page with a working opt-in form that connects to a database. I got a site. I'm actually blown away by Lovable, and it's not my daily driver. I haven't really used it that much before, apart from a few other videos where I did a landing page for the Creator Magic community that also came out really nice. But I got to say, the experience of one prompt to make the page, one prompt to connect the database, and one button to deploy it to the web is pretty cool stuff.
Great stuff from the Lovable team on this. Windsurf: technical. And if you're technical like me and you like to dig deep into code and come online, that might be good. In fact, after making this video and trying this experiment myself, I feel like I'm spending more time than I need to, and I might need to seriously consider Windsurf in the future. I'd really be interested to hear what you think in the comments down below. Was this a one-off? Did I do something glaringly wrong? If I did, point out my mistake and let me know so I can fix it and get it better next time? Just like you, I'm a human and I get things wrong some of the time. I'm not an AI. That's perfect. Although if I was perfect, why did it mess up so many times? I don't know.
Okay, now let's check out something really cool that adds marketing and lead generation abilities to your website, however you built it. Over here in Zapier, I'm going to show you how interfaces can complement your...I built a website with powerful marketing automation capabilities. Let's go ahead and spin up a webinar RSVP landing page that maintains our existing styling while adding some robust lead generation abilities. First, we'll start with text and add in header and subtitle. That was really easy. And now we can go and click here to add another component. And we'll choose the form right here. And this can then be attached to a Zapier table. Now we're going to create a brand new table to attach it to. And by default, it asks only for email address. But we can add in a new field and we'll go ahead and call that "name" and make sure that is added to our form. Now we've got the email and name required. And you'll see right here at this web address our form is instantly live, ready to collect email and names. So that integration gives us the best of both worlds: a beautifully designed website from Lovable and Zapier's powerful marketing automation capabilities. So when someone replies through the interface, it can trigger all kinds of powerful automations.
I've got to stick around for another video coming soon, where I'm not only going to show you how to get those email addresses but also how to process them with AI and send personalized responses to everyone who signs up for your email newsletter. You'll see here I've got a zap I've been running for quite some time with success that basically takes a form submission from my Zapier interface, formats it nicely, makes a delay before it then goes and researches the person on Perplexity and writes an email back to them using ChatGPT. It's a cool automation, and I'll go into it in detail in a future video right here. So make sure you throw a like and you're subscribed for future videos, because I do this kind of stuff weekly. Thank you so much for watching. Leave a comment down below to let me know your best AI no-code tool, and YouTube is showing a video on your screen now you should watch next.