I Built a FULL Website with Claude Code Skills (No Coding)

Key Takeaways

Hello everyone, and welcome to this video. In this video, we are going to run part B of our project. And if you remember in the previous video, we first installed our front-end design skill. And right now, what we're going to do is we're going to use that skill to build or rebuild our page again. And basically, using Cloud, we're going to build a single-page website for the same business as well. It's going to be Sugar & Bloom Bakery, but now we're going to use our front-end design skill. So, if you recall, without a skill, that's what we used to have before, we had default fonts, right? It was just our Arial kind of system boring fonts. We got safe color palettes. We got minimal animations. Of course, it works, but it looks very generic. It looks like AI slop or what we call it AI-generated content. On the right-hand side here, and that's what we are going to do right now, is we're going to use our skill and we'll learn how to use Cloud Code to create bold, intentional typography pairings, how to use distinctive colors, and looks like a designer simply built it. Okay. And if you remember what we have done really is we ran that command here, and we have been able to install the skill. So, let's go back, and now I got our Cloud Code up and running. If you remember here on the top left corner, I am in my build a business front page with skills. I ran the command outside of Cloud Code. And then when I ran it, if everything works, on the left-hand side, I should see a folder here called Cloud. Inside it, I got skills. Inside it, I got the front-end design skill. And inside that folder, I included the skill.md file. And here I should be able to see that markdown file that explains what that skill simply does. If you remember as well, just to do a quick sanity check to see if the skill is available or not, you just say slash, you just say skills, you press enter, and now you should see the front-end design skill is included. To go back, you just press escape, and then we're going to head back to our base Cloud Code here, and I'll be able to go ahead and run the second prompt. So, what I've got here is I included our last prompt that we're going to run together. So, if you go ahead and open this, this is simply the prompt here. So, I'm going to say I want you to rebuild the exact same bakery page. And this time, I'm going to say as follows. I'm going to say context, I have the front-end design skill installed. I want to rebuild my bakery landing page from scratch with a professional distinctive design, not generic AI looking output. Instructions, I want you to create a single HTML file. We're going to call it Sugar & Bloom version two, right with the skill, for the boutique bakery. I want you to include a hero section, and then I want you to add the quiz, if you remember, have some flavor preferences. Also, include some of the questions related to the budget as well. And if you remember, we included a menu of six cakes, a testimonial as well, and a contact order form, too, with the name, email, phone, and so on. And really, all I need to do, the output, of course, is going to be a single self-contained HTML file with a polished professional design that looks like it was built by designer, not an AI-generated content. So, I'm just going to copy that. And again, from context up until here, the output. I'm just going to copy that. I'm going to come back here. And I'm going to come here. And really, all I need to do is to paste the prompt and just press enter. And similar to what we have done before, now you should see Claude is going to start doing this kind of wibbling. It's going to do brewing. It's going to take maybe a few minutes for it to run. And it's going to tell you successfully loaded the skill. So, this is great. So, now it's used or learned that it's going to use or want to use the front-end design skill. And this is great. And now it's thinking. It's going to tell you, "I will build a premium bakery page with a romantic it editorial aesthetic." Think like Parisian patisserie. Okay, looks looks cool. I'm excited to see. It's going to tell you as well the tokens here, 469 tokens. And of course, you can interrupt it at any time if you think that the agent is maybe doing something that is not aligned with what you want. Please note as well that here, we just jumped directly into it. We just copied and pasted the prompt. But what we're going to do afterwards is we'll learn how to first use the plan mode to actually plan our steps and create the plan and then we're going to summarize as well our plan and also all the details about the project in certain MD folders as well MD files. We're going to discuss all of these details once we move and kind of learn the fundamentals first of Cloud Code and move to more complex projects. With that, I'm just going to pause the video and I will be back once the page is built for us. All right, so here we go. Now we should see that Cloud worked for a few minutes and now we should be able to see it's going to tell you this is the code that has been generated. Are you happy with it? Do you want to make the edits? And of course, I asked it to create the Sugar and Bloom version two with HTML. I'm going to say sure, please go ahead give it a try. I'm going to say one and I was going to consume already so that's actually consumed already around 12,000 tokens and now it's actually writing that file and now we should see on the left hand side here the Sugar and Bloom V2 HTML has been created and basically that's it pretty much. So now we should see Cloud Code came back and it's telling you a Sugar and Bloom bakery page is ready. Here is what's inside. I included a romantic editorial warm and there's like dusty rose and so on. We included all the hero section, the cake finder, the menu, the testimonial, contact form and a fully functional quiz as well end to end. Okay, so let's go ahead and give it a try. So what I'm going to do is I'm actually going to come back here and this is simply the code that has been created here for you. Let's see how many lines of code. So now you should see right now it's actually we have a lot more codes, right? So we almost have around 1,600 lines of code has been created right now on the spot. And if you go ahead and open it, let's say I want to see in the current folder. So this is the folder here which is build this business front page with skills. Let's go ahead and open it and look at this beautiful page that has been created. Of course, this is far better compared to the generic one that we created before. And now you should see this actually pretty cool, right? So you can see here if you scroll down, you can see it's going to tell you cake finder, what's the occasion? So it's either birthday maybe or maybe like a wedding and now if you actually click on it, it's going to tell you do you want chocolate, do you want vanilla? I'm going to say, let's say chocolate, and under $50. And this is simply the quiz, and it's actually going to tell you that midnight midnight you know you know actually, for example, is actually one example here, and the cost as well. And if you scroll down, you should see the menu. Look at these beautiful pages. Of course, you'll see this image here is actually not it's kind of broken, right? But you can see the images here are pretty cool. You can also see it's going to tell you what our guests say. For example, these are the reviews. And if you scroll down, you'll see this beautiful as well order page. And of course, now you can go, you can add your address here. And the power of Claude here code is you can just talk to it in plain English. And I was going to go back and forth and fix things for you. So, for example, I can come here and tell it one of the images, for example, is not rendering properly. Please note that this didn't happen with me before, but let's go ahead and test it out. So, what I'm going to do is I'm actually going to enable the microphone. So, I don't I barely type anymore. I either maybe copy existing prompts, or just talk to it in just plain English. So, I'm going to enable the microphone on my computer. I'm just going to say I have Windows. You can just press window and H. Or if you're running on Mac, you can just have Whisper Flow app running as well. One of the six cake images is missing. Please, I want you to go fix it for me. So, now what it's going to do is actually going to go back, and it is going to try to see what was the problem with one of these images. And what I found is that Claude is actually quite incredibly powerful, I would say. And here's what what it did. It's actually going to use what we call it Playwright plugin, and this plugin is actually going to go and start testing the website. I don't want to do that now, because we actually have an entire project that covers this later on. So, what I'm going to do is I'm going to say, "No for now." And let's actually ask it. I'm going to ask it specifically to not to use the Playwright, because it's going to go actually open the website, test everything, and that's what we're going to be doing separately on individual project coming up next. I just want to keep it simple for you uh moving forward. So, let's go ahead and test it again. So, one of the images that you created on the website is um not rendering properly. Without using the Playwright uh plugin, I want you to go ahead and make sure that the image is rendering properly. So, let's go ahead and give it a try. So, what I'm going to do is I'm going to pause the video and I'll be back once Claude code is done. So, here we go. Now, we should see Claude came back and it's telling you, "I found an issue here in this code, so maybe it referenced here an image that wasn't rendering properly. I'm telling you I'm going to use this one instead here. Are you happy with it?" I'm going to say, "Sure. Let's go ahead and give it a try." And now it's going to go and make that update to the page and it's going to tell you, "Okay, do you want to fetch it?" I'm going to say, "Sure. Yes. Let's go ahead and give it a try as well." And let's wait and see. So, here we go. So, now it's going to tell you, "Fixed. The broken image was this image here was actually not rendering properly. I've replaced it with another image that loads perfectly now." So, now let's go ahead and see if this works or not. Let's go ahead and refresh it and look at this. Now, the issue has been resolved for you. And again, this is the incredible power of Claude code. You're not writing code. It's called Claude code because it's generating code, but all you're doing is you're just managing a team of agents and sub agents with your microphone. And this is the incredible kind of revolution that we're living in right now. Anyone can really go build super powerful apps, build websites with just English as your programming language. Okay. So, let's go back and that's pretty much it. Of course, you can see this is just a quick comment that I added at the end. That's all I have for this project. I hope you enjoyed it and see you in the next video.