How To Use Claude Code To Build Amazing Sites With Opus 5.5

0:00 Have you ever asked Claude code to make a website and when you saw the website it built, you got the feeling that you'd seen one like this before? Since we're a software company, we have built a lot of sites and we have seen that most of the AI generated sites end up looking the same. But the issue isn't with the models. It's because you're not following a structured process to actually get good designs out of them.

0:20 So, in this video, we're going to teach you our six-stage process that you can use to make incredibly beautiful websites using Claude Code. If you've never opened Claude Code before, we're going to be teaching you how to use Claude Code from the start. And if you've been using Claude Code everyday, there's something for you, too, because we're also going to be showing you a skill that can take your normal AI built websites and turn them into amazing cinematic scrollable websites. If you feel like you already know something, the timestamps are below so you can jump between the sections. But before we start, we're going to set up the apps that we'll be using in this process. The first tool is Claude Code which is like chatgpt or the claude web app but it has the ability to actually control your whole computer. But in order to run claude code we need something called a terminal. For that we are going to use warp. And since claude code can actually create and edit files on your computer. We need a way to view them. For that we're going to be using VS Code. Now we're going to start the setup by installing Warp. To install it, you need to download Warp from its website and install it on your computer for your specific OS, whether it is Mac OS or Windows. After it is installed, you're going to open it up and see something like this. But before we start working with Claude Code, we need to open a folder inside Warp. We're doing this because we need to run Claude Code inside a folder on our computer. You have the option to use an existing folder or create a new one. We're going to create this new folder and open it inside Warp. Now, the next step is to install Claude Code. And on its website, it's going to give you this install button. But instead of installing this, you're going to scroll down and choose the terminal option here. Again, we've got installation commands for both Windows and Mac. You just need to copy this command and paste it into Warp. And after that, you'll need to press enter, and it's going to start installing. Once it's installed, you need to type claude.

2:03 And after you press enter, it's going to open up Claude Code for you. After that, you can start prompting it, and it can actually do stuff on your computer. For example, we can ask Claude Code to create a test file for us, and it's going to go ahead and create that. Now, to open and view that file, we need to install VS Code from its site. After it's installed, you're going to open up VS Code and get a window like this.

2:24 Here, we need to open the same folder we opened up in Warp. After opening it, you can see the test file Claude created right here. You can also ask Claude to add something in the file. For example, if we ask it to write this text inside, it's going to insert it. And if we check it inside VS Code, then we can see that our text is present inside the file. Now in Warp, we've got these tabs on the side. To open a new tab, you can press command T and it'll create this new tab, which is also open inside the same folder. We can start another Claude Code session in this tab. But if we want to work in a different folder, we need to move into that folder first. If Claude Code is already running in the tab, you can use the exit command to close the session and return to the terminal. Now, you already saw how we opened up this folder in Warp, but that isn't the correct way to do that. Now, we're going to be using terminal commands. These let us move between folders without opening each folder in the Mac OS menu separately. Now, the first command is ls, which lists all the files and folders in the folder we're currently in. Here, we're inside this demo folder.

3:22 To go back to documents, which is the folder containing the demo folder, we use the cd command followed by a space and two dots. Now we're inside documents and running ls again shows us the files and folders here. To create a folder for a new project, we use the mkdir command followed by the folder name. Now if we run ls again, we can see that the folder we created is inside documents. To move into it, we use the cd command followed by the folder name. Now we're inside the new folder we just created. And typing claude opens a new claude code session in this folder. Now that we've got claude code running, we're going to look at the features you'll use while working on this project. You can type a forward slash insideclude code to see the available commands. There are many commands available, but we'll discuss the most used ones for now. The model command lets you choose which Claude model you're working with. For this video, we'll be using Opus 5.5 because this model is the best at putting out great designs. But for other simple tasks, you can use Sonnet. And for more complex tasks, you can use Fable. While Claude is working, you can press escape to interrupt it and give it a correction. And if you wanted to look at a specific file, you can type the at@ symbol and type the name of that file to include it in your prompt. As you keep working, the conversation and the files Claude reads take up its context window, which is basically how much text it can hold inside it during one chat session.

