Website-to-Next.js Cloner

Clone site

by ericosiu · MIT license · ★ 3,615 on GitHub

description: Clone any website into a pixel-perfect Next.js replica.

---

## Preamble (runs on skill start)

```bash
# Version check (silent if up to date)
python3 telemetry/version_check.py 2>/dev/null || true

# Telemetry opt-in (first run only, then remembers your choice)
python3 telemetry/telemetry_init.py 2>/dev/null || true
```

> **Privacy:** This skill logs usage locally to `~/.ai-marketing-skills/analytics/`. Remote telemetry is opt-in only. No code, file paths, or repo content is ever collected. See `telemetry/README.md`.

---
name: clone-site
description: Clone any website into a pixel-perfect Next.js replica. Point it at a URL and it reverse-engineers the design, extracts assets, and rebuilds it section by section using parallel builder agents. Use when asked to clone, copy, replicate, rebuild, or reverse-engineer any website or landing page. Also use for "make it look like this site" or "build a page based on this URL".
---

Overview

name: clone-site description: Clone any website into a pixel-perfect Next.js replica. Point it at a URL and it reverse-engineers the design, extracts assets, and rebuilds it section by section using parallel builder agents. Use when asked to clone, copy, replicate, rebuild, or reverse-engineer any website or landing page. Also use for "make it look like this site" or "build a page based on this URL". ---

What you get

Pixel-perfect Next.js site in your project directory
All assets downloaded to public/
Component specs in docs/research/components/
Screenshots in docs/design-references/
Run with npm run dev to preview

Manual install (npx, ZIP)

Claude Codenpx skills add ericosiu/ai-marketing-skills --skill clone-site -g -a claude-code

Claude Code (degit)npx degit ericosiu/ai-marketing-skills/clone-site#main ~/.claude/skills/clone-site

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md2.5 KB

Read SKILL.md here

ericosiu/main1 file shown

SKILL.md2.5 KB

Browse every file on GitHub↗

SKILL.md

Show the full text73 lines

clone-site/SKILL.md73 lines · 2.5 KB

PreviewCode

Outline

RawView on GitHub

name: clone-site description: Clone any website into a pixel-perfect Next.js replica. Point it at a URL and it reverse-engineers the design, extracts assets, and rebuilds it section by section using parallel builder agents. Use when asked to clone, copy, replicate, rebuild, or reverse-engineer any website or landing page. Also use for "make it look like this site" or "build a page based on this URL".

Clone Site

Reverse-engineer and rebuild any website as a pixel-perfect Next.js clone.

Quick Start

User says: "Clone yourcompany.com" or "Make a landing page like this: [url]"

How It Works

Recon — Screenshots the target at desktop + mobile, extracts all design tokens (fonts, colors, spacing), downloads all assets
Foundation — Sets up Next.js with the target's exact fonts, colors, and global styles
Component Specs — Writes detailed specs for each section with exact CSS values from getComputedStyle()
Parallel Build — Dispatches builder agents in git worktrees, one per section
Assembly & QA — Merges everything, wires up the page, visual diff against original

Requirements

Chrome MCP must be enabled: claude --chrome
Node.js 20+
A Next.js + Tailwind v4 + shadcn/ui scaffold as the base project

Setup (first time only)

cd /path/to/your-clone-project
npm install

To Clone a Site

cd /path/to/your-clone-project

Edit TARGET.md with the URL and scope, then run the skill in Claude Code.

Or just tell any agent: "clone [url]" and they'll handle it.

Full Technical Reference

The complete cloning methodology (reconnaissance, extraction, parallel dispatch, QA) is in: references/FULL_METHODOLOGY.md

Only read this when actively executing a clone — it's ~500 lines of detailed instructions.

Output

Pixel-perfect Next.js site in your project directory
All assets downloaded to public/
Component specs in docs/research/components/
Screenshots in docs/design-references/
Run with npm run dev to preview

1	---
2
3	## Preamble (runs on skill start)
4
5	```bash
6	# Version check (silent if up to date)
7	python3 telemetry/version_check.py 2>/dev/null \|\| true
8
9	# Telemetry opt-in (first run only, then remembers your choice)
10	python3 telemetry/telemetry_init.py 2>/dev/null \|\| true
11	```
12
13	> Privacy: This skill logs usage locally to `~/.ai-marketing-skills/analytics/`. Remote telemetry is opt-in only. No code, file paths, or repo content is ever collected. See `telemetry/README.md`.
14
15	---
16	name: clone-site
17	description: Clone any website into a pixel-perfect Next.js replica. Point it at a URL and it reverse-engineers the design, extracts assets, and rebuilds it section by section using parallel builder agents. Use when asked to clone, copy, replicate, rebuild, or reverse-engineer any website or landing page. Also use for "make it look like this site" or "build a page based on this URL".
18	---
19
20	# Clone Site
21
22	Reverse-engineer and rebuild any website as a pixel-perfect Next.js clone.
23
24	## Quick Start
25
26	User says: "Clone yourcompany.com" or "Make a landing page like this: [url]"
27
28	## How It Works
29
30	1. Recon — Screenshots the target at desktop + mobile, extracts all design tokens (fonts, colors, spacing), downloads all assets
31	2. Foundation — Sets up Next.js with the target's exact fonts, colors, and global styles
32	3. Component Specs — Writes detailed specs for each section with exact CSS values from getComputedStyle()
33	4. Parallel Build — Dispatches builder agents in git worktrees, one per section
34	5. Assembly & QA — Merges everything, wires up the page, visual diff against original
35
36	## Requirements
37
38	- Chrome MCP must be enabled: `claude --chrome`
39	- Node.js 20+
40	- A Next.js + Tailwind v4 + shadcn/ui scaffold as the base project
41
42	## Setup (first time only)
43
44	```bash
45	cd /path/to/your-clone-project
46	npm install
47	```
48
49	## To Clone a Site
50
51	```bash
52	cd /path/to/your-clone-project
53	```
54
55	Edit `TARGET.md` with the URL and scope, then run the skill in Claude Code.
56
57	Or just tell any agent: "clone [url]" and they'll handle it.
58
59	## Full Technical Reference
60
61	The complete cloning methodology (reconnaissance, extraction, parallel dispatch, QA) is in:
62	`references/FULL_METHODOLOGY.md`
63
64	Only read this when actively executing a clone — it's ~500 lines of detailed instructions.
65
66	## Output
67
68	- Pixel-perfect Next.js site in your project directory
69	- All assets downloaded to `public/`
70	- Component specs in `docs/research/components/`
71	- Screenshots in `docs/design-references/`
72	- Run with `npm run dev` to preview
73