ai-website-cloner-template: a reusable template for reverse-engineering websites into Next.js codebases using AI coding agents

What it solves

This project provides a reusable template that allows users to reverse-engineer existing websites into clean, modern Next.js codebases. It is designed to help with platform migrations (e.g., moving from WordPress or Webflow to Next.js), recovering lost source code from a live site, or learning how production websites are structured and styled.

How it works

The template utilizes AI coding agents (such as Claude Code, Cursor, or Aider) to execute a multi-phase pipeline via a /clone-website command:

1. Reconnaissance: The agent takes screenshots and extracts design tokens, assets, and interaction behaviors.
2. Foundation: It updates global styles, fonts, and colors, and downloads necessary assets.
3. Component Specs: The agent writes detailed specifications for each component, including exact computed CSS values and behaviors.
4. Parallel Build: Multiple builder agents are dispatched to reconstruct individual sections or components in parallel.
5. Assembly & QA: The final pieces are merged and a visual diff is performed against the original site to ensure accuracy.

Who it’s for

Developers who want to migrate legacy sites to a modern stack, those who need to recover a website's frontend code, or developers looking to study production-level layouts and animations.

Highlights

• Modern Tech Stack: Built with Next.js 16, React 19, Tailwind CSS v4, and shadcn/ui.
• Agent Agnostic: Supports a wide range of AI coding agents including Claude Code, GitHub Copilot, Cursor, and Windsurf.
• Automated Pipeline: Automates the extraction of design tokens and the creation of component specifications to remove guesswork from the building process.
• Parallel Construction: Uses git worktrees to allow builder agents to work on different sections of the site simultaneously.