Build Sites That Sell 99% of Products with Claude AI

0:00 Before you even think about launching your product, there's one thing that will make or break your success. And most people completely mess this up. They rush to build their product first, then throw together some generic landing page at the last minute. But here's the reality. Your product gets judged by your landing page quality, and if that looks amateur, your product will too. Now, with AI, everyone thinks making landing pages is easy. You just go to cursor or claw, type make me a landing page, you get something with gradients and cards. but it looks exactly like every other AI generated site out there. Boring, generic, and definitely not premium. Well, today I'm going to show you how to fix that. So, I was scrolling through X and stumbled upon this post by Legion's dev. They had shared a public template for designing landing pages and I thought it looked incredibly

0:45 professional and amazing. There were so many small details that made it appear completely human-designed rather than AI generated. I went ahead and opened up the chat in V 0ero since that's where it had been designed. You can see the whole conversation right here. Upon opening it and testing it out, I noticed subtle details that made the website even more responsive. So, what I did was read through his prompts carefully. I wanted to create a template so that anyone could easily achieve amazing designs like these regardless of which AI agent they were using. First, I tried giving the same prompts he used to Claude Code. After the first and second attempts, Claude code didn't generate anything close to what I wanted. For example, it needed to create this specific design component. But Claude code just produced some kind of basic dot structure instead. I even tried providing the

1:32 description of what Vzero had actually implemented, but it still didn't produce the desired result. It just added a gradient to the previous result, and it still didn't look that great. So, here's what I did. I copied the final result from the site and broke it down completely. I took the end result, the actual code along with some of the original prompts he used. Now, I'm going to share the best tips and insights for creating amazing websites like these using a detailed breakdown of the website that was built on Vzero. Now, a quick break to tell you about today's sponsor, Chat LLM. So many AI tools out there, but buying them all expensive and messy. Now, you don't have to. Chat LLM Teams gives you every top AI model in one place. Chat GPT03 Pro, GPT 4.1, Claude Sonnet 4, Llama 3, Gemini 2.5

2:17 Pro, Abacus Smog, Deepseek, Grock 4, and Root LLM. Autopicks the best one based on your prompt. Want visuals? It generates images using Flux, ideoggram, Doll E, and videos using Cling, Runway, Hyo, and more instantly and effortlessly. Your content feels robotic, humanize it, and pass AI detectors with ease. Need reports or slides? It builds full docs and presentations with charts and deep research. Coding? Use the built-in Codel LLM editor or launch deep agent to build full apps and agents. All this for just $10 a month. Visit chatlm.abacus.ai or click the link in the description now. Okay, so the first thing you'll notice that makes this website look so good is the interactive background it has. I've seen AI generate backgrounds before, even gradients, but I haven't

3:04 seen it make them this impressive. Looking into the code and his prompts, I found that he was using paper shaders, a library for creating these amazing looking backgrounds for websites. At first, I tried asking Claude Code to use this library and generate good backgrounds, but it failed. For some reason, it just didn't understand what actually looked better, unlike this example. Now, Vzero did get this right on the first try, as you can see from his prompt. But when I gave the same prompt to Claude Code, it really messed things up. So, here's what I did and here's how you can generate these amazing backgrounds for your own website. First, you need to explicitly tell Claude Code that you're using paper shaders and specify the design clearly. The next step is to use this already prepared prompt. These details are actually what I extracted from his website. I went back to GitHub, used

3:49 Gitingest, and it basically transformed the repo into AI readable text. Since it's not a big repo, I then pasted it into clawed code and had a focused conversation with it. I gave it the exact design you see here using this specific prompt and it produced other amazing backgrounds with the same library. Don't worry about the prompts and resources. You'll find all of them in the resources section of this video. Essentially, in the context window of this chat, only the background details are included. That's more effective than just handing the entire codebase to Claude Code. This is why I prefer this separation approach. I even had Claude Code implement a drop down with different styles so I could show you the variety of backgrounds it came up with. For example, here's this water droplet moving across the screen. Then there are these small cell animations. They're

4:35 moving really slowly, but they're still animating beautifully. There are different types of animations and you can generate many variations with claw code. You can change the colors, ask it for different options, and experiment freely. The main thing I discovered was that after giving it this prompt, it unlocked some kind of improvement. Before this, most of the designs it generated had no animation whatsoever. But afterwards, the designs looked incredible. Just look at this background right here. It looks absolutely amazing. This is what actually makes your landing pages beautiful. Amazing backgrounds along with the other elements we'll discuss next. Now, next up on the website, you'll see down here this small rotating circle which displays V 0 is amazing while it animates. Over here, you'll notice a small pop-up or merge animation as well. I also noticed that

