Transcription
Claude Code just made me over $20,000 by building a complete sales page for my master class in under 10 minutes. I have zero coding experience. I just described what I wanted in plain English to Claude code and Claude's front-end design skill handled everything. Design, copy, layout, even the styling. And in this video, I'm going to walk you through exactly how I did it. So by the end of this video, you can build your own high converting sales page the same way. So, let's get into it and let me show you the process.
So, here's what you'll need for this video. Claude code will set up the Stripe, download the front-end design skill from GitHub, and then also Versel, which you can deploy for free. And I will run you through all of this. So, let's start with Claude code.
There's a couple of ways you can access Claude code. If you have the Claude desktop app and you just jump over to code here, you can actually access Claude code via the desktop app or you can use something like cursor or VS code. The reason people don't use claude code in the desktop browser as much is because this is like a relatively new feature and I have heard that there are reports of it being a little bit buggy and crashing. So if you want to download and use it in something like cursor or VS code, I'm going to run you through that now.
So if you just drop code.claude.com, you will get brought to the claude code documentation. And this is like super easy, right? So it will walk you through how to set this up in VS Code or cursor. Now what are these? These are just essentially just like Google Docs for claude code. And the reason people use claude code in an IDE is that it shows all of your work down the sidebar. Let me just show you. So over here I'm building something for this master class. And so here we've got this interactive workshop and then these are like all the files that Claude is working on. And we'll run through this more when we build this out. But basically if you're in the terminal you don't get to see all of this. So that's where IDAs come in. So if you want to install VS code or curse and you can use both of these for free you just pick pick your poison over here. So you'll just hit install and it will download and then just run through all of the prompt and once you have it open it'll look something like this.
So using cursor and we just want to hit open project. So then we hit new folder and so this is where claude code will work for this project. So let's call this claude code workshop. All right. Now this project is open and by default the cursor chat will open. Just hit close there and then what you want to do is over here see you've got these apps and so when you're looking for claude for the very first time just type in claude code for VS code or even just claude code and it'll come up. Click on that and so you can see here that this is the verified one. It's from Anthropic. It's got the little verified tick there and there's an almost 5 million downloads. Yours will say if you're downloading this for the first time, install and just hit install. You may need to restart VS Code or Cursor. And you'll just reopen your project and jump back in here. And it may look something like this. And the first time I did this when I downloaded it, I was like, okay, but how how do I access Claude now?
So, there's a couple of ways. So, you can see up here in this little this is our little Claude icon. So, we can hit that. And I'll just close out of this now. And this is Claude. And if you are logging into this for the very first time, it will just ask you to log in with your Claude subscription. So just do that and then come back here and you're good to go. The other way you can access it is if you jump into this search bar here and then just go show and run commands. And the first one here is Claude Code and just open it in a new chat. All right, we are good to go.
So we've got Claude Code open. The next thing I want you to do is download our front-end skill. So Anthropic have all of these skills. So this is GitHub. This is just like a big marketplace. There's loads of in here, documentation, coding stuff. What I want you to focus on is so if you just type Claude code front-end design into Google, this will come up. And so again, you can see here anthropic and we've got Claude Code plugin plugins front-end design skills front-end design. So if we jump up, so these are just like our folders, right? And so jumping in here, this is a skill markdown folder. So markdown is just a way that large language models can read our documentation. So if I just jump into code, this is what it looks like. So instead of it being bolded and a heading, it's just got two hashtag. And if I go to preview, this is what it looks like for us. All of our skills will be in markdown.
So then what you want to do is just download this. So just hit download raw file. Or you can actually even just grab this, jump into our cursor, and over here, we just want to say, I've already downloaded this PS, but hey Claude, can you please download this front-end design skill and just paste in the the GitHub link here? And so, while that's doing it, I'll just show you a couple of little things here. So, down here, it's got ask before edits, edit automatically, or plan mode. And whenever we're starting a new project, we all want to be we always want to be in plan mode. But for this, I just want to get the skills and stuff set up first and then we'll go into the project. So you can see here there's already front end design skill. Let me check what's currently in it. I'm actually going to stop that now because it is identical as it has determined here.
The next thing I want us to do is to actually jump into plan mode. So if we go down here and we just hit that, we can put it into plan mode. The other way you can do this is just by hitting shift tab and that will like roll through these options as well. And so let's just tell what we're doing. So for this one, I created a Claude master class and I'm I've got a Claude code coming up as well. And so I'm going to make the sales page for it. Hey Claude, can you please help me make a Claude code masterass? I want to base it off the Claude Masterclass sales page that I created. Go and have a look in my folders to get the background and context of that. We want to use your front-end design skill again. I'll also be setting up the Strat MCP as well for the payment process. Can we like think through this plan together? Ask me any questions you need until you're 95% sure you can do this job well. And that last line there is key. Like whenever you're planning something out and like that's not a great prompt, right? There's lots of this is open-ended. So that just stops Claude from like going off on tangents and it's like hey I need to ask the user some questions first gather all of that information and then I will go off and build.
All right so you can see that this command has come up and that's just basically asking can I look in your folders and search for something with masterclass to find that context that I asked it. So, hit yes. And then it's like, hey, can I do this? And so, if you hit yes, it will continue to ask you to do that. Or you can just say, yep, let's allow this for all projects. This is pretty low risk, so I'm going to go with yes, allow for all projects. Okay. So, it's searched through, grabbed the context from my previous sales page, and now it's going to ask me a couple of questions to make sure it understands everything. So, what's the relationship between this new one and the old one? Is it separate, more advanced? Let's give it a fresh but on brand. All right, hit submit. Another round of questions. Who's the target audience? So, it's nondevs definitely. All right. And a couple of final questions. It's just asking me am I happy with the modules? And we'll just hit submit. And then it's going to present this plan to me.
So, it's presented this plan for me. And there's just a couple of things I want to show you code as well. So, here when it's making a change, what it will do is, and this is like coding, I think. So it this red is like what it's changed and the green is what it's changing to. So whenever you see that, don't freak out that there's all this red here. It's just like, hey, here's what it was and here's like the lines that I've changed. And so you can see like this line lines up with this line. It's added in this new line here, etc., etc. So what I want you to do, even if you are non-technical, is pay attention to this stuff because that's how we actually learn these skills, right? You may not necessarily ever need to learn to code, but it's really good to understand how claude code is working. And if it gets stuck in loop, you've had that oversight of like, hey, you changed that before. We're going in a loop. So, just keep that in mind as you're working with Claude code.
So, I've accepted the plan. And then what it's done here is it's updated the to-dos. It's going to write the sales page copy first, build the sales page with the front-end design skill, set up Stripe with the Stripe MCP, and preview and refine the page. So, I've set up this copywriting skill, and it's going to use that skill to write this. Okay, so it's done. Let's see what that looks like. All right, so start chatting with Claude. Start building with it. Advanced workshop up here. And so, it looks pretty similar to this one, which is what I asked it to do. That's a pretty good first pass for this. Remembering that this is a landing page, right? I just wanted something to put up quickly. And and this one when I did that has brought in over $20,000 now. So, this is looking looking pretty good. And I like these little features here like the little internal command.
All right, I'm just going to jump back into Claude and give it a few bits of feedback. And while it does that, I'm just going to show you how to set up the MCP for Stripe. So over here, I've just Googled Stripe MCP and this comes up. So all we want to do is grab this little line of it's not even code, but just grab this command here and we're going to drop that into the chat thread and just say, "Hey Claude, here is the Stripe MCP." And so what I'm going to do too is ask to install this on a global level. If it's on a project level, it will just sit in this project. But I want the Stripe MCP available across all of my project. I'm also going to get it to insert my logo on the page and also like the favicon like the little tiny icon in the browser as well.
Okay, so you can see here it's installed the stripe MCP and we just need to restart the session. Before we do that, I'm just going to tell it to insert my logo. Hey Claude, can you grab my logo from the downloads folder? It's in folder number 12, social media assets. And I want the WM logo for green, the PNG. I want that on the page, please. And again while it does its thing I'll just show you through Versel. So this is all of these like pages that I have set up and published on Versel and this is free. So over here you can add new project and that is where we will set up these pages and you can have the option to add these to your own domain. So over here I built one and it was um transfer your custom GPTs over from chat GPT into Claude using the anthropic API. And so up here it's got bringyoubots.com. So you can give these custom domains for the purpose of this project. Like for this one it was just claudeworkshop sales page because I wanted to move really fast. And you can also use your subdomain. So I've got one for my membership which is tools.right.com. And so you can just ask Claude to help set this up. But for this you just want to set up the Versell command line. And if we just go Versel CLI Claude Code, Google's your friend here. And then just go down here to Claude Code. And so what you'll need to do is set up a Versel account in the browser first. And then jump over here. And so it's just going to walk you through all of this. You can see that they also have an MCP. And so that just allows Claude code to connect to Versel. So you just want to hit Claude code. And basically you'll just grab this and drop it into claw and it will run that install for you. I've got the command line set up. And so this just allows me to access Versel via the terminal via cursor. And so how I did that was just copy this. So there's two options MCP or command line interface. Honestly, I don't really know the difference. If you're more comfortable just installing the MCP, do that or you can do the CLI here. Um again basically just copy and paste this or even just give these documents to Claude code and say hey can you help me with this and also explain this to me while you're doing it.
All right so changes made and a couple of things here. The logo and then this advanced workshop are just out of alignment. So I'm going to give it that feedback. I'll review this copy quickly. Hey Claude. So the logo at the top and then the advanced workshop are out of alignment. They both need to be in the middle of the page. Also, the copy is speaking only to people who came to the master class. So, this will be publicly available. So, I don't want to isolate my audience by talking about that. Do not use things like you're still the bottleneck in your own business. I hate that. It's overused. And yeah, try again.
While it's updating that copy, I'll just run you through a couple of important things here. So, this is obviously not a very in-depth project. It's just a landing page over here. when we're building with Claude, all of the files and folders it creates will be here. So this index html is the HTML for the page and over here is the logo that it accessed before. So any files and folders will sit here and in my membership I have a framework to set Claude Code up with your workflows and Claude code as the agent and then like the tools that it has access to here as well.
All right. So, it's finished and you can see here that the changes have been made. This is all in line and all of the copy is just a bit more aligned with like who I'm speaking to and my audience. Sweet. Now, let's get this deployed to Versel and get these buttons working with Stripe. So, Claude. So, the Stripe MCP has been installed and I'm just going to exit this session because we need a restart. And then if I just go open recent. Great. Can we get this deployed to sell M and set up the Stripe payment link too? I'm also just going to get it to set up a like a memory and stuff which I really should have done at the start. Hey Claude, sorry we've kind of done this the wrong way, but can we set this project up using the what framework and so you can see here. So it's it's recognized that the Versel CLI is installed. So if you install it that way, it will recognize that or it will recognize the MCP. So it's also recognized that we need to set this up properly.
Okay. So this is a really good learning here. So I was using voice transcription and it said said can we set this up using the versel framework? I don't know if I said that or not. What I meant was the wat framework. So it was like setting up this versel framework and I'm like no no no wait the what framework? Go and check your global claude MD. So when you're setting up claude for the first time ask it to help you create this global claude MD and ask you a bunch of questions about who you are, your business, your technical background, all of that. and that will sit as on the top global claude MD fold file that claude code will reference to know about you regardless of the project that it's working on and so it's saying this is a pretty simple project do we need that full framework or do you just want a claude MD and so this claude MD is project specific and I'm just going to say let's just do that let's just do a project specific claude MD please and this just allows it to have this like working document of like knowledge of what it's worked on things that we've iterated on. So if I close out of Claude and then come back to this project, it's not like whoa, where am I at? All of that is documented and you can include things like anytime you make a mistake and we learn from this update the claude MD file.
Now this is what it should look like. So these are all of the files it's working on. So here's logo over here. And if you click on any of these, it'll just open in a little window for you. And I'll just show you this claude MD here. So this is just a markdown file and it's just talking through the whole project. So what this is um you know the framework styling etc. So that anytime we open claude or if I go back slash and then clear to clear that context it will have this to refer to and know exactly where to pick up.
All right. So stripe mcp needed to be installed in the terminal. As I said, this is all a learning for me sometimes, too. So, I grab that code, drop it in here, and then it will do its thing. Okay, so now it's installing what it needs to with Stripe. And I've accidentally canceled that. Sorry. Try again. So, again, you can see here that it's just updating the page. So, this was the old and with the actual Stripe checkout button.
Okay, so Claude's worked its magic again. And now we just need to add in our Stripe keys. And so, over here, this is super important. So, anything that is a like an API key um you want to put it in this environment over here and that won't get pushed out to GitHub and also it's not going into like clawed so you're not exposing your API keys. So, I'm going to do all of that now and come back once that's set up. Just a little heads up too, once you install the MCP, you just want to hit back MCP here and we'll open up your MCP servers and then you'll just log in to Strat to authenticate it. And so I've also put my API keys in. Now that's all sorted. And now it's going to set up this product for me. So you can see here it's just double checked too. It's saying, "Hey, your Livestrap secret key is in that file. Let me just check that it's in the git ignore folder so that it never gets committed." Amazing. That's what we want. And then all it's asking for here is for us to open up the terminal and test this page, which is just running locally at the moment. So let's do that. Let's open up a new terminal window. I'll paste that in and then hit enter. And if we open this up now and refresh and it's taken us to the page. How good.
All right, we are ready to push to Versel. It will give us a a link that I can then share and we'll be able to view this in the real world. Okay, so it's going to start pushing this to Versel. And while it's doing that, I need to grab my Stripe keys and pop them into Versel. So, if we just jump here into my dashboard, I'm just going to show you how to do that. So you can see here this project is our project that we're working on the Claude code workshop. So I just want to hit into that and then I'm just going to jump in here to settings and then this is going to take us to our environment variables. And this is where Stripe API keys, tokens, etc. are all configured. So you just want to hit add environment variable. And what we want to do is make sure that that key lines up with what Claude code has coded. Because if this is mismatched, doesn't matter if our API keys matching. The key also needs to be exactly the way that Claude has coded that. So if we just jump back in here, let me jump into my example one. So there's no keys. And so it's Stripe secret key. So I'm just going to copy that and paste that into here. And then I'll add another which is our next public stripe publishable key and grab that. And then I will paste in my actual API keys. And now to get those in Stripe, we just want to jump into our dashboard. And if you just go down here to developers and go API keys and then so this is our publishable key and you can just hit click to copy and then you will just grab this secret key. And if it won't let you copy that, you just come over here and create secret key building your own integration and hit create secret key and then paste that in. And we've also just got to add in our public site URL which I'll do now into those environmental variables. Sweet. And now we just want to hit redeploy. And that will publish and we'll be able to use this site. So you can see over here that it's building. So once that's done, we can open it up and test it out.
All right. So we can see our little preview here which is amazing. So if we just hit here, it will open our website for us. So here it is live in the world. We've covered a lot today. We've set up our Strat MCP. We've deployed to Versell. And we've created this amazing sales page for my next Claude Code workshop. If you've made it this far, you are serious about building. And so, I would love to invite you to the right mode membership. This is the best AI community for women out there. So, you get all of my builds, all of my template. We have this amazing community. There's a classroom full of resources for you. We have co-work. So you get time with me twice a month to ask any questions about your builds and we also build with Brooke session where I run you through something like building out a claude code workflow using nan the latest claude updates. So I would love to see you in there. And I will drop the link in the description below and I will see you on the next.