4:40 The context command shows how much of that space you're using. If the conversation gets too long, the compact command summarizes it to free up space. You can also tell it what to keep in that summary. But if you're moving on to a separate task, the clear command starts a fresh conversation. When you're working in a Claude Code chat, if you exit and reopen Claude Code, unlike the Claude web app, the chats aren't saved and the session is going to start fresh.

5:02 But Claude Code allows you to save a chat with the rename command. And to go back to that chat, you can use the resume command. When you use this command in a new session, it's going to show you the session that you saved, and you can just open that and continue working. If Claude makes edits you want to undo, then you can press the escape button twice and go back to a previous message where everything was working fine. So the basic workflow is very simple. You open Claude code inside your project, tell it what you want to build, and then use these commands whenever you need more control over how it works.

5:33 Now, in this video, we're going to build a demo website for an architecture design firm called Forma. And we're going to build this site using the six stages that we mentioned at the start. Starting off with the first stage, which is planning. For that, we're going to use the plan mode, which is built inside Claude Code. What's different with plan mode is that it stops Claude Code from actually making or editing any files, which forces it to only talk to you.

5:56 This encourages Claude Code to think about things more deeply and ask you specific questions about what you want to build. This helps you plan the important details before Claude Code starts building and avoids wasting time on the wrong thing. >> >> To start planning, you can either use the plan command or press shift tab to activate plan mode. After that, you can give it an initial prompt where you can tell it what you are building the landing page for. Then it's going to start asking you questions about it. The first question it asked us was which text stack we wanted to build this site with. That just means what tools we're going to use to build the site. We're going to use Nex.js, which gives you the simplest and quickest way to build these beautiful sites. So, you can just choose that. After that, it asked us which sections needed to be added inside the landing page, which means it was asking about the structure of the site. After answering that, it asked some other questions such as the design style and whether we had the content to put on the site or not. When we had answered all the questions, Claude presented us with this plan that included what needed to be built and how it was going to build it. But before we implement the plan, it would be great if you subscribe to the channel and hit the hype button. This small gesture of support goes a long way for us. So after the plan is finalized, claude code needs to execute it. You can either enable auto mode and let it start the execution or you can write something in the third option if you want to suggest some change in the plan. We selected the first option and it started the implementation writing the code that it needed to make the landing page. Once it was finished building, it gave us the summary of what it had built. Now in order to run the website, you can just ask Claude to run it. Claude will run it in the background and it'll give you a link to open the website. You cannot share this link with anyone else because the website is running on your computer right now. Also, the link will only work until the Claude session is running.

7:39 Once you exit it, the link is going to stop working. So, this is what Claude Code finally came up with. The landing page was built according to the plan, and Claude Code had also added images from the internet, but the layout still had that familiar AI generated look. The page had the content we'd asked for, but we wanted a different design that didn't look like it was generated by an AI model. But before we start changing it, we need to talk about the second stage.

8:03 Here, we'll save the project details in a file called the claude.md. As you already know, when you open a new claude code session, it has no memory about what has previously happened in that folder. So, you need a way to remind it about important things whenever a new chat is started. The claude.md helps here by injecting whatever is inside it into the context window of the model at the very start of the chat. >> >> Now you can write the things inside the file yourself, but if you want claude code to create it, you can use the init command. After that, Claude examines the project and prepares a starter claude.m MD based on what it finds inside. But if you use init on a simple project, then claude code is just going to write how to start the app and what is inside the code. It's going to miss out the important information, which is why we are building that site and the purpose of each section in the website. After that, when we make changes, it should keep in mind that the website's main goal is to generate leads for our architecture design firm. And each section's content and design should reflect that. In our project, after we ran the init command, the claw.md file looked like this. It already contained information about how to start the website, what the project was, and how the different files were organized. But as already mentioned, it missed the business context for the website. So, we added that context ourselves. To add something to claude.md, you can simply tell Claude what information you wanted to add to the file. In our case, we asked Claude to add the business context for former, which included what the business actually was, why a customer would come to the website, and what the website needed to achieve for the business by converting a customer into a client. After that, it added a much more detailed description of the business inside the claw.md. Now, you might think, why would we need to add this information inside the claw.md? And why is it an important stage? As you already saw, we weren't satisfied with the website that Claude Code had made in the start, and we're going to change it.

9:51 Having a consistent claude.md maintains the intention of the website even if we make repeated changes, which in our case is to convert visitors of the page into sales on the website. Now, we already stated that the landing page looked like it was AI generated. And this is why we move on to the third stage in which we'll use a skill called Hallmark. Those of you that don't know, a skill in Claude Code is basically a file with a set of instructions for a particular kind of work. And using these, you can instruct Claude code to work in a certain way. You can use a skill anytime by typing its name, just like a slash command. The hallmark skill gives Claude code the rules for moving away from design patterns that are most commonly used by AI agents. For existing projects, Claude code will check its work against the rules of Hallmark. In this way, we can fix the generic design that was created before. In order to install it, you need the installation command for the Hallmark website, which is going to be listed in the description below. You can run the command in your terminal, but you don't need to close Claude Code because it also has a terminal mode, which lets you run terminal commands directly from its input box. You need to type an exclamation mark at the start of the input. Then paste the command and run it. Once it's installed, you can use the hallmark command and ask it to rebuild the site. Initially, it asked us about the type of visual style we want. It didn't ask any other business related questions about our website because we had already defined our product in the claude.md file. After we told it the visual style, Claude worked through the landing page and it made all the design changes according to the skill. The landing page it produced is very different from the first version. The page no longer follows the original arrangement and it feels like the design is much more sophisticated and carefully planned. The spacing and page layout is more refined and most importantly this didn't look AI generated. Now, even though the skill helped a lot, it still wasn't able to solve one of the greatest issues in designing with AI models. This is why we move on to the fourth stage, which is the design file. The problem is that we can use design skills to change the layout, spacing, and the elements placed on the website, but the AI models still use the default colors and fonts that they have been trained on. For example, Claude's Opus model always defaults to warm cream or off-white colors for making websites, no matter which design skill you use with them. In order to overcome this behavior of AI models, you can use a design.md file.

12:09 It's like a claw.md file, but it has details about the colors, fonts, and the spacing we need in our website. This file helps you lock down these things so that they override the model's default design choices. Once we have a design, every time we change or add elements of our website, Claude will have consistent reference about our visual rules, so the colors and fonts can remain the same even if you revamp the whole site. You don't have to build these designd files by yourself. Instead, there are places where you can browse different design.md files. Choose the one you like and add it in your project. Here, we'll use aura.build to get our design file. You can browse through a big collection of these files, and if you like one, you can open it up and click on the download button. Now, here we used a pre-built design.md file. But if you want to create a design that is completely unique for your business branding, we have a design. MD planner skill which we have in our design system. That system is available for you to use in AIABS Pro which is our community. So if you found value in what we do and want to support the channel, this is the best way to do it. The links in the description.

13:15 After it is downloaded, we need to copy the downloaded file from downloads and paste it into the folder where you're building the website. Once it is in the project folder, you can rename it to design.md so that you can refer to it by this name in your prompt. To apply the style, you can just ask claude code to read the design.md and revamp the website according to it. In the same prompt, you can tell it to preserve the existing page structure and animations as well. After that, it's going to start editing the files again.

13:41 And after it's done, it's going to present the change site. The updated page keeps the same overall structure as before, but the color scheme, fonts, and spacing has completely changed. If we ask claude code to make any other changes in the layout of the website or if we ask it to add new elements to the site, it's going to stick to these design rules that are written inside the design. MD file. This file is the main thing that helps us in keeping consistent visual branding. Now that our website is ready, we need to put it on the internet so that other people can start using it. Until now, we have been running the project on our computer using the local host links. So in the fifth stage, we'll see how we can make our website live. In order to deploy the website on the internet, we'll be using Versal. But we can't just deploy it with Versal alone. We need to use GitHub here as well. GitHub is basically a Google drive for storing code. And it has another feature that you need to start using while building these sites. When you add a new feature, there is a risk that some old feature might break. So we need to save our work before adding something new. This is exactly what GitHub helps you do. Each saved checkpoint is called a commit. And you can easily move between these commits just by asking Claude code. So if you implement a new feature in your app and it has some problem, you can just go back to the last commit. Now that we know what GitHub is, we can use it to create a commit in our landing page project. You can ask Claude to initialize GitHub in the project and create a commit. Now we have a commit.

15:04 And when you add new features, you should create new commits. After adding new features, if you ever think that the new features you've added are not useful, you can just come back to the first commit and it will just revert back to the original one. As we have told you, GitHub is necessary for deployment on Versal. It helps with making new features live easily. When you add a new feature and upload it to GitHub, it easily gets synced by Versal and you can see the changes on your website immediately. You first make commits on your computer. These are called local commits. Once these commits are sent to GitHub inside the code folder called the repository, they become remote commits. When a new remote commit is made, Versil is going to read your changes and then display the updated landing page on your actual website link. So if we want to make changes to our website in the future, we can just update the files on GitHub and the published website will also have the new changes. In order to set up GitHub, the first thing that you need is a GitHub account. You can create a new account using Google or login if you already have one. Once you have a GitHub account ready, you can use the GitHub CLI to upload the project, which lets you control GitHub with terminal commands. You can ask Claude to install and set it up. And once it is installed, it will ask you to run a command. So you'll enter terminal mode in claude code and run it. Next, it'll give you a one-time code and a link. You can open the link, enter the OTP, and once you click authorize, you are successfully logged into the GitHub CLI with your GitHub account. Once GitHub CLI is set up, you can ask Claude Code to upload the project to a private repository.

16:31 Claude will create the private repo for you and will upload the files to that repo. Now, if we open the repository again, we can see that our project is now inside GitHub. And now we can make a new commit every time we change something. With our project on GitHub, we are now at the final step of our deployment journey, which is Versel. To get started, we first need to create a Versil account. Once you are signed in, you can select add new and then create a new project from the dashboard.

16:55 After that, you'll connect your GitHub account and give Versal access to the repository you want to use. Once our repository appears in the list, you can select import to create its Versal project. After the project is created, it will take us to the setup page. Next, you can leave the settings as they are and just continue. Now, Versil will test and run our project on their platform. If any test fails, Versil's logs will show the errors and you can give those errors to Claude to investigate. Our website ran without any errors and it was deployed successfully. You can open the project's dashboard to get the domain that was assigned to your website. You can also add a custom domain to your website, but for now, we'll keep the one Versel provided. And now, if we open the domain of our website, we can see that our landing page is live. Now here we did all the manual work in deploying the website on Versal and that was fine but going forward we may face issues with our project on Versal when we add new features and you don't want to do the manual work by yourself. So here just like GitHub you can use the versal CLI which allows cloud code to do all the work for you. You can install it just like we installed GitHub CLI by asking claude code and after installing it will give you the command to log to the Versal account. You can use that and open the link it gives to authorize Versal CLI to use your Versal account.

18:07 Now, if you come across any issue with deployment, you can ask claude code and it will fetch and fix the problem using the Versal CLI. As you know, we already told you at the start that we're going to build a scrollable website. But up till now, we have been working on a simple website and you might be wondering why we did that. We did that so you have the basics of website building covered. And now in the sixth stage, we will actually turn the landing page into a 3D scrollable website. And for that, we're going to use the scroll world skill. By using the scroll world skill, you can create a page where scrolling will take you through a journey of 3D cinematic scenes that are generated using generative AI video tools. As you scroll, the camera will appear to move through the world and through each part of the story one by one. The first thing we need is to install the skill in Claude Code. You can do that by going to the GitHub repo of the scroll world skill and getting the installation commands. You'll paste each command in Claude Code one by one and run them. After that, you'll have scroll world installed in your Claude code project. Early in the video, we talked about GitHub commits and how they are useful to revert changes. But there is one more tool inside GitHub that helps you create new features without worrying if it might break the app or not. This tool is called Git Branches.

19:16 It allows you to make copies of your original project and each copy is called a branch. The project you started with is called the main branch. Each branch keeps its own commits. The main branch stays the same, keeping your original project untouched until you add your commits back to it. This combining of branches is called merging, and it adds the commits of a new branch to the commits of the main branch. Now, GitHub has some strictness when it comes to merging branches. So, when you merge a branch, GitHub forces you to review the new branch, and this review is called a pull request. Once you have reviewed the changes and have made sure that there is no conflict, you can finally merge them.

19:50 Now you might wonder whether we need to review code here. But later on we'll talk about a tool that can help you with this as well. So before proceeding with implementing the scroll world changes, we will make a new branch for our landing page. In this way, our live site will remain as it is until we have fully developed the scrollable website. Now that we have our new branch, we'll start the implementation of a scrollable website. You can run the scroll world command and it will initiate the planning process. The skill asked us about the context for the world, how the world should look, and how the camera should move through the world. You can answer these questions how you like. It also asked us whether we wanted a mobile version. Saying yes to that creates another set of model videos made for a phone screen as well.

20:31 We chose both desktop and mobile, and it planned 18 clips, nine for desktop and nine for mobile. Now, you don't have to describe any clip at all. The skill can plan them on its own using the context it is given and the claw.md file that we made at the very start. However, if you don't like the clips that it made, you can revise them at any point later on. After the planning was done, we asked it to start implementing the skills documented workflow uses Higsfield for video generation by default with manid as a fallback. For our build, we asked it to use runway instead. If you don't know, these are all video generation platforms. If you use any other platform, make sure that it has an MCP because this skill gets the videos from those platforms via the MCP. After the implementation was done, this is what it finally gave us. As you can see, scrolling through the updated page moved the camera through a story with five stages. Each stage has its own animation, and the transitions connect those stages into a complete journey.

21:26 You can also see that the desktop and mobile versions use their own sets of clips. In this way, the mobile version of the site gets its footage made for its screen shape rather than relying on a crop of the desktop video. Now, the scrollable website is ready. But before this version replaces the published site, we need to follow GitHub's process of making a pull request. Now, if you remember, the purpose of making a pull request was so that we could review the code being pushed to the main branch. Now, you're obviously not going to review it by yourself. We can ask Claude Code to review the PR, but there is a much better option. This is where this video's sponsor, Code Rabbit, will help us. It starts reviewing once you make the PR and reviews the files that have been changed. It can flag possible bugs and security issues, then automatically tell you the fixes that need to be made.

22:12 It's also worth knowing that Code Rabbit has pioneered AI code reviews, and it has more context and data about code reviews than any other tool. To get started, you can get a free trial on Code Rabbit's website. It currently offers a 14-day trial. You can select GitHub Cloud and sign in with your GitHub account. Then you need to select add repositories and authorize the project that you want code rabbit to review. In our case, we'd already connected the former project. Now we created a pull request to add the scroll world changes into the main branch. As soon as the pull request was opened, code rabbit automatically started reviewing the new changes. If you don't use code rabbit, you're just going to see a description of changes which is added by claude code and the files that have been changed. You can either ask cla code to review the PR or you can just merge the PR and risk breaking the project. Now, our PR included a lot of files, so the review took around 15 minutes to complete. Once it finished, Code Rabbit gave us a full walkthrough of what had changed. It also generated a sequence diagram, which can be useful if you want to understand the changes in more detail. If you want a more detailed view, you can open Code Rabbit's review change stack. At the top, you can see the overall summary of the pull request.

23:19 In our case, the changes were split across five different layers, and two of those layers were marked as having risks. Code Rabbit also found 11 issues in total and they were sorted on the basis of their risk level that is either major or minor. And for every issue, Code Rabbit also gives you a prompt that you can copy and give directly to Claude code. That prompt already includes the context of the problem. So the agent has a much clearer idea of what needs to be fixed. The change stack also organizes the pull request into different layers.

23:48 Each layer groups together related changes. There is also a Code Rabbit AI agent built into the review. For example, we asked what these changes actually do to the website and it looked through the changes and gave us an explanation of how they affect the site. You can also open any issue and ask Code Rabbit to fix it automatically. Once the fix is ready, it gives you a patch that you can review. If everything looks correct, you can commit that fix back into the pull request. As we already told you, after you've gone through the findings and fixed the issues that matter, you can merge the pull request.

24:19 that combines the scroll world changes with the main branch and updates the version of the website we're using. Our site is just a landing page, but it also has a form in it and if users can interact with the site, there is a possibility of security issues arising. To deal with this issue, Code Rabbit also has another feature that goes beyond reviewing a single pull request. It's called AI deep scan. It goes through the entire repository and looks for problems across the whole project.

24:44 To use it, you'll just click scan repository. You can choose the repository you want to check and start the scan. Code rabbit then goes through the project and looks for potential issues. In our case, it found one issue that the email field in our form has some security risk. You can just click fix and code rabbit's AI agent will resolve the issue and it will push the code by creating a new PR. Now, our final website is ready and the final scroll world site that we made is live on our domain and can be accessed by anyone on the internet using this link here. 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.