5:21 along the way, the author tried to implement even more animations. And I know that many of you when implementing animations, just tell AI to go ahead and add them. But that's actually not the correct approach. Using specific libraries for animations is a much better practice because the AI doesn't have to create everything from scratch. Instead, it leverages a library that's already built to handle animations professionally. One of the best libraries for this, something AI models are actually very skilled with, is Framer Motion. Basically, you just import it, and it offers pre-made, amazing looking animations for all kinds of elements, including buttons, components, and more. So, here's what you should do. Whenever you're implementing an animation, make sure to use this approach. For example, if you wanted to implement this rotating circle animation right here, you would ask the

6:08 AI to create a rotating circle with text. But along with that request, you'd also provide this prompt telling it to use framer motion for React, which is the React version of the framer motion library. When you do this, the results are significantly better. Even in my own testing, I've seen countless examples where simply using this library makes animations smoother and more stable. Because these animations are preconfigured within a library rather than being custom code, there's a much lower chance of things breaking. For instance, if I change the background of this website, the moving element animations wouldn't randomly break because they're built with Frame Motion's reliable foundation. So definitely try to use this library as often as you can whenever you're implementing animations. So, on the topic of this particular animation, it's actually really amazing to see these

6:54 little quality animations because they make the whole website experience so much better. On that note, I'll leave a list of additional animations in the description. Basically, if you were to implement this effect, it wouldn't just be a simple mouse cursor or a small circle popping out from the side. What actually happened here was a gooey morphing effect. That means these are two separate elements that have been morphed together using this gooey animation technique. So here's how you do it. First, have the AI create two separate elements. For example, tell it to make a login button and then a small arrow circle. After that, give it a prompt to apply a gooey morphing animation between them and again specify that it should use framer motion for this effect. This is how you'll achieve these small but incredibly impactful animations. Also, I went ahead and found

7:41 some other examples as well and tested them thoroughly. You'll be able to access all of those in the resources section, too. So, next up, another small detail that really makes the website look impressive, is the different font choices the author used. They didn't just stick to the normal default font that AI usually generates, which wouldn't have helped the overall look of the site. By implementing a different font, especially for a single word, it adds a tremendous amount of character to the landing page. The go-to place for getting fonts is Google fonts. You can go there and implementing the fonts you find is really straightforward. For example, I saw this font that I liked and to implement it, I simply copied the code and told Claude code to add it. Here you can see that I asked it to apply the font specifically to the word beautiful and I provided the link I

8:26 copied. It went ahead and implemented it perfectly. Now, even though the font I tried isn't necessarily better than the one that was already there, it demonstrates how easily you can customize it. So, definitely try out different fonts on your websites. Just like they did here with specific words, it makes your site look much more polished and gives it significantly more character. Now, when you actually look at the site, in my opinion, it looks absolutely amazing. Along with the gradient and the fonts, another crucial factor is the layout they chose. For example, when they implemented the wording, you can see that instead of putting it in the center, they purposefully placed it in the bottom left corner, that made it look significantly better. For this, you basically need to know some website layouts you can use to improve your designs. You don't have to reinvent the

9:11 wheel. You can simply take inspiration from websites that are already out there. For that, I found a website gallery called Landbook, which I've been using recently for design inspiration. You can find different layouts, structures, and mapping styles for websites, and they provide excellent ideas. Just look at this one right here. In my opinion, it looks incredible, and it's essentially just a layout. For example, if you were making a landing page for an agricultural product, this could easily work. All you'd need to do is give a screenshot of this to Claude Code and tell it to use agricultural images along with your logo. But if I had just gone to Claude Code saying, "Hey, I want to make a landing page." Even if I added fonts and backgrounds without a proper structure or a unique layout, the results wouldn't look impressive. Just look at this site right here. It has so many of the same

9:56 qualities as the one the original author made. Short chunks of text with different fonts, animated backgrounds, and a distinctive layout. All of that combined makes your landing pages look truly professional. And honestly, all you have to do is take a screenshot and give it to Clawude Code. That's it. They even provide a color palette, which is also fantastic. So, make sure to use that as well. While I was looking at the chat from the author, I noticed how he implemented the V0ero brand logo. He didn't just ask to implement the logo or provide an image. Instead, he supplied the SVG code for it. This is much better compared to the alternatives. The reason is that SVGs are represented in code since these logos are built from different shapes. This makes it much easier for the model to understand them compared to providing images and asking it to add those images. This also gives

10:42 you extra flexibility. Adding icons and images as SVGs gives you access to additional features. You can animate these SVG icons using Frame Motion and create really amazing animated drawn icons. SVGs are easy to find and there are plenty of resources available. I list several of these resources. Take a look at this site where you can find a lot of SVG logos for different brands. If I want the V0ero logo, I search for it and there it is. Clicking on it copies the SVG to my clipboard. When I go back to my terminal and paste it, I get the SVG code. From there, I can animate it or use it directly in my app. Besides icons, there are also many sites with SVG illustrations that look really amazing. They're important for certain sites, and while they weren't necessary in our case, they're still an amazing resource when building professional

11:28 landing pages. Simply download these SVGs and provide them to Claude Code, and implementation becomes easy. Since SVGs are made of shapes, they're easily edited. Colors can be changed to match your brand, making them a really great resource. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.