Video summary

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

Main summary

Key takeaways

Technology

Overview

This video is a step-by-step guide to building a “$10,000-quality” single-page website using Claude Code. The emphasis is on producing a site that looks like it was made by an expensive freelance developer, not like an AI demo.

What the video claims a “$10,000 website” should include

Claude is used to implement a checklist of 8 factors, grouped into:

  • Taste
    • Point of view
    • Typography
    • Color
    • Hierarchy
    • Imagery
  • Substance
    • Content/copy quality (how it reads like a real brand)
  • Felt quality
    • Motion
    • Mobile experience
    • “Invisible” performance/finish details (the site should feel fast and complete)

Why Claude Code (and skills) beat typical template/no-code AI sites

The tutorial argues that tools like Wix/Squarespace often produce template-like similarity. Instead, Claude Code:

  • Generates code from scratch based on a natural-language brief.
  • Makes a strong case that AI websites look generic unless you correct design taste, done via Claude skills.

Skills highlighted

  1. Front-end design skill (Anthropic)

    • Pushes design away from overused/default styling
    • Example: banning common fonts, steering toward bolder, less generic direction

  2. UI UX Pro Max (community plugin via npm)

    • Provides a large set of UI styles, color palettes, and font pairings
    • Used more directly when big design changes are needed

Setup / workflow instructions (product + mode)

  • Sign up on claude.com Pro
  • Install the Claude Code desktop app
  • Switch to code mode
  • Create/use a dedicated workspace folder
  • Install both skills globally
  • Turn on auto mode so Claude can work without pausing for permission

Prompt / brief structure (including clarifying questions)

The video stresses that specificity improves results, but design language is hard to describe. It recommends references:

  • Browse Dribbble, Awwwards, and Pinterest
  • Save 3–5 screenshot references

Prompt structure

  • Call the installed design skill: /UI-UX-Pro-Max
  • Include the instruction line: “Ask me clarifying questions”

Claude then asks about 7 questions, including:

  • Restaurant name
  • Style direction
  • Which sections to include
  • Who writes content
  • Tech stack
  • Animation level
  • Other specifications

It also offers three style directions (example: Manhattan steakhouse dark/moody, Pacific Northwest modern, classic old-school chop house), and the creator selects a blend.

Building the site (iteration + time estimates)

  • Claude generates initial code in a few minutes
  • Subsequent building/polishing takes longer
  • The site starts out “already better” than typical AI demos
  • It improves through multiple polishing rounds

Mapping results to the $10,000 checklist (key techniques)

  1. Point of view

    • Derived directly from Claude’s structured answers

  2. Typography

    • Claude selects specific fonts for headlines vs body
    • Later the tutorial swaps Inter (noted as common in AI outputs)

  3. Color

    • Uses a restrained palette with specific hex choices (near black, warm cream, oxblood, brass, slate)

  4. Hierarchy

    • Sizes elements intentionally to guide reading order

  5. Imagery

    • Claude’s control is described as partial
    • Best path: add custom photography/graphics to the project folder
    • Alternative path: use AI-generated images + video generation for animations

Imagery generation workflow (models + tools)

  • Single images
    • Mentions using ChatGPT image model if subscribed
  • Video
    • Uses an aggregator workflow with 11 Labs:
      1. Generate image using ChatGPT’s image model
      2. Convert to video using Google Veo 3.1 (as described in subtitles)
      3. Upscale the video output using Topaz
  • Speed trick: Claude can generate the image prompt to keep consistency with the site’s brand/design aesthetic
  1. Motion + premium feel via UI component library
    • Uses 21st.dev, described as a library of free pre-made web components (scroll effects, animations, buttons, etc.)

Process:

  - Choose an effect/component (example: a smooth scroll image component for the hero)
  - Copy a prompt and ask Claude to implement it using the generated hero video asset

Architecture constraint handling:

  - Claude may refuse to insert a **React** component into a **static single-file HTML** project to avoid breaking setup
  - Debugging is demonstrated:
      - First attempt doesn’t animate/scroll correctly
      - Fixes bugs
      - Claude inspects the page in the browser and resolves deeper issues

  1. Copywriting polish

    • Notes that AI copy often:
      • Over-explains
      • Uses too many adjectives
    • “Restraint” is positioned as the premium differentiator
      • Example: short, sensory-feeling menu phrasing
    • Credits the front-end design skill for steering Claude toward more restrained sensory writing

  2. Mobile experience (designed vs resized)

    • Claude provides responsive layouts by default
    • The tutorial argues that’s not enough
    • It requests a true mobile pass, including:
      • Navigation collapsing on phones
      • Tighter wordmark spacing
      • Smaller button variants

Review / quality-control loop (explicit guidance)

After the “bones” are done:

  • Use a downloadable 10K website checklist PDF
  • Paste it into Claude and ask:
    • “Where does this site land against each of these criteria?”
  • Claude returns a split (example provided), such as:
    • Strong: point of view, color, hierarchy
    • Mixed: typography, imagery, motion, mobile, and “invisible stuff”

Batch fixing, then section-by-section “flatness” hunting

  • Don’t fix one thing at a time
  • Instead:
    • Ask for a batch of improvements (intent-driven, not overly specific)
  • Then do a manual pass:
    • Scroll section-by-section
    • For any section that feels flat, request one restrained cursor interaction or motion per section

Examples of interaction changes:

  • Ember effect moves and reacts to cursor via parallax
  • Add cursor-following “candlelit halo,” then refine to be subtler (tweak trailing/lag behavior)

Deployment guide (fast hosting + cheap custom domain)

Hosting requirement

  • Hosting is required to replace localhost previews

Hostinger

  • Uses Hostinger as the “cheapest professional host”
  • Claims:
    • Free domain for the first year
    • 10% discount via a link

Plan selection

  • Premium: static sites (no login/checkout/DB)
  • Business: complex sites needing node.js and advanced backends

Deployment steps

  • Choose plan term: 12 months (to get the free domain)
  • Claim custom domain
  • Upload files via a ZIP upload
  • Critical packaging rule: zip the contents inside the project folder (not the folder itself), so the server doesn’t place the site in an extra directory (avoids a blank page)
  • Upload ZIP, submit request, then verify the domain shows the site

Main speakers / sources (as indicated by subtitles)

Primary speaker

  • The YouTube creator (the “I” voice in the tutorial)

Tools/companies referenced

  • Anthropic (front-end design skill)
  • UI UX Pro Max (community plugin)
  • 11 Labs (image/video generation workflow)
  • Google Veo 3.1 (video generation step)
  • Topaz (upscaling step)
  • 21st.dev (web component/animation library)
  • Hostinger (hosting + domain)

Original video