ai-site-cloner skill
ai-site-cloner turns Claude Code or Cursor into a pipeline that clones a site to Next.js with measured styles and pixel checks.
- 56 ★ on the repository
- Last commit
- MIT
Broad access
Why this level
- An agent downloads other people's pages and assets, and copying without permission breaches copyright.
- Playwright and Chromium run locally while parallel agents edit worktrees.
Install
- Works in
Manual install
npm installStep 2 of the README Quick Start, run inside a repository created from the template. Chromium installs on the first run or with `npm run setup`.
Access and checks
How we reviewBroad accessThe tool can change data, run commands or handle secrets.
- An agent downloads other people's pages and assets, and copying without permission breaches copyright.
- Playwright and Chromium run locally while parallel agents edit worktrees.
This is third-party code. Review the repository files before installing.
What it does
ai-site-cloner is a repository template with the skills `/clone-website` and `/restyle`. The command crawls a site by sitemap and navigation, extracts computed styles with a Playwright script, downloads assets and measures the layout at three screen widths. Section specs are generated from the extraction JSON and the agent fills in only the layout decisions. Parallel agents build in git worktrees. Quality control compares pages pixel by pixel and returns the sections that missed 95% at three viewports. Then `/restyle` recolors the clone to your brand from `BRAND.md`. Claude Code, Cursor, Copilot, Gemini CLI and eight more tools are supported.
Who it is for. Front-end developers and studios that must rebuild their own or a permitted site in Next.js with accuracy control.
Good fit when
- A client's old site must move to Next.js with no layout loss.
- A landing page must be rebuilt as a base and recolored for a new brand.
- An agent guesses spacing from a screenshot and you need measurements instead.
- Copy accuracy should be judged by a number, not by eye.
Not a fit when
- You have no rights to the cloned site or its design.
- The page is mostly drawn on a canvas or hidden behind a login.
- You only need a rough mock-up.
Example request
Clone my project's site with /clone-website and show which sections fell short of 95%.Limitations
Use the repository as a template: create your own from it and run `npm install`, and Chromium downloads on the first run. Starting with `claude --chrome` is recommended for interaction discovery. Copying someone else's site can breach copyright and terms of service, so clone your own project or a site with permission. Canvas art and dynamic states do not reproduce everywhere, so check the result by hand.
How to disable. Delete the repository created from the template and the Chromium download from the Playwright cache. The skills live in the project's `.claude/skills`, `.codex/skills` and `.github/skills`.
FAQ
How do I start cloning?
Create a repository from the template, run `npm install`, open `claude --chrome` and call `/clone-website https://example.com`.
How is this different from screenshot-to-code?
A script measures fonts, spacing, colors and states on the live page, and the agent invents none of it. The result is compared pixel by pixel.
What accuracy does the author claim?
On plausible.io the average match was 99.71% over nine sections and three viewports. That is the author's result for one site.
How do I change the clone's design?
Fill in `BRAND.md` and call `/restyle`: the clone gets your colors and fonts.
Which agents are supported?
Claude Code, Cursor, Copilot, Gemini CLI and eight more tools, each with its own rules folder in the repository.
Discussion
No questions or reviews yet.
Related
SkillsThe clone-website skill rebuilds a site from a URL as a clean Next.js app: screenshots, style extraction, parallel section builds and a visual diff
A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
A skill and the pwc CLI: one clone command with a URL makes the agent rebuild a page as a Vite and React project and measure it
A skill rebuilds a UI from a site, screenshot or screen recording and scores the copy on layout, style, pixels and motion.
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
README in short
Six phases run in order and resume from any point: crawl, recon, foundation, sections, assembly and QA. Compact extractions and 2–4 KB specs save tokens.