writing code with a lot of different large language models, and there is none that comes even close to what Claude writes. Now, true enough, all of them write functional code, but Claude is the only one who writes functional code, but even goes the extra step further and writes beautiful code. I'll show you what I'm talking about. So, first off, we're going to paste those worldclass design rules here. I'm going to paste my offer details in, my website details that has all of my copy and there is a link at the top of that document that leads to a checkout on another platform. You can use a Stripe link, checkout on your marketing platform, just as long as you have a link to link your call to action to send somebody somewhere. Or if you want to use this to generate leads and you're on a platform like Mailchimp, I'm pretty sure you can get the embed code and then supply that embed code here. If you want to include a video, you can upload the video to YouTube and then copy the embed code and place it here as well. But now that we have these two documents, the only thing we have to do is tell Claude what we want and just use natural language. I don't have a very specific prompt that you should use for it, but I do have a couple of tips. Depending on how much copy you have from your website, sometimes you can end up with long paragraphs. And so, you just want to tell Claude to break up long paragraphs with images. And Claude has no problem going out and finding free images from sites like randomuser. com, unsplash. com, pixels. com, etc. Also, you can tell Claude to insert icon placeholders. And something that I did later on just to test it is I told Claw to make the icons glow. And on top of making them glow, I wanted them to throb slowly like a heartbeat. And Claude did it. I'm going to show you later on. Suggest free image types. I already told you about the sites that you can tell Claude about. You can use subtle animations or transitions. We spoke about that briefly. You can include visual dividers or color blocks to clearly separate each section. format testimonial blocks, pricing tables, and FAQ sections to be clean, responsive, and scannable. And so, I probably just take these points and turn them into a prompt or something like that. But you really just want to keep it simple in the beginning until you get the hang of this and then you can start adding stuff on and getting more detailed with how you want the site to look. But typically, our first prompt gave us the design rules or laws that claw should follow, and you should be okay if you don't add anything else. But I'm going to go ahead and add those suggestions to mine after I give a natural language prompt. And all you do is just type in or speak into the message box and tell Claw what you want. I want you to turn this into a software as a service website that glows, that has a purple, dark navy blue, black hue, that has glowing icons that throb, and that accurately represents and professionally represents the offer that I'm presenting to the community here. also follow these additional design rules or laws in addition to the worldclass website design rules I've provided below. I'm just going to send the prompt over. And now Claude is going to start writing the code. And one thing I will warn you about with Claude beforehand is that it has an incredibly small context window. So many times if you have too much copy or there are too many sections on the web page, you'll need to nudge it and it'll break the code. Then you'll have to reconstruct it and put it back together. And so if you're not code savvy, you've never coded a day in your life. That's not going to be something that's feasible for you. So I recommend starting small. And then as you learn and get more comfortable, you can build up. And so now when we look at the preview window, we can see what the site kind of looks like, right? And so if you see that white popping up, you can kind of see that it's, you know, the animation. You can see right here that these are kind of throbbing and glowing, but we don't see any icons. Keep going down. Same thing here. Same thing. This looks good. Simple pricing. We don't have a call to action button at the bottom. So now we could keep working in clawed, but the problem again with working in clawed is that it has a short context window. So this is what we're going to do at this point. You want to come right here at the top, press the down arrow, and then download as HTML. That's hypertext markup language. You can see that the file is saved right there. Now, what I want to do is click on the folder and go to that file. I'm going to rightclick on it. And then I'm going to open with. Now, what we want to do is open with Sublime Text app. And basically, this is an app that allows you to save HTML code. So, now what we're going to do is press command A, command C. We're going to come back over to chat GPT. And when you get to ChatGpt, you want to come right here where it says codeex. Now, you will need
to connect your GitHub to codeex. It's not that complicated, but just set up a GitHub account and then connect it. And what you want to do is paste in the code right here. And then go back over to Claw. So now what you want to do is you want to walk through this website and you basically want to look at everything that you want to change and make a mental note of it. if it's a handful of things or write out a full note of the things you want to change. So for instance, I think that this particular portion should be written as smaller text beneath the call to action button and not directly adjacent to it. So I would just copy that text and come over here and right here at the top I would just start a list. Shift command to bring it down without sending it over. I want the following copy to be written directly beneath the call to action button in the hero section, not adjacent to it. Put a parentheses, paste that in another parenthesis, go back to claw, and just work through it one problem at a time. So, one thing I want to check really quick to make sure that there aren't any icons is let me go here and let's open this in a browser and scroll down and see. So, okay. So, there are no icons right here. So, it needs to go and get those icons. So, I'm just going to change that one right here. There were supposed to be white stencled icons that glowed and slowly throbbed next to every bonus product feature, etc. Currently, they're just purple squares. And then we'll do one more correction. Three. I believe there is only one call to action at the top of the page and there is not any at the bottom of the page. Can you please duplicate a call to action button at the end of the page? Do number four. Please make sure all of the sales copy is used on the sales page. Don't allow any paragraphs to sit in a section by themselves. break up the long paragraphs with a two column format that places an image to the right or the left so that it's easy to flow through the page. All right. So now what we want to do in certain situations like this, I'll go back and get my sales copy and then provide it here. And me personally, I like to always label my data. So this is the offer copy and sales details. And then what we're going to do, we're not going to ask, we're going to hit code. But before we hit it, there's one thing I want to share with you right here. You can choose a number of simultaneous versions. Now, this does take a little bit more time, but it increases your chances of getting what you want. It's a little quirky. It doesn't work exactly the way it's supposed to in my personal opinion because sometimes it'll give you three versions that are exactly the same. And there may be some variation in the code, but the visual appearances, they're almost all practically the same. And now all we have to do is wait because what's going on is chat GPT is taking the requests that we made. It's looking at the code. It's finding what we have determined are errors and it's rewriting the code. Now the reason we came from claw to codeex is because claw creates the styling and the design the CSS for the website as well as the basic HTML. But now that we're troubleshooting, adding on images, and we need a longer context window, we're going to use chat GPT or codeex within chat GPT. And that's how we're going to actually build it out so that it's as big as we need it to be, has all of the copy that we needed to have, and we don't break the site. styling, we don't break the design, everything still looks great, and we're good to go. So, versions one, two, and three are done, and it's working on version four right now. So, if we go to version one, we just want to click in here. And I'm pretty sure there is a more professional way to get the code, but I don't know right now. I need to learn it. But we're going to go all the way down. We're going to get these 261 lines of code. Click right there at the end. Command copy. And now what you want to do is go to your marketing platform or wherever you have your website hosted. So, this is a blank page. And all I have over here is a t section. And inside of this section, I have a custom code section. Most platforms are going to give you some place to add custom code HTML. And so, we just want to press commandV and paste our code. And then we're going to hit save. And our site is going to appear. And then we're going to hit preview. Now, once we hit preview, we get to look at it like this. And so now I can see there's some margin at the top. And as I scroll down, I can see that it didn't remove this. Also, this image isn't showing up right here. the clear path illustration isn't showing up. I can see that everything is kind of bunched together. But now when I look, I can see that it did correct the white icons, the glowing icons, so to speak. Custom GPTs, if we look closely, we can see they're still throbbing, right? It didn't add the icons for the bonuses, right? And so the images aren't showing up. So all we would do at this point is we would come back to codeex. That's version one. We would just click on version two, copy, go back to our website builder, press command A, paste in the new code, hit save so that it appears, and then hit preview. Scroll down, and you can see there's pretty much the same thing. All right, it's less testimonials that time. Go back to codeex version three. Copy. Command A, paste, save, preview. All right, so the images are showing up on this one. We can also see that there's some wrapper keeping everything tight in the middle. I don't know if I necessarily have a problem with that, but we do got to check out at the bottom. I like that it added that. You can see there's a slight gradient of something right there on I can't quite make it out. Some type of image or logo, but we see that it tried to do what we requested. And so from this point forward, it would just be a matter of going backwards and forwards fixing the individual items inside of codeex. Typically, there's not this much to do. So, let me just go and show you the other site that I did in a matter of moments using this same workflow that I just shared with you. So, the site that you're looking at right now on the screen, I created with the same workflow. Now, it's not the best website ever, but it's still decent. And so, you might be thinking, "Well, Corey, it's not the best website design ever. " And you're right, it's not. But if you need to get something up quick and running, you can start making your offer in the public and start making money. This is the quickest and easiest way to do it rather than sitting down at your laptop for the entire weekend trying to learn how to build a site inside of Framer, Web Flow, WordPress, or any other platform. It takes so long and this takes minutes. All you have to do is take a little time, gather up your testimonials, and then you can just code and change everything the way you want to change it. And so once you get a version that you like, for instance, let's say I like this one and it's the one I want to build on top of. Then all I have to do is, let's just say I just come right here. I go to the code, click in there, press command A, and copy it. And then I'm going to come back to Sublime Text. I'm going to open another tab. I'm going to commandV to paste it. I'm going to go to file. And then I'm going to save it. Save as. And then I'm going to give it a name so that I know that this is the best version. Hit save. Done. Because this I can work with easily. I can move things around. And if things get wonky, I can always just go back and reinstall the best version just by opening it up inside of Sublime Text, pasting it here, and I'm back where I started. Haven't lost anything. Nothing's hurt. And so you can generate these sites as many of them as you want using claude and then use codecs to keep editing and modifying
