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

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

src/

app/

layout.tsx # Root layout — fonts, metadata, globals

page.tsx # Assembled clone page

components/

ui/ # shadcn/ui primitives (Button, Card, etc.)

icons.tsx # Extracted SVG icons from target site

lib/

utils.ts # cn() Tailwind merge utility

types/ # Shared TypeScript interfaces

hooks/ # Custom React hooks

public/

images/ # Downloaded images from target

videos/ # Downloaded videos from target

seo/ # Favicons, OG images

docs/

research/

tokens.json # Extracted design tokens

components/ # Per-section spec files (*.md)

design-references/

comparison.png # Visual diff output

scripts/

sync-agent-rules.sh # Regenerate agent instruction files from AGENTS.md

sync-skills.mjs # Regenerate /clone-website for all platforms

AGENTS.md # Single source of truth for agent instructions

CLAUDE.md # Claude Code config (imports AGENTS.md)

GEMINI.md # Gemini CLI config (imports AGENTS.md)

---

## Tech Stack

| Layer | Technology |
|-------|-----------|
| Framework | Next.js 16, App Router, React 19 |
| Styling | Tailwind CSS v4, oklch design tokens |
| Components | shadcn/ui (Radix primitives) |
| Icons | Lucide React → replaced by extracted SVGs |
| Language | TypeScript (strict mode) |

---

## Commands

npm run dev # Start dev server at localhost:3000

npm run build # Production build

npm run lint # ESLint check

---

## Real Code Examples

### Adding an extracted component

After the pipeline runs, components land in `src/components/`. Wire them into the page:

// src/app/page.tsx

import { HeroSection } from "@/components/hero-section";

import { FeaturesSection } from "@/components/features-section";

import { PricingSection } from "@/components/pricing-section";

import { FooterSection } from "@/components/footer-section";

export default function Page() {

return (

<main>

<HeroSection />

<FeaturesSection />

<PricingSection />

<FooterSection />

</main>

);

}

### Typical extracted component structure

// src/components/hero-section.tsx

import { Button } from "@/components/ui/button";

import { cn } from "@/lib/utils";

export function HeroSection() {

return (

<section

className={cn(

"relative flex min-h-[680px] flex-col items-center justify-center",

"bg-[oklch(0.12_0.02_264)] px-6 py-24 text-center"

)}

>

<h1 className="max-w-4xl text-5xl font-bold tracking-tight text-white md:text-7xl">

Your extracted headline here

</h1>

<p className="mt-6 max-w-2xl text-lg text-[oklch(0.72_0.05_264)]">

Extracted subheading copy from the target site.

</p>

<div className="mt-10 flex gap-4">

<Button size="lg" className="bg-[oklch(0.65_0.22_264)] hover:bg-[oklch(0.60_0.22_264)]">

Primary CTA

</Button>

<Button size="lg" variant="outline">

Secondary CTA

</Button>

</div>

<img

src="/images/hero-visual.webp"

alt="Hero visual"

className="mt-16 w-full max-w-5xl rounded-xl shadow-2xl"

/>

</section>

);

}

### Design tokens in globals.css (Tailwind v4)

/* src/app/globals.css */

@import "tailwindcss";

:root {

/* Extracted from target site via getComputedStyle() */

--color-primary: oklch(0.65 0.22 264);

--color-primary-hover: oklch(0.60 0.22 264);

--color-background: oklch(0.12 0.02 264);

--color-surface: oklch(0.16 0.02 264);

--color-text: oklch(0.97 0.01 264);

--color-text-muted: oklch(0.72 0.05 264);

--color-border: oklch(0.25 0.03 264);

--radius-sm: 0.375rem;

--radius-md: 0.5rem;

--radius-lg: 0.75rem;

--radius-xl: 1rem;

--font-sans: "Inter", system-ui, sans-serif;

--font-display: "Cal Sans", "Inter", sans-serif;

}

### Extracted SVG icons

// src/components/icons.tsx

// Auto-generated by the clone pipeline — do not edit manually

export function CheckIcon({ className }: { className?: string }) {

return (

<svg

className={className}

viewBox="0 0 24 24"

fill="none"

xmlns="http://www.w3.org/2000/svg"

>

<path

d="M20 6L9 17L4 12"

stroke="currentColor"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

/>

</svg>

);

}

### Using cn() for conditional classes

import { cn } from "@/lib/utils";

function NavLink({

href,

active,

children,

}: {

href: string;

active?: boolean;

children: React.ReactNode;

}) {

return (

<a

href={href}

className={cn(

"text-sm font-medium transition-colors",

active

? "text-white"

: "text-[oklch(0.72_0.05_264)] hover:text-white"

)}

>

{children}

</a>

);

}

---

## Component Spec Format

Each file in `docs/research/components/` follows this structure:

# Hero Section Spec

Dimensions

Typography

Colors

Assets

States

Responsive

Content

[exact copy extracted from target]

---

## Maintaining Multi-Platform Support

All agent instructions have a single source of truth. After editing, regenerate platform-specific files:

# After editing AGENTS.md

bash scripts/sync-agent-rules.sh

# After editing .claude/skills/clone-website/SKILL.md

node scripts/sync-skills.mjs

This regenerates configs for Claude Code, Gemini CLI, Cursor, Windsurf, Copilot, and others automatically.

---

## Supported AI Agents

| Agent | Notes |
|-------|-------|
| Claude Code | **Recommended** — Opus 4.6, use `claude --chrome` |
| Codex CLI | `codex` in project root |
| OpenCode | Reads `AGENTS.md` automatically |
| Gemini CLI | Reads `GEMINI.md` |
| Cursor | Reads `.cursor/rules/` |
| Windsurf | Reads `.windsurf/rules/` |
| GitHub Copilot | Reads `.github/copilot-instructions.md` |
| Cline, Roo Code, Continue, Aider, Amazon Q, Augment Code | All supported via `AGENTS.md` |

---

## Troubleshooting

### Clone produces wrong colors
- The pipeline uses `getComputedStyle()` — if the target site uses CSS variables with JavaScript-driven theming, run the agent with `--chrome` so it executes JS before extraction.
- Check `docs/research/tokens.json` to verify extracted values before the build phase.

### Images not loading
- All images download to `/public/images/`. If paths are wrong, check `docs/research/components/*.md` for the asset path the builder used.
- Re-run `npm run dev` — Next.js serves `/public` at root.

### Component doesn't match visually
- Open `docs/design-references/comparison.png` for the side-by-side diff.
- The spec file for that section is in `docs/research/components/`. Check computed values there and patch the component manually.
- For shadcn/ui primitive mismatches, check that you're on the correct variant: `variant="outline"` vs `variant="ghost"`.

### Parallel build conflict in worktrees
- Run `git worktree prune` to clean up stale worktrees after a failed run.
- Then re-run `/clone-website <url>` — the pipeline is idempotent.

### Font not rendering correctly
- Verify the font is listed in `src/app/layout.tsx` under `next/font/google` or as a local font in `/public/fonts/`.
- Check `globals.css` for `--font-sans` and `--font-display` token assignments.

### Build fails (TypeScript errors)

npm run lint # Find ESLint issues

npm run build # See full tsc errors

Common cause: extracted component uses an SVG prop (`stroke-width`) instead of React camelCase (`strokeWidth`). The builder should handle this, but fix manually if needed.

---

## Customization After Cloning

Once the base clone is assembled, extend it like any Next.js project:

# Add a shadcn/ui component

npx shadcn@latest add dialog

# Add a new route

mkdir src/app/pricing

touch src/app/pricing/page.tsx

# Swap a placeholder image

cp my-image.webp public/images/hero-visual.webp

Edit `src/app/page.tsx` to reorder, remove, or add sections. All components are standard React — no lock-in.