Speaker A
The website that you're seeing on screen has been built by Claude Code, and this is the exact same website that we will be building by the end of this video.
Learn how to build premium websites using Claude Code with Yashica Jain's 8-step process for design, coding, and deployment.
Ask about this video. Answers come from its transcript only — with the timestamp, so you can check them.
Generated from the transcript and can be wrong — check the timestamp.
Key Takeaways
- Claude Code can build premium websites when guided with proper design skills and configurations.
- Visual hierarchy, typography, color, motion, and trust factors are essential for a professional website.
- Using Visual Studio Code with the Claude Code extension enhances project management and coding efficiency.
- Handpicking design skills from curated repositories improves AI-generated website uniqueness and quality.
- Final steps include security validation and deploying the website with hosting and domain services.
What the video covers
- Yashica Jain demonstrates building a premium website using Claude Code, an AI coding assistant.
- The video covers an 8-step process to transform AI-generated drafts into professional websites.
- Key design principles include visual hierarchy, typography, color consistency, and imagery.
- Motion, interactions, design system consistency, performance, responsiveness, and trust elements are emphasized.
- Setup instructions for Claude Code in Visual Studio Code are provided.
- The importance of installing design skills to avoid generic AI outputs is explained.
- Yashica shares a curated GitHub repository with skills and configurations to enhance Claude Code's front-end design capabilities.
- The video includes practical coding demonstrations, feedback loops, and design improvements.
- Security checks and deployment steps for hosting the website on the internet are covered.
- Additional resources and agency services are linked for viewers interested in AI automation and no-code solutions.
Chapters
- 00:00Introduction to Claude Code and Website Overview
- 02:03Color and Imagery in Website Design
- 04:00Setting Up Claude Code in Visual Studio Code
- 06:00How to Stand Out from Generic AI Websites
- 07:46Installing Front-End Design Skills for Claude Code
- 10:12Using Design Skills and Plugins Effectively
- 14:05Building the Hero Section and Page Structure
- 20:20Adding Motion, Animation, and Final Touches
- 23:16Security Checks and Website Deployment
- 25:08Conclusion, Resources, and Agency Information
Full Transcript — Download SRT & Markdown
Speaker A
I will be revealing all the steps that one has to take to take that first draft that AI generates, which looks more like AI slop, all the way to a premium-looking website like the one I just now shared.
Speaker A
It is an eight-step process that anyone can use and apply to build an insanely beautiful and premium-looking website. It does not matter if you're building it for a restaurant or if you're building it for an e-commerce store.
Speaker A
The process still remains the same. For those of you who don't know me, my name is Yashika Jain, and I am an AI automation expert.
Speaker A
I have been in the no-code AI space for more than two and a half years now.
Speaker A
I run my own agency, Automates AI, wherein we help businesses use AI to automate their manual processes. For anyone interested in working with my agency, the link to our website is in the description.
Speaker A
So now that you know me, let's get started. Now, while the goal in our mind is clear that we want a website that looks good and feels premium, it is extremely important for us to first understand what exactly makes a website feel premium.
Speaker A
So, if I were to break it down into seven different categories, I would say that the first thing that makes a website feel good as compared to one that doesn't is the visual hierarchy.
Speaker A
So this includes having a perfect hierarchy, having enough white space so that I can easily read through, and having grid consistency. The second is typography.
Speaker A
Now, this is not just about which font you choose. It is also about pairing different fonts. It is also about using different sizes so that the user can easily read and enhancing the overall readability of the website.
Speaker A
Because at the end of the day, we want to convey the information using our website.
Speaker A
We just don't want it to look good, but be extremely difficult for the other person to interpret what the website is about.
Speaker A
The next is color and imagery. So we want to have a nice color palette which is consistent.
Speaker A
We want to use high-quality visuals and maintain a consistent style. Now the fourth point is something that actually makes a website an experience, which is motions and interactions.
Speaker A
So having micro-interactions, purposeful animation, purposeful motion really takes the website to the next level.
Speaker A
Then there's design system consistency. For example, things like buttons, cards, icons, spacing rules. The next one is performance and responsiveness. We don't want our website to look good but not load quickly on the user's device.
Speaker A
We want it to be responsive across different devices. And last but not the least, trust and conversion.
Speaker A
We want to have clear call to actions. We want to have a clear user journey, social proof, personality, accessibility.
Speaker A
And once a website has all of these seven, it makes it feel premium. So throughout the video, we are going to focus on these pointers. We're going to make sure that our website checks all of these boxes. So now that this is clear, let's go ahead and set up Claude.
Speaker A
Now, I want you to understand this one thing: that the Claude chat that you use is for your everyday tasks, asking questions, getting normal things done.
Speaker A
But when you actually want to code, maybe a website, maybe a web app or whatever, that is where we have to switch from Claude to Claude Code.
Speaker A
So it is indeed a product by Claude, but it excels at coding. It is an AI coding assistant.
Speaker A
The process still remains the same. You give it a prompt, it does things for you. You don't have to code, but you do have to switch from chat to code in order to make a website.
Speaker A
Now, there are many different ways using which you can use Claude Code. You can use it from the web, from the terminal.
Speaker A
It's completely fine. You can choose whatever you feel like. You can even download it.
Speaker A
But the one that I prefer is using it inside of an IDE or a code editor.
Speaker A
And that, in this case, is going to be VS Code. So all you have to do is you have to search for Visual Studio Code. Again, it's free to use. It's open source.
Speaker A
You just have to download it on your system, maybe Windows, maybe Mac. So why I prefer this is because I can easily see the structure of my project, how many code files I have, etc.
Speaker A
And then I can have AI on the other side, so basically giving me complete visibility of my project. So once you have installed Visual Studio Code, simply come over to Extensions, and here you have to search for Claude Code. So basically Claude Code is an extension
Speaker A
that you can download within this code editor. So simply select it, install it, then you will spot Claude's icon at the top here. Just click on it, and that should open up Claude Code for you. When you're using it for the first time, you will
Speaker A
have to sign into your Claude account, and then you will be all set. Then head over to Files here. If you do not have a folder opened, just click on Open Folder and simply create a new folder.
Speaker A
You can name it whatever you want and create it so that any files we create throughout the process, any code files, all of them are stored within that one folder.
Speaker A
So going back to Claude, we're gonna close the extra stuff out, and here is our Claude Code chat. Very similar to your Claude chat, you send it a message and you get a response. Now one thing we're going to do here is we are going to switch the model.
Speaker A
So I'm going to use Office 4.8, and I'm going to set the effort as high.
Speaker A
All right, so we are all set. Now right now your Claude Code setup is like every other person's Claude Code setup.
Speaker A
So it is at the default settings kind of. And you must have heard that AI generates very similar types of websites, it generates AI slop.
Speaker A
And everything looks very, very same. Now, in that case, how do you stand out?
Speaker A
Now, that brings me to the first rule that is going to make our website actually stand out and look good, which is we are going to kill the AI slop by giving it skills.
Speaker A
Yes, just like humans, Claude can also learn. So out of the box, every AI website looks the same. So same purple gradients, same Inter font, and it's very easy to tell that it is AI slop. And in order to get out of that, in order to make it think better
Speaker A
and be unique, we are going to install design skills, and that is what will make your website stand out. Now I found this one GitHub repository
Speaker A
which has basically researched all the different ways of making Claude Code good at front-end design, and it has included all of it in this particular repository.
Speaker A
And this is the list right here. Some of them are skills, some of them are MCPs, some of them are even normal configurations, which you can copy-paste.
Speaker A
Now, I wouldn't recommend that you install all of these within Claude Code, and it's going to make it an extremely amazing front-end designer?
Speaker A
No, we're not going to do that because it might just confuse Claude Code, and it would also consume a lot of context and tokens and reduce efficiency.
Speaker A
So what we are going to do is we're going to handpick the ones we like.
Speaker A
The reason why I like this GitHub project is because it brings everything together. You don't have to open 10 different web pages and search differently.
Speaker A
Everything is in front of your eyes, and you can easily choose which ones you want.
Speaker A
Obviously, I will include the link to this GitHub page in the description below, and you can also open it on your end.
Speaker A
The first one right here, which is called front-end design, is basically a skill by Anthropic, the parent company of Claude. It is a skill that they have released that basically makes Claude good at front-end design.
Speaker A
So this skill, which is an official skill, basically tells Claude to pick an actual aesthetic direction before writing the code. And it also doesn't let it use the same Inter font with the purple gradient and the rounded cards.
Speaker A
So it picks a direction. It requires real typography pairing. It blocks generic components and enforces CSS variables and cohesive color systems.
Speaker A
Whi
Speaker A
You have to head back to Claude Code and you can simply ask it to install this skill for me.
Speaker A
In this project or if you want to install it for your entire workspace you can also tell it that install this skill such that it works across every project that way you don't have to install it again and again simply paste it and send it.
Speaker A
It's going to run the commands to install it for you. Okay, so the skill has been installed. Now to access it, you will have to start a new conversation.
Speaker A
And if you click on this icon right here, you should be able to scroll down and spot the skill right here.
Speaker A
So slash frontend design. So meaning whenever Claude is working on the frontend design, it is going to refer to this skill, which gives it instructions that makes it kill the AR slob and generate better designs so this one is done
Speaker A
now another one that i would personally recommend that you install is the ui ux pro max skill so if you even click on this one you will see that so many people have liked this skill and so many people are
Speaker A
already using this so it provides design intelligence for building professional ui ux across multiple platforms and frameworks it also has industry specific reasoning rules for example, recommended patterns for let's say your healthcare landing page for example then it has 84 ui styles you must have heard about these different color palettes
Speaker A
font pairing text tags etc. So again it's a good skill for our Claude code workspace. And installing it again is the same process.
Speaker A
You copy this and you ask Claude to install this such that I can access it across different projects. And I think it is a plugin and not a skill.
Speaker A
So it is going to install a plugin. So let's send it. Now based on your use case, if you find any other that you like, you can install it. It's completely fine.
Speaker A
But I am going to just stick to those two for the moment. They also have animation and motion related skills.
Speaker A
In case you're interested, they have UI UX intelligence ones, for example, Google design skills.
Speaker A
So really up to you Figma related skills. So I'll put the link to this GitHub page in the description and you can go through it.
Speaker A
And it has been installed. Again, we're going to start a fresh conversation. And if I go here, we have the skill right here.
Speaker A
Beautiful so that kills the ai slog we're already one step ahead the next step would be to plan the website yes we're not going to ask it to start building it right away first we're going to plan the website
Speaker A
it's going to plan the pages the sections the content even the design system the color palettes the overall aesthetic direction we're going with and once we have the plan in place then we're going to start building so for that what you have to do is you have to select the plan mode in this
Speaker A
mode it is not going to generate any code it will only put all of its brain power into thinking or planning.
Speaker A
So I've simply told it that the goal is to build a website for the Cliffs, which is a luxury Airbnb located along Australia's southern coastline.
Speaker A
Then I have included the primary objective of the website, showcasing the place and encouraging the visitors to book a stay.
Speaker A
Then you can mention any notes that you have in mind. The website should feel calm refined premium immersive.
Speaker A
Every design should support the single objective of inspiring them to click through the airbnb and book their stay similarly you can tell it about how the copy of the website should sound like basically anything that you have in mind you can tell it make sure that you focus more on
Speaker A
what you're looking for instead of how it should do it. So we have clearly mentioned what we are looking for and we are going to send it and let's see the plan it comes up with so it is asking us some questions.
Speaker A
So what should I build this with? So it is recommending using HTML, CSS and JS, which is JavaScript, or Next.js and Tailwind, or Astro plus Tailwind.
Speaker A
If you don't really know which one you want to go with, you can just select other and you can ask it, to choose the one that fits the best then it is asking if we have any real content
Speaker A
like the photos the copy the airbnb listing link now here's the thing this is a hypothetical setup for me so i don't have any of it but you can tell it that yes i do have it and i will provide you with the links or the photos etc.
Speaker A
So let me select i have the link but not the photos then it is asking how much motion and interactivity do you want?
Speaker A
So let me select cinematic and immersive. If you want to use a mix of both or if you have any other idea, you can select other and you can type it out. So let me submit it.
Speaker A
Then it's asking for the Airbnb listing URL. So let me just paste it here. So I'll just paste Airbnb's URL.
Speaker A
Now it's asking for the location. Similarly, it is going to ask you other questions.
Speaker A
Just give it the answers. So I'm going to select the location. It's asking for details about the place. So let me just ask it to invent the details for now because again this is hypothetical for me.
Speaker A
Okay so here is the plan that it is proposing. It is suggesting using HTML, CSS and JS which is completely fine.
Speaker A
Then it is providing the design direction for example which color palette it is going to use, which fonts it is going to use.
Speaker A
Now here if you spot that it is using enter by any chance which it shouldn't but if it is then make sure you replace it then it's proposing the page structure so from here you can give it any feedback
Speaker A
that you want so let me first tell it that this should be. A one page website and not multi-page. And based on your feedback, it is going to update the plan.
Speaker A
Now, most people are going to start building here, but not us. At this stage, we are going to give it inspiration. At this point, Claude cannot read your mind. It does not know the type of website that you imagine.
Speaker A
So it is good to give it some inspiration. You can share screenshots you like.
Speaker A
You can give it the name of the vibe. For example, you're looking for dark luxury or something else.
Speaker A
That is going tell it exactly what we want now there are websites like dribble and awards that you can use to find website inspirations so let's say i type airbnb, landing page then here are some inspirations that i'm getting now obviously
Speaker A
we are not going to copy it as is but it's again a great way to tell claude what you're looking for for example i like this one.
Speaker A
So what i can do is i can copy this and i can share the image right here, similarly you can go to awards and you can search for let's say hotel this time and you can get some amazing inspirations from here same thing we just have to
Speaker A
paste the image over to claude here's another one i like so based on this claude could see that okay she likes the ones that have an image on the hero page and then there's text on top of that
Speaker A
once you have gathered let's say three to five images even more you can tell it that this is the vibe i am going for for this website please analyze and understand my design taste use that to update the plan one more thing you should mention
Speaker A
is that we don't want to copy these websites as is. We just want to take inspiration. As for the images, I will be providing those.
Speaker A
Example for the hero or the property images, etc. Whatever it is, we will provide it. The reason why we have to provide it separately is because Claude cannot really generate images. So let's send this.
Speaker A
I will share the link to Dribbble and awards in the description in case you want to use it for inspiration.
Speaker A
So see, it has already understood what I'm looking for. And it's asking that for the main image reference, which one do you want to go with?
Speaker A
So obviously, we want to go with the blurred photo bleed. So we're going to select that. And then it's asking regarding the text.
Speaker A
So I'm going to go with this. And here it has updated the plan. It has also updated the design direction, as you can see.
Speaker A
So this is the hero page that it has come up with. So blurred hero photo then a thin glass navigation bar then these are the sections etc.
Speaker A
All right and now i think at this point we're good with number three which is the inspiration it has understood what we are looking for and hence we're going to ask it to start writing the code so we're going to select the first option that says yes
Speaker A
and auto accept if possible put claude on the auto mode so that it doesn't keep on asking for permissions, for even the smallest changes and it keeps on working while you can take a walk or drink coffee.
Speaker A
Okay so I waited for about five minutes and we have the first look of the website ready.
Speaker A
Now obviously we haven't shared the images etc yet but let's see what it has come up with.
Speaker A
So essentially we're just going to copy the path of the index.html file in case you are finding difficulties, you can just ask it to give you the link to view the website. Then we're gonna open that file over here.
Speaker A
Okay, so this is the hero page. The image is missing, obviously. All right. So that's the website it has come up with.
Speaker A
Obviously, it looks very incomplete right now because the images are not present. And now the next rule is to build it in pieces. We are going to go section by section.
Speaker A
We will start with the hero and later on we will progress to the later stages.
Speaker A
So we are not going to worry about the rest of the website. For now, let's work on the hero of the website.
Speaker A
And our hero deserves a video or an image. So text-only heroes look plain, but if you have some sort of media, some sort of image or video on the background, it really helps.
Speaker A
Even if it's a plain image, doesn't have to contain anything, it really helps elevate the hero of the website. So let's generate an image for this hero.
Speaker A
So I'm simply going to take a screenshot of this hero page. I'm going to take it to chat gpt and let me tell it that this is the hero of my website i am looking for a background image that works well
Speaker A
with the site now i do not have the prompt of the image so i'm going to ask claude to help me with that so i'm simply going to ask it to help me write the prompt, for the image of the hero page in case you have an existing image that you want
Speaker A
to use what you can also do is you can use chat gpt to edit it for you so you can paste your existing image and then the prompt on top of it if you're generating it from scratch then it's
Speaker A
quite easy so it has shared the prompt with us so i'm going to copy this prompt over here and i'm also going to copy the ratio all right all good let's change it to high and let's send it and here is the image that we got.
Speaker A
So the hero page is not revealing the property directly. It's more of a cliff sort of a vibe. And then if you scroll down, you can see the property, which I think would be in the second section.
Speaker A
So now I'm going to download this. And here in the files, let me create a new folder. Let me call it images or let's call it images by admin. So that's a unique folder.
Speaker A
Then we are going to copy this image. Or if you want to drag and drop it, that's fine and paste it.
Speaker A
So here Here comes the image, let's rename it. So let's call it hero image, copy the path of the image and let me tell it, here's the.
Speaker A
Please update the hero. So then it's going to use this image and put it on the website. Okay, so it's updated.
Speaker A
Let's check it. So let me refresh. And yes, the image is there. And there's a slight zoom in into the image, which looks nice.
Speaker A
Now what I don't like is this boundary at all, which is this empty space.
Speaker A
And that brings me to step number six, which is introducing motion. So we are going to make our website move. Basically, small things like fade up, hover lift, reveal.
Speaker A
Right now, it looks quite static. So if basically you come onto the website and you scroll down, right? There's not much going on here. For introducing motion, you can either describe it yourself or again, you can take inspiration.
Speaker A
So there are websites like 21stDev, which have amazing motion graphic inspirations you can take. and not only that if you like something you can copy the prompt for it and you can share it with Claude and we'll implement that for you.
Speaker A
So after scrolling through different components I like this one which basically is an image expansion text blend.
Speaker A
So let me show you how it works. So this is how the hero page would look like but then once someone scrolls it opens up and it scrolls like this.
Speaker A
So what we can do is we can keep this image as the background and on the main image we can have the property so they can see the background that okay it's on the cliffs and as they scroll they see the real property
Speaker A
and that is where they scroll so let me copy the prompt for this one then i'm going to head over to claw and i'm going to paste it so it's a big prompt and before this i would like to tell it that i want to use.
Speaker A
This component onto the hero page i would like to use the cliff image as the background and the property image.
Speaker A
As the one that reveals or let's say that reveals itself and here's the image of the property that we want to showcase so i'm going to copy this paste it here let's name it hero image showcase then copy the part of the image and let me paste it here
Speaker A
so here's the image of the property that we would like to reveal and then we can continue with the prompt that we copied so let's see how that turns out to be all right so it has completed that so let's try it so i've refreshed it.
Speaker A
All right. Beautiful. So it's quite smooth. Nice. Now the next thing that I would like to do is get rid of this boundary and make this full screen so that it looks even better. So I'm gonna send this over.
Speaker A
Okay, so that has been updated. So let me refresh. So now if I scroll, this is how it looks like.
Speaker A
So I think there's a mismatch in the energy. So here it's giving dark vibes and this is completely bright. So let's talk to Claude about that.
Speaker A
So I've asked it how we can fix that. So it has fixed some of it.
Speaker A
So it has changed the contrast levels, etc. So let's see. All right. Yeah. So now it matches, I think. So it's not very different. So it's kind of matching and then shows the property.
Speaker A
Okay. So that right there completes the hero of our website. And now we can move on to the next sections.
Speaker A
But before that, something that is very important is that we add images. So let me ask Claude to give me the prompt for all the images.
Speaker A
I'm going to generate them. I will drop them here and then we can proceed with the rest of it.
Speaker A
So it has written eight prompts for all the images. Now the thing is that if you generate them one by one it's going to take you a lot of time.
Speaker A
So one hack that you can use is that you can download the Codex extension inside of VS Code.
Speaker A
Codex is the AI coding assistant by OpenAI or ChantGPT. So you simply install it and then you can open it side by side on the same project.
Speaker A
Then simply sign in with your ChantGPT account and then you can simply copy the prompt file and you can ask it to generate the images for you.
Speaker A
And the prompt file already mentions that it has to reference those two images we generated previously to generate the new ones so that it matches.
Speaker A
So we don't have to worry about that. So I'm simply going to ask it to please use the prompts in the prompt MD file and generate the images for me, rename them.
Speaker A
And save them in the images by admin folder. So that way I don't have to do much work. And this is more useful if you're trying to generate many images in batch.
Speaker A
So let's send this. Okay, so Codex first saw the images we had generated. And based on that, it has generated the other images that are needed for the website, all of them matching perfectly.
Speaker A
It has also added them to this folder and renamed them just as Claude wants it.
Speaker A
So that saved me a lot of time. And now let me tell Claude that all the images have been generated and added to the folder.
Speaker A
Assess the folder and update the website with the images. Make any corrections like contrast, etc.
Speaker A
If needed. And let's send it. And that's why I prefer using VS Code because on the same project, I can use Claude, I can use Codex, and I can use other agents.
Speaker A
All right, so it has updated the website with the images that we had generated using Codex.
Speaker A
So let's go here. Let's do a refresh and let's scroll down. All right, so we have the images now. I think we can also click on them and view them. All right. Okay, so that's the terrace.
Speaker A
Okay, beautiful. So no doubt the images look great. We don't have to change anything here. The only thing is that things after the hero feel a little static.
Speaker A
Like there's not much motion or animation or transition happening here. So we need to work on that. And even the footer looks a bit, you know, plain.
Speaker A
And it's it should be highlighting this part so let's see what we can do so i started a new channel on Claude Code i have selected the plan mode because we need to do a little bit of planning before we move forward
Speaker A
and i have told it that the website looks very static after the hero page so i'm asking you to suggest motions and transitions that we can add to the remaining sections of the website. Go section by section.
Speaker A
It should match the overall website vibe, layout, and hierarchy. Let me also add that it must feel immersive and premium.
Speaker A
Do not generate any code or. Only propose. Let's end it. A lot of people think that the plan mode can only be used at the very beginning when you're planning a project.
Speaker A
But I personally think that at any given point in time, when you are transitioning from one phase to another, you should use the plan mode.
Speaker A
It helps Claude think before it does anything. It is like you having a meeting with Claude or a meeting with your developer on the next steps.
Speaker A
So it found the problem and it has written this file that basically tells that we can do these additions to make things better.
Speaker A
It has suggested it per section, starting from the navigation bar all the way to the footer.
Speaker A
So it's saying that more animation is not the fix. Instead, extending the hero's own grammar downward is the fix, which I think makes complete sense.
Speaker A
So it has also summarized it here. So I think we can proceed with this plan in case we don't like it we can always rewind back to the version that we currently have so let me ask it to proceed
Speaker A
with the implementation phase by phase, all right if you're looking for a next level animations etc.
Speaker A
Then you can also install this skill animation design skills which is going to basically teach claude about 3d design frame of motion etc it It would be more important if you're building a website that is around tech or something like that,
Speaker A
not really if you're building one for an Airbnb. So this is in the same GitHub page that I have talked about previously.
Speaker A
Simply, you just have to ask Claude to take this command and then install the individual skills. That's all. So let's wait for Claude to complete this.
Speaker A
And hopefully it makes this static website look more alive. You know, designing an insanely beautiful website using Claude is more about patience than anything else. Because Claude can do it.
Speaker A
It's just that you have to follow a series of steps to get it to a point where the website looks actually presentable.
Speaker A
Because you just compare it with the first version we got and you'll see the real difference.
Speaker A
So the question isn't if Claude can build a good website or not. The question is, do you have the patience to sit and build a beautiful website?
Speaker A
Okay, so it has updated the website with the motions it proposed. So let's go and check what it has done.
Speaker A
So let me refresh. Okay, so that's the hero page. Then that's the next one. Okay.
Speaker A
Oh, we even have this, okay, beautiful, all right, all right. So that was a nice attempt. Now based on my experience, I know one thing for sure, if you add a lot of motions and transitions and animations and scrolling
Speaker A
effects, the website feels playful and visually exhausting. On the other hand, if you don't add them, it looks completely static.
Speaker A
It feels flat and doesn't give that experience. So what do we do in that case?
Speaker A
The sweet spot is alternating between the two. So one part of your website can have a nice motion.
Speaker A
The next one can feel a little static, not completely static, but maybe have less animations or micro interactions.
Speaker A
And then the next one can again give them a nice experience, maybe a scrolling effect or some other. And then again, there should be another one that lets them breathe.
Speaker A
So the rhythm between the two is what I think is going to create a nice experience for the website. Now here we've already done a nice animation sort of a thing.
Speaker A
For this one, let's leave it as is. Let's not play a lot with it.
Speaker A
Let's not try to get the image here or text there. You know, let's not play with it.
Speaker A
But then for this section, let's again do something nice. So I hope you get my vision. So on 21st dev, I found this one that I personally liked. And I think we can implement it here, which is again going to match the vibe of the hero.
Speaker A
And it's going to show the images in that effect, then we can again leave this as is and maybe do something here or something on the footer.
Speaker A
So that would create a complete rhythm or a website experience in my opinion. So again, I'm going to copy the prompt for this one.
Speaker A
I'm going to start a new chart on Claude Code because I want to clear up the context. I'm going to tell it that in the rooms section, I want to apply this sticky scroll effect on the images of the property.
Speaker A
Let me know if you need any more images to implement it and now let me paste the prompt and let me send it so it implemented the sticky scroll effect but it needed more images so it wrote the prompts for those images i simply went to codex.
Speaker A
I told it that please review the prompt file and generate the new images that haven't been generated it did generate all of them as you can see i told claude that all the images have been generated, And I also asked it to remove the hover effect on the image that it had previously.
Speaker A
So all of that work is now done. So now let's check the new effect.
Speaker A
So refreshed. Let's scroll. Okay. That was nice. Yeah. And I think we can also click on them.
Speaker A
Yep. And we can move like this. Similar to Airbnb. Beautiful. All right. So that right there creates the rhythm. So that's the hero.
Speaker A
Then we are leaving some space for breathing and for reading. Then again, we are showcasing the property using the scroll effect.
Speaker A
If they want, they can stop and look at each image, read the description. Right. And then we come here. Beautiful.
Speaker A
Then there's this 140 steps thing. And finally, the footer. So I think the last change that I would like to make is really I would like to add the image in the background here that we have right here.
Speaker A
But the difference would be that we would still have this green overlay on top of it so that it's there, but it's not completely visible.
Speaker A
And I think this one is still fine. Or let's also add a typing effect for this line right here.
Speaker A
And I think that should complete our website. So let me tell Claude, good job.
Speaker A
So I've told it add a typing effect on the 140 steps line and then also add this image to the photo section. Apply a subtle green overlay so the image is faintly visible and that should hopefully complete the design part of the website.
Speaker A
All right so it has implemented the change let's see okay so here's the typing effect beautiful and here's the image beautiful.
Speaker A
And i feel that right there completes our website let's also check these buttons quickly while we're at it all right so yeah everything works and this takes you to airbnb's website this is the main page perfect just as it should be
Speaker A
and actually better than i imagined before i started so we completed rule number four which was go section by section begin with the hero we completed number five, which was a hero deserves a video or image.
Speaker A
And we also added more to the rest of the website. We also made our website feel alive.
Speaker A
And that brings me to the next one that says make it responsive. The website can be seen on a desktop, it can be seen on a tablet, it can be seen on a phone, you never know.
Speaker A
Most of the times it's going to be a phone. So you better optimize for it.
Speaker A
It might look all good on your laptop, but maybe it breaks on a phone. So how do you test that?
Speaker A
So you simply right click and select inspect after that you will spot this icon right here that you have to click just remove this okay and from here you can check the responsiveness so for example let me choose let's say iphone 14 okay so this is how it would look on iphone 14.
Speaker A
So now if you see clearly claude made sure that it worked on an iphone just look at this title okay i'm gonna scroll yeah.
Speaker A
So that's different from what we have um on the desktop but it works okay now maybe you want to add some section definers etc, on the phone version of it the scrolling effect does not work on the phone right
Speaker A
so yes things need to be fixed let's try ipad on ipad i think it's gonna work quite similar but there's no scrolling effect even though this doesn't look bad but still right?
Speaker A
So now at this point, it's a matter of iterating. So you simply come to plod if you want you can give it a screenshot of this page or whatever is wrong and you ask it to refine it across phone and tablets
Speaker A
so accordingly it is going to update that same code so that it works across different devices once you're at a stage where you like everything so you can try different devices and once you're like okay it looks good that is when we move to the next step which is an audit yes.
Speaker A
We are going to basically make Claude Code audit whatever it has done we are going to make it judge itself or score itself based on these parameters for example how well is the copy or how performative or responsive is the website
Speaker A
you're also going to make it check the security aspects are we exposing anything wrong is there any vulnerability.
Speaker A
We will also ask it to check responsiveness across different devices and overall give itself a score and also suggest anything that needs to be improved.
Speaker A
It wouldn't be biased, it's going to look at its own shortcomings so that before we take our website live on the internet, we are completely prepared.
Speaker A
So I'm going to share this prompt with you in the description. You can grab it from there and once you're all set, just send this prompt to Claude Alright, so it has completed the audit.
Speaker A
It gave us a score of 67 on 100. Now you might think that that's too bad, but let me tell you that it's being extremely strict when it's coming up with that score.
Speaker A
So anything above 50 is actually not bad. And anything above 80 is amazing. Then it has given scores, for example, visual hierarchy 8, security 8, performance and responsiveness 7, trust 3.
Speaker A
Motion 8, Design 9, and then the reasons as well. It has also very nicely written down the issues.
Speaker A
For example, this is not working on the phone, whatever it is. It's mainly around responsiveness in my case because I haven't really worked on that.
Speaker A
Then a complete breakdown and the recommended changes before launch. And now your job is to actually ask it to fix these.
Speaker A
Yes, things like adding a favicon, which is that small icon at the very top of the tab.
Speaker A
And once you've done that, ask it to run the audit again. If you're anywhere near 80 or even above that, you're good to go.
Speaker A
And that is when you can proceed with the final step, which is deployment. So right now, this website is nothing else but a file on your computer.
Speaker A
Your friend cannot access it because it's not on the internet. So now it's time to take it to the internet. What do you need to take it to the internet? You need two things.
Speaker A
The first is a domain. For example, in this case, it could be www.thecliffs.com or maybe www.the-cliffs.com or dot whatever the place is, right? So that is the domain.
Speaker A
Then there comes the hosting. The hosting is what stores all of your code files. For instance, this one.
Speaker A
It being on your computer doesn't help. It has to be on the server. So once you have the code files in place using the hosting and once you have connected it to a real domain, that is when anyone on the internet can access it.
Speaker A
They can simply type that domain and your website would pop up. Similar to how you are seeing it on screen. Now you might think from where do I buy a hosting, from where do I buy a domain and how do I get my website live?
Speaker A
Don't worry, I've got you covered. Now, I would suggest you use Hostinger as your hosting provider. Let me tell you why.
Speaker A
Firstly, if you buy a hosting from Hostinger. You will get a free domain for an entire year. So you don't have to buy it separately.
Speaker A
You just buy the hosting and you get the free domain for a complete year, along with the email and ASL.
Speaker A
Second, Hostinger has amazing affordable plans. Cost to performance is unmatched. I'm using it for my own website.
Speaker A
No complaints till date. And third, their monsoon sale is currently live. Their monsoon sale started on the 30th of June and it continues till the 17th of August.
Speaker A
And that means you can get discounts of up to 83% on your hosting plans.
Speaker A
Just compare it with the other ones in the market and you will see the difference.
Speaker A
For this price, you're not only getting the hosting but also the domain. So I will include the link to this page in the description below.
Speaker A
Click on that link and scroll down. That is where you will spot the plans.
Speaker A
I would suggest going with the premium plan. You can host up to three websites using this hosting plan.
Speaker A
You will get one domain free for an entire year. There's 20 GB of storage and two mailboxes per website free for one year.
Speaker A
And this should be more than enough for the website that we have built. Another reason why we're choosing Hostinger is because Hostinger connects directly with Claude Code , meaning we can simply command Claude Code that deploy my website,
Speaker A
connect the domain, and it will deploy it for us. We don't have to do any manual deployment. So once you're all set, simply click on choose plan, then you simply have to choose for how long you would like to buy the hosting for.
Speaker A
The free domain deal works for plans of 12 months and above and you will get a better price if you choose a longer duration.
Speaker A
Now a small gift from my side, you can use the coupon code YASHICA20 to get a flat 20% discount on your card value and this discount coupon applies to 12 months, 24 months and 48 months plan.
Speaker A
So you will find the link to Hostinger along with the coupon codes in the description.
Speaker A
Don't forget to use the link along with the coupon codes for some extra discount now let me show you how you can connect hostinger to Claude Code and how you can deploy the website using just a simple command so once you're on the home
Speaker A
page just like this pop-up you will see a pop-up that says claim your domain and right there you have to simply choose the domain you want for your website for example in this case it could be.
Speaker A
Www.thecliffs.com so it's a simple search you have to do and you simply have choose it i already claimed it for my other demo and now let's connect it to Claude Code so head over to api and now head over to Claude Code
Speaker A
after that select both of these mcp tools you will find this configuration that you have to copy then simply come back to Claude Code ask it to add this config to the let me first paste the config to this file right here so to this file,
Speaker A
So you basically add this configuration to this file and you send it. While it's doing that, scroll down and generate a new token.
Speaker A
Let me call it clawed code and it never expires. Copy the token. If you're able to find the file here, simply replace the API token in the file.
Speaker A
If you're not able to find it, you can simply ask clawed to update it. So update the token.
Speaker A
And you can share the token with it okay so that is done now start a new chat and then look for mcp servers and there you should find hostinger connected so that connects both of them now we just have to command it to deploy it so i am telling it that deploy my
Speaker A
website securely to the hosting plan that i bought on hostinger and connect it to the terracotta trail.com domain i have so you can replace it with whichever domain you claimed and you can send it after that it will take all your code files
Speaker A
and it will host it okay so the deployment is complete and the website is finally live on this domain or whichever one you chose so let's head over to this domain and let's see if everything works fine and indeed the website deployment was a success
Speaker A
we have it live on the domain we started from a draft that looked awful.
Speaker A
And this is what we created out of it and that to without being a designer ourselves.
Speaker A
Use the same principles and you will be able to create any website in the world that looks amazing.
Speaker A
And that is how we built an insanely beautiful website using Claude Code from scratch.
Speaker A
If this video was valuable and if you feel that you will now build a website that looks good or if you have learned how to build it and you've already built it, don't forget to like this video and do let me know in the comments.
Speaker A
If you want to learn no-code AI, agentic ai and wipe coding don't forget to subscribe turn on the bell notification so that you don't miss whenever i post a video if you're interested in working with me check out the description of this video you'll find the link to my agency's
Speaker A
website you'll also find my calendar if you're interested in one-on-one consulting and if you want to connect with me personally you can send me a connection request on linkedin and don't forget to follow me on x i put some exclusive content there that i think you would
Speaker A
like so don't forget to follow me so yes that is pretty much it for this video.
Speaker A
I will meet you in the next one. Till then, bye!
Topics:Claude CodeAI website builderno-code AIfront-end designVisual Studio Codeweb developmentAI automationYashica Jainwebsite designAI coding assistant
![FREE High Ticket Sales Training [COMPLETE COURSE] — Transcript](https://i.ytimg.com/vi/vFsMKg9kck0/maxresdefault.jpg)
