Build $10,000 Websites Using Claude Code — Ultimate Guide

Properties1
tagsclaude-code, ai-design, premium-web, design-skills, cursor-interactions, motion-design, static-site, deployment

10 min read

Overview

A full end-to-end build of a “freelance developer charging $10,000” quality website using Claude Code’s desktop app. The creator walks through setup, installing two design skills (Anthropic’s Front End Design + community-built UI UX Pro Max), writing a single intent-driven prompt that generates clarifying questions, grading the first output against an 8-point premium-website checklist, and then — the core of the video — driving repeated micro-interaction and cursor-motion polish so the site feels expensive, not just looks it. Finishes by generating a brand-matched hero video asset and deploying the static single-file site to a custom domain via Hostinger. The recurring thesis: restraint and iteration are what separate premium from generic AI output, and the human must drive the “felt quality” pass because Claude can’t feel the site.

Key Insights

  1. The $10,000 website is defined by 8 specific attributes (01:04) — Point of view, typography, color, hierarchy, imagery, motion, mobile, and the “invisible stuff” that makes a site feel fast and finished. These group into three buckets: taste, substance, and felt quality. The whole build is structured to hit all eight.

  2. Claude Code beats no-code builders on customization (01:37) — Wix/Squarespace start from a template, so every site built on them looks alike. Claude Code writes code from scratch based on your description, yielding a completely custom result without you coding.

  3. Default Claude design output is “just okay” and generic (03:49) — Out of the box Claude reaches for the same fonts, colors, and predictable layouts as every other AI website. Skills are the fix: a text-file “instruction manual” that levels up Claude in one area, installed once and used forever.

  4. The brief is the biggest separator between great and mediocre results (06:07) — Specificity matters. The most important moment in the entire build is answering Claude’s clarifying questions; your answers become the entire site. More specificity there means fewer fights for revisions later.

  5. References (screenshots) are the shortcut when you can’t describe taste (06:26) — If you don’t speak design language yet, gather 3–5 screenshots of sites you like (Dribbble, Awwwards, Pinterest) and show them to Claude to match the visual style. It’s easier to show than describe — and also refines your own taste before you commit.

  6. The “batch of fixes led by intent” move (16:48) — Don’t ask Claude to fix weak checklist items one at a time. Ask it to propose a batch of fixes, and lead with how you want it to feel (intent), not specific instructions. Five small changes in one prompt = fewer tokens, less back-and-forth, and a more cohesive result.

  7. The polish pass most people skip (17:55) — Scroll the site section-by-section, find the sections that still feel flat, and drive one specific motion or cursor interaction per section — all restrained and subtle. This layer is “the difference between a site that looks expensive and one that feels expensive.”

  8. Restraint is the premium signal (10:03, 20:06) — No rainbow color palettes; a muted set of hex values signals quality. Copy like “Six dishes, one fire.” shows restraint rather than adjectives. AI copy that over-explains and over-adjectives screams cheap.

Actionable Techniques

  1. Install the two free design skills (04:25) — Paste Anthropic’s Front End Design skill link with “Install this skill” (runs in background, bans overused fonts, pushes toward bold design). Install the community UI UX Pro Max skill with the exact phrasing “Install this plugin using NPM” (that phrasing gets it to install cleanly via the terminal; ships 57 UI styles, 95 color palettes, 56 font pairings). Allow edits, install globally.

  2. Use Claude Code desktop app in Code mode + Auto mode (02:49–05:56) — Download the desktop app (Claude Pro ~$20/mo), switch from chat to Code mode (Cmd/Ctrl+3), create a dedicated project folder and open it as the workspace, then switch the mode selector to Auto mode so Claude works without pausing for permission at every step.

  3. Structure the build prompt with a clarifying-question hook (07:43) — Call the skill with /ui-ux-pro-max, write a brief, and end with “Ask me clarifying questions.” That line forces Claude to think before building. Claude returns ~7 questions (name, style direction, sections, who writes content, tech stack, animation level). It even offers 3 style directions to choose from — a menu of options.

  4. Answer the clarifying questions thoroughly — blend directions (08:50) — The creator picked “dark moody luxury” but “with Pacific Northwest grounding” so it didn’t look like a Manhattan steakhouse. Specific, thoughtful answers up front minimize revision fighting later.

  5. Let Claude write your image/video generation prompts (12:38) — Don’t write image prompts yourself. Claude already knows your project, so ask it to write the image-generation prompt; you paste that into an image generator and get something matching your brand and aesthetic on the first try.

  6. Generate a brand-matched hero asset via an aggregator (11:46) — Use one tab that aggregates models: generate an image with ChatGPT’s image model (photoreal), use that exact image as the starting frame for Google’s Veo 3.1 to turn into a video, then upscale with Topaz — all without leaving the tab (the creator uses 11ElevenLabs; note the video itself mentions “11ElevenLabs”). The hero needs a video for scroll effects, so ChatGPT alone isn’t enough.

  7. Pull pre-made components from 21st.dev (13:08) — A library of free components/animations/scroll effects built by real developers. Two uses: browse for inspiration, or copy a prompt that tells Claude exactly how to recreate a specific element in your project.

  8. Respect Claude’s architectural judgment (14:08) — When Claude pushed back on a React component for a simple static site, the creator trusted it. Claude “protects the architecture you set up” and doesn’t break things just because you asked. React would change how the whole project works; for a simple static site, single-file HTML is right. (If your project needs a dashboard/checkout/login, Claude will accept React.)

  9. Keep pushing when something breaks (14:51) — The first hero attempt failed (video not scrolling). Explain what went wrong and what you expected; Claude finds and fixes two bugs, then when still broken, actually opens the page in your browser, inspects it live, and finds the real problem. Three layers in, it worked. Lesson: give Claude the chance to look closer.

  10. Iterate on the hero until it feels right (15:34) — Do additional passes (text readable against bright background, content reveals as user scrolls). You can keep iterating until your hero feels right.

  11. Grade yourself against the checklist before polishing (15:56) — Paste the 10K website checklist into Claude and ask “Where does this site land against each of these criteria? Be honest.” It returns strong/mixed/missing per item (e.g., point of view/color/hierarchy strong; typography/imagery/motion/mobile/invisible mixed). The point is knowing exactly what’s left to do.

  12. Ask for a batch of fixes led by intent (16:48) — Lead with intent not specifics: “We need more handcrafted micro interactions. The lower sections feel a bit generic. We don’t need to make them busier, just more expensive.” Claude translated this into a batch: film grain across the site, animated brass hairlines between sections, a glowing ember effect in Reserve a Table, word-by-word headline reveals, plus small details. Approve once and Claude ships them all together.

  13. Drive one restrained cursor interaction per flat section (17:55) — The move most people skip: scroll section-by-section, find what still feels flat, and give Claude ONE motion or cursor interaction per section, all restrained and subtle. Examples: embers that “move like fire” reacting to the cursor (parallax following the cursor); a soft candlelight halo following the cursor as you read.

  14. Push back until subtle (19:12) — The halo’s first attempt was too obvious, so the creator said “Make it more subtle, more refined” — Claude added trailing/lag motion. The pattern: review every section, add one cursor interaction per section, and tell Claude to make it more subtle until the section feels alive without being noisy and obnoxious.

  15. Swap out the Inter font (20:30) — Inter is so overused on AI sites it “instantly screams ‘AI made this.’” If you see it in output, ask Claude to swap it. For this build it swapped to Geist. Small change, real difference.

  16. Demand a dedicated mobile pass (20:52) — Responsive ≠ designed for phones. Ask Claude for a dedicated pass on the mobile version: what should be hidden on small screens, what should be tighter, what should resize. (Nav collapses on phones, word mark tightens, buttons get a smaller variant.)

  17. Deploy the static site cheaply (22:07–26:04) — Host Hostinger Premium plan (~60 (Hostinger ~20).

Tools & Skills Mentioned

  • Claude Code (desktop app, Pro plan ~$20/mo) — AI coding assistant; Code mode, Auto mode
  • Front End Design skill (by Anthropic) — background skill; bans overused fonts, pushes restrained sensory copy and bold design
  • UI UX Pro Max skill (community-built) — direct-call skill; 57 UI styles, 95 color palettes, 56 font pairings; installed via “Install this plugin using NPM”
  • 21st.dev — free library of pre-made web components/animations/scroll effects with copy-prompt
  • ChatGPT image model — photoreal image generation
  • Google Veo 3.1 — image-to-video (hero scroll asset)
  • Topaz — upscaling
  • 11ElevenLabs (aggregator tab; creator’s referral) — access to all major image/video models in one tab
  • Hostinger (Premium vs Business plan; free first-year domain) — deployment/hosting
  • Fonts: Fraunces (headlines), Inter (overused → swapped out), Geist (replacement body font)
  • Reference sources: Dribbble, Awwwards, Pinterest
  • Claude Code /ui-ux-pro-max slash-command skill call

Quotes Worth Keeping

  • (08:50) “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.”
  • (17:18) “Claude is better at translating intent into specifics than most people are at writing specifications.”
  • (17:55) “Here’s the move most people skip… Once that batch of edits lands, scroll through your site section by section and find the ones that still feel flat… Claude won’t catch them because Claude can’t feel your sight the way you can. This pass, you have to drive yourself.”
  • (19:28) “That layer is the difference between a site that looks expensive and one that feels expensive as visitors navigate the pages.”
  • (10:05) “There are no rainbow palettes here. Restraint with color is what signals quality.”
  • (20:11) “‘Six dishes, one fire.’ That’s restraint, not adjectives. That’s what separates a 200 one.”
  • (20:36) “There’s one font called Inter that’s so overused on AI generated sites it instantly screams ‘AI made this.’”
  • (14:39) “The point is that Claude protects the architecture you set up. It doesn’t break things just because you asked.”
  • (15:17) “The lesson here is to keep pushing when something breaks. Just explain what went wrong and what you were expecting instead.”
  • (16:58) “We need more handcrafted micro interactions. The lower sections feel a bit generic. We don’t need to make them busier, just more expensive.” (the intent-first batch prompt)

Graph View

Backlinks