Ai Website Cloner Template

---
name: ai-website-cloner-template
description: Clone any website into a pixel-perfect Next.js replica using AI coding agents with one command
triggers:
  - clone this website
  - reverse engineer a website
  - scrape and rebuild a site
  - copy this website design
  - clone website with AI
  - rebuild this page as Next.js
  - extract design tokens from a site
  - run clone-website skill
---

# AI Website Cloner Template

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A multi-phase AI agent pipeline that reverse-engineers any website and rebuilds it as a pixel-perfect Next.js 16 clone — fonts, colors, assets, interactions, and responsive layout included. One command triggers reconnaissance, design extraction, parallel component building, and visual QA.

---

## Installation

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

Start your AI agent (Claude Code recommended):

claude --chrome

Quick Start

/clone-website https://example.com

That's it. The skill handles everything: screenshots, token extraction, asset downloads, component specs, parallel builds, assembly, and visual diff.

How the Pipeline Works

The /clone-website skill runs five sequential phases:

Phase 1 — Reconnaissance

• Full-page screenshots at multiple breakpoints (mobile, tablet, desktop)
• getComputedStyle() sweeps for every visible element
• Interaction sweep: scroll, hover, click, focus, responsive resize
• Extracts fonts, color palette, spacing scale, border radii, shadow tokens

Phase 2 — Foundation

• Updates globals.css with extracted oklch color tokens
• Installs Google Fonts or downloads font files to /public
• Downloads all images → /public/images/, videos → /public/videos/, favicons → /public/seo/
• Patches layout.tsx with correct metadata, og image, favicon

Phase 3 — Component Specs

• Writes one spec file per section to docs/research/components/
• Each spec contains exact computed CSS values, all interaction states, content copy, asset paths, and responsive breakpoints
• No guessing — builder agents receive inline ground truth

Phase 4 — Parallel Build

• Spawns one builder agent per section in isolated git worktrees
• Each builder reads its spec and produces a self-contained React component
• Builders run concurrently — large sites finish faster

Phase 5 — Assembly & QA

• Merges all worktrees back to main branch
• Wires components into src/app/page.tsx
• Runs visual diff screenshot against the original
• Outputs side-by-side comparison to docs/design-references/comparison.png

Project Structure