AI Website Cloner Template skill
The 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
- 39,071 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Downloads and reuses another site's assets, fonts and copy
- Can violate a site's terms of use if run without the owner's permission
Install
- Works in
Manual install
/clone-website https://example.com
The command also works in Cursor through the same .agents/skills folder.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Downloads and reuses another site's assets, fonts and copy
- Can violate a site's terms of use if run without the owner's permission
This is third-party code. Review the repository files before installing.
What it does
The clone-website skill breaks down a target site step by step: it takes screenshots, extracts fonts, colors and spacing, walks through interactive states and downloads assets. For each section it writes a separate specification file with exact computed CSS values, states and content, then hands those specs to parallel builder agents in separate git worktrees, each building its component with Next.js, shadcn/ui and Tailwind. Worktrees are then merged, the page is assembled, and a visual diff checks it against the original. The repository is a project template you can spin up as a standalone copy via GitHub template or clone by hand.
Who it is for. For developers who need to quickly recover the source of a site they already own, or study how someone else's layout is built.
Good fit when
- You need to migrate your own site from WordPress, Webflow or Squarespace into modern Next.js code
- The site is live but the source is lost or the developer is gone
- You need to study how specific animations and responsive behavior are built by working with the real code
Not a fit when
- The site is not yours and copying it would violate its terms of use or the law
- The goal is to pass off someone else's design, branding or copy as your own
Example request
/clone-website https://example.comLimitations
The README explicitly forbids using the template for phishing, passing off someone else's design as your own, or bypassing a site's anti-scraping terms. Only what is visible on the page is cloned by default: a real backend, database, authentication and SEO optimization are out of scope unless asked for.
How to disable. Remove the .agents/skills/clone-website folder from the project, or delete the whole project created from the template.
FAQ
Does the skill behave the same across agents?
The canonical skill lives at .agents/skills/clone-website, Codex, Cursor and OpenCode read it directly, and Claude Code uses a thin bridge at .claude/commands/clone-website.md for the same command.
Does it clone the site's backend?
No, by default only the visible layer is cloned: layout, styles, interactions and mock data, a real backend and authentication are out of scope.
Discussion
No questions or reviews yet.
Related
Skillsai-site-cloner turns Claude Code or Cursor into a pipeline that clones a site to Next.js with measured styles and pixel checks.
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
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
A skill rebuilds a UI from a site, screenshot or screen recording and scores the copy on layout, style, pixels and motion.
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
Comparison with similar tools
Cards that share the main search query, and how they differ.
README in short
The README describes the template as a way to hand an agent a URL and get a clean Next.js app back. It walks through a five-phase pipeline: reconnaissance, foundation (fonts, colors, assets), detailed per-component specs, parallel builds in git worktrees, and final assembly with a visual diff. The stack is Next.js 16, shadcn/ui, Tailwind CSS v4 and Lucide React. It separately lists forbidden uses: phishing, passing off someone else's design as your own, and bypassing a site's anti-scraping terms. MIT licensed.
README badge
Original SKILL.md
--- name: clone-website description: Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", or "pixel-perfect clone". The request must include one or more target URLs. --- # Clone Website You are about to reverse-engineer and rebuild the target URL or URLs in the user's request as pixel-perfect clones. When multiple URLs are provided, preserve every pathname as a distinct route and isolate each target's research, screenshots, components, and assets. Parallelize page work only after the shared foundation and output plan are fixed so concurrent builders cannot overwrite one another. This is not a two-phase process. You are a foreman walking the job site — as you inspect each section of the page, you write a detailed specification to a file, then hand that file to a specialist builder agent with everything they need. Extraction and construction happen in parallel, but extraction is meticulous and produces auditable artifacts. ## Scope Defaults Unless the user specifies otherwise: pixel-perfect fidelity, visual layout and styling, component structure and interactions, responsive design and mock data are in scope; real backend, authentication, real-time features, SEO optimization and accessibility audit are out of scope.