Build $10,000 Websites using Claude Code (Ultimate Guide)

In this video, I'm going to show you how to build a $10,000 website using Claude code. These sites you're seeing were all built with Claude code, and by the end of this video, yours is going to be one of them. We'll install Claude code, level it up with two design skills, write one prompt, polish the result, and put it on a real domain. The site is going to look like the work of a freelance developer charging $10,000, and nobody who visits it is going to know an AI made it. Stick around for chapter seven especially. That's where the cursor effects and motion design take the build from professional to expensive. And by the very end, I'll show you the cheapest way to put it live on the internet at a custom domain. But first, what exactly is Claude code? Claude code is an AI coding assistant. You describe a website to it in natural language, and it writes the code for you while you watch. We're using the Claude code desktop app today because it gives you everything you need in one window with no extra developer setup. Before we build anything, I want to define what a $10,000 website actually looks like. So, I asked Claude. There are eight things that separate a $10,000 website from a $200 one. Point of view, typography, color, hierarchy, imagery, motion, mobile, and the invisible stuff that makes a site feel fast and finished. Those eight items fall into three groups: taste, substance, and felt quality. We're hitting all eight today. Here's why Claude code can hit a $10,000 bar and why most no-code website builders can't. When you use a tool like Wix or Squarespace, you start with a template, and whatever you build ends up looking like every other site that started from that template. Claude code doesn't work that way. It writes the code for your site from scratch based on what you describe. So, you can get a completely custom result without ever having to learn to code yourself. On top of that, Claude can install design skills that level up everything it makes. You can drop in pre-made components from libraries online, the kind of things that used to require a real developer, and you can keep iterating with Claude on every detail until the site actually feels expensive. We're going to do all of that today. The first step is getting Claude code set up on your computer. Go to claude.com using the link in the description below and pick the pro plan. Right now, as I'm recording this, it's only $20 per month, and that's going to cover everything we need for this video. Get yourself signed up and I'll skip past the boring stuff. Once you're logged in, in the bottom left corner of the page, click the download icon. Navigate to the Claude code section. Download the desktop app version, then open the file to run the installer. Once you get it installed, open the desktop app, then sign in. At this point, I need to mention, depending on when you watch this video, the actual software interface might look different for you than it does for me here. Claude gets updated regularly, so if things don't look the exact same, don't panic. Just try to understand the general concepts I'm explaining and apply them to how the software looks when you're using it. When you get signed in, switch from chat mode to code mode. In my app, that tab is available in the upper left. Alternatively, you can also press command three on your keyboard on a Mac or control three on Windows to switch to code mode. Claude code works best when it has its own folder to live in. Create one anywhere on your computer, then click the folder select button near the chat box, and select your new folder to open it inside the app. That folder is going to be your workspace for this project from now on. All right, that's the setup done. Now we're going to level Claude up by installing two skills. Out of the box, Claude is a general-purpose AI. It knows a lot about a lot of things, but its default design output is just okay. It tends to reach for the same fonts, the same colors, and the same predictable layouts you've seen on every other AI-generated website. This is why a lot of AI websites end up looking generic. Skills fix that. A skill is like an instruction manual for Claude, a text file that levels up Claude's knowledge in one specific area. You install it once, and Claude uses it forever. We're installing two skills today, and both of them are free. The first skill we're installing is called front-end design. It's built by Anthropic, the company behind Claude. It runs in the background, and it quietly makes Claude smarter at design. What it actually does is ban the most overused fonts on the internet and push Claude toward bold design direction instead of generic AI output. To install it, grab the front-end design link from the description below and paste it into Claude code with the message install this skill. Then, send the message and let it run. Allow the edits when it asks, and install it globally. The second skill is community-built. It's called UI UX Pro Max. As you can see on screen, it ships with 57 UI styles, 95 color palettes, and 56 font pairings. Unlike the first skill, this one we call directly when we want a big design intervention. And that's exactly how we're going to build our site today. To install it, grab the UI UX Pro Max link from the description below and paste it into Claude code with the message install this plugin using npm. That exact phrasing matters because it's what gets it to install cleanly using the terminal. Allow the edits when it asks, and install it globally. Now, there's one last setup move before we start building. Click the mode selector in the bottom left under your chat and switch it to auto mode. This lets Claude work without stopping to ask for permission at every step. With auto mode on and both skills installed, we're ready to write the prompt that builds the site. But, there's one more thing worth talking about first. The other big thing that separates a great result from a mediocre one is the brief you give Claude. The more specific you are, the better the result. If you already know exactly what you want, just describe it. And that's what I did for this build. But, describing visual taste in words is hard, especially if you're newer to design. You don't speak the design language yet, and that makes it tough to tell Claude what you want. If you're in that spot, references are your shortcut. References are just screenshots of sites you like that you give to Claude so it can match the visual style. It's a lot easier to show Claude what you want than to describe it. References are also useful for refining your own direction before you commit. You scroll, you find things you like, and you start to understand what your taste actually is. I'll share a few of my favorite websites with you that you can draw ideas from. This is Dribbble. It's where designers post their work, and it's full of inspiration for almost any style of website. This is Awwwards. These are sites that have won industry design awards, so it's a great place to browse high-quality designs. And you can always just search Pinterest for the kind of site you want to build. It pulls examples from everywhere. Here, [snorts] I searched for modern website design restaurant. I've included links to all of these in the description below. Find three to five sites you like and save screenshots of them. You're not copying these sites. Instead, you're showing Claude what you like and how you want your own design to end up. For my build, I'm creating a website for a restaurant in Seattle. Here's the prompt I used. This is the whole video in a single sentence. {forward slash} UI-UX-Pro-Max is how we call the design skill we just installed. Then we type out the brief for the AI. The trick to making this work is this last line. Ask me clarifying questions. That's the line that makes Claude stop and to think before it starts building. Here Claude comes back with seven questions. They cover the restaurant name, the style direction, which sections we want, who's writing the content, the tech stack, the animation level, and anything else we want to specify. And here's the part that really matters. Claude offers three style directions to choose from. A Manhattan steakhouse with dark moody energy, a Pacific Northwest modern look, or a classic old-school chop house. It's giving you the menu of style options. I picked dark moody luxury, but with Pacific Northwest grounding, so it doesn't look like a Manhattan steakhouse. Five sections total. No gallery, no booking system, just a single page that scrolls all the way through. This is the most important moment in the entire build. The answers you give here become the entire site. The more specific you are at this stage, the less you'll have to fight Claude later to make revisions. Really take your time to answer the questions thoughtfully. Then send to watch the magic begin. Now Claude reads the brief, and it takes about 3 minutes before it writes a single line of code. Then it spends another four or five minutes or so actually building. So I'll skip ahead to the fun part, the reveal. And there it is. This is already better than most AI website demos I've seen, and we haven't even started polishing yet. So [gasps and snorts] how does it stack up against our $10,000 website checklist? Let's start with point of view. Look at the brief we gave Claude. We had a real direction in mind when we answered its questions, not just a mood board. Then there's typography. Claude picked Francis for the headlines and Inter for the body. Now, we'll swap out Inter later because it's one of the most overused AI fonts on the internet right now. For color, Claude landed on five hex values: near black, warm cream, oxblood, brass, and slate. There are no rainbow palettes here. Restraint with color is what signals quality. Then there's hierarchy. Look at how this section is laid out. The city name is huge, the address is medium-sized, and the room description is small. That's not random sizing. It's telling your eye what to read first, second, and third. Without that, a site feels flat and hard to scan. Take a look at the copy, too. Dry-aged ribeye, 16 oz, 60-day, hearth-fired. That's not generic AI text. That's a restaurant copy that reads like a real chef wrote it. We're going to come back to this in chapter seven. All right, that's four boxes checked. We've still got four to go, and the next ones are going to need a bit more work. Number five on the checklist is imagery. This is one pillar Claude can't fully solve on its own. You're going to have to bring some assets yourself. The best thing you can have on a premium website is custom photography or custom graphics. Work that's been shot or designed specifically for your brand. If you've got that, great. Drop it into your project folder, and you're set. Just tell Claude what and where it is, and what to do with it. But many people don't have a professional photo shoot budget. So, the next best thing is AI image and video generation. The tools are good enough now that used right, nobody can tell the difference. For a single image, ChatGPT is the fastest path if you've got a subscription already. It's latest image model is excellent for photoreal work, but there's a catch. Chat GPT can't make video. So, if your site needs any kind of animation like the hero scroll effect I'm about to build, Chat GPT alone won't get you there. That's where aggregator tools come in. These tools give you access to every major image and video generation model from one tab. The one I use is 11 Labs. 11 Labs is a paid service, but their plans are reasonable. And if you use the 11 Labs link in the description below, you'll get 50% off your first month of the creator plan, which gets you access to everything I'm about to demonstrate. Inside 11 Labs here, I generate an image with Chat GPT's image model. Once that renders, I'll pick one of the four options, and then drop that exact image in as the starting frame for Google's VO3.1 to turn it into a video. Then, once I get the output for that, I'll select one of the options, then upscale the result with Topaz, all without leaving the tab. That's the workflow we're using to create the hero asset for our steakhouse here. Here's the trick that makes this fast. You don't have to write the image prompt yourself. Claude already knows your project, so you can ask Claude to write the image generation prompt for you. You paste that prompt into your image generator, and you get something that matches your brand and your existing design aesthetic on the first try. Once you have your asset, drop it into your project folder, and Claude has everything it needs. Okay, that covers imagery. But, what about when you want to level up visuals on your site that aren't photos or videos? That's where 21st.dev comes in. 21st.dev is a library of pre-made web components, animations, scroll effects, buttons, and more. All built by real developers, and all free to grab. You can use 21st.dev two ways. You can browse around for visual inspiration if you're not sure what you want to add to your site. Or, if you find a specific design or element you like, you can copy a prompt that tells Claude exactly how to recreate it in your project. For our build, I want to build something visually striking for the hero section. A really cool image effect that makes the site feel premium right when someone lands on it. Scrolling through 21st.dev here, I find a smooth scroll image component I like. So, I'll click the copy prompt button on it and back in Claude code, I'll paste that prompt in, add the stake video we just generated, and tell Claude to use the component to build out the hero. Now, watch what Claude does next. It pushes back. The 21st.dev component I picked is for a system called React. React is a more complex setup than what we're using here. Our project is a simple static site, so Claude says no to dropping in the React component as is because it would change how our whole project works. For your project, you might actually want something more complex than what we're doing here, like a dashboard, a checkout flow, or a site with a login. In that case, Claude would say yes to React because it fits your project. The point is that Claude protects the architecture you set up. It doesn't break things just because you asked. For our static site, single file HTML is the right choice and you'll see why when we deploy in chapter eight. So, Claude rebuilds the hero without React and the first attempt doesn't work. The video shows up on the page, but it isn't scrolling. So, I tell Claude what's happening. It finds two bugs and fixes them. The page is still broken though, so I ask Claude to dig deeper. It actually opens the page itself in my browser, inspects what's happening live, and finds the real problem. Three layers in, it works. The lesson here is to keep pushing when something breaks. Just explain what went wrong and what you were expecting instead. Claude can usually solve it if you give it the chance to look closer. And there it is, a cinematic hero scroll-driven, exactly like we asked for. Next, we do one more pass on the hero, making the text readable against the bright background image. And making the hero reveal its content as the user scrolls. The key thing to know is that you can keep iterating like this until your hero feels right. Once your hero section is locked in, it's time to step back and check yourself against the bigger picture. Once you've got the bones of your site in place, you should grade yourself against the original checklist before you keep polishing. This is the move that separates a polished result from a generic one. You can grab a PDF download of that 10K website checklist using the link in the description below. You set the bar high at the start, and now you check yourself against it. To do this, paste that checklist into Claude and ask, "Where does this site land against each of these criteria?" Be honest. In my case, Claude goes through each one, calling out what's strong, what's mixed, and what's missing. For our build, Claude comes back with point of view strong, color strong, hierarchy strong, and typography mixed. Imagery, motion, mobile, and the invisible stuff are all mixed. You'll probably get a similar split on your project, and that's fine. The point is to know exactly what's left to do. For the items that need work, don't ask Claude to fix them one at a time. Ask Claude to propose a batch of fixes instead. And lead your ask with intent, not specifics. Here's the exact prompt I use for our build. I tell Claude, "We need more handcrafted micro-interactions. The lower sections feel a bit generic. We don't need to make them busier, just more expensive." Notice what I'm doing there. I'm not telling Claude what to add, I'm telling Claude how I want it to feel. Claude is better at translating intent into specifics than most people are at writing specifications. Claude comes back with a batch, film grain across the whole site, animated brass hairlines between sections, a glowing ember effect in the reserve a table section, word-by-word reveals to the headlines, and a few other small details on top. Five small changes in one prompt. I approve them, and Claude ships them all at once. There's less back and forth that way. You spend fewer tokens, and the result feels more cohesive than if you drip feed Claude one tweak at a time. Now, here's the move most people skip, and it's the move that does the most work on whether your site feels expensive. Once that batch of edits lands, scroll through your site section by section, and find the ones that still feel flat, a little boring. There's always going to be a couple. Claude won't catch them because Claude can't feel your site the way you can. This pass, you have to drive yourself. For each flat section, you give Claude one specific motion or cursor interaction to add. One per section, all of them restrained and subtle. You can ask for something specific, grab something you like from 21st.dev, or just ask Claude what makes sense to add. In our reserve a table section, the ember glow from the batch is in, but it's still static. There's no movement. So, I tell Claude, "Make the embers move like fire. Have them react to the cursor as it moves around the page." Claude adds a parallax effect on the embers that follows your cursor. Now, the fire effect feels alive. Then, I scroll into the story section, and it's still flat. So, I tell Claude, "Add some elegant micro movements and cursor interactions here. This section is feeling very static." Claude adds a soft candlelit halo that follows the cursor as you read. Its first attempt though is too obvious, so I push back. I say, "Make it more subtle, more refined." Claude adds trailing motion to the halo, so it lags a bit behind the cursor. That's the version we'll ship. Two prompts, two sections. That's all this layer takes, but that layer is the difference between a site that looks expensive and one that feels expensive as visitors navigate the pages. The pattern is to review every section, find the ones that feel flat, ask Claude for one cursor interaction or piece of movement per section. And tell Claude to make it more subtle until the section feels alive without being noisy and obnoxious. Speaking of polish, copy, the written content on your site, is another place where AI tends to fall short by default. AI-generated copy usually over-explains, uses too many adjectives, and tries to sound impressive. Take a look at this line from our site. Six dishes, one fire. That's restraint, not adjectives. That's what separates a $10,000 menu from a $200 one. The front-end design skill we installed at the start of this video is what helps Claude to write copy like this. Restrained sensory writing is one of the things that skill pushes Claude toward, which is another reason it earns its place in every project. Here's another quick win you can apply to any AI-generated site. There's one font called Inter that's so overused on AI-generated sites it instantly screams AI I made this. If you see Inter in your output, ask Claude to swap it out. For our build, Claude swaps Inter for a font called Geist. It's a small change, but it makes a real difference to how the site reads. Item seven on the checklist is mobile that's actually designed, not just shrunk down. By default, Claude makes your site responsive, meaning it'll fit on phones or other small screens, but responsive isn't the same as designed for phones. Phones are going to see your site way more often than desktops will. And if your mobile version is just your desktop version squished smaller, your viewers will feel it. You have to ask Claude for it specifically. So, tell Claude to do a dedicated pass on the mobile version. Tell it to think about what should be hidden on small screens, what should be tighter, and what should resize. For our build, the navigation collapses on phones. The wordmark gets tighter spacing, and the buttons get a smaller variant. With those polished passes done, all eight checklist items are complete. Your site looks $10,000. Now, we have to actually put it online. You can build the most beautiful site in the world, but up to this point, your site only exists on your computer. So, if you copy the URL from your preview right now, the one that starts with localhost, and send it to a friend, they're going to be very disappointed. That URL only works on your machine. To share your site with the world, you have to put it on a real server at a real custom URL. Hosting is the service that runs your website on a server 24/7, so anyone in the world can reach it. It's the boring part of owning a website, but every real site needs one. I use Hostinger because it's the cheapest professional host I know of that gives you a free domain for the first year on top of your plan. And here's the deal. If you grab Hostinger through the link on screen, or the first link in the description below, you'll get 10% off whatever Hostinger's current promotional prices. Prices change throughout the year, but 10% off the best available price is always the cheapest way to get started. Now, before you click anything, let's talk about which plan you actually want. For the kind of site we built in this video, a simple static site with no login, no checkout, and no real database, Hostinger's premium plan covers everything. That's the one we're picking today. But, if your project is more complex than what we did here, like a site with user accounts, a payment flow, or a database in the background, premium won't cut it. For projects like that, you want Hostinger's business plan instead. It supports node.js and more advanced setups Claude tends to use for complex sites. Same link, same 10% off, just one tier up. Remember when Claude said no to react back in chapter six? That's the kind of moment that tells you which plan you need. If Claude kept your site simple, premium is fine. If Claude built you something with a real back end, you want business. For our steakhouse, premium is the right pick. Open the link from the description, then on this page here, click start now, and that'll scroll you down to the pricing panels. Select the plan you want, set the term to 12 months. 12 months is the minimum term that gets you a free domain for the first year. Now search for the domain you want. If it's available, claim it. Your cart total is going to depend on whatever promotion Hostinger has running when you sign up. For me, it comes out to about $43 for the year. That's hosting plus a domain plus a free email account all in. The exact number you see might be a few dollars different, but using the link below is always going to get you the best available price. If you add a month of Claude Pro on top of that, which is about 20 bucks, you've built a $10,000 website for roughly $60 total. Click continue, then add your email and a password to register an account. On the next page, enter your billing information to complete the transaction. After checkout is complete, the onboarding flow asks what kind of site you have. Since we're uploading our own files, pick migrate existing site, then upload backup files. Then select the domain you just bought. Now return to your project folder on your computer so you can see the files that Claude built. Your index.html plus any images, videos, or sub folders sitting inside. Here's the part that matters. You don't want to zip the project folder itself. You want to zip the files inside the folder. If you zip the whole folder, Hostinger unzips it on their server and your site ends up one directory deeper than it should. Your domain loads a blank page. So, select everything inside your project folder. That's command A on Mac or control A on Windows. Then right click on your selection. On Mac, hit compress. On Windows, pick send to then compressed folder. You get one zip file with your index.html sitting right at the top level. That's exactly what Hostinger wants. You can drag the zip file back out to the same level as your parent folder. And then give it a relevant name. Drag that zip into Hostinger and once the files finish uploading, click next. Then click submit request. Once it loads, click on your domain and there it is. That's your $10,000 website live at your own custom domain built with just a handful of prompts. If you want yours online too, grab Hostinger using the first link in the description below. That's how you lock in your 10% discount on top of whatever promotion they already have running. It's the cheapest way I know of to put a real professional website on the internet. Thanks for watching.