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