# I Finally Figured Out How to Design Landing Pages That Convert (Using AI + Tailwind + Cursor) Channel: The Boring Marketer Video: https://www.youtube.com/watch?v=VAy8R1SWRGY Duration: 10 min Language: English Words: 1776 Transcript page: https://viewrankai.com/tools/youtube-transcript/VAy8R1SWRGY --- [0:00] just wrapped up a vibe coding project with Claude code and cursor and I wanted to share some learnings with you that has made my vibe coding journey way easier. The first thing that I did that really changed the game for me was installed claude code in the terminal within cursor. Now what I noticed as I've said over the last couple days is that cloud code takes a very logical [0:24] approach and it's very streamlined. buckets out different tasks that you're trying to accomplish into a step-by-step plan and systematically attacks those. I also notice that Claude Code seems to have a deeper and better contextual understanding of the codebase of what I'm trying to achieve. And this results in far fewer bugs and errors, vibe debugging, going back and forth and wasting tokens. I've even noticed this transformation from when I was using claude for opus uh within cursor agent itself. So claude code is a gamecher. So let me tell you about my experiment here. Um you can see right here I've got [1:06] v1 of the vibearketer.com. Now this was a very basic squeeze page that was meant to simply build my list and collect emails. It did a great job, but there was some friction to discovering the community and uh getting there so that I could generate more subscriptions and more revenue. Uh someone had to submit their email address here. Then they'd have to go to Gmail, open up their inbox, find the email from me, open up the welcome email, scroll to the bottom, and then they would see a call to action to get the community. Now, we were already getting a really good number of conversions through that unoptimized [1:46] funnel, but I figured, hey, why not take it to the next level? So, challenge one for me was figuring out how to rebuild this website in an optimized way uh within cursor using claude code. The thing that I've always struggled with with vibe coding is generating greatlooking designs. So, I can I can develop a website or whatever, but actually figuring out how to make it look good and be on brand has always been my struggle. So, I did a bunch of research. Now, if you're experiencing this, I'm sure that this is nothing new to you, but for me, it really was. So, [2:23] there's a plugin for Figma called Anima. Anda allows you to click on elements within dev mode and Figma and generate code that you can go and put into cursor uh to understand the styling and the colors and the design aspects of what you have in Figma. So that was step one. Basically what I did was I went through each individual layer uh on uh this design file and I grabbed the Tailwind [2:55] code and I threw it into uh Claude Code. Uh the next thing that I did was I went to uh Tailwind's website and I purchased their Tailwind Plus uh membership. Now, what that gives me are all of these Tailwind assets. And I'm going to go ahead and show you uh what I mean by that. So, this is Tailwind Plus right here. And I bought their templates, their UI kit, and their UI blocks. Now, this is Tailwind code that Claude Code can go and reference and utilize within my designs. So once it understood kind of what I was going for uh from Figma with the color scheme, [3:38] the brand and some of those elements on V1, um now I have that uh that I armed Claude code with. And then I armed it with all these elements and templates and design kits uh that are already built on Tailwind. So I exported the Tailwind code from Figma and then I got a bunch of Tailwind assets. I loaded those into cursor and I had Claude code get to work. Now, I'm going to show you uh what the website uh looks like that I built. I'm not a designer. I'm not a front-end engineer. I've always sucked at that stuff, but to me, this felt like a big unlock and I was actually pretty [4:16] proud of uh what I was able to build. So, here it is. Um you can see above the fold here, we've got an email address uh collection. And uh right here I'm going to go ahead and uh enter an email. [4:38] And once I click enter, I'm not going to another page or anything like that. What you're going to see is uh this modal uh pop up on the screen. So it says uh welcome to the vibe. Uh keep an eye on your inbox. Ready to 10x your results with our community. So, I have a a CTA right here front and center um that if someone clicks it, it opens up uh the school community in a new tab. Now, they may want some more information. And if that's the case, uh what's going to happen is that they go back to the page and it'll drop them off right here. So, [5:11] uh I really like this. This kind of sells the benefits and some of the features of the community. Uh it's got some social proof aspects. It's got more calls to action. um tells you what to expect and some of the things that we have going on inside. Uh so I thought this was this was great. This helps to frame up uh what it's all about and building this clean uh you know design style was super super straightforward and easy. Most of the copy that you see here is also generated by Claude. Uh I had some feedback on some specific sections, but uh pretty much it got [5:48] around 90 to 95% of the way there and updating it was a couple prompts away. So if you keep uh going down uh past this section, I've got an area that I'm going to integrate some testimonials from the community. I think social proof is a really key aspect of conversion and we've got all kinds of cool stories uh [6:08] from inside that I can highlight here. Uh, next I've got an FAQ section. I've got a risk reversal uh for like a money back guarantee if you're not satisfied. And uh I've got another final call to action that opens up the school community. Uh if you're not a member, it lands you on the about page where I have my pricing information and things like that. Uh I also uh rebuilt the get featured page. So here is where we collect requests. If someone has a cool workflow, a cool tool, something like that, they submit it here and we feature it in our weekly newsletters. Um, so that's what I did. A lot of learnings uh [6:48] with Claude Code, with Tailwind, with Figma and Anima. And I also uh had to uh I my my other part of my stack is GitHub. I had to set that up so that I have version control and I can submit my builds and all that and then automatically uh that goes into my production or my deployment environment which is all on Verscell. So uh every update that I make in cloud code uh I hit enter and it automatically creates you know the updates within GitHub and [7:20] then it pushes my website onto Verscell. The another cool thing that I did on Verscell, so I didn't know this, but Verscell has a web analytics package. So, Claude Code uh built a bunch of events uh for my page. So, when someone submits their email or they click a call to action button, I'm collecting that data uh right here. So, I just launched this. There's not a lot of uh a lot of data being showed, but uh you can see where I'm getting traffic from. Um, it even will collect UTM parameters if I upgrade. Um, this is me just going to the get featured section. I've got, you [7:58] know, some of the basic stuff that you get from Google Analytics. And then you can see these events uh down here, which I think is really valuable. So, I can measure uh different conversion rates and things like that uh through uh my funnel. So, I can optimize my marketing and uh try to get more email subscribers and more members to the community. Uh the last thing that I did was I had to integrate this with Beehive. Um that was a fairly simple process. Uh I did some updates to make sure that it's very secure and I'm not exposing any uh API keys or publisher IDs or anything like [8:36] that uh from my Beehive uh newsletter. So uh Claude Code uh guided me through all of those steps. Um, I even did some testing on mobile uh and uh it looks great. Here it is. Um, you don't uh at first there were some horizontal scrolling issues and stuff and now it it works really really well. Uh, it's fast, it's snappy, and uh actually already got my first customer from this page just a few minutes before I started filming this. So, I'm pretty sure that this is going to work as a conversion rate optimization experiment. I learned a ton about web development in the process utilizing AI and a really modern uh web [9:22] development stack. I feel like uh building the front end of u like an app or a website now is pretty straightforward with all these Tailwind assets. And uh I think now I'm going to be able to add a lot more to this page. It was in framer before. I couldn't do anything with Framer. I couldn't link it up the cursor. It was kind of a pain. So now I feel like I can deploy pages faster. I can get some cool resources up here. And I'm going to be pushing forward on this website some of the other strategies that I've been chatting with uh on X. So let me know what you [9:55] think of the design. It's the vibearketer.com. If you have any ideas or thoughts for how I can optimize this, I'm all ears. I love to test and experiment. So thanks for watching and checking it out. Hopefully, you picked up a few good tips to get onbrand highquality designs uh from within cursor or in your vibe coding uh projects and maybe some tips on optimizing your landing page for conversions as well. Talk to you soon [10:21] and good luck. --- About this transcript Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com). ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts. Free transcript tools, no account needed: https://viewrankai.com/tools How to read any video this way: https://viewrankai.com/llms.txt