0:00 Websites built with Claude Code are easy to spot. They look the same and are clearly AI. But what if I told you this beautiful website was built entirely with Claude Code in just a couple of minutes? The difference isn't the tool, it's the way you set it up. So I'm going to show you the three levels of building with Claude Code from the most basic all the way to the exact framework I used so you can copy it. So by the end of the video, you also will be able to create this exact website I built with Claude Code. Level number one, simple prompting. But before we can start building websites with Claude Code, we first need an AI code editor. The best one is Microsoft Visual Studio Code. It's free and it has everything what we need. So we first download it and install it. Once installed, you should see something like this. The first thing you want to do is to click here on this icon
0:48 and type in here Claude Code and select the Claude Code plugin and click Install. Then we go here to our file system and click Open Folder. Let's call it Demo one and open it. Now, you should see here on the top this little icon. It's for Claude Code. But before we can start, you need first a Claude Code Pro account because then Claude Code is included. And once you're a heavy user, you can switch easily to Max account to have higher rate limits. All right, let's get started. We prompt now Claude Code to build the website. Build me a landing page for Qovo Robotics. We sell a personal home robot called Qovo that follows voice commands, carries things, and learns your daily routines. By the way, I highly recommend to also get Whisper Flow so you don't have to type everything. It gives you incredible speed to text since you can talk faster than you can type. Let's see what results we get with simple prompting with Claude Code. By the way, I added do
1:36 not use any skill since Claude Code is actually using skills automatically. I will explain skills in detail in level two. If you don't have any skills installed, you don't need to mention this. All right, Claude Code just finished. Let's see the results. So this is the result. If you want to see the website, you click here on this file, click Reveal in Finder, and simply drag and drop this file into Chrome. And that's what we got so far. Too much text, generic layout, and everywhere purple. And there's a reason for that. The most famous website framework, Tailwind, used this exact color as its default color five years ago, and that's why it's all over the internet. So AI learned that purple is the default. Even the founder of Tailwind said, "I would like to formally apologize for making every button in Tailwind UI
2:23 Indigo five hundred five years ago, leading every AI-generated UI on Earth also being Indigo," like you can see here also. But let's see the rest of the website. We have here some boring animation. Here's the typical free grid layout we see everywhere on AI-generated websites. Here again, purple. Here's some inconsistency in color. Too much text again here. But in general, it looks pretty good compared to somebody who would do it by hand everything. But comparing to what we want to build today, what Claude Code generated on the first try, it's not really good. I mean, sure, we could prompt it now to fix the purple color and so on, but the problem is the AI does not understand what you actually want. It does not has human taste. Another problem is it's hard to explain what you
3:09 exactly want if you're not an expert in building websites. But the good part is, with the approach I show you in level three, you don't have to be. Even an absolute beginner will then be able to create beautiful websites like this one. Level number two, using Claude Code skills. To show you the second approach, we will open up a new project. So we click here New Window, click here Open, and we create a second folder Demo two and open it. Then we start Claude Code by clicking on it here. And this time we will be using a skill. To install it, type in /plugins and select here Manage Plugins. Then type here frontend and select here the frontend design plugin. And here you can decide if you want to install it globally, only for the project, or locally. In this case, we
3:54 choose Install for you and make sure also that it's activated. By the way, if you want to know exactly what the plugin does, you can click here on the source, and here you can see exactly what it does, how to use it, and even see what's inside. For example, this plugin only has at the end of the day, only a skill there. A skill are basically instruction files that tell Claude Code how to do something, like giving it the playbook for a specific task. For example, it says, "Never use generic AI-generated aesthetics like overused font families," and then it gives examples, and so on. So once we install our skill, we want to copy and paste the whole prompt here, but this time we don't include do not use any skill. Now we're pasting it here and see what Claude Code generates now. Based on this prompt, Claude Code decided that the frontend design skill will be useful for this task. So he basically added the instructions that are in this skill. All right, Claude
4:43 Code is finishing up and we see here our results. Let's open up this in the browser. Let's open this in the browser. First of all, good that we don't have the purple colors anymore here. But I'm still not really impressed by this illustration. Text looks much better now. Oh, this looks nice. In general, we can see the website looks already much better. But again, has this free grid layout style that we see on all AI-generated websites. But I still don't have the same premium feeling like on this website that we built in level three. Here all elements look like they're designed by a professional designer and everything is coherent and matches. And now finally, we will build exactly this website. Now we have level three. I call it the ANF framework. It stands for assemble, normalize,
5:30 fill. So the idea is simple. Instead of describing what you want, you give Claude Code actual components built by real designers. Every shadow, every animation, every detail already done. You just pick the ones you like. This is exactly how I built the website from the intro, from scratch. And honestly, it's not much harder than what we just did. Let me show you everything step by step. First, let's open up a new Claude Code project. Let's call it Demo three. Next, we go to a website called twentyfirst.dev. Here you have a lot of components that you can choose from, like for example, this one. This one I used in the hero section, for example. And the great part about twentyfirst.dev is here's a feature called Copy Prompt. And if I click on
6:15 this, you can select here Prompt Type, Claude Code.And click copy prompt. Create me a simple website with the following component on it. And now I paste what we copied from twentyfirstdev and send this off. Claude Code received now detailed instruction how to recreate the exact same component. Great. Claude Code just finished. And it says here, "Run the following command to see the website." So I click here Terminal, click New Terminal, and paste this command there and click Enter. Now we can copy this URL here and paste it into this browser. And like you can see, we got the exact same component here now. But let me show you even much faster approach. First, we delete everything inside this folder. Then we start a new Claude Code session. But instead of pasting the components one
7:03 by one, we first create here folder called components. Then I click this icon to create the text file, and I call it one.txt. Now I go back to twentyfirstdev and click here Copy Prompt. And then I paste this prompt here. Then I create a second file, I call it two.txt, and copy the next prompt from the component I would like to have. And paste it here. And I continue this approach with the following components. By the way, in the description box below, I also link all components so you can try it yourself. So once you did this, after you've done that, you tell Claude Code to create a website with all the components inside the components folder in order, and send this off. Now, Claude Code first reads all these files and then creates the website.
7:50 Let's type in npm run dev and open this website. Like you can see, it looks already pretty good, but it's still, like, I like, don't like the fonts and so on. That's why we will first normalize the whole webpage. We got these components from many different websites, but we want them to look like one single website. That's why we instruct now Claude Code to normalize the whole page. For this, we use this simple prompt here. By the way, you can find this also in the description box below and paste it here. All right. Claude Code just finished. Let's see the results. This here is working. Looks nice. Boom. Yes, this looks also really nice. But the only thing that is not, not nice yet is it's still generic information here. For example, the reviews here are generic. The pricing here is not for robotics. And the
8:35 questions here are not for robotics and so on. That's why we come now to the last part of the framework, fill. But before I show you how, I want to mention that this website has a light mode and a dark mode. And by the way, if you don't like anything here from the website and so on... By the way, like you can see, the website is still not perfect. For example, here's some side scroll, or I don't like the font and so on. But these are simple things to fix since we can just tell Claude Code. But once you are satisfied with the structure of the website and how it looks like, we can fill it with the right information. For that, we're using this research prompt here. This one instructs Claude Code to do some research on robotics. For this, we open up a new Claude, paste in this prompt, and send this off. So basically, what Claude Code does now is he checks the
9:22 whole website and checks what he needs to fill out. Based on this information, he does the research on the topics of robots, and then we instruct him to fill out the site. All right. Claude Code now finished his research, and now we instruct it to fill out the whole page with this prompt here. And we paste it and send this off. So this prompt basically instructs Claude Code to fill out the whole website based on our research. Perfect. Claude Code just finished. Let's see the results. Now he named our robot Apex. It's a general-purpose humanoid robot engineered to work alongside you. It can perceive, think, and act. Now all reviews are based on robotics. For example, here, safety was our biggest concern. After ten thousand hours of operating alongside team, we've had zero accidents. It's flexible. It has
10:10 here some pricing and frequently asked questions for the robot here. This foundation you can now use to polish your site for your exact product. And the best part is it won't look AI-generated since we're using components created by humans, and we just let the AI implement everything for us. And if you like this tutorial, make sure to join my school community, where we take you from a beginner to a pro. We will show you exactly how to use Claude Code and when to use Claude Code, and when it makes sense to use other tools, all without the hype. Just things that work. I hope you like this video and see you in the next one.
