AI-First
Some websites are worth $100,000. Not because the code is complex, but because someone took the time to understand the animations, the scroll effects, the parallax, and assembled them with care. Claude Code can help you take those sites apart piece by piece and rebuild your own version. Here's how.
- 🔑 Clone an award-winning site in five steps with Claude Code to learn front-end design.
- 🎯 Full tear down: HTML via Ctrl+U, CSS and JavaScript retrieved through automatic web fetch.
- 💡 Frame-by-frame animations: generate a Veo video on a green screen, then extract every frame.
- ⚠️ The result gets you 90% of the way there; adjust through iterative screenshot comparison.
- 🚀 Awards, Nano Banana, and GSAP become your tools for crafting a distinctive visual identity.
This isn't plagiarism. It's learning by imitation, the most effective method there is for improving at front-end design.
Why copy a $100,000 website
Most AI-generated websites all look the same. Same structure, same templates, same boredom. If you want to create something that stands out, you first need to expose yourself to the best that exists.
That's where Awards comes in (awwwards.com). It's a platform where designers from around the world submit their most ambitious creations. You'll see scroll animations you didn't even know existed, stunning parallax effects, transitions that change your perception of what a website can do.
The goal isn't to steal. It's to understand how the pros assemble their creations, then layer your own identity on top.
Here are the 5 steps to turn any inspiration into your own site.
Step 1: Find your inspiration
Go to Awards and browse the recent nominations. Look for a site whose aesthetic you love and that you could imagine adapting to your own world. It doesn't need to be perfect, just something that makes you want to understand how it's built.
In the source video, the pick was Moon, a site for a cocktail bar in Rome with a masterful scroll animation: the moon shifts from full brightness to complete shadow based on the cursor position. Exactly the kind of detail you can't reproduce without taking it apart.
Step 2: The site tear down
This is the key step. For Claude Code to reproduce a site's effects, it needs three things: the HTML (structure), the CSS (style), and the JavaScript (interactions).
The HTML is directly accessible: Ctrl+U on any web page gives you the full source code. You copy it and paste it into Claude Code. Then, you take screenshots of the effects you want to reproduce.
For CSS and JavaScript, Claude Code can retrieve them itself via web fetch, from the files referenced at the bottom of the HTML. Using a dedicated site tear down skill is recommended to maximize extraction quality.
What Claude Code needs | How to get it |
|---|---|
Page HTML | Ctrl+U → copy/paste |
CSS and JavaScript | Claude Code retrieves them via web fetch |
Effect screenshots | Screen captures of key animations |
Site URL | Provide it directly in the prompt |
Step 3: Create the assets
Claude Code doesn't create images. You need to supply the visuals. And for complex animations like a moon that gradually shifts shadow, the technique is surprising.
You create two images: the moon at full brightness, the moon in total shadow. You generate a transition video between the two (with Google Veo or equivalent). You then ask Claude Code to extract every frame from the video. Each frame corresponds to a moon state based on the cursor position.
The golden rule for the video: green screen. No camera movement, no zoom, no drift. Stability is critical because each frame becomes a standalone image loaded by the browser.
For the start and end images, Nano Banana plus a simple prompt is enough: remove the text, set the background to green. That's it.
Step 4: The build phase
You feed everything back to Claude Code: the site tear down results, your assets, your screenshots. And you tell it to build your version.
What you get won't be a perfect clone, and that's expected. The original site was created by an entire studio. What you get is a 90% solution with the same mechanics: parallax, scroll animation, shadow effects. The structure is there.
For adjustments: compare your version and the original via screenshots, give both to Claude Code, and ask it to identify the differences and fix them. It's an iterative process.
Step 5: Make it yours
This is where the work gets interesting. You're not a cocktail bar in Rome. What do you want to put in place of the moon? What's your visual identity? How do you adapt this scroll mechanic to your product?
That's the real value of the exercise. After cloning a site with scroll animations, you understand how they work. You're no longer intimidated by this type of effect. You know you can create something similar for your own use.
Natural language is the new programming language. But to use it well, you first need to understand what you're asking for. Copying the pros is the most honest shortcut to that understanding.
Every cloned site is a lesson. GSAP, ScrollTrigger, frame-by-frame animations: these are tools you might not know today. After this exercise, you've at least heard of them in a concrete context. That's how you improve.