AI Website Cloner Template: Clone Websites with AI Coding Agents

Summary

The AI Website Cloner Template is an innovative open-source project that leverages AI coding agents to reverse-engineer any website into a clean, modern Next.js codebase. It enables users to clone entire websites with a single command, extracting design tokens, assets, and reconstructing sections in parallel. This tool is ideal for platform migration, recovering lost source code, or learning web development by deconstructing live sites.

Use at your own risk

OSRepos shares public repositories for knowledge and discovery only. Any installation, execution, configuration, or use of code from these repositories is the user's own responsibility. Always review the repository, source code, dependencies, licenses, and security implications before running or installing anything. OSRepos is not responsible for issues, damages, or losses resulting from third-party repositories.

Introduction

The ai-website-cloner-template by JCodesMore is an innovative open-source project designed to reverse-engineer any website into a clean, modern Next.js codebase using AI coding agents. This powerful tool allows developers to clone entire websites with a single command, streamlining the process of extracting design tokens, assets, and reconstructing web pages. It supports a variety of AI agents, with Claude Code (Opus 4.7) being highly recommended for optimal performance and results.

Installation

Getting started with the AI Website Cloner Template is straightforward. Follow these steps to set up the project and begin cloning websites:

Clone the repository:

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone

Install dependencies:
```
npm install
```
Start your AI agent: Claude Code is recommended.
```
claude --chrome
```

Run the skill: Point it at your target URL(s).

/clone-website <target-url1> [<target-url2> ...]

After the base clone is built, you can customize it as needed. If you are using a different agent, refer to the AGENTS.md file for specific instructions.

Examples

The core functionality revolves around the /clone-website command, which initiates a sophisticated multi-phase pipeline. This process includes:

Reconnaissance: Capturing screenshots, extracting design tokens, and performing interaction sweeps (scroll, click, hover, responsive behavior).
Foundation: Updating fonts, colors, global styles, and downloading all necessary assets.
Component Specs: Generating detailed specification files with exact computed CSS values, states, behaviors, and content.
Parallel Build: Dispatching builder agents to reconstruct each section or component in parallel.
Assembly & QA: Merging the reconstructed parts, wiring up the page, and running visual diffs against the original site to ensure accuracy.

You can see a practical demonstration of this process by watching the official demo video: .

Why Use AI Website Cloner Template?

This template offers significant advantages for various development scenarios:

Platform Migration: Rebuild existing sites from platforms like WordPress, Webflow, or Squarespace into a modern Next.js codebase.
Lost Source Code: Recover the code for a live site when the original repository is lost, the developer has left, or the tech stack is legacy, bringing it into a modern format.
Learning: Deconstruct and understand how production websites achieve specific layouts, animations, and responsive behaviors by working directly with the generated code.

Important Considerations: This project is not intended for phishing, impersonation, passing off someone's design as your own, or violating terms of service. Always ensure you have the right to reproduce or analyze the target website.