Clone a $100K Website in 15 Minutes With Claude Code

You can rebuild a $100,000 agency-designed website inside Claude Code in about 15 minutes using a five-step process. The goal isn't to plagiarize — it's to stop shipping the same generic AI templates everyone else is shipping, and to actually learn front-end design by deconstructing what pros do. Here's the exact workflow I used to clone Moon, a rooftop bar site built by a full design studio.

What Does It Mean To "Steal" A $100K Website With Claude Code?

"Stealing" in this context means deconstructing a professionally built website — HTML, CSS, and JavaScript — and using it as a foundation you then customize into something of your own. You're not publishing someone else's site. You're templating it, then putting your own spin on it.

Two reasons this is worth doing:

You get exposed to websites that don't look like AI slop. Most people only see the same SaaS templates over and over. Places like Awwwards will show you what's actually possible in front-end design.
You learn by cloning. You don't become good at anything in a vacuum. You watch what pros do, try to copy it, fail, try again, then eventually add your own twist. This is how every skill gets built.

The case study for this walkthrough is Moon, a rooftop bar in Rome that got an honorable mention on Awwwards. It's got layered parallax, mouse-driven shadow effects, and a scroll animation where the hero section transitions into a cocktail glass. It was built by a full design studio. My clone isn't a pixel-perfect match, but it's a 90% solution — same shadowing, same parallax, similar scroll animation — and it was built in a single Claude Code session.

Step 1: Find Inspiration You Can Actually Template

The first step is obvious but most people do it wrong. You need a website you'd actually use as a template — not just one that looks cool.

Awwwards (awwwards.com, three W's) is the best place to look. It's where working designers submit their front-end work and get scored on it. You'll see stuff that has nothing in common with the SaaS template pipeline Claude Code defaults to. Similar-caliber sources: godly.website, Pinterest (searching for something like "SaaS landing page"), and Dribbble.

A few ground rules when picking:

You are not Moon. You are not a cocktail bar in Rome. Pick something you can realistically adapt to your actual use case.
Go beyond "I like this." Ask: "Could I put my own content in here and still keep the interesting parts?"
Grab sites with interaction you don't understand yet. That's where the learning happens.

Step 2: Do A Full Site Teardown

This is where you figure out what's actually happening under the hood. Claude Code needs three things from you to understand how a site works:

HTML — the bones. How things are structured on the page.
CSS — the clothes. How things are styled.
JavaScript — the muscles. How things actually interact (animations, scroll triggers, mouse effects).

How To Grab The HTML

On the target site, hit Ctrl+U (or Cmd+Option+U on Mac) to open the view-source tab. Select all, copy, and paste the whole thing into Claude Code. Also take a handful of screenshots of the key sections — hero, transition, anywhere the effect is visible. Paste those in too.

How To Grab The CSS And JavaScript

At the very bottom of the HTML you just grabbed, you'll see link tags for the CSS and script tags for the JavaScript. These are the actual files. Claude Code can fetch them with web_fetch, but there's a catch worth knowing.

When Claude Code calls web_fetch, it doesn't fetch directly — it delegates to a smaller model that summarizes the page and hands back a digest. Fine for a blog post. Bad for a 1,200-line CSS file where every class actually matters.

The fix: use a site teardown skill — essentially an enhanced prompt that forces Claude Code to extract the full CSS and JavaScript content, not a summary. I put a copy of the one I use inside the free Chase AI community. Tell Claude Code to use the site teardown skill explicitly and it'll pull everything.

Your Step 2 prompt ends up looking like: "Here's the HTML for [site URL]. Take a look at the CSS and JS files as well. Use the site teardown skill. Here are screenshots. Let's clone this."

Step 3: Create The Assets Claude Code Can't Generate

Claude Code can write the code, but it can't draw you a moon. You have to create or source any custom imagery, videos, and motion elements yourself.

For Moon, the showstopper effect is the moon itself. It starts fully illuminated on the hero, and as you scroll, it rotates and shadows across as it transitions into the cocktail glass page. How did the original team do it? They created 54 individual moon images with different shading levels and swapped them based on mouse position. That's not realistic for us.

Instead, generate the motion as a video, then strip the frames. Same effect, tenth of the effort.

Asset Creation Workflow

Here's the exact flow I used:

Create the start and end frames with Nano Banana Pro. Screenshot the moon from the original site — one fully shadowed, one fully illuminated. Drop them into Nano Banana Pro with a simple prompt: "Remove all text and make the background a green screen." Green screen is key — the moon needs to float on its own on the final page, not sit on any background.
Generate the transition video with Google Vo3.1. Feed in the start frame and end frame. The prompt I used: "Static shot, camera doesn't move, shadow sweeps across the surface following the 3D contours." Explicitly say no camera movement, no zoom, no drift, no rotation. Any camera motion will look broken when Claude Code extracts the frames.
Keep it to 4 seconds. Longer videos give you more frames but too many frames get heavy to load. 4 seconds ends up around 50-60 extractable frames, which is close to the 54 the original site used.
Run the generator a few times. Video generation is jankier than image generation. Pick the cleanest output.

The same workflow applies to any other custom asset — the cocktail glass in this case. Generate it on a green screen, hand it to Claude Code.

I used Higgsfield as the one-stop interface for Nano Banana Pro and Vo3.1. It bundles them with a bunch of other AI content creation tools. Not required — you can use each tool separately — but it saves tab-switching.

Step 4: The Build Phase

While you were creating assets, Claude Code was working through the teardown. On the Moon clone, it broke down the tech stack automatically: GSAP with ScrollTrigger, Lenis for smooth scrolling, 13 page sections, 19 distinct effects, full design system extracted. That's the point where you suddenly understand how these sites are actually engineered.

This is where a ton of learning happens if you're paying attention. Chances are you've never heard of Lenis. You might not know what GSAP's ScrollTrigger does. Now you do — because Claude Code is literally showing you "here's what the pros used and here's how they wired it." Ask questions: "What's GSAP? How does ScrollTrigger work? Explain this transition."

Once you hand over the generated assets (the MP4 of the moon, the cocktail PNG, any other imagery), you tell Claude Code to get to work.

What you get back is typically a 90% solution. The parallax works. The shadowing works. The scroll animation works. It won't be pixel-perfect, but it's close enough that the remaining polish is a normal iteration loop — screenshot the difference, describe the diff, let Claude Code reconcile it. The first pass is never the final pass. That's fine. The hard part was already done when you taught it how the site was built.

Step 5: Iterate And Make It Yours

This is the step people skip. Don't.

At this point you've got a working clone. It's not yours yet. You have a moon and you're not a cocktail bar.

The iteration loop:

What would the hero image be if it was your product?
What scroll transition maps to your content?
How does the color palette shift if it's not nighttime and rooftop cocktails?
What copy replaces the original headlines?

You're not just changing assets — you're taking the pattern (scroll-triggered image sequence, parallax shadow, cocktail-glass reveal) and applying it to whatever story you're telling. That's the actual deliverable. The clone was just the training exercise.

And the second time you see a site like Moon, it's not magic anymore. You look at it and go "oh, that's an image sequence tied to scroll position with GSAP, I can rebuild that." You've now got a reusable pattern in your head.

FAQ

Why not just screenshot the site and have Claude Code rebuild it from images?

Screenshots capture what the site looks like, not how it works. Mouse-driven shadows, scroll-triggered animations, parallax layers — none of that is visible in a still image. You end up with something that sort of looks like the original but has no real interactivity. Grabbing the HTML, CSS, and JavaScript is how Claude Code learns the actual mechanics.

Is it legal to clone a website like this?

You can't republish someone else's site as your own, obviously. But looking at public HTML/CSS/JS and learning from it is how every web developer has always worked — View Source has been around since the '90s. Template a site, extract the patterns, swap in your own assets and content, and you're doing what every agency on Earth does.

Do I need Higgsfield, Nano Banana Pro, and Vo3.1 specifically?

No. Any image generator (Midjourney, Flux, DALL-E) and any image-to-video generator (Runway, Kling, Pika) will work. The workflow is what matters: generate start and end frames on a green screen, then animate between them with no camera movement.

What is GSAP and ScrollTrigger and do I need to learn them?

GSAP is the GreenSock Animation Platform — a JavaScript library for high-performance web animations. ScrollTrigger is its plugin for tying animations to scroll position. You don't need to master them before doing a clone. Claude Code will write the GSAP code for you; your job is to understand enough to iterate on it afterwards. The cloning process is itself how you learn.

Why is Claude Code's web_fetch bad for grabbing CSS and JavaScript?

web_fetch internally delegates to a smaller model that summarizes the page content instead of returning the full file. That's fine for article text but terrible for 1,200-line CSS files where every selector matters. A site teardown skill fixes this by instructing Claude Code to extract the full content, not a digest.

If you want to go deeper on cloning websites with Claude Code — including the site teardown skill — join the free Chase AI community for templates, prompts, and live breakdowns. And if you're serious about building with AI, check out the paid community, Chase AI+, for hands-on guidance on how to make money with AI.

How to Clone a $100K Website in 15 Minutes With Claude Code