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 developers to reverse-engineer existing websites into clean, modern Next.js codebases. It is designed to help with platform migrations (e.g., from WordPress or Webflow to Next.js), recovering lost source code from a live site, or studying how professional production sites are built.

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 and interaction behaviors.
2. Foundation: It sets up global styles, fonts, and colors, and downloads necessary assets.
3. Component Specs: The agent writes detailed specifications for each component, including exact 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 visually compared against the original site to ensure accuracy.

Who it’s for

Developers who want to migrate websites to a modern stack (Next.js 16, Tailwind CSS v4, shadcn/ui) or those looking to deconstruct and learn from existing web designs.

Highlights

• Agent-Agnostic: Supports a wide range of AI coding agents including Claude Code, Cursor, Windsurf, and GitHub Copilot.
• Handoff-Free: Automates the extraction of design tokens, assets, and the creation of component specifications.
• Modern Tech Stack: Built with Next.js 16, React 19, TypeScript, and Tailwind CSS v4.
• Parallelized Construction: Uses git worktrees to allow multiple AI agents to build different sections of the site simultaneously.