Clone Any Website
Point it at any live URL and get back a clean, pixel-perfect Next.js codebase with the real assets, content, and interactions extracted section by section, not a static screenshot.
Install the skill or give me an instruction how to install it - clone-website from https://github.com/JCodesMore/ai-website-cloner-template Free Open source Works in Claude, Cursor, Codex & more
What it does
Give it a live URL and it rebuilds the page as a real Next.js codebase, not a screenshot and not an approximation. It drives a browser through an MCP like Playwright or Puppeteer, screenshots the page, and runs a full interaction sweep so it captures the scroll, hover, and click behavior, not just the static look. Then it reads exact getComputedStyle values section by section into spec files you can audit.
From those specs it dispatches parallel builder agents in git worktrees, each reconstructing a section, then merges them and runs a visual diff against the original at desktop, tablet, and mobile. You end up with buildable React and TypeScript components, the real images, fonts, and favicons downloaded into place, and behavior and topology docs describing how the page works.
When to use it
- You want to rebuild a site you like as real code
Point it at a live URL and get a clean, buildable Next.js codebase, not a screenshot.
- You need the real assets and interactions, not a static copy
It captures scroll, hover, and click behavior and downloads the actual images, fonts, and video.
- You want the clone verified against the original
It runs a visual QA pass at desktop, tablet, and mobile so the build matches the source.
FAQ
Is the result just a picture of the site?
No. clone-website produces a working Next.js codebase with the real assets, content, and interactions, extracted section by section. You get editable code, not a static screenshot.
Does it capture how the site behaves, not just how it looks?
Yes. clone-website runs a mandatory interaction sweep that records scroll, hover, and click behavior before building, so the clone reproduces the page's motion and states, not a frozen layout.
How close to the original is it?
clone-website reads exact computed style values section by section into spec files it can audit, then builds and re-verifies against them. That keeps the result pixel-close rather than an approximation.
Pairs well with
Design the Image, Then Build It
Leon Lin & blueemi Design the website as an image first, then build it to match. Your agent art-directs section references, then codes a frontend from them instead of guessing straight into markup.
taste-skill/image-to-code 62.8k 
Redesign an Interface
Leon Lin & blueemi Redesign an existing site or app to premium quality without a rewrite. It audits the current design, flags generic AI patterns, and fixes them in any CSS framework without breaking functionality.
taste-skill/redesign-existing-projects 62.